@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;
}

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: 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 {
    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 {
    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 {
    background: rgba(17, 24, 39, 0.04);
}

.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;
}

.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
   ========================================================= */
.ps-ticket-progress {
    display: grid;
    /* Refonte de workflow (mai 2026) : nombre de jalons variable selon le TypeKey (5 à 7 étapes).
       repeat(auto-fit, ...) adapte la grille sans qu'on ait à connaître le décompte côté CSS. */
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.ps-ticket-progress__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

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

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

.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);
}

@media (max-width: 768px) {
    .ps-ticket-progress {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

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

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

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

/* 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);
}

.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 .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 {
        background: rgba(17, 24, 39, 0.05);
    }

/* ===================== 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.
   ============================================================================================= */

.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);
}