/* ============================================================
   Crudia — Pack CSS Pro (v2)
   Design system aligné outils SaaS (Zendesk / Intercom / Linear).
   Overrides Bootstrap 5 + tokens de design.
   ============================================================ */

:root {
    /* Palette structurelle */
    --pro-body-bg:            #F5F7F9;
    --pro-surface:            #FFFFFF;
    --pro-surface-alt:        #F8FAFB;
    --pro-surface-hover:      #F0F3F6;
    --pro-border:             #E4E9EE;
    --pro-border-strong:      #C9D1D8;
    --pro-border-focus:       #1B6E4C;

    /* Sidebar */
    --pro-sidebar-bg:         #0F1F2E;
    --pro-sidebar-border:     rgba(255, 255, 255, 0.06);
    --pro-sidebar-text:       #C6D2DC;

    /* Texte */
    --pro-text:               #1B2C36;
    --pro-text-muted:         #5C6870;
    --pro-text-strong:        #0D1F26;
    --pro-text-inverse:       #FFFFFF;

    /* Marque */
    --pro-primary:            #1B6E4C;
    --pro-primary-hover:      #145A3D;
    --pro-primary-active:     #0F4A32;
    --pro-primary-soft:       #E4F1E9;
    --pro-primary-accent:     #4FBF87;

    /* Sémantique */
    --pro-danger:             #C0392B;
    --pro-danger-soft:        #FCE9E7;
    --pro-warning:            #C7811A;
    --pro-warning-soft:       #FEF3E4;
    --pro-success:            #1B6E4C;
    --pro-success-soft:       #E4F1E9;
    --pro-info:               #1F6FB2;
    --pro-info-soft:          #E6F1FA;

    /* Rayon */
    --pro-radius-sm:          4px;
    --pro-radius:             6px;
    --pro-radius-lg:          8px;

    /* Ombres — très subtiles */
    --pro-shadow-xs:          0 1px 2px rgba(15, 31, 46, 0.04);
    --pro-shadow-sm:          0 1px 2px rgba(15, 31, 46, 0.06), 0 1px 3px rgba(15, 31, 46, 0.04);
    --pro-shadow-md:          0 2px 4px rgba(15, 31, 46, 0.06), 0 4px 12px rgba(15, 31, 46, 0.08);
    --pro-shadow-lg:          0 4px 8px rgba(15, 31, 46, 0.08), 0 12px 32px rgba(15, 31, 46, 0.12);

    /* Type */
    --pro-font:               "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Aliases Bootstrap — le rende cohérent */
    --bs-primary:             var(--pro-primary);
    --bs-primary-rgb:         27, 110, 76;
    --bs-body-color:          var(--pro-text);
    --bs-body-bg:             var(--pro-body-bg);
    --bs-border-color:        var(--pro-border);
    --bs-border-radius:       var(--pro-radius);
    --bs-border-radius-sm:    var(--pro-radius-sm);
    --bs-border-radius-lg:    var(--pro-radius-lg);
    --bs-heading-color:       var(--pro-text-strong);
}

/* ------------------------------------------------------------
   Base
------------------------------------------------------------ */
html, body {
    background: var(--pro-body-bg);
    color: var(--pro-text);
    font-family: var(--pro-font);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--pro-text-strong);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

h1, .h1 { font-size: 24px; }
h2, .h2 { font-size: 20px; }
h3, .h3 { font-size: 17px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pro-text-muted); font-weight: 600; }

.text-muted, .text-secondary { color: var(--pro-text-muted) !important; }
.text-uppercase.small.text-muted { letter-spacing: 0.06em; font-weight: 600; }

hr { border-color: var(--pro-border); opacity: 1; }

::selection { background: rgba(27, 110, 76, 0.18); color: var(--pro-text-strong); }

/* ------------------------------------------------------------
   Layout de secours (au cas où la CSS isolation lâche)
------------------------------------------------------------ */
.app-shell {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: var(--pro-body-bg);
}
.app-sidebar {
    width: 232px;
    background: var(--pro-sidebar-bg);
    color: var(--pro-sidebar-text);
    border-right: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 1030;
}
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--pro-body-bg);
}
.app-topbar {
    height: 52px;
    background: var(--pro-surface);
    border-bottom: 1px solid var(--pro-border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    flex-shrink: 0;
    z-index: 1020;
}
.app-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.sidebar-header {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px 20px;
}
.logo-circle {
    width: 28px;
    height: 28px;
    background: var(--pro-primary);
    color: #FFFFFF;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.logo-text {
    font-weight: 600;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: -0.015em;
}
.user-avatar {
    width: 28px;
    height: 28px;
    background: var(--pro-primary);
    color: #FFFFFF;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: -0.01em;
}
.btn-icon-round {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--pro-text-muted);
    transition: all 120ms ease;
}
.btn-icon-round:hover { background: var(--pro-surface-hover); color: var(--pro-text); }
.user-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 10px 4px 4px;
    transition: all 120ms ease;
}
.user-btn:hover { background: var(--pro-surface-hover); border-color: var(--pro-border); }
.user-name { font-size: 13px; font-weight: 500; color: var(--pro-text); line-height: 1; }

/* ------------------------------------------------------------
   Boutons (style Zendesk : flat, tight, focus visible)
------------------------------------------------------------ */
.btn {
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.35;
    padding: 7px 14px;
    border-radius: var(--pro-radius);
    border-width: 1px;
    border-style: solid;
    letter-spacing: -0.005em;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 60ms ease;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(27, 110, 76, 0.28);
}

.btn:active { transform: translateY(0.5px); }

.btn-sm {
    padding: 4px 10px;
    font-size: 12.5px;
    border-radius: var(--pro-radius-sm);
}

.btn-lg {
    padding: 10px 18px;
    font-size: 14.5px;
    border-radius: var(--pro-radius);
}

/* Primary — solide */
.btn-primary,
.btn-primary:visited {
    background: var(--pro-primary);
    border-color: var(--pro-primary);
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--pro-primary-hover);
    border-color: var(--pro-primary-hover);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 31, 46, 0.08);
}

.btn-primary:active,
.btn-primary:focus:active {
    background: var(--pro-primary-active) !important;
    border-color: var(--pro-primary-active) !important;
    color: #FFFFFF !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: #A5C4B3;
    border-color: #A5C4B3;
    color: #FFFFFF;
    opacity: 1;
}

/* Secondary — outlined neutre (le pattern Zendesk par défaut) */
.btn-secondary,
.btn-outline-secondary {
    background: var(--pro-surface);
    border-color: var(--pro-border-strong);
    color: var(--pro-text);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--pro-surface);
    border-color: #8DA0AF;
    color: var(--pro-text-strong);
    box-shadow: 0 1px 2px rgba(15, 31, 46, 0.06);
}

.btn-secondary:active,
.btn-outline-secondary:active {
    background: var(--pro-surface-hover) !important;
    border-color: #8DA0AF !important;
    color: var(--pro-text-strong) !important;
}

/* Outline primary */
.btn-outline-primary {
    background: var(--pro-surface);
    border-color: var(--pro-border-strong);
    color: var(--pro-primary);
}

.btn-outline-primary:hover {
    background: var(--pro-primary-soft);
    border-color: var(--pro-primary);
    color: var(--pro-primary-hover);
}

.btn-outline-primary:active,
.btn-outline-primary:focus:active {
    background: var(--pro-primary-soft) !important;
    border-color: var(--pro-primary) !important;
    color: var(--pro-primary-hover) !important;
}

/* Danger */
.btn-danger {
    background: var(--pro-danger);
    border-color: var(--pro-danger);
    color: #FFFFFF;
}

.btn-danger:hover { background: #A6321D; border-color: #A6321D; color: #FFFFFF; }

.btn-outline-danger {
    background: var(--pro-surface);
    border-color: var(--pro-border-strong);
    color: var(--pro-danger);
}
.btn-outline-danger:hover {
    background: var(--pro-danger-soft);
    border-color: var(--pro-danger);
    color: var(--pro-danger);
}

/* Success */
.btn-success {
    background: var(--pro-success);
    border-color: var(--pro-success);
    color: #FFFFFF;
}
.btn-success:hover { background: var(--pro-primary-hover); border-color: var(--pro-primary-hover); color: #FFFFFF; }

/* Light — pour toolbar icons */
.btn-light {
    background: var(--pro-surface);
    border-color: var(--pro-border);
    color: var(--pro-text);
}
.btn-light:hover { background: var(--pro-surface-hover); border-color: var(--pro-border-strong); color: var(--pro-text-strong); }

/* Ghost link */
.btn-link {
    color: var(--pro-primary);
    padding: 4px 6px;
    border-radius: var(--pro-radius-sm);
    text-decoration: none;
    font-weight: 500;
}
.btn-link:hover { background: var(--pro-primary-soft); color: var(--pro-primary-hover); text-decoration: none; }

/* Bouton "close" */
.btn-close {
    padding: 8px;
    border-radius: var(--pro-radius);
    opacity: 0.55;
}
.btn-close:hover { opacity: 1; background-color: var(--pro-surface-hover); }

/* Groupes */
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-top-left-radius: var(--pro-radius); border-bottom-left-radius: var(--pro-radius); }
.btn-group .btn:last-child { border-top-right-radius: var(--pro-radius); border-bottom-right-radius: var(--pro-radius); }

/* ------------------------------------------------------------
   Formulaires — inputs, selects, textareas
------------------------------------------------------------ */
.form-control,
.form-select {
    border: 1px solid var(--pro-border-strong);
    border-radius: var(--pro-radius);
    background: var(--pro-surface);
    padding: 7px 12px;
    font-size: 13.5px;
    color: var(--pro-text);
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-control::placeholder { color: #97A3AC; }

.form-control:focus,
.form-select:focus {
    border-color: var(--pro-primary);
    box-shadow: 0 0 0 3px rgba(27, 110, 76, 0.14);
    outline: 0;
}

.form-control:disabled,
.form-select:disabled {
    background: var(--pro-surface-alt);
    color: var(--pro-text-muted);
    cursor: not-allowed;
}

.form-control-sm,
.form-select-sm { font-size: 12.5px; padding: 5px 10px; border-radius: var(--pro-radius-sm); }

.form-control-lg,
.form-select-lg { font-size: 15px; padding: 10px 14px; }

.form-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pro-text);
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}

.form-text { font-size: 12px; color: var(--pro-text-muted); }

.input-group-text {
    background: var(--pro-surface-alt);
    border-color: var(--pro-border-strong);
    color: var(--pro-text-muted);
    font-size: 13px;
}

.form-check-input:checked {
    background-color: var(--pro-primary);
    border-color: var(--pro-primary);
}
.form-check-input:focus {
    border-color: var(--pro-primary);
    box-shadow: 0 0 0 3px rgba(27, 110, 76, 0.18);
}

/* ------------------------------------------------------------
   Cards
------------------------------------------------------------ */
.card {
    background: var(--pro-surface);
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-lg);
    box-shadow: none;
}

.card.shadow-sm { box-shadow: var(--pro-shadow-xs) !important; }
.card.shadow { box-shadow: var(--pro-shadow-sm) !important; }
.card.shadow-lg { box-shadow: var(--pro-shadow-md) !important; }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--pro-border);
    padding: 12px 16px;
    font-weight: 600;
    color: var(--pro-text-strong);
}

.card-body { padding: 16px; }

.card-footer {
    background: var(--pro-surface-alt);
    border-top: 1px solid var(--pro-border);
    padding: 10px 16px;
    color: var(--pro-text-muted);
    font-size: 12.5px;
}

/* ------------------------------------------------------------
   Tables — dense, très lisible
------------------------------------------------------------ */
.table {
    font-size: 13.5px;
    color: var(--pro-text);
    margin-bottom: 0;
}

.table > :not(caption) > * > * { padding: 12px 14px; }

.table thead th,
.table > thead > tr > th {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pro-text-muted) !important;
    font-weight: 600;
    background: var(--pro-surface-alt) !important;
    border-bottom: 1px solid var(--pro-border);
    vertical-align: middle;
    padding: 10px 14px;
}

.table tbody tr { border-color: var(--pro-border); }
.table tbody td { border-color: #F0F3F5; vertical-align: middle; }

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th { background: var(--pro-surface-alt); }

.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--pro-surface-alt); color: var(--pro-text); }

/* ------------------------------------------------------------
   Badges — small caps, flat
------------------------------------------------------------ */
.badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--pro-radius-sm);
    letter-spacing: 0.02em;
    line-height: 1.35;
}

.badge.bg-primary { background-color: var(--pro-primary) !important; }
.badge.bg-secondary { background-color: #6C7A85 !important; }
.badge.bg-success { background-color: var(--pro-success) !important; }
.badge.bg-danger { background-color: var(--pro-danger) !important; }
.badge.bg-warning { background-color: var(--pro-warning) !important; color: #FFFFFF !important; }
.badge.bg-info { background-color: var(--pro-info) !important; }

.badge.bg-primary-subtle { background-color: var(--pro-primary-soft) !important; }
.text-primary { color: var(--pro-primary) !important; }
.text-primary-emphasis, .badge.bg-primary-subtle.text-primary { color: var(--pro-primary-hover) !important; }
.bg-secondary-subtle { background-color: #EAEEF1 !important; }
.text-secondary-emphasis { color: var(--pro-text) !important; }
.bg-success-subtle { background-color: var(--pro-success-soft) !important; }
.text-success, .text-success-emphasis { color: var(--pro-success) !important; }
.bg-danger-subtle { background-color: var(--pro-danger-soft) !important; }
.text-danger, .text-danger-emphasis { color: var(--pro-danger) !important; }
.bg-warning-subtle { background-color: var(--pro-warning-soft) !important; }
.text-warning-emphasis { color: var(--pro-warning) !important; }
.bg-info-subtle { background-color: var(--pro-info-soft) !important; }
.text-info-emphasis { color: var(--pro-info) !important; }

/* ------------------------------------------------------------
   Alerts
------------------------------------------------------------ */
.alert {
    border: 1px solid transparent;
    border-radius: var(--pro-radius);
    padding: 10px 14px;
    font-size: 13px;
}

.alert-primary { background: var(--pro-primary-soft); border-color: rgba(27, 110, 76, 0.22); color: var(--pro-primary-hover); }
.alert-info    { background: var(--pro-info-soft);    border-color: rgba(31, 111, 178, 0.22); color: var(--pro-info); }
.alert-success { background: var(--pro-success-soft); border-color: rgba(27, 110, 76, 0.22); color: var(--pro-success); }
.alert-warning { background: var(--pro-warning-soft); border-color: rgba(199, 129, 26, 0.28); color: #8A5810; }
.alert-danger  { background: var(--pro-danger-soft);  border-color: rgba(192, 57, 43, 0.22); color: #8A2818; }
.alert-light   { background: var(--pro-surface-alt);  border-color: var(--pro-border);       color: var(--pro-text); }

/* ------------------------------------------------------------
   Nav pills, tabs
------------------------------------------------------------ */
.nav-tabs {
    border-bottom: 1px solid var(--pro-border);
}

.nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--pro-text-muted);
    font-size: 13.5px;
    font-weight: 500;
    padding: 10px 14px;
    margin-bottom: -1px;
}

.nav-tabs .nav-link:hover {
    color: var(--pro-text-strong);
    background: transparent;
    border-color: transparent transparent var(--pro-border-strong);
}

.nav-tabs .nav-link.active {
    color: var(--pro-primary);
    background: transparent;
    border-color: transparent transparent var(--pro-primary);
    font-weight: 600;
}

/* ------------------------------------------------------------
   Modals
------------------------------------------------------------ */
.modal-content {
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-lg);
    box-shadow: var(--pro-shadow-lg);
    background: var(--pro-surface);
}

.modal-header {
    border-bottom: 1px solid var(--pro-border);
    padding: 14px 20px;
}

.modal-title { font-weight: 600; color: var(--pro-text-strong); font-size: 15px; }

.modal-body { padding: 20px; color: var(--pro-text); }

.modal-footer {
    border-top: 1px solid var(--pro-border);
    padding: 12px 20px;
    background: var(--pro-surface-alt);
    border-radius: 0 0 var(--pro-radius-lg) var(--pro-radius-lg);
}

/* ------------------------------------------------------------
   Dropdowns
------------------------------------------------------------ */
.dropdown-menu {
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-lg);
    box-shadow: var(--pro-shadow-md);
    padding: 4px;
    font-size: 13.5px;
    background: var(--pro-surface);
}

.dropdown-item {
    padding: 6px 10px;
    border-radius: var(--pro-radius-sm);
    color: var(--pro-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.dropdown-item i { color: var(--pro-text-muted); font-size: 14px; }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--pro-surface-hover);
    color: var(--pro-text-strong);
}
.dropdown-item.text-danger:hover { background: var(--pro-danger-soft); color: var(--pro-danger); }
.dropdown-item.text-danger:hover i { color: var(--pro-danger); }
.dropdown-header {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--pro-text-muted);
    padding: 8px 10px 4px;
    font-weight: 600;
}
.dropdown-divider { border-color: var(--pro-border); margin: 4px 0; }

/* ------------------------------------------------------------
   Spinners, misc
------------------------------------------------------------ */
.spinner-border { border-width: 2px; }

/* Focus a11y global — visible sur tout élément interactif */
a:focus-visible,
[role="button"]:focus-visible,
button:focus-visible {
    outline: 2px solid var(--pro-primary);
    outline-offset: 2px;
    border-radius: var(--pro-radius-sm);
}

/* ------------------------------------------------------------
   Réutilisables Crudia
------------------------------------------------------------ */
.custom-scroll { scrollbar-width: thin; }
.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #CBD3DA; border-radius: 3px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }

.x-small { font-size: 11px !important; }
.xx-small { font-size: 10px !important; }

.hover-bg-light:hover { background: var(--pro-surface-hover); }
.hover-text-primary:hover { color: var(--pro-primary); }

.cursor-pointer { cursor: pointer; }


/* ================= DARK MODE CORRIG� ================= */

[data-theme="dark"] {
    /* Variables globales red�finies */
    --hd-bg: #0f172a; /* Fond Slate 900 */
    --hd-border: #334155; /* Bordures Slate 700 */
    --hd-text-muted: #94a3b8; /* Texte gris clair (Slate 400) */
    --hd-primary-soft: rgba(56, 189, 248, 0.15); /* Bleu clair tr�s transparent */
    /* Surcharge Bootstrap Colors globales */
    --bs-body-color: #f1f5f9; /* Texte quasi blanc */
    --bs-body-bg: #0f172a;
    --bs-border-color: #334155;
    /* Surcharge des couleurs de titres */
    --bs-heading-color: #f8fafc;
}

    /* 1. Body & Layout */
    [data-theme="dark"] body {
        background: #0f172a !important;
        color: #f1f5f9 !important;
    }

    /* 2. Forcer la couleur des textes "Muted" (Le gris Bootstrap est trop sombre) */
    [data-theme="dark"] .text-muted {
        color: #94a3b8 !important;
    }

    /* 3. Titres et textes sp�cifiques */
    [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3,
    [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6,
    [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
    [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
    [data-theme="dark"] .docs-section-title,
    [data-theme="dark"] .component-name,
    [data-theme="dark"] .fw-semibold,
    [data-theme="dark"] .fw-bold {
        color: #f8fafc !important; /* Blanc pur */
    }

    /* 4. Gestion des fonds blancs (Cartes, Sidebar, Inputs) */
    [data-theme="dark"] .bg-white,
    [data-theme="dark"] .card,
    [data-theme="dark"] .component-card,
    [data-theme="dark"] .docs-sidebar,
    [data-theme="dark"] .list-group-item,
    [data-theme="dark"] .hd-ticket-item:hover,
    [data-theme="dark"] .hd-comment-bubble {
        background-color: #1e293b !important; /* Slate 800 */
        color: #f1f5f9 !important;
        border-color: var(--hd-border) !important;
    }

    /* 5. Inputs & Formulaires */
    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select,
    [data-theme="dark"] .input-group-text,
    [data-theme="dark"] .hd-dropzone,
    [data-theme="dark"] .hd-editor-toolbar,
    [data-theme="dark"] .hd-editor-content {
        background-color: #0f172a !important; /* Plus sombre que la carte */
        border-color: #334155 !important;
        color: #f1f5f9 !important;
    }

        [data-theme="dark"] .form-control::placeholder {
            color: #64748b !important;
        }

    /* 6. Navigation & Sidebar */
    [data-theme="dark"] .nav-link {
        color: #cbd5e1 !important;
    }

        [data-theme="dark"] .nav-link:hover {
            background-color: rgba(255,255,255, 0.05);
            color: #fff !important;
        }

        [data-theme="dark"] .nav-link.active {
            background-color: rgba(56, 189, 248, 0.2) !important;
            color: #7dd3fc !important; /* Bleu clair n�on */
        }

    [data-theme="dark"] .docs-logo {
        color: #fff !important;
    }

    /* 7. Dropdowns (Menus d�roulants) */
    [data-theme="dark"] .dropdown-menu {
        background-color: #1e293b;
        border-color: #475569;
    }

    [data-theme="dark"] .dropdown-item {
        color: #e2e8f0;
    }

        [data-theme="dark"] .dropdown-item:hover {
            background-color: #334155;
            color: #fff;
        }

    /* 8. Fix sp�cifiques */
    [data-theme="dark"] .preview-wrapper {
        background: #0f172a;
        border-color: #334155;
    }

    [data-theme="dark"] .btn-white {
        background-color: #1e293b;
        border-color: #475569;
        color: #e2e8f0;
    }
    [data-theme="dark"] .btn-light { /* <--- Ajoutez cette ligne */
        background-color: #1e293b;
        border-color: #475569;
        color: #e2e8f0;
    }

    [data-theme="dark"] .border-bottom,
    [data-theme="dark"] .border-end,
    [data-theme="dark"] .border-top,
    [data-theme="dark"] .border {
        border-color: #334155 !important;
    }

    [data-theme="dark"] .ticket-status-open {
        background-color: rgba(14, 165, 233, 0.2);
        color: #7dd3fc;
    }

    [data-theme="dark"] .docs-topbar {
        background: #1e293b;
        border-bottom: 1px solid #334155;
    }

:root {
    --hd-primary: #1f73b7;
    --hd-primary-soft: #e3f2fd;
    --hd-bg: #f5f7fb;
    --hd-border: #e0e4f0;
    --hd-text-muted: #6c757d;
    --hd-status-open: #1f73b7;
    --hd-status-pending: #ffb020;
    --hd-status-resolved: #2e8540;
    --hd-prio-high: #d93025;
    --hd-prio-medium: #f9ab00;
    --hd-prio-low: #188038;
}

body {
    background: radial-gradient(circle at top left, #e3f2fd, #f5f7fb 40%, #eef2ff);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Layout global docs */
.docs-shell {
    min-height: 100vh;
}

.docs-sidebar {
    width: 260px;
    background-color: rgba(255, 255, 255, 0.96);
    border-right: 1px solid var(--hd-border);
    backdrop-filter: blur(6px);
}

.docs-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

.docs-topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(227,242,253,0.95));
}

.docs-logo {
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.docs-sidebar .nav-link {
    border-radius: 999px;
    font-size: 0.85rem;
    padding-inline: 0.9rem;
    margin-bottom: 0.15rem;
    color: #304152;
}

    .docs-sidebar .nav-link i {
        width: 1.3rem;
    }

    .docs-sidebar .nav-link.active {
        background-color: var(--hd-primary-soft);
        color: var(--hd-primary);
        font-weight: 600;
    }

.docs-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.docs-section-subtitle {
    font-size: 0.9rem;
    color: var(--hd-text-muted);
    margin-bottom: 1rem;
}

.docs-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 115, 183, 0.25);
    background-color: rgba(255, 255, 255, 0.8);
    color: #1f73b7;
}

.component-card {
    border-radius: 1.1rem;
    padding: 1rem;
    margin-bottom: 1.1rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.component-header {
    margin-bottom: 0.75rem;
}

.component-name {
    font-size: 0.98rem;
    font-weight: 600;
}

.component-category {
    font-size: 0.75rem;
    color: var(--hd-text-muted);
}

.component-description {
    font-size: 0.85rem;
    color: var(--hd-text-muted);
}

.preview-wrapper {
    border-radius: 0.9rem;
    padding: 0.75rem;
    background: radial-gradient(circle at top left, #f5f9ff, #ffffff);
    border: 1px dashed rgba(148, 163, 184, 0.7);
    margin-bottom: 0.4rem;
}

.preview-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}

.code-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}

.code-snippet {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.72rem;
    background-color: #0f172a;
    color: #e5e7eb;
    border-radius: 0.6rem;
    border: none;
    resize: vertical;
    min-height: 80px;
}

    .code-snippet:focus {
        box-shadow: 0 0 0 1px #3b82f6;
    }

/* Composants Helpdesk r�utilis�s */

.hd-ticket-section-title {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--hd-text-muted);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.ticket-status {
    font-size: 0.75rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ticket-status-open {
    background-color: rgba(31, 115, 183, 0.08);
    color: var(--hd-status-open);
}

.ticket-status-pending {
    background-color: rgba(255, 176, 32, 0.12);
    color: var(--hd-status-pending);
}

.ticket-status-resolved {
    background-color: rgba(46, 133, 64, 0.1);
    color: var(--hd-status-resolved);
}

.ticket-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
}

.ticket-priority {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
}

.ticket-priority-high {
    border-color: var(--hd-prio-high);
    color: var(--hd-prio-high);
    background-color: rgba(217, 48, 37, 0.05);
}

.ticket-priority-medium {
    border-color: var(--hd-prio-medium);
    color: var(--hd-prio-medium);
    background-color: rgba(249, 171, 0, 0.05);
}

.ticket-priority-low {
    border-color: var(--hd-prio-low);
    color: var(--hd-prio-low);
    background-color: rgba(24, 128, 56, 0.05);
}

.hd-ticket-item {
    border-radius: 0.75rem;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

    .hd-ticket-item:hover {
        background-color: #f8fafc;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }

    .hd-ticket-item.active {
        background-color: var(--hd-primary-soft);
        border: 1px solid var(--hd-primary);
    }

.hd-comment {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 0;
}

.hd-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: #dde5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #304152;
}

.hd-comment-bubble {
    background-color: #f8fafc;
    border-radius: 0.95rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #e2e8f0;
}

.hd-comment-bubble-internal {
    background-color: #fff7e6;
    border-color: #ffe1a3;
}

.hd-comment-meta {
    font-size: 0.75rem;
    color: var(--hd-text-muted);
    margin-bottom: 0.15rem;
}

.hd-comment-text {
    font-size: 0.85rem;
}

.hd-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0d6efd;
}

/* Docs small helpers */

.badge-soft {
    background-color: rgba(15, 23, 42, 0.05);
    border-radius: 999px;
    font-size: 0.7rem;
}

.docs-tag {
    font-size: 0.7rem;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    background-color: #e0f2fe;
    color: #0369a1;
}

.docs-meta {
    font-size: 0.75rem;
    color: #64748b;
}

.section-anchor {
    scroll-margin-top: 80px;
}

@media (max-width: 991.98px) {
    .docs-sidebar {
        display: none;
    }

    .docs-main {
        padding-inline: 1rem;
    }
}

/* --- NOUVEAUX STYLES AJOUT�S --- */

/* Tabs horizontaux style "Underline" */
.hd-tabs-underline {
    border-bottom: 1px solid var(--hd-border);
    margin-bottom: 1rem;
}

    .hd-tabs-underline .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--hd-text-muted);
        font-size: 0.9rem;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: 0;
        background: transparent;
    }

        .hd-tabs-underline .nav-link:hover {
            color: var(--hd-primary);
            background-color: rgba(31, 115, 183, 0.04);
        }

        .hd-tabs-underline .nav-link.active {
            color: var(--hd-primary);
            border-bottom-color: var(--hd-primary);
            background: transparent;
        }

/* Tabs verticaux style "Pills Left" */
.hd-vertical-nav .nav-link {
    text-align: left;
    border-radius: 0.5rem;
    color: #475569;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    margin-bottom: 0.2rem;
    transition: all 0.2s;
}

    .hd-vertical-nav .nav-link:hover {
        background-color: #f1f5f9;
    }

    .hd-vertical-nav .nav-link.active {
        background-color: var(--hd-primary-soft);
        color: var(--hd-primary);
        font-weight: 600;
    }

/* Dropzone pour fichiers */
.hd-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    background-color: #f8fafc;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .hd-dropzone:hover {
        border-color: var(--hd-primary);
        background-color: var(--hd-primary-soft);
    }

/* Toolbar �diteur de texte */
.hd-editor-toolbar {
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: #f8fafc;
    padding: 0.4rem;
}

.hd-editor-content {
    border: 1px solid #e2e8f0;
    border-radius: 0 0 0.5rem 0.5rem;
    min-height: 120px;
}

/* --- AVATARS & BUTTONS STYLES --- */

/* Avatar de base */
.hd-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff; /* Bordure blanche pour la d�coupe */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    background-color: #e2e8f0;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

    /* Tailles d'avatars */
    .hd-avatar.hd-avatar-sm {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .hd-avatar.hd-avatar-lg {
        width: 56px;
        height: 56px;
        font-size: 1.1rem;
    }

/* Groupe d'avatars (Stack) */
.hd-avatar-group {
    display: flex;
    align-items: center;
}

    .hd-avatar-group .hd-avatar {
        margin-left: -10px; /* Superposition */
        transition: transform 0.2s ease, z-index 0.2s;
        position: relative;
    }

        .hd-avatar-group .hd-avatar:first-child {
            margin-left: 0;
            z-index: 0;
        }

        .hd-avatar-group .hd-avatar:hover {
            transform: translateY(-3px);
            z-index: 10; /* Passe au dessus au survol */
        }

/* Avatar "More" (+3, +5) */
.hd-avatar-more {
    background-color: #f1f5f9;
    color: #64748b;
    font-size: 0.75rem;
}

/* Boutons avec badges int�gr�s */
.btn .badge {
    top: -1px; /* Ajustement fin */
}

/* Positionnement badge "point rouge" sur ic�ne */
.btn-icon-relative {
    position: relative;
}

.badge-dot-corner {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #fff;
}


/* --- DROPDOWNS & LISTBOXES --- */

/* Customisation globale des Dropdowns Bootstrap */
.dropdown-menu {
    border: 1px solid var(--hd-border);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.6rem;
    padding: 0.4rem;
    font-size: 0.85rem;
}

.dropdown-item {
    border-radius: 0.35rem;
    padding: 0.45rem 0.8rem;
    margin-bottom: 2px;
    color: var(--hd-text-muted);
    font-weight: 500;
    transition: all 0.1s;
}

    .dropdown-item:hover, .dropdown-item:focus {
        background-color: var(--hd-bg); /* Gris tr�s clair au survol */
        color: var(--hd-primary);
    }

    .dropdown-item.active, .dropdown-item:active {
        background-color: var(--hd-primary);
        color: #fff;
    }

    .dropdown-item i {
        margin-right: 0.5rem;
        font-size: 0.9rem;
        opacity: 0.8;
    }

.dropdown-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #94a3b8;
    padding: 0.5rem 0.8rem 0.2rem;
}

/* Dual Listbox (Transfert de listes) */
.hd-listbox-container {
    border: 1px solid var(--hd-border);
    border-radius: 0.5rem;
    background-color: #fff;
    height: 200px;
    overflow-y: auto;
}

.hd-listbox-item {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--hd-bg);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .hd-listbox-item:hover {
        background-color: var(--hd-bg);
    }

    .hd-listbox-item.selected {
        background-color: var(--hd-primary-soft);
        color: var(--hd-primary);
        font-weight: 600;
    }

/* Dark Mode Ajustements sp�cifiques Dropdown/Listbox */
[data-theme="dark"] .dropdown-menu {
    background-color: #1e293b; /* Slate 800 */
    border-color: #334155;
}

[data-theme="dark"] .dropdown-item {
    color: #cbd5e1;
}

    [data-theme="dark"] .dropdown-item:hover {
        background-color: #334155;
        color: #fff;
    }

[data-theme="dark"] .hd-listbox-container {
    background-color: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .hd-listbox-item {
    border-bottom-color: #334155;
    color: #e2e8f0;
}

    [data-theme="dark"] .hd-listbox-item:hover {
        background-color: #334155;
    }

    [data-theme="dark"] .hd-listbox-item.selected {
        background-color: rgba(56, 189, 248, 0.2);
        color: #7dd3fc;
    }


/* --- AUTH & ADMIN STYLES --- */

/* Layout Login "Split Screen" */
.hd-auth-wrapper {
    display: flex;
    min-height: 500px; /* Juste pour la d�mo, mettre 100vh en prod */
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 1px solid var(--hd-border);
}

.hd-auth-side-img {
    flex: 1;
    background: linear-gradient(135deg, var(--hd-primary), #0f3c66);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    position: relative;
}

    .hd-auth-side-img::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

.hd-auth-form {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ================= FIX LOGIN / AUTH DARK MODE ================= */

/* 1. Wrapper global de la card Login */
[data-theme="dark"] .hd-auth-wrapper {
    background-color: #1e293b; /* Slate 800 */
    border-color: #334155;
}

/* 2. Zone de formulaire (droite) */
[data-theme="dark"] .hd-auth-form {
    color: #f1f5f9;
}

    /* 3. Titres et sous-titres sp�cifiques au Login */
    [data-theme="dark"] .hd-auth-form h4 {
        color: #fff;
    }

    [data-theme="dark"] .hd-auth-form .text-muted {
        color: #94a3b8 !important; /* Gris clair lisible */
    }

    /* 4. Champs de saisie avec ic�nes (Input Groups) */
    /* On force l'ic�ne (qui a bg-white) et l'input � avoir le m�me fond tr�s sombre */
    [data-theme="dark"] .hd-auth-form .input-group-text {
        background-color: #0f172a !important; /* Slate 900 */
        border-color: #334155;
        color: #94a3b8;
    }

    [data-theme="dark"] .hd-auth-form .form-control {
        background-color: #0f172a !important; /* Slate 900 */
        border-color: #334155;
        color: #fff;
    }

        [data-theme="dark"] .hd-auth-form .form-control:focus {
            border-color: var(--hd-primary);
            box-shadow: 0 0 0 2px rgba(31, 115, 183, 0.25);
        }

    /* 5. Liens (Mot de passe oubli�, Cr�er un compte) */
    [data-theme="dark"] .hd-auth-form a {
        color: #38bdf8; /* Bleu clair (Sky 400) pour ressortir sur le noir */
    }

        [data-theme="dark"] .hd-auth-form a:hover {
            color: #7dd3fc;
        }

    /* 6. Bouton "Oeil" pour le mot de passe */
    [data-theme="dark"] .hd-auth-form .btn-light {
        background-color: #0f172a;
        border-color: #334155;
        color: #94a3b8;
    }

        [data-theme="dark"] .hd-auth-form .btn-light:hover {
            color: #fff;
            background-color: #1e293b;
        }

/* Styles Admin Table */
.hd-table-actions {
    opacity: 0.5;
    transition: opacity 0.2s;
}

tr:hover .hd-table-actions {
    opacity: 1;
}

/* Badges de R�les */
.badge-role {
    font-size: 0.7rem;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-role-admin {
    background: #e0e7ff;
    color: #4338ca;
}

.badge-role-agent {
    background: #e0f2fe;
    color: #0369a1;
}

.badge-role-user {
    background: #f1f5f9;
    color: #475569;
}

/* ================= FIX TABLEAU ADMIN DARK MODE ================= */

[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #e2e8f0;
    --bs-table-border-color: #334155;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
}

    /* 1. Header du tableau (qui �tait bg-light) */
    [data-theme="dark"] .table thead.bg-light {
        background-color: #0f172a !important; /* Tr�s sombre pour d�tacher le header */
        color: #94a3b8;
        border-bottom: 1px solid #334155;
    }

    [data-theme="dark"] .table thead th {
        border-bottom-color: #334155;
    }

    /* 2. Lignes du tableau (Bg-white devient Slate) */
    [data-theme="dark"] .table.bg-white {
        background-color: #1e293b !important;
    }

/* 3. Ligne inactive (qui �tait bg-light bg-opacity-50) */
/* On la rend tr�s sombre et transparente au lieu de gris clair */
[data-theme="dark"] tr.bg-light {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: #64748b !important; /* Texte plus sombre pour montrer l'inactivit� */
}

/* 4. Checkboxes en Dark Mode */
[data-theme="dark"] .form-check-input {
    background-color: #0f172a;
    border-color: #475569;
}

    [data-theme="dark"] .form-check-input:checked {
        background-color: var(--hd-primary);
        border-color: var(--hd-primary);
    }

/* 5. Toolbar au dessus du tableau */
[data-theme="dark"] .preview-wrapper.bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* 6. Container responsive bordures */
[data-theme="dark"] .table-responsive.border {
    border-color: #334155 !important;
}


/* --- SIDEBAR AVANC�E (TREE VIEW) --- */

.hd-sidebar-tree {
    width: 280px;
    background-color: var(--hd-bg); /* S'adapte au dark/light */
    height: 100vh;
    border-right: 1px solid var(--hd-border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
}

/* Liens de navigation (Items) */
.hd-nav-item {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    color: var(--hd-text-muted);
    text-decoration: none;
    border-radius: 6px;
    margin: 0 0.5rem 1px 0.5rem;
    transition: background-color 0.15s, color 0.15s;
    cursor: pointer;
    position: relative;
}

    .hd-nav-item:hover {
        background-color: rgba(148, 163, 184, 0.1);
        color: #334155;
    }

    /* �tat Actif */
    .hd-nav-item.active {
        background-color: rgba(31, 115, 183, 0.1); /* Bleu tr�s clair */
        color: var(--hd-primary);
        font-weight: 500;
    }
        /* Petite barre bleue � gauche pour l'actif (style Jira) */
        .hd-nav-item.active::before {
            content: "";
            position: absolute;
            left: -8px; /* Hors du padding */
            top: 6px;
            bottom: 6px;
            width: 3px;
            background-color: var(--hd-primary);
            border-radius: 0 4px 4px 0;
        }

/* Gestion de la profondeur (Indentation) */
/* Niveau 1 (Racine) est par d�faut */
/* Niveau 2 */
.hd-nav-group .hd-nav-item {
    padding-left: 1.8rem;
}
/* Niveau 3 */
.hd-nav-group .hd-nav-group .hd-nav-item {
    padding-left: 2.8rem;
}

/* Ic�nes et Chevrons */
.hd-nav-icon {
    width: 20px;
    text-align: center;
    margin-right: 0.5rem;
    opacity: 0.8;
}

.hd-chevron {
    font-size: 0.75rem;
    margin-left: auto;
    transition: transform 0.2s ease;
}
/* Rotation du chevron quand le menu est ouvert */
[aria-expanded="true"] .hd-chevron {
    transform: rotate(90deg);
}

/* Badge (Compteur � droite) */
.hd-nav-badge {
    font-size: 0.75rem;
    background-color: rgba(148, 163, 184, 0.2);
    color: var(--hd-text-muted);
    padding: 0 0.4rem;
    border-radius: 4px;
    margin-left: auto; /* Pousse � droite */
}

.hd-nav-item:hover .hd-nav-badge {
    background-color: rgba(255, 255, 255, 0.2);
}

/* --- MENU FLOTTANT "FAVORIS" --- */
.hd-favorites-popover {
    width: 300px;
    border: 1px solid var(--hd-border);
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    padding: 0;
    overflow: hidden;
}

.hd-fav-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--hd-border);
}

.hd-fav-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: var(--hd-text-muted);
    text-decoration: none;
}

    .hd-fav-item:hover {
        background-color: var(--hd-bg);
        color: var(--hd-primary);
    }

.hd-star-active {
    color: #ffb020; /* Jaune or */
}

/* Dark Mode Updates */
[data-theme="dark"] .hd-nav-item:hover {
    color: #e2e8f0;
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .hd-nav-item.active {
    background-color: rgba(56, 189, 248, 0.15); /* Bleu nuit */
    color: #7dd3fc;
}

[data-theme="dark"] .hd-favorites-popover {
    background-color: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .hd-fav-item:hover {
    background-color: #334155;
    color: #fff;
}



/* --- CHATBOT WIDGET --- */

/* 1. Le bouton flottant (Launcher) */
.hd-chat-launcher {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--hd-primary);
    color: white;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 12px rgba(31, 115, 183, 0.4);
    cursor: pointer;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .hd-chat-launcher:hover {
        transform: scale(1.1);
    }

/* 2. La fen�tre de chat */
.hd-chat-window {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 380px;
    height: 500px;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1050;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: all 0.25s ease;
    border: 1px solid var(--hd-border);
}

    /* �tat ouvert */
    .hd-chat-window.active {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: all;
    }

/* 3. Header */
.hd-chat-header {
    background: linear-gradient(135deg, var(--hd-primary), #0f3c66);
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 4. Zone de messages */
.hd-chat-body {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background-color: var(--hd-bg);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Bulles de messages */
.hd-chat-msg {
    max-width: 80%;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
}

/* Message Bot (Gauche) */
.hd-chat-msg-in {
    align-self: flex-start;
    background-color: #fff;
    border: 1px solid var(--hd-border);
    border-radius: 0 1rem 1rem 1rem;
    color: #334155;
}
/* Petit avatar au dessus du message bot */
.hd-chat-avatar-container {
    align-self: flex-start;
    margin-bottom: -0.5rem;
    margin-left: 0.2rem;
    z-index: 1;
}

/* Message User (Droite) */
.hd-chat-msg-out {
    align-self: flex-end;
    background-color: var(--hd-primary);
    color: white;
    border-radius: 1rem 1rem 0 1rem;
    box-shadow: 0 2px 5px rgba(31, 115, 183, 0.2);
}

/* 5. Suggestions (Chips) */
.hd-chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hd-chat-chip {
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
    background-color: #fff;
    border: 1px solid var(--hd-primary);
    color: var(--hd-primary);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
}

    .hd-chat-chip:hover {
        background-color: var(--hd-primary);
        color: white;
    }

/* 6. Footer (Input) */
.hd-chat-footer {
    padding: 0.75rem;
    background-color: #fff;
    border-top: 1px solid var(--hd-border);
}

/* Animation "Typing" (...) */
.hd-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.8rem 1rem;
}

.hd-typing-dot {
    width: 6px;
    height: 6px;
    background-color: #94a3b8;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

    .hd-typing-dot:nth-child(1) {
        animation-delay: -0.32s;
    }

    .hd-typing-dot:nth-child(2) {
        animation-delay: -0.16s;
    }

@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* Dark Mode Chatbot */
[data-theme="dark"] .hd-chat-window {
    background-color: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .hd-chat-msg-in {
    background-color: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .hd-chat-chip {
    background-color: transparent;
    border-color: #38bdf8;
    color: #38bdf8;
}

    [data-theme="dark"] .hd-chat-chip:hover {
        background-color: #38bdf8;
        color: #0f172a;
    }

[data-theme="dark"] .hd-chat-footer {
    background-color: #1e293b;
    border-top-color: #334155;
}


.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

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