@import url("css/TicketTable.css");
@import url("css/accessibility.css");

/* =========================================================
   VARIABLES GLOBALES (Light)
   ========================================================= */
:root {
    --font-sans: "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --brand-primary: #4f46e5;
    --brand-primary-strong: #4338ca;
    --brand-primary-rgb: 79, 70, 229;
    --brand-secondary: #06b6d4;
    --brand-secondary-rgb: 6, 182, 212;
    --brand-surface: #eef1f7;
    --brand-surface-rgb: 238, 241, 247;
    --brand-text: #0f172a;
    --brand-text-rgb: 15, 23, 42;
    --brand-on-primary: #ffffff;
    --brand-on-primary-rgb: 255, 255, 255;
    --brand-accent: #2f73ef;
    --brand-accent-rgb: 47, 115, 239;
    --primary: var(--brand-primary);
    --primary-dark: var(--brand-primary-strong);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: var(--brand-secondary);
    /* Surfaces */
    --bg: var(--brand-surface); /* + contraste vs cartes */
    --card: #ffffff;
    /* Texte */
    --text: var(--brand-text); /* un peu plus profond */
    --muted: rgba(15, 23, 42, 0.70); /* était 0.62 — passe le seuil AA 4.5:1 */
    /* Bordures / séparateurs */
    --border: rgba(15, 23, 42, 0.20); /* était 0.12 — bordures visibles */
    --ps-border: rgba(0, 0, 0, 0.14); /* était 0.08 */
    /* Ombre */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.12);
    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius: 12px;
}

/* =========================================================
   BASE
   ========================================================= */
html, body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
}

/* Réserve en permanence la gouttière de l'ascenseur vertical : évite que le contenu se décale
   horizontalement quand une page passe de « sans scrollbar » à « avec scrollbar » (ex. ouverture
   d'une section repliable du paramétrage). */
html {
    scrollbar-gutter: stable;
}

/* Lignes de la liste des modèles de réponse (paramétrage) : on les repère par leur bloc d'actions
   (.ps-template-actions) et on fige le bloc Modifier/Supprimer en haut à droite. Sans cela, le
   flex-wrap hérité de .ps-setting-row renvoie les actions sous le contenu quand le message est long,
   d'où une position incohérente d'une ligne à l'autre. Règle globale + :has (et non une classe de
   ligne) pour rester purement CSS (compatible hot-reload) et indépendante du markup.
   Limitée au ≥ 768px : en deçà, .ps-setting-row passe en colonne (empilement) — comportement conservé. */
@media (min-width: 768px) {
    .ps-setting-row:has(> .ps-template-actions) {
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
}

body,
button,
input,
select,
textarea,
optgroup {
    font-family: var(--font-sans);
}

body {
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.012em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand,
.nav-link,
.btn,
.badge,
.dropdown-item,
legend {
    font-family: var(--font-display);
}

h1, h2, h3,
.h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

h4, h5, h6,
.h4, .h5, .h6,
legend {
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.16;
}

.navbar-brand,
.nav-link,
.btn,
.badge,
.dropdown-item {
    letter-spacing: -0.02em;
}

.btn,
.nav-link,
.dropdown-item {
    font-weight: 600;
}

.form-label,
label,
th,
strong,
b {
    font-weight: 600;
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono);
}

/* Skip link pour l'accessibilité */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: var(--brand-on-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    z-index: 9999;
}

    .skip-link:focus {
        top: 0;
    }

a, .btn-link {
    color: var(--primary);
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

    a:focus, .btn-link:focus {
        outline: none;
        border-radius: 3px;
        box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.25);
    }

h1:focus {
    outline: none;
}

/* Visibilité du focus partout */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.content {
    padding-top: 1.1rem;
}

/* Boutons */
.btn-primary {
    color: var(--brand-on-primary);
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 200ms ease;
}

    .btn-primary:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.30);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

.btn-secondary {
    border-radius: var(--radius-md);
    transition: all 200ms ease;
}

    .btn-secondary:hover {
        transform: translateY(-1px);
    }

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    border-color: rgba(var(--brand-primary-rgb), 0.60);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.35);
}

/* Ombre légère globale (contraste cartes) */
.card, .ps-card {
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: var(--radius-lg);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

    .card:hover,
    .ps-card:hover {
        box-shadow: var(--shadow-lg);
    }

/* =========================================================
   LAYOUT PRINCIPAL (app-shell)
   ========================================================= */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.app-body {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.app-header {
    width: 100%;
    height: 64px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.app-sidebar {
    width: 256px;
    background: var(--card);
    border-right: 1px solid var(--border);
    box-shadow: none;
    flex-shrink: 0;
}

.app-main, main {
    flex: 1;
    min-width: 0;
    background: var(--bg);
}

/* Reset : on écrase tout fond coloré résiduel sur sidebar */
.sidebar,
.app-sidebar,
.sidebar.bg-primary,
.sidebar.bg-dark,
.app-sidebar.bg-primary,
.app-sidebar.bg-dark {
    background: var(--card) !important;
    background-image: none !important;
}

/* =========================================================
   RESPONSIVE — Layout Blazor (div.page > aside.sidebar + main)
   NB : les règles .nav-scrollable et .navbar-toggler sont dans
   NavMenu.razor.css (CSS isolé Blazor, chargé après ce fichier).
   ========================================================= */

/* --- Desktop (≥ 641px) : sidebar fixe à gauche --- */
@media (min-width: 641px) {
    .page {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
    }

    .sidebar {
        width: 256px;
        flex-shrink: 0;
    }

    .page > aside.sidebar,
    .page > aside.app-sidebar,
    .page > aside.sidebar.app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 256px !important;
        min-width: 256px !important;
        max-width: 256px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--card) !important;
        border-right: 1px solid var(--border) !important;
        z-index: 40;
    }

    .page > aside.sidebar .nav-scrollable,
    .page > aside.app-sidebar .nav-scrollable,
    .page > aside.sidebar.app-sidebar .nav-scrollable {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: calc(100vh - var(--ps-brand-header-height, 104px)) !important;
        height: calc(100vh - var(--ps-brand-header-height, 104px)) !important;
        overflow-y: auto !important;
    }

    .page > main {
        flex: 1;
        min-width: 0;
        margin-left: 256px;
        width: calc(100% - 256px);
    }
}
/* --- Mobile (≤ 640px) : sidebar en haut, menu repliable --- */
@media (max-width: 640px) {
    .page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .sidebar,
    .app-sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        overflow: visible !important;
    }

    .page > main {
        width: 100%;
        flex: 1;
        min-width: 0;
        margin-left: 0 !important;
    }

    /* Paddings réduits */
    .content.px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .top-header {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Right panel : plus de sticky sur mobile */
    .ps-rightpanel--sticky {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }

        .ps-rightpanel:not(.ps-rightpanel--sticky) .ps-timeline-scroll,
        .ps-rightpanel--sticky .ps-timeline-scroll {
            max-height: none !important;
            overflow-y: visible !important;
        }

    /* Tableaux scrollables horizontalement */
    .ps-table,
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ps-content {
        padding: 1rem !important;
    }
}

/* =========================================================
   HEADER : boutons arrondis
   ========================================================= */
.top-header button,
.app-header button {
    border-radius: 999px;
}

/* =========================================================
   USER MENU (boutons header)
   ========================================================= */
.user-menu__btn,
.ps-user-icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease;
}

    .user-menu__btn:hover,
    .ps-user-icon-btn:hover {
        background: rgba(17, 24, 39, 0.06) !important;
    }

    .user-menu__btn:focus,
    .ps-user-icon-btn:focus {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.30) !important; /* était 0.15 */
    }

/* =========================================================
   SEARCH DROPDOWN
   ========================================================= */
.sd-root {
    position: relative;
    max-width: 980px;
}

.sd-inputwrap {
    position: relative;
}

.sd-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.sd-menu {
    position: absolute;
    z-index: 50;
    width: 100%;
    margin-top: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(17, 24, 39, 0.08);
    max-height: 260px;
    overflow: auto;
}

.sd-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
    transition: background 100ms ease;
}

    .sd-item:hover {
        background: rgba(17, 24, 39, 0.04);
    }

.sd-empty {
    padding: 10px 12px;
    color: var(--muted);
    font-size: 0.875rem;
}

/* =========================================================
   USER MENU DROPDOWN
   ========================================================= */
.user-menu {
    position: relative;
    display: inline-block;
}

.user-menu__icon {
    width: 20px;
    height: 20px;
    display: block;
}

.user-menu__dropdown {
    position: absolute;
    right: 0;
    margin-top: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.10);
    min-width: 190px;
    padding: 6px;
    z-index: 1000;
}

.user-menu__item {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(17, 24, 39, 0.85);
    font-size: 0.875rem;
    transition: background 100ms ease;
}

    .user-menu__item:hover {
        background: rgba(17, 24, 39, 0.05);
    }

.fade-in {
    animation: fadeIn 150ms ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   UTILITAIRES RESPONSIVE (complément Bootstrap)
   ========================================================= */
@media (max-width: 640px) {
    /* Conteneur d'actions (PageHeader) : pleine largeur sur mobile */
    .w-sm-auto {
        width: 100% !important;
    }

        /* Boutons dans les actions : s'étirent pour remplir la ligne */
        .w-sm-auto > .btn {
            flex: 1 1 auto;
            min-width: 0;
            text-align: center;
        }
}

@media (min-width: 641px) {
    .w-sm-auto {
        width: auto !important;
    }
}

.ps-app {
    min-height: 100vh;
    background: var(--bg);
}

.ps-topbar {
    height: 64px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.ps-sidebar {
    width: 256px;
    border-right: 1px solid var(--border);
    background: var(--card);
}

.ps-content {
    padding: 1.5rem 2rem;
}

.ps-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
}

.ps-muted {
    color: var(--muted);
}

.ps-kpi {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}

.ps-pill {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.ps-table thead th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* Timeline “v1” (si encore utilisée ailleurs) */
.ps-timeline {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .ps-timeline li {
        display: grid;
        grid-template-columns: 12px 1fr;
        gap: 0.75rem;
        padding: 0.5rem 0;
    }

.ps-timeline-dot {
    width: 10px;
    height: 10px;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.25);
}

/* =========================================================
   Right panel (tickets) — base + sticky (support)
   ========================================================= */
.ps-rightpanel {
    min-height: 0;
}

/* Support uniquement : panel contraint */
.ps-rightpanel--sticky {
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow: hidden;
}

/* =========================================================
   Timeline V2 — final (scroll + lisibilité + dots)
   ========================================================= */
.ps-timeline-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ps-timeline-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Client (non-sticky) : scroll via max-height */
.ps-rightpanel:not(.ps-rightpanel--sticky) .ps-timeline-scroll {
    overflow-y: auto;
    max-height: 60vh;
    padding-right: .25rem;
}

/* Support sticky : la timeline prend l'espace restant + scroll */
.ps-rightpanel--sticky .ps-timeline-card {
    flex: 1 1 auto;
    min-height: 0;
}

.ps-rightpanel--sticky .ps-timeline-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: none;
    padding-right: .25rem;
}

/* Support + Client + Interne : en single item, ne pas etirer artificiellement la timeline */
.ticket-detail-page--support .ps-rightpanel--sticky .ps-timeline-card--single,
.ticket-detail-page--client .ps-rightpanel--sticky .ps-timeline-card--single,
.ticket-detail-page--internal .ps-rightpanel--sticky .ps-timeline-card--single {
    flex: 0 0 auto;
}

.ticket-detail-page--support .ps-rightpanel--sticky .ps-timeline-card--single .ps-timeline-body,
.ticket-detail-page--support .ps-rightpanel--sticky .ps-timeline-card--single .ps-timeline-scroll,
.ticket-detail-page--client .ps-rightpanel--sticky .ps-timeline-card--single .ps-timeline-body,
.ticket-detail-page--client .ps-rightpanel--sticky .ps-timeline-card--single .ps-timeline-scroll,
.ticket-detail-page--internal .ps-rightpanel--sticky .ps-timeline-card--single .ps-timeline-body,
.ticket-detail-page--internal .ps-rightpanel--sticky .ps-timeline-card--single .ps-timeline-scroll {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.ps-timeline-v2 {
    position: relative;
}

    .ps-timeline-v2::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 0.25rem;
        bottom: 0.25rem;
        width: 2px;
        background: var(--border);
    }

.ps-timeline-item {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 0.85rem;
    padding: 0.6rem 0;
    align-items: center; /* dot au milieu */
}

.ps-timeline-dot--message {
    background: var(--primary);
}

.ps-timeline-dot--event {
    background: rgba(17, 24, 39, 0.45);
}

.ps-timeline-dot--internal {
    background: #f59e0b;
}

.ps-timeline-content {
    border: 1px solid var(--border);
    background: rgba(17, 24, 39, 0.02);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
}

.ps-timeline-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ps-timeline-bodytext {
    margin-top: 0.35rem;
    color: rgba(17, 24, 39, 0.82); /* était 0.72 — sous le seuil AA */
    font-size: 0.92rem;
}

.ps-timeline-email {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(17, 24, 39, 0.80); /* était 0.70 — sous le seuil AA */
}

/* =========================================================
   PS User dropdown
   ========================================================= */
.ps-user-menu {
    position: relative;
}

.ps-user-email {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 260px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
    padding: 0.25rem 0;
    z-index: 1050;
}

@media (max-width: 640px) {
    .ps-user-dropdown {
        right: 0;
        min-width: min(18rem, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
    }
}

.ps-user-dropdown__header {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--muted);
}

.ps-user-dropdown__item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(17, 24, 39, 0.85);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 100ms ease;
}

.ps-user-dropdown__item:hover,
.ps-user-dropdown__item:focus,
.ps-user-dropdown__item:focus-visible {
    background: rgba(17, 24, 39, 0.04);
    text-decoration: none;
}

.ps-user-dropdown__item-label {
    flex: 1;
}

.ps-user-dropdown__divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0;
}

.ps-user-dropdown__item--danger {
    color: #dc3545;
}

.ps-user-dropdown__subitems {
    padding: 0.2rem 0 0.35rem;
}

.ps-user-dropdown__item--subitem {
    padding-left: 2.4rem;
}

.ps-user-dropdown__item--active {
    font-weight: 600;
}

/* =========================================================
   DEV COMPANY SWITCHER
   ========================================================= */
.ps-dev-company-switcher {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1200;
}

/* Overlay affiché pendant la bascule de société preview (rechargement complet de l'app). */
.ps-company-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
}

.ps-company-loading__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.6rem 2.2rem;
    border-radius: 20px;
    background: var(--brand-surface, #fff);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.3);
    text-align: center;
}

.ps-company-loading__text {
    font-weight: 600;
    color: var(--text, #0f172a);
}

.ps-company-loading__target {
    font-size: 0.85rem;
    color: var(--muted, rgba(15, 23, 42, 0.6));
}

.ps-dev-company-switcher--embedded {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.9rem;
}

.ps-dev-company-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.4rem;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    color: var(--text);
    padding: 0.45rem 0.7rem;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.ps-dev-company-switcher--embedded .ps-dev-company-switcher__toggle {
    width: min(100%, 13.5rem);
    justify-content: center;
    align-self: center;
}

.ps-dev-company-switcher__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ps-dev-company-switcher__badge {
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    background: rgba(var(--brand-primary-rgb), 0.12);
    color: var(--primary);
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ps-dev-company-switcher__panel {
    margin-top: 0.55rem;
    width: min(18rem, calc(100vw - 2rem));
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.ps-dev-company-switcher--embedded .ps-dev-company-switcher__panel {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.65rem);
    transform: translateX(-50%);
    margin-top: 0;
    width: min(13.75rem, calc(100vw - 2rem));
}

.ps-dev-company-switcher__title {
    padding: 0.8rem 0.9rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ps-dev-company-switcher__item {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    color: var(--text);
    text-align: left;
    font-size: 0.9rem;
}

.ps-dev-company-switcher__item:hover,
.ps-dev-company-switcher__item--active {
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.1), rgba(var(--brand-secondary-rgb), 0.08));
}

html.dark .ps-dev-company-switcher__toggle {
    background: rgba(20, 26, 38, 0.88);
    border-color: rgba(var(--brand-primary-rgb), 0.24);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

html.dark .ps-dev-company-switcher__panel {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(20, 26, 38, 0.96);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.4);
}

html.dark .ps-dev-company-switcher__item {
    color: var(--text);
}

/* =========================================================
   FORMULAIRES / VALIDATION
   ========================================================= */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
    font-size: 0.8rem;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================================
   ERREUR BLAZOR
   ========================================================= */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 8px;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* Protection page Login */
.auth-page, .login-page {
    background: var(--bg) !important;
}

/* =========================================================
   Support cards (accordions / choix SAV)
   ========================================================= */
.support-card-wrapper {
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
}

.support-card {
    width: 100%;
}

.support-card-body {
    width: 100%;
}

.support-card-panel {
    padding: 1rem;
    border: 1px solid rgba(0,0,0,.08);
    border-top: none;
    border-radius: 0 0 0.75rem 0.75rem;
    background: #fff;
}

.support-card-wrapper.is-open .support-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Titres de section plus discrets */
.choice-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Forcer titre à gauche / chevron à droite */
.support-card-title-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.support-card-title-text {
    flex: 1 1 auto;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.support-card-chevron {
    flex: 0 0 auto;
    margin-left: 1rem;
    font-size: 1.1rem;
}

.choice-type-icon {
    margin-right: 0.6rem;
    font-size: 1.1rem;
    line-height: 1;
}

.choice-first-section {
    margin-top: 2.5rem;
}

/* =========================================================
   Thème sombre
   ========================================================= */
html.dark {
    /* Surfaces */
    --bg: #0b0d13;
    --card: #141a26;
    /* Texte */
    --text: #eef2ff;
    --muted: rgba(238, 242, 255, 0.60);
    /* Bordures */
    --border: rgba(255, 255, 255, 0.14);
}

    /* Surfaces principales explicites */
    html.dark .app-header,
    html.dark .top-header,
    html.dark .top-row,
    html.dark .sidebar,
    html.dark .app-sidebar,
    html.dark .ps-topbar,
    html.dark .ps-sidebar {
        background: var(--card) !important;
        border-color: var(--border) !important;
    }

    html.dark main,
    html.dark .app-main,
    html.dark .app-shell,
    html.dark .page {
        background: var(--bg);
    }

    /* Cartes / menus */
    html.dark .card,
    html.dark .ps-card,
    html.dark .sd-menu,
    html.dark .user-menu__dropdown,
    html.dark .ps-user-dropdown {
        background: var(--card);
        border-color: var(--border);
        color: var(--text);
    }

    /* ✅ Fix : headers Bootstrap qui restent clairs */
    html.dark .card-header.bg-white,
    html.dark .card-header.bg-light,
    html.dark .bg-white,
    html.dark .bg-light {
        background: var(--card) !important;
        color: var(--text) !important;
        border-color: var(--border) !important;
    }

    /* Ombres en dark (contraste) */
    html.dark .card,
    html.dark .ps-card {
        box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.45);
    }

    /* Tableaux */
    html.dark .table,
    html.dark .ps-table {
        color: var(--text);
        border-color: var(--border);
    }

        html.dark .table th,
        html.dark .table td {
            border-color: var(--border);
        }

    html.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: rgba(255,255,255,0.03);
        color: var(--text);
    }

    html.dark .table-hover > tbody > tr:hover > * {
        background-color: rgba(255,255,255,0.06);
    }

    /* Formulaires */
    html.dark .form-control,
    html.dark .form-select {
        background-color: rgba(255,255,255,0.06);
        border-color: var(--border);
        color: var(--text);
    }

        html.dark .form-control::placeholder {
            color: var(--muted);
        }

        html.dark .form-control:focus,
        html.dark .form-select:focus {
            background-color: rgba(255,255,255,0.08);
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.22);
            color: var(--text);
        }

    /* Boutons */
    html.dark .btn-primary {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--brand-on-primary);
    }

        html.dark .btn-primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }

    html.dark .btn-outline-secondary {
        color: var(--text);
        border-color: var(--border);
    }

        html.dark .btn-outline-secondary:hover {
            background: rgba(255,255,255,0.10);
            color: var(--text);
        }

    /* Navigation */
    html.dark .nav-item .nav-link {
        color: rgba(238,242,255,0.70) !important;
    }

    html.dark .nav-item a.active {
        background: rgba(var(--brand-primary-rgb), 0.18) !important;
        color: var(--primary) !important;
    }

    html.dark .nav-item .nav-link:hover {
        background: rgba(255,255,255,0.06) !important;
        color: var(--text) !important;
    }

    /* Alertes */
    html.dark .alert-warning {
        background: rgba(234,179,8,0.14);
        border-color: rgba(234,179,8,0.28);
        color: #fde68a;
    }

    html.dark .alert-info {
        background: rgba(14,165,233,0.14);
        border-color: rgba(14,165,233,0.28);
        color: #7dd3fc;
    }

    html.dark .alert-danger {
        background: rgba(239,68,68,0.14);
        border-color: rgba(239,68,68,0.28);
        color: #fca5a5;
    }

    /* Timeline V2 : ajustements dark */
    html.dark .ps-timeline-content {
        background: rgba(255, 255, 255, 0.05);
    }

    html.dark .ps-timeline-bodytext {
        color: rgba(238, 242, 255, 0.78);
    }

    html.dark .ps-timeline-email {
        color: rgba(238, 242, 255, 0.80);
    }

    /* Scrollbar (Webkit) */
    html.dark ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    html.dark ::-webkit-scrollbar-track {
        background: transparent;
    }

    html.dark ::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.18);
        border-radius: 999px;
    }

        html.dark ::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.28);
        }

/* =========================================================
   Bouton toggle thème
   ========================================================= */
.theme-toggle {
    color: var(--text);
    opacity: 0.70;
    transition: opacity 150ms ease, background 150ms ease;
}

    .theme-toggle:hover {
        opacity: 1;
    }

/* Transition douce au changement de thème */
.app-shell,
.app-shell *:not(svg):not(path):not(line):not(circle) {
    transition: background-color 200ms ease, border-color 200ms ease, color 150ms ease;
}

/* =========================================================
   DARK THEME — correctifs (persistance + composants bootstrap)
   Supporte html.dark (script early) ET html.dark (ThemeService)
   ========================================================= */
html.dark,
html.dark {
    /* rien : on garde tes variables déjà déclarées sur html.dark */
}

    /* 1) Couleurs dark — permettre que html.dark suffise */
    html.dark body {
        background: var(--bg);
        color: var(--text);
    }

    /* 2) Forcer les surfaces "bg-white" à respecter le thème dark
      (corrige headers de cartes + sections restées claires) */
    html.dark .bg-white,
    html.dark .bg-white {
        background: var(--card) !important;
    }

    /* 3) Sidebar brand (titre gauche) */
    html.dark .navbar-brand,
    html.dark .navbar-brand {
        color: var(--text) !important;
    }

    /* 4) Bouton profil (UserMenu) lisible en dark */
    html.dark .ps-user-icon-btn,
    html.dark .ps-user-icon-btn {
        border-color: var(--border) !important;
        color: var(--text) !important; /* icône bootstrap = currentColor */
        background: transparent !important;
    }

        html.dark .ps-user-icon-btn:hover,
        html.dark .ps-user-icon-btn:hover {
            background: rgba(255,255,255,0.06) !important;
        }

    /* Email dans le header (si présent) */
    html.dark .ps-user-email,
    html.dark .ps-user-email {
        color: rgba(236,238,242,0.80);
    }

    /* 5) Widgets dashboard / list-group bootstrap (ex: Tickets les plus anciens) */
    html.dark .list-group-item,
    html.dark .list-group-item {
        background: var(--card);
        color: var(--text);
        border-color: var(--border);
    }

    html.dark .list-group-item-action:hover,
    html.dark .list-group-item-action:hover {
        background: rgba(255,255,255,0.06);
        color: var(--text);
    }

    /* 6) Formulaires (création ticket) : surfaces + addons bootstrap */
    html.dark .card,
    html.dark .card {
        background: var(--card);
        border-color: var(--border);
        color: var(--text);
    }

    html.dark .card-header,
    html.dark .card-header {
        border-bottom-color: var(--border);
    }

    html.dark .form-control,
    html.dark .form-select,
    html.dark .form-control,
    html.dark .form-select {
        background-color: rgba(255,255,255,0.05);
        border-color: var(--border);
        color: var(--text);
    }

    html.dark .form-floating > label,
    html.dark .form-floating > label {
        color: rgba(236,238,242,0.60);
    }

    html.dark .input-group-text,
    html.dark .input-group-text {
        background: rgba(255,255,255,0.05);
        border-color: var(--border);
        color: rgba(236,238,242,0.70);
    }

    /* 7) Timeline dots: éviter la disparition des "events" en dark */
    html.dark .ps-timeline-dot,
    html.dark .ps-timeline-dot {
        box-shadow: 0 0 0 1px var(--border);
        border-color: var(--card);
    }

    /* event (gris) => gris clair en dark */
    html.dark .ps-timeline-dot--event,
    html.dark .ps-timeline-dot--event {
        background: rgba(236,238,242,0.40);
    }

    /* internal => orange OK mais un peu plus lumineux en dark */
    html.dark .ps-timeline-dot--internal,
    html.dark .ps-timeline-dot--internal {
        background: #fbbf24; /* amber-400 */
    }

    /* =========================================================
   DARK — Overwrite des fonds forcés (forms/tickets)
   ========================================================= */

    html.dark .card,
    html.dark .ps-card,
    html.dark .card,
    html.dark .ps-card {
        background: var(--card) !important;
        color: var(--text) !important;
        border-color: var(--border) !important;
    }

    /* Si certains blocs utilisent encore bg-white / bg-light */
    html.dark .bg-white,
    html.dark .bg-light,
    html.dark .bg-white,
    html.dark .bg-light {
        background: var(--card) !important;
        color: var(--text) !important;
    }

    /* Formulaires : champs + surfaces autour */
    html.dark .form-control,
    html.dark .form-select,
    html.dark textarea,
    html.dark .form-control,
    html.dark .form-select,
    html.dark textarea {
        background-color: rgba(255,255,255,0.06) !important;
        border-color: var(--border) !important;
        color: var(--text) !important;
    }

    html.dark .form-floating > label,
    html.dark .form-floating > label {
        color: rgba(238, 242, 255, 0.62) !important;
    }

    /* Input-group (icônes / préfixes) */
    html.dark .input-group-text,
    html.dark .input-group-text {
        background: rgba(255,255,255,0.06) !important;
        border-color: var(--border) !important;
        color: rgba(238, 242, 255, 0.72) !important;
    }

    /* Un cas fréquent : panels custom en blanc (support-card-panel) */
    html.dark .support-card-panel,
    html.dark .support-card-panel {
        background: var(--card) !important;
        border-color: var(--border) !important;
        color: var(--text) !important;
    }

    /* Form helpers / legends / muted text */
    html.dark .text-muted,
    html.dark .text-secondary,
    html.dark .text-body-secondary,
    html.dark .form-text,
    html.dark small,
    html.dark legend,
    html.dark label,
    html.dark .text-muted,
    html.dark .text-secondary,
    html.dark .text-body-secondary,
    html.dark .form-text,
    html.dark small,
    html.dark legend,
    html.dark label {
        color: var(--muted) !important;
    }

    /* Si certains helpers sont en <p> avec couleur inline bootstrap */
    html.dark .form-label,
    html.dark .form-label {
        color: rgba(238, 242, 255, 0.78) !important;
    }

    /* User menu dropdown: dark fixes */
    html.dark .user-menu__dropdown,
    html.dark .user-menu__dropdown {
        background: var(--card) !important;
        border-color: var(--border) !important;
    }

    html.dark .user-menu__item,
    html.dark .user-menu__item {
        color: rgba(238, 242, 255, 0.85) !important;
    }

        html.dark .user-menu__item:hover,
        html.dark .user-menu__item:hover {
            background: rgba(255,255,255,0.06) !important;
        }

    html.dark .user-menu__dropdown .ps-muted,
    html.dark .user-menu__dropdown .ps-muted {
        color: var(--muted) !important;
    }

    /* ===== Login : boutons qui restent “clairs” ===== */
    html.dark .btn-light {
        background: rgba(255,255,255,0.10) !important;
        border-color: rgba(255,255,255,0.18) !important;
        color: var(--text) !important;
    }

    html.dark .btn-outline-dark {
        color: var(--text) !important;
        border-color: rgba(255,255,255,0.22) !important;
    }

        html.dark .btn-outline-dark:hover {
            background: rgba(255,255,255,0.10) !important;
        }

    /* Login: boutons qui restent clairs en dark */
    html.dark .login-page .btn,
    html.dark .auth-page .btn,
    html.dark .login-page .btn,
    html.dark .auth-page .btn {
        color: var(--text);
    }

    html.dark .login-page .btn-light,
    html.dark .auth-page .btn-light,
    html.dark .login-page .btn-light,
    html.dark .auth-page .btn-light {
        background: rgba(255,255,255,0.10) !important;
        border-color: rgba(255,255,255,0.18) !important;
        color: var(--text) !important;
    }

    html.dark .login-page .btn-outline-dark,
    html.dark .auth-page .btn-outline-dark,
    html.dark .login-page .btn-outline-dark,
    html.dark .auth-page .btn-outline-dark {
        border-color: rgba(255,255,255,0.22) !important;
        color: var(--text) !important;
    }

        html.dark .login-page .btn-outline-dark:hover,
        html.dark .auth-page .btn-outline-dark:hover,
        html.dark .login-page .btn-outline-dark:hover,
        html.dark .auth-page .btn-outline-dark:hover {
            background: rgba(255,255,255,0.10) !important;
        }

/* Desktop uniquement */
@media (min-width: 641px) {
    .nav-scrollable {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
    }

        .nav-scrollable > nav {
            flex: 1 1 auto;
            overflow-y: auto;
            min-height: 0;
        }
}

/* Mobile */
@media (max-width: 640px) {
    .nav-scrollable {
        height: auto !important;
    }

        .nav-scrollable > nav {
            overflow-y: visible;
        }
}

    /* Le menu peut scroller, mais pas le bloc du bas */
    .nav-scrollable > nav {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0; /* important pour que le scroll marche en flex */
    }

/* Le bloc du bas reste en bas */
.ps-sidebar-bottom {
    flex: 0 0 auto;
    padding-bottom: 10px;
}

.ps-signature {
    font-size: 0.72rem; /* ajuste: 0.70–0.78 */
    opacity: .75;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* =========================================================
   Ticket progress tracker
   ========================================================= */
/* Frise VERTICALE par défaut (robuste quel que soit le nombre de jalons et la largeur). La frise
   horizontale n'est activée que lorsque la carte conteneur est assez large pour aligner les 7
   jalons sur une seule ligne (cf. @container plus bas). Avant, repeat(auto-fit, …) provoquait un
   retour à la ligne « en escalier » dès que les jalons ne tenaient plus sur une ligne — illisible
   sur écrans moyens ET dans la colonne étroite du layout 2 colonnes (bug beta-testeurs). */
.ps-ticket-progress {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-top: 0.25rem;
}

.ps-ticket-progress__step {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.75rem;
    align-items: start;
    min-width: 0;
}

.ps-ticket-progress__line {
    position: absolute;
    left: 17px;
    top: 36px;
    width: 2px;
    height: calc(100% + 0.9rem);
    background: var(--border);
    z-index: 0;
}

.ps-ticket-progress__step:last-child .ps-ticket-progress__line {
    display: none;
}

/* Frise HORIZONTALE : seulement si la carte fait au moins ~880px (7 jalons × 115px + gouttières).
   En dessous, on conserve la frise verticale ci-dessus. */
@container ps-progress (min-width: 880px) {
    .ps-ticket-progress {
        grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
        gap: 0.75rem;
    }

    .ps-ticket-progress__step {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }

    .ps-ticket-progress__line {
        top: 18px;
        left: calc(50% + 18px);
        width: calc(100% - 36px);
        height: 2px;
    }
}

.ps-ticket-progress__node {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.ps-ticket-progress__content {
    min-width: 0;
}

.ps-ticket-progress__label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.ps-ticket-progress__hint {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.2;
}

.ps-ticket-progress__step.is-done .ps-ticket-progress__node {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--brand-on-primary);
}

.ps-ticket-progress__step.is-done .ps-ticket-progress__line {
    background: var(--primary);
}

.ps-ticket-progress__step.is-current .ps-ticket-progress__node {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.12);
}

.ps-ticket-progress__step.is-current .ps-ticket-progress__label {
    color: var(--primary);
}

.ps-ticket-progress__step.is-upcoming .ps-ticket-progress__label {
    color: var(--text);
}

/* --------------------------------------------------------------------------------------------
   Branches du workflow (refonte mai 2026) : statuts hors chemin principal — Attente client,
   Refusé. Affichés sous forme de chips à côté de la barre de progression, mis en évidence
   quand ils sont actifs (le ticket est actuellement dans une branche).
-------------------------------------------------------------------------------------------- */
.ps-ticket-branches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-top: -0.25rem;
}

.ps-ticket-branches__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.ps-ticket-branch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.65rem;
    border: 1px dashed var(--border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--muted);
    background: transparent;
    /* Position relative pour ancrer le tooltip absolu enfant (.ps-ticket-tooltip). */
    position: relative;
}

/* --------------------------------------------------------------------------------------------
   Tooltip riche pour les jalons et branches du tracker de progression — remplace le tooltip
   natif HTML (attribut title) qui était rendu en noir système, peu lisible et incohérent avec
   le reste de l'app. Même apparence que .ps-context-help__panel (carte arrondie, ombre douce,
   fond blanc) pour une UX unifiée. Affiché au :hover ou :focus-within du parent — pas de JS.
-------------------------------------------------------------------------------------------- */
.ps-ticket-tooltip {
    position: absolute;
    bottom: calc(100% + 0.45rem);
    z-index: 40;
    width: max-content;
    max-width: min(20rem, 80vw);
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--text);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 140ms ease, transform 140ms ease;
    /* Reset typo : le tooltip est rendu sous .ps-ticket-progress__step ou .ps-ticket-branch
       qui n'imposent rien d'agressif, mais on reset par sécurité pour rester aligné avec
       .ps-context-help__panel. */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    text-align: left;
    line-height: 1.45;
}

/* Trois positions horizontales : start (gauche pour le 1er jalon), end (droite pour le dernier),
   center (par défaut pour les intermédiaires). Évite que le tooltip déborde du viewport sans
   nécessiter de JS de placement. */
.ps-ticket-tooltip--start {
    left: 0;
}

.ps-ticket-tooltip--end {
    right: 0;
}

.ps-ticket-tooltip--center {
    left: 50%;
    transform: translate(-50%, 2px);
}

.ps-ticket-progress__step:hover .ps-ticket-tooltip,
.ps-ticket-progress__step:focus-within .ps-ticket-tooltip,
.ps-ticket-branch:hover .ps-ticket-tooltip,
.ps-ticket-branch:focus-within .ps-ticket-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Variante center : annule juste le translateY supplémentaire en état hover. */
.ps-ticket-progress__step:hover .ps-ticket-tooltip--center,
.ps-ticket-progress__step:focus-within .ps-ticket-tooltip--center,
.ps-ticket-branch:hover .ps-ticket-tooltip--center,
.ps-ticket-branch:focus-within .ps-ticket-tooltip--center {
    transform: translate(-50%, 0);
}

.ps-ticket-tooltip__title {
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

.ps-ticket-tooltip__body {
    font-size: 0.82rem;
    color: var(--muted);
}

.ps-ticket-tooltip__meta {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 0.76rem;
    color: var(--muted);
}

.ps-ticket-tooltip__meta strong {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 640px) {
    .ps-ticket-tooltip {
        max-width: min(16rem, 88vw);
        padding: 0.65rem 0.75rem;
    }
}

html.dark .ps-ticket-tooltip {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(11, 13, 19, 0.96);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

html.dark .ps-ticket-tooltip__title {
    color: #f8fafc;
}

html.dark .ps-ticket-tooltip__body,
html.dark .ps-ticket-tooltip__meta {
    color: rgba(236, 238, 242, 0.78);
}

html.dark .ps-ticket-tooltip__meta strong {
    color: #f8fafc;
}

html.dark .ps-ticket-tooltip__meta {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.ps-ticket-branch--active {
    border-style: solid;
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--brand-primary-rgb), 0.08);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.10);
}

/* La frise verticale ≤768px est désormais le comportement par défaut (cf. base ci-dessus) ;
   l'ancien bloc @media a été retiré pour éviter la duplication. */

/* Dark mode */
html.dark .ps-ticket-progress__node {
    background: var(--card);
    border-color: var(--border);
    color: var(--muted);
}

html.dark .ps-ticket-progress__step.is-done .ps-ticket-progress__node {
    color: var(--brand-on-primary);
}

html.dark .ps-ticket-progress__step.is-current .ps-ticket-progress__node {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.18);
}

/* =========================================================
   Harmonisation UI 2026-03-27
   ========================================================= */
html, body {
    background:
        radial-gradient(circle at top, rgba(var(--brand-primary-rgb), 0.07), transparent 28%),
        radial-gradient(circle at right 20%, rgba(var(--brand-secondary-rgb), 0.06), transparent 22%),
        var(--bg);
}

.card,
.ps-card {
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.btn {
    border-radius: 14px;
}

.btn:disabled,
.btn.disabled,
button:disabled {
    cursor: not-allowed !important;
    opacity: 0.55;
    filter: saturate(0.72);
    box-shadow: none !important;
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-danger {
    background: rgba(255, 255, 255, 0.84);
}

.form-control,
.form-select,
.input-group-text {
    min-height: 3rem;
    border-color: rgba(15, 23, 42, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
    border-radius: 16px;
}

.form-control,
.form-select,
.form-control::placeholder {
    color: var(--text);
}

.form-text,
.validation-message {
    margin-top: 0.45rem;
}

.alert {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.list-group-item {
    border-color: rgba(15, 23, 42, 0.08);
}

.sd-root {
    position: relative;
    width: 100%;
    max-width: none;
}

.sd-inputwrap {
    position: relative;
}

.sd-inputwrap .sd-input {
    padding-right: 2.9rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.sd-root:not(.sd-root--disabled) .sd-inputwrap:hover .sd-input {
    border-color: rgba(var(--brand-primary-rgb), 0.24);
    box-shadow: 0 12px 26px rgba(var(--brand-primary-rgb), 0.08);
}

.sd-root:focus-within .sd-input {
    background: rgba(255, 255, 255, 0.98);
}

.sd-caret {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: rgba(15, 23, 42, 0.45);
    pointer-events: none;
    transition: transform 160ms ease, color 160ms ease;
}

.sd-root:focus-within .sd-caret {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary);
}

.sd-root--disabled .sd-caret {
    color: rgba(15, 23, 42, 0.28);
}

.sd-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.55rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 0.2rem;
    padding: 0.45rem;
    max-height: min(340px, 50vh);
    overflow-y: auto;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97));
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(14px);
}

.sd-menu::-webkit-scrollbar {
    width: 10px;
}

.sd-menu::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.16);
    background-clip: padding-box;
}

.sd-item {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 0.85rem 0.95rem;
    background: transparent;
    color: var(--text);
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.sd-item:hover {
    background: rgba(var(--brand-primary-rgb), 0.08);
    transform: translateY(-1px);
}

.sd-item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), 0.35);
}

.sd-item--selected {
    background:
        linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.14), rgba(var(--brand-secondary-rgb), 0.08));
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), 0.16);
}

.sd-item__content {
    min-width: 0;
    flex: 1 1 auto;
}

.sd-item__check {
    flex: 0 0 auto;
    margin-top: 0.05rem;
    font-size: 1rem;
    color: var(--primary);
}

.sd-empty {
    padding: 0.9rem 1rem;
    border-radius: 16px;
    color: var(--muted);
    text-align: center;
    background: rgba(15, 23, 42, 0.03);
}

/* Liste déroulante multi-sélection (MultiSelectDropdown) — réutilise le shell .sd-* ci-dessus. */
.msd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    cursor: pointer;
}

.msd-trigger__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msd-trigger__label--placeholder {
    color: var(--muted);
}

.msd-menu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.msd-filter {
    margin-bottom: 0.35rem;
}

.msd-clear {
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 0.82rem;
    padding: 0.15rem 0.25rem;
    cursor: pointer;
}

    .msd-clear:hover {
        text-decoration: underline;
    }

.msd-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 12px;
    cursor: pointer;
    margin: 0;
}

    .msd-item:hover {
        background: rgba(var(--brand-primary-rgb), 0.06);
    }

.msd-item__check {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.msd-item__label {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.upload-drop {
    border: 1px dashed rgba(var(--brand-primary-rgb), 0.22);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.upload-drop .upload-text {
    padding-right: 0.5rem;
}

.ps-request-page {
    display: grid;
    gap: 1.4rem;
}

.ps-request-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.9fr);
    gap: 1.2rem;
    padding: 1.55rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(var(--brand-primary-rgb), 0.14), transparent 32%),
        radial-gradient(circle at right 20%, rgba(var(--brand-secondary-rgb), 0.1), transparent 24%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
}

.ps-request-hero__content,
.ps-request-hero__meta {
    display: grid;
    gap: 0.95rem;
}

.ps-request-hero__meta {
    align-content: start;
}

.ps-request-hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.ps-request-hero__title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: var(--text);
}

.ps-request-hero__title i {
    width: 3rem;
    height: 3rem;
    margin-right: 0;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--primary);
    font-size: 1.3rem;
}

.ps-request-hero__text {
    margin: 0;
    max-width: 50rem;
    color: var(--muted);
    line-height: 1.65;
}

.ps-request-meta-card {
    display: grid;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.ps-request-meta-card__label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ps-request-meta-card__value {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
}

.ps-request-shell {
    padding: 1.35rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08);
}

.ps-request-shell .d-flex.gap-3 {
    flex-wrap: wrap;
}

.ps-request-shell .btn-link {
    align-self: center;
    color: var(--muted);
    text-decoration: none;
}

.ps-request-shell .btn-link:hover {
    color: var(--text);
}

@media (max-width: 900px) {
    .ps-request-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .ps-request-hero {
        padding: 1.1rem;
        border-radius: 24px;
    }

    .ps-request-shell {
        padding: 1rem;
        border-radius: 22px;
    }
}

html.dark .card,
html.dark .ps-card,
html.dark .form-control,
html.dark .form-select,
html.dark .input-group-text,
html.dark .sd-menu,
html.dark .ps-request-shell,
html.dark .ps-request-meta-card {
    background: rgba(20, 26, 38, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .sd-inputwrap .sd-input {
    background:
        linear-gradient(180deg, rgba(20, 26, 38, 0.98), rgba(11, 13, 19, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark .sd-root:not(.sd-root--disabled) .sd-inputwrap:hover .sd-input {
    border-color: rgba(123, 121, 255, 0.28);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

html.dark .sd-caret {
    color: rgba(255, 255, 255, 0.52);
}

html.dark .sd-item {
    color: var(--text);
}

html.dark .sd-item:hover {
    background: rgba(123, 121, 255, 0.14);
}

html.dark .sd-item--selected {
    background:
        linear-gradient(135deg, rgba(123, 121, 255, 0.22), rgba(34, 211, 238, 0.1));
    box-shadow: inset 0 0 0 1px rgba(123, 121, 255, 0.22);
}

html.dark .sd-empty {
    background: rgba(255, 255, 255, 0.04);
}

html.dark .msd-item {
    color: var(--text);
}

html.dark .msd-item:hover {
    background: rgba(123, 121, 255, 0.14);
}

html.dark .ps-request-hero {
    border-color: rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at top left, rgba(123, 121, 255, 0.2), transparent 32%),
        radial-gradient(circle at right 20%, rgba(34, 211, 238, 0.12), transparent 24%),
        linear-gradient(145deg, rgba(20, 26, 38, 0.98), rgba(11, 13, 19, 0.96));
}

html.dark .upload-drop {
    background: rgba(20, 26, 38, 0.9);
    border-color: rgba(123, 121, 255, 0.24);
}

/* =========================================================
   USER DROPDOWN — FIX COMPLET DARK MODE (2026-UI)
   ========================================================= */

/* Base améliorée (neutralise styles navigateur + cohérence) */
.ps-user-dropdown__item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(17, 24, 39, 0.85);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

    .ps-user-dropdown__item:hover,
    .ps-user-dropdown__item:focus,
    .ps-user-dropdown__item:focus-visible {
        background: rgba(17, 24, 39, 0.05);
        text-decoration: none;
    }

/* ===================== DARK MODE ===================== */

html.dark .ps-user-dropdown {
    background: var(--card) !important;
    border-color: var(--border) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

html.dark .ps-user-dropdown__header {
    color: var(--text);
    border-bottom-color: var(--border);
}

    html.dark .ps-user-dropdown__header .text-muted,
    html.dark .ps-user-dropdown__header .small {
        color: var(--muted) !important;
    }

html.dark .ps-user-dropdown__divider {
    background: var(--border);
}

/* Items */
html.dark .ps-user-dropdown__item {
    background: transparent !important;
    color: var(--text) !important;
}

    /* Hover */
    html.dark .ps-user-dropdown__item:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: var(--text) !important;
    }

    /* Focus (IMPORTANT pour ton bouton mode sombre) */
    html.dark .ps-user-dropdown__item:focus,
    html.dark .ps-user-dropdown__item:focus-visible {
        background: rgba(123, 121, 255, 0.12) !important;
        color: var(--text) !important;
        outline: none;
        box-shadow: inset 0 0 0 1px rgba(123, 121, 255, 0.45);
    }

    /* Active (clic) */
    html.dark .ps-user-dropdown__item:active {
        background: rgba(255, 255, 255, 0.09) !important;
    }

    /* Icônes */
    html.dark .ps-user-dropdown__item i {
        color: inherit !important;
        opacity: 0.9;
    }

/* Sous-menu (langues) */
html.dark .ps-user-dropdown__item--subitem {
    color: rgba(238, 242, 255, 0.88) !important;
}

/* Item actif (langue sélectionnée) */
html.dark .ps-user-dropdown__item--active {
    background: rgba(123, 121, 255, 0.14) !important;
    color: #c7c6ff !important;
    font-weight: 600;
}

/* Danger (logout) */
html.dark .ps-user-dropdown__item--danger {
    color: #ff7b88 !important;
}

    html.dark .ps-user-dropdown__item--danger:hover,
    html.dark .ps-user-dropdown__item--danger:focus,
    html.dark .ps-user-dropdown__item--danger:focus-visible {
        background: rgba(239, 68, 68, 0.12) !important;
        color: #ff9aa4 !important;
    }

.ps-user-dropdown__item--danger {
    color: #dc3545;
}

    .ps-user-dropdown__item--danger:hover,
    .ps-user-dropdown__item--danger:focus,
    .ps-user-dropdown__item--danger:focus-visible {
        background: rgba(220, 53, 69, 0.08);
        color: #dc3545;
    }

.ticket-command-card--compact {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ticket-command-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem 1rem;
}

.ticket-command-row__label {
    min-width: 0;
}

.ticket-command-row__label--with-help {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ticket-command-row__field {
    min-width: 0;
}

.ticket-command-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.ticket-command-card__value--inline {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.9rem;
    background: var(--bs-body-bg);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-command-card__apply-inline {
    white-space: nowrap;
}

.ticket-command-card__transitions--compact {
    padding-top: 0.15rem;
}

.ticket-command-card .form-select,
.ticket-command-card .btn {
    min-height: 42px;
    border-radius: 0.9rem;
}

@media (max-width: 991.98px) {
    .ticket-command-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .ticket-command-row__actions {
        justify-content: stretch;
    }

        .ticket-command-row__actions .btn {
            flex: 1 1 auto;
        }

    .ticket-command-card__value--inline {
        white-space: normal;
    }
}

.ticket-command-card--dense {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ticket-command-block {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ticket-command-block__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.ticket-command-block__label--with-help {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ticket-command-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ticket-command-inline__grow {
    flex: 1 1 auto;
    min-width: 0;
}

.ticket-command-inline__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 0 0 auto;
}

.ticket-command-card__value--dense {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.9rem;
    background: var(--bs-body-bg);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-command-card--dense .form-select,
.ticket-command-card--dense .btn {
    min-height: 44px;
    border-radius: 0.9rem;
}

.ticket-command-inline__actions .btn {
    white-space: nowrap;
}

.ticket-command-card__apply-inline {
    min-width: 148px;
}

.ticket-command-card__transitions--dense {
    margin-top: 0.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 1399.98px) {
    .ticket-command-inline {
        flex-wrap: wrap;
    }

    .ticket-command-inline__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 991.98px) {
    .ticket-command-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .ticket-command-inline__actions {
        width: 100%;
        justify-content: stretch;
        flex-wrap: wrap;
    }

        .ticket-command-inline__actions .btn {
            flex: 1 1 100%;
        }

    .ticket-command-card__value--dense {
        white-space: normal;
    }

    .ticket-command-card__apply-inline {
        min-width: 0;
    }
}

/* =========================================================
   MOBILE HARDENING (2026-04)
   ========================================================= */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

@media (max-width: 640.98px) {
    .page {
        flex-direction: column !important;
        min-height: 100dvh;
    }

    .sidebar,
    .app-sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .page > main {
        width: 100%;
        min-width: 0;
        margin-left: 0 !important;
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 100%;
        padding-inline: 0.8rem;
    }

    .ps-user-email {
        display: none !important;
    }

    .ps-user-dropdown {
        min-width: min(20rem, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
    }

    /* Reduce global card border-radius for mobile */
    .card,
    .ps-card {
        border-radius: 20px;
    }

    /* Ensure all buttons and inputs have comfortable touch targets */
    .btn {
        min-height: 2.75rem;
    }

    .form-control,
    .form-select {
        min-height: 2.85rem;
        font-size: 1rem; /* prevent iOS zoom */
    }

    /* Tighter content padding on mobile */
    .content.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Right panel: full width, no sticky on mobile */
    .ps-rightpanel--sticky {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }

    .ps-rightpanel:not(.ps-rightpanel--sticky) .ps-timeline-scroll,
    .ps-rightpanel--sticky .ps-timeline-scroll {
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* Ticket progress tracker: vertical layout on mobile */
    .ps-ticket-progress {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ps-ticket-progress__step {
        display: grid;
        grid-template-columns: 36px 1fr;
        gap: 0.65rem;
        align-items: start;
    }

    .ps-ticket-progress__line {
        left: 17px;
        top: 36px;
        width: 2px;
        height: calc(100% + 0.75rem);
    }

    /* Request hero: single column */
    .ps-request-hero {
        grid-template-columns: 1fr;
        padding: 1rem;
        border-radius: 22px;
    }

    .ps-request-shell {
        padding: 0.9rem;
        border-radius: 20px;
    }

    .ps-request-hero__title {
        font-size: clamp(1.35rem, 6vw, 1.8rem);
    }

    /* Timeline items: tighter on mobile */
    .ps-timeline-item {
        gap: 0.65rem;
    }

    .ps-timeline-content {
        padding: 0.75rem;
    }

    /* Upload drop zone: stack on mobile */
    .upload-drop {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem;
    }

    .upload-drop .upload-text {
        padding-right: 0;
    }

    /* Ticket command cards: full width on mobile */
    .ticket-command-row {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .ticket-command-row__actions {
        justify-content: stretch;
    }

    .ticket-command-row__actions .btn {
        flex: 1 1 auto;
    }

    .ticket-command-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .ticket-command-inline__actions {
        width: 100%;
    }

    .ticket-command-inline__actions .btn {
        flex: 1 1 100%;
    }

    .ticket-command-card__value--inline,
    .ticket-command-card__value--dense {
        white-space: normal;
    }

    .ticket-command-card__apply-inline {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .table,
    .ps-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table > :not(caption) > * > * {
        white-space: nowrap;
    }

    .ps-request-shell .d-flex.gap-3,
    .ps-request-shell .d-flex.gap-4 {
        flex-wrap: wrap;
    }

    .ps-request-shell .d-flex.gap-3 > .btn,
    .ps-request-shell .d-flex.gap-4 > .btn {
        flex: 1 1 100%;
    }

    .ps-request-shell .form-check-inline {
        margin-right: 0.85rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .card,
    .ps-card,
    .ps-request-shell {
        border-radius: 18px;
    }

    .ps-request-hero__title {
        font-size: clamp(1.25rem, 6vw, 1.7rem);
    }

    /* Even tighter spacing on very small screens */
    .content.px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* =============================================================================================
   Modale overlay générique — utilisée par RefusalReasonModal.razor et DecoteRateModal.razor.
   Déclarée en CSS global (pas scoped) parce que les modales sont des composants autonomes avec
   leur propre identifiant de scope b-xxxx ; un selector scoped depuis un parent ne traverse pas
   leur frontière, ce qui empêche `position: fixed` de fonctionner correctement.

   Pattern : <div class="ps-modal-backdrop"> + <div class="ps-modal"> côte à côte (siblings).
   Le backdrop couvre la viewport, la carte est centrée par translate. Aucune dépendance JS.
   ============================================================================================= */

/* Verrou de scroll : tant qu'une modale/overlay est ouverte, on bloque le défilement de la
   page de fond. Sinon, scroller dans la modale entraîne la page derrière (double ascenseur,
   cf. retours Dina). `scrollbar-gutter: stable` (déclaré sur html) évite tout décalage
   horizontal à l'ouverture/fermeture. `cp-open` est posée par commandPalette.js ; le `:has()`
   couvre les modales autonomes (RefusalReason, DecoteRate, etc.) sans interop côté C#. */
html.cp-open,
html:has(.ps-modal-backdrop),
html:has(.cp-backdrop) {
    overflow: hidden;
}

.ps-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1040;
    backdrop-filter: blur(2px);
}

.ps-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    background: var(--card, #ffffff);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ps-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.ps-modal__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.ps-modal__close {
    background: transparent;
    border: 0;
    padding: 0.35rem;
    color: var(--muted);
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ps-modal__close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text);
}

.ps-modal__body {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
}

.ps-modal__hint {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.85rem;
    line-height: 1.5;
}

.ps-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: rgba(15, 23, 42, 0.025);
}

@media (max-width: 640px) {
    .ps-modal {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 2rem);
        border-radius: 14px;
    }

    .ps-modal__header,
    .ps-modal__body,
    .ps-modal__footer {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

html.dark .ps-modal {
    background: rgba(11, 13, 19, 0.98);
}

html.dark .ps-modal__footer {
    background: rgba(255, 255, 255, 0.03);
}

/* Bouton "Ajouter des fichiers" in-panel = repli mobile (portails support ET client).
   Le slot header-end du CollapsiblePanel — où vit le bouton desktop — est masqué sous 641px
   (cf. CollapsiblePanel.razor.css). On masque donc ce repli en desktop pour ne pas afficher deux
   boutons. Règle volontairement GLOBALE et non scoped : le bouton est rendu dans le ChildContent
   d'un composant tiers, et la fiabilité du masquage prime sur l'isolation ici. */
@media (min-width: 641px) {
    .attachments-mobile-action {
        display: none !important;
    }
}