/* =====================================================================
   SAFED Express — Thème admin aligné sur le portail (Login/Register)
   Palette : orange #F97316, cyan #10B7DC, encre #21272A, Inter/Outfit.
   Surcharge d'AdminLTE : chargé après css/all.css.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap");

:root {
    --sx-orange: #f97316;
    --sx-orange-600: #ea580c;
    --sx-orange-soft: #fff1e7;
    --sx-cyan: #10b7dc;
    --sx-cyan-600: #0e9fc0;
    --sx-ink: #1c1f2b;
    --sx-ink-2: #191d20;
    --sx-muted: #6b7280;
    --sx-line: #ecedf2;
    --sx-page: #eff0f4;
}

/* ---------------------------------- Base ---------------------------- */
body,
.content-wrapper,
.main-header,
.main-sidebar,
.card,
.btn,
.table {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.content-wrapper {
    background: var(--sx-page);
}

body {
    font-size: 0.8rem !important;
}
/* --------------------------- Sidebar (claire) ----------------------- */
.main-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--sx-line);
    box-shadow: none;
}
.main-sidebar .brand-link {
    background: #fff !important;
    border-bottom: 1px solid var(--sx-line) !important;
    padding: 15px 16px;
    text-align: center;
}
.main-sidebar .brand-link .brand-logo {
    max-height: 32px;
    width: auto;
    float: none;
    margin: 0 auto;
}
.sidebar {
    padding-bottom: 30px;
}

/* liens du menu */
.nav-sidebar .nav-item > .nav-link {
    color: #59616f !important;
    border-radius: 10px !important;
    margin: 2px 12px;
    padding: 9px 14px;
    font-weight: 500;
    transition: background 0.16s, color 0.16s;
}
.nav-sidebar .nav-link .nav-icon {
    color: #9aa3b2 !important;
    transition: color 0.16s;
}
.nav-sidebar .nav-item > .nav-link:hover {
    background: #f4f5f8 !important;
    color: #21272a !important;
}
.nav-sidebar .nav-item > .nav-link:hover .nav-icon {
    color: var(--sx-orange) !important;
}
/* actif (uniquement la route exactement sélectionnée) */
.nav-sidebar .nav-item > .nav-link.active,
.nav-sidebar .nav-item > .router-link-exact-active.nav-link {
    background: #fff1e7 !important;
    color: #21272a !important;
    box-shadow: none;
    font-weight: 600;
}
.nav-sidebar .nav-item > .nav-link.active .nav-icon,
.nav-sidebar .nav-item > .router-link-exact-active.nav-link .nav-icon {
    color: var(--sx-orange) !important;
}
/* sous-menus (treeview) */
.nav-sidebar .nav-treeview {
    padding-left: 6px;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: #6b7280 !important;
    font-size: 13.5px;
    border-radius: 9px !important;
    margin: 1px 10px;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background: #f4f5f8 !important;
    color: #21272a !important;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .router-link-exact-active.nav-link {
    background: #fff1e7 !important;
    color: var(--sx-orange) !important;
    box-shadow: none;
}
.nav-sidebar .nav-link p {
    font-weight: inherit;
}
/* badges dans le menu */
.nav-sidebar .badge {
    border-radius: 999px;
}

/* --------------------------------- Header --------------------------- */
.main-header.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--sx-line) !important;
    box-shadow: 0 2px 14px -10px rgba(21, 21, 41, 0.25);
}
.main-header .nav-link {
    color: var(--sx-ink) !important;
    font-weight: 500;
}
.main-header .nav-link:hover {
    color: var(--sx-orange) !important;
}
.main-header .dropdown-menu {
    border: 1px solid var(--sx-line);
    border-radius: 12px;
    box-shadow: 0 18px 44px -20px rgba(21, 21, 41, 0.3);
}
/* pastille utilisateur (dernier élément à droite) facon "agency pill" */
.main-header .navbar-nav.ml-auto > li:last-child > .nav-link.dropdown-toggle {
    background: linear-gradient(135deg, var(--sx-orange), #fb8c3c);
    color: #fff !important;
    border-radius: 999px;
    padding: 7px 16px !important;
    margin-left: 8px;
    box-shadow: 0 8px 18px -8px rgba(249, 115, 22, 0.5);
}
.main-header
    .navbar-nav.ml-auto
    > li:last-child
    > .nav-link.dropdown-toggle:hover {
    color: #fff !important;
    filter: brightness(1.03);
}

/* --------------------------------- Cartes --------------------------- */
.card {
    border: 1px solid var(--sx-line);
    border-radius: 16px;
    box-shadow: 0 6px 22px -14px rgba(21, 21, 41, 0.22);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--sx-line);
    border-radius: 16px 16px 0 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 15px 20px;
}
/* les en-têtes qui utilisent une grille .row gardent la pleine largeur */
.card-header > .row {
    flex: 1 1 100%;
}
.card-header > .card-title {
    margin: 0;
    font-family: "Outfit", "Inter", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}
.card-header .card-tools {
    /* position: static !important; */
    float: none !important;
    margin: 0 0 0 auto !important; /* pousse le sélecteur à droite */
    display: flex;
    align-items: center;
    gap: 8px;
}
/* neutralise le clearfix (::before/::after) qui fausse le flex de l'en-tête */
.card-header::before,
.card-header::after {
    display: none !important;
}
.card-header .card-tools .custom-select,
.card-header .card-tools select {
    border-radius: 10px;
    height: 40px;
    min-width: 140px;
    font-weight: 500;
}
.card-footer {
    background: #fff;
    border-top: 1px solid var(--sx-line);
    border-radius: 0 0 16px 16px !important;
}
.card-title {
    font-family: "Outfit", "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* --------------------------------- Boutons -------------------------- */
.btn {
    border-radius: 10px !important;
    font-weight: 600;
}
.btn-primary,
.btn.bg-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--sx-orange) !important;
    border-color: var(--sx-orange) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -8px rgba(249, 115, 22, 0.5);
}
.btn-primary:hover,
.btn.bg-primary:hover,
.btn-primary:focus,
.btn.bg-primary:focus {
    background: var(--sx-orange-600) !important;
    border-color: var(--sx-orange-600) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--sx-orange) !important;
    border-color: var(--sx-orange) !important;
}
.btn-outline-primary:hover {
    background: var(--sx-orange) !important;
    color: #fff !important;
}
.btn-info,
.btn.bg-info {
    background: var(--sx-cyan) !important;
    border-color: var(--sx-cyan) !important;
    color: #fff !important;
}
.btn-info:hover,
.btn.bg-info:hover {
    background: var(--sx-cyan-600) !important;
    border-color: var(--sx-cyan-600) !important;
}
.btn-link {
    color: var(--sx-orange) !important;
}

/* --------------------------------- Tables --------------------------- */
.table {
    color: #37415a;
}
.table thead th,
.table .thead-light th,
.thead-light th {
    background: #f3f5f9 !important;
    color: #46506a !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--sx-line) !important;
    border-top: 0 !important;
    vertical-align: middle;
    white-space: nowrap;
}
.table td,
.table th {
    border-color: #eef1f6 !important;
    vertical-align: middle !important;
}
.table-hover tbody tr {
    transition: background 0.12s;
}
.table-hover tbody tr:hover {
    background: var(--sx-orange-soft) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background: #fafbfd;
}
.table-responsive {
    border-radius: 12px;
}
.table thead th a.text-secondary {
    color: #46506a !important;
    font-weight: 600;
}
/* Icônes des lignes : gris (comme la sidebar) au lieu de l'orange hérité
   de .text-primary. Les icônes sémantiques (text-danger/success) gardent
   leur couleur. */
.table td i.text-primary,
.table td .fas.text-primary,
.table td .far.text-primary {
    color: #9aa3b2 !important;
}

/* --------------------------- Champs / Select2 ----------------------- */
.form-control,
.custom-select {
    border-radius: 9px;
    border-color: var(--sx-line);
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--sx-orange) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}
.input-group .btn.bg-primary {
    box-shadow: none;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 9px !important;
    border-color: var(--sx-line) !important;
}
.select2-container--default.select2-container--focus
    .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--sx-orange) !important;
}
.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background: var(--sx-orange) !important;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background: var(--sx-orange-soft) !important;
    border-color: #f6c79f !important;
    color: var(--sx-orange-600) !important;
    border-radius: 6px !important;
}

/* -------------------------------- Pagination ------------------------ */
.page-item.active .page-link {
    background: var(--sx-orange) !important;
    border-color: var(--sx-orange) !important;
    color: #fff !important;
}
.page-link {
    color: var(--sx-ink) !important;
    border-color: var(--sx-line) !important;
}
.page-link:hover {
    color: var(--sx-orange) !important;
}

/* -------------------------- Divers accents -------------------------- */
a {
    color: var(--sx-orange);
}
a:hover {
    color: var(--sx-orange-600);
}
.text-primary {
    color: var(--sx-orange) !important;
}
/* pastilles de statut douces (facon SaaS) */
.badge {
    border-radius: 999px;
    padding: 0.42em 0.75em;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge-success {
    background: #e7f8f0 !important;
    color: #0f9d63 !important;
}
.badge-danger {
    background: #fdecec !important;
    color: #e5484d !important;
}
.badge-warning {
    background: #fff4e0 !important;
    color: #b7791f !important;
}
.badge-info {
    background: #e6f7fb !important;
    color: #0e93b0 !important;
}
.badge-secondary {
    background: #eef1f6 !important;
    color: #5b6472 !important;
}
.badge-primary {
    background: #fff1e7 !important;
    color: #ea580c !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--sx-orange) !important;
    border-color: var(--sx-orange) !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--sx-orange) !important;
}

/* ----------------------- En-têtes de section ------------------------ */
.nav-sidebar .nav-header {
    color: #9aa3b2 !important;
    background: transparent !important;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 10.5px;
    font-weight: 700;
    padding: 16px 26px 8px;
    margin-top: 2px;
    border-top: 0;
}

/* --------------------------------- Modals --------------------------- */
.modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px -24px rgba(21, 21, 41, 0.4);
}
.modal-header {
    border-bottom: 1px solid var(--sx-line);
    padding: 18px 22px;
    align-items: center;
}
.modal-title {
    font-family: "Outfit", "Inter", sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
}
.modal-header .close {
    color: var(--sx-muted);
    opacity: 1;
    text-shadow: none;
    font-weight: 400;
    transition: color 0.15s;
}
.modal-header .close:hover {
    color: var(--sx-orange);
}
.modal-body {
    padding: 22px;
}
.modal-footer {
    border-top: 1px solid var(--sx-line);
    padding: 14px 22px;
}
/* en-têtes de modale colorés éventuels */
.modal-header.bg-primary,
.modal-header.bg-info {
    color: #fff;
}
.modal-header.bg-primary {
    background: linear-gradient(135deg, var(--sx-orange), #fb8c3c) !important;
}
.modal-header.bg-primary .close {
    color: #fff;
}
.modal-backdrop.show {
    opacity: 0.5;
}

/* ------------------------------ SweetAlert2 ------------------------- */
.swal2-popup {
    border-radius: 16px !important;
    font-family: "Inter", sans-serif !important;
}
.swal2-title {
    font-family: "Outfit", "Inter", sans-serif !important;
}
.swal2-styled.swal2-confirm {
    background: var(--sx-orange) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px -8px rgba(249, 115, 22, 0.5) !important;
}
.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3) !important;
}
.swal2-styled.swal2-cancel {
    border-radius: 10px !important;
}

/* ---------------------- Groupes de boutons -------------------------- */
.btn-group > .btn,
.btn-group-vertical > .btn {
    border-radius: 0;
}
.btn-group > .btn:first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
.btn-group > .btn:last-child,
.btn-group > .btn-group:last-child > .btn {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
.btn-group > .btn + .btn {
    margin-left: -1px;
}
.btn-group > .btn.active,
.btn-group > .btn:focus,
.btn-group > .btn:hover {
    z-index: 2;
}
/* groupe façon "segmented" (outline) */
.btn-group .btn-outline-primary.active,
.btn-group .btn-outline-secondary.active {
    background: var(--sx-orange) !important;
    border-color: var(--sx-orange) !important;
    color: #fff !important;
}

/* ------------------------ Groupes d'input --------------------------- */
.input-group {
    border-radius: 10px;
}
/* boutons/addons d'un input-group : coins internes carrés (ils se
   raccordent), on arrondit seulement l'extrémité plus bas. */
.input-group .input-group-append > .btn,
.input-group .input-group-append > .input-group-text,
.input-group .input-group-prepend > .btn,
.input-group .input-group-prepend > .input-group-text {
    border-radius: 0 !important;
}
.input-group-append {
    margin-left: -1px;
}
.input-group-prepend {
    margin-right: -1px;
}
/* coins externes arrondis, coins internes droits */
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .form-control:first-child,
.input-group > .custom-select:first-child,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}
.input-group > .input-group-append:last-child > .btn:last-child,
.input-group > .input-group-append:last-child > .input-group-text:last-child,
.input-group > .form-control:last-child,
.input-group > .custom-select:last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
.input-group-text {
    background: #f6f8fb;
    border-color: var(--sx-line);
    color: var(--sx-muted);
    border-radius: 10px;
}
.input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13);
    border-radius: 10px;
}
.input-group:focus-within .form-control,
.input-group:focus-within .custom-select {
    border-color: var(--sx-orange);
    box-shadow: none;
}
.input-group-append .btn.bg-primary,
.input-group-append .btn-primary {
    box-shadow: none;
}

/* ------------------------------- Inputs ----------------------------- */
.form-control,
.custom-select,
.custom-file-label {
    height: calc(1.55em + 0.75rem + 2px);
    color: var(--sx-ink);
    font-size: 14px;
}
.form-control::placeholder {
    color: #a7aebb;
}
textarea.form-control {
    height: auto;
}
.form-control:disabled,
.form-control[readonly] {
    background: #f6f8fb;
}
label {
    font-weight: 600;
    color: #46506a;
    font-size: 13px;
}
.custom-control-label {
    font-weight: 500;
}
.custom-checkbox .custom-control-label::before,
.custom-radio .custom-control-label::before {
    border-radius: 5px;
    border-color: #cbd3df;
}

/* =====================================================================
   SURCHARGES DES STYLES HERITES (public/css/style.css)
   Regroupées ici pour que TOUT le thème s'active/désactive avec ce seul
   fichier. Désactiver le <link> portal-theme.css => retour au design
   d'origine (sidebar bleue + pastilles pleines).
   ===================================================================== */

/* --- Sidebar : neutralise l'ancien thème bleu (.sidebar-light-primary) --- */
.sidebar-light-primary {
    background-color: transparent !important;
    color: #59616f !important;
}
.sidebar-light-primary .nav-link {
    color: #59616f !important;
}
.sidebar-light-primary .nav-header {
    background-color: transparent !important;
    color: #9aa3b2 !important;
    border-radius: 0 !important;
}
.sidebar-light-primary .nav-link:hover,
.sidebar-light-primary .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-light-primary .nav-sidebar > .nav-item:hover > .nav-link {
    background-color: #f4f5f8 !important;
    color: #21272a !important;
}
.sidebar-light-primary .nav-link:hover .nav-icon {
    color: var(--sx-orange) !important;
}
.sidebar-light-primary .router-link-exact-active,
.nav-sidebar .router-link-exact-active {
    background-color: #fff1e7 !important;
    color: var(--sx-orange) !important;
}
/* fond sombre hérité des liens actifs (hors sidebar) neutralisé */
.router-link-exact-active {
    background-color: transparent;
}

/* --- Pastilles de statut : version "muted professional" (moderne, moins criard) --- */
.badge-nouvelle {
    background-color: #d97706 !important;
    color: #fff !important;
}
.badge-prepare {
    background-color: #ca8a04 !important;
    color: #fff !important;
}
.badge-expediee {
    background-color: #ea580c !important;
    color: #fff !important;
}
.badge-reponce {
    background-color: #dc2626 !important;
    color: #fff !important;
}
.badge-hors {
    background-color: #64748b !important;
    color: #fff !important;
}
.badge-reportee {
    background-color: #4f46e5 !important;
    color: #fff !important;
}
.badge-livree {
    background-color: #059669 !important;
    color: #fff !important;
}
.badge-refusee {
    background-color: #b91c1c !important;
    color: #fff !important;
}
.badge-livraison {
    background-color: #2563eb !important;
    color: #fff !important;
}
.badge-stock {
    background-color: #c2410c !important;
    color: #fff !important;
}
.badge-confirmee {
    background-color: #0d9488 !important;
    color: #fff !important;
}
.badge-programmee {
    background-color: #92400e !important;
    color: #fff !important;
}
.badge-annulee {
    background-color: #1f2937 !important;
    color: #fff !important;
}
.badge-retour {
    background-color: #e11d48 !important;
    color: #fff !important;
}
.badge-retourV {
    background-color: #9f1239 !important;
    color: #fff !important;
}

/* =====================================================================
   MODE SOMBRE  —  activé par la classe .sx-dark sur <html>
   (bascule via le bouton lune/soleil ; mémorisé dans localStorage).
   ===================================================================== */
html.sx-dark body,
html.sx-dark .content-wrapper,
html.sx-dark .wrapper {
    background: #131417 !important;
    color: #eceef3;
}
/* Sidebar */
html.sx-dark .main-sidebar {
    background: #1b1c20 !important;
    border-right-color: #2b2c32 !important;
}
html.sx-dark .main-sidebar .brand-link {
    background: #1b1c20 !important;
    border-bottom-color: #2b2c32 !important;
}
html.sx-dark .nav-sidebar .nav-item > .nav-link,
html.sx-dark .sidebar-light-primary .nav-link {
    color: #f5f5f5 !important;
}
html.sx-dark .nav-sidebar .nav-link .nav-icon {
    color: #f5f5f5 !important;
}
html.sx-dark .nav-sidebar .nav-item > .nav-link:hover,
html.sx-dark .sidebar-light-primary .nav-sidebar > .nav-item:hover > .nav-link {
    background: #2b2c31 !important;
    color: #fff !important;
}
html.sx-dark .nav-sidebar .nav-item > .nav-link.active,
html.sx-dark .sidebar-light-primary .router-link-exact-active,
html.sx-dark .nav-sidebar .router-link-exact-active {
    background: #2b2c31 !important;
    color: #ffffff !important;
}
html.sx-dark .nav-sidebar .nav-item > .nav-link.active .nav-icon,
html.sx-dark .nav-sidebar .nav-item > .router-link-exact-active.nav-link .nav-icon {
    color: var(--sx-orange) !important;
}
/* lien actif : fond + texte forcés (le fond clair du thème clair ne doit jamais
   rester derrière un texte clair) */
html.sx-dark .sidebar-light-primary .nav-sidebar .nav-item > .nav-link.active,
html.sx-dark .sidebar-light-primary .nav-sidebar .nav-item > .nav-link.router-link-exact-active,
html.sx-dark .sidebar-light-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
html.sx-dark .sidebar-light-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.router-link-exact-active {
    background: #2b2c31 !important;
    background-color: #2b2c31 !important;
    color: #ffffff !important;
}
html.sx-dark .nav-sidebar .nav-link.active p,
html.sx-dark .nav-sidebar .nav-link.router-link-exact-active p {
    color: #ffffff !important;
}
html.sx-dark .nav-sidebar .nav-header {
    color: #f5f5f5 !important;
}
html.sx-dark .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: #f5f5f5 !important;
}
html.sx-dark .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background: #2b2c31 !important;
    color: #fff !important;
}
/* Header */
html.sx-dark .main-header.navbar {
    background: #1b1c20 !important;
    border-bottom-color: #2b2c32 !important;
}
html.sx-dark .main-header .nav-link {
    color: #eceef3 !important;
}
/* Cartes */
html.sx-dark .card {
    background: #1b1c20;
    border-color: #2b2c32;
    color: #eceef3;
}
html.sx-dark .card-header,
html.sx-dark .card-footer {
    background: #1b1c20;
    border-color: #2b2c32;
}
html.sx-dark .card-title,
html.sx-dark .content-wrapper h1,
html.sx-dark .content-wrapper h2,
html.sx-dark .content-wrapper h3,
html.sx-dark .content-wrapper h4,
html.sx-dark .content-wrapper h5 {
    color: #f2f3f7;
}
/* Tables */
html.sx-dark .table {
    color: #f5f5f5 !important;
}
html.sx-dark .table thead th,
html.sx-dark .table .thead-light th,
html.sx-dark .thead-light th {
    background: #25262b !important;
    color: #f5f5f5 !important;
    border-bottom-color: #2f3036 !important;
}
html.sx-dark .table td,
html.sx-dark .table th {
    border-color: #2b2c32 !important;
}
html.sx-dark .table-hover tbody tr:hover {
    background: rgba(249, 115, 22, 0.09) !important;
}
html.sx-dark .table-striped tbody tr:nth-of-type(odd) {
    background: #18191d;
}
html.sx-dark .table thead th a.text-secondary {
    color: #f5f5f5 !important;
}
html.sx-dark .table td i.text-primary,
html.sx-dark .table td .fas.text-primary,
html.sx-dark .table td .far.text-primary {
    color: #f5f5f5 !important;
}
/* Champs */
html.sx-dark .form-control,
html.sx-dark .custom-select {
    background: #131417;
    border-color: #2f3036;
    color: #eceef3;
}
html.sx-dark .form-control::placeholder {
    color: #6b7280;
}
html.sx-dark .form-control:disabled,
html.sx-dark .form-control[readonly] {
    background: #25262b;
}
html.sx-dark .input-group-text {
    background: #25262b;
    border-color: #2f3036;
    color: #9aa3b2;
}
html.sx-dark label {
    color: #aeb6c4;
}
/* Select2 */
html.sx-dark .select2-container--default .select2-selection--single,
html.sx-dark .select2-container--default .select2-selection--multiple {
    background: #131417 !important;
    border-color: #2f3036 !important;
}
html.sx-dark .select2-selection__rendered,
html.sx-dark .select2-container--default .select2-selection__rendered {
    color: #eceef3 !important;
}
html.sx-dark .select2-dropdown {
    background: #1b1c20;
    border-color: #2f3036;
}
html.sx-dark .select2-results__option {
    color: #cdd3dd;
}
html.sx-dark .select2-search__field {
    background: #131417 !important;
    color: #eceef3;
}
/* Modales & menus */
html.sx-dark .modal-content {
    background: #1b1c20;
    color: #eceef3;
}
html.sx-dark .modal-header,
html.sx-dark .modal-footer {
    border-color: #2b2c32;
}
html.sx-dark .dropdown-menu {
    background: #1b1c20;
    border-color: #2b2c32;
}
html.sx-dark .dropdown-item {
    color: #cdd3dd;
}
html.sx-dark .dropdown-item:hover {
    background: #2b2c31;
    color: #fff;
}
html.sx-dark .dropdown-divider {
    border-color: #2b2c32;
}
/* Pagination & divers (spécificité renforcée pour battre style.css) */
html.sx-dark .page-item .page-link,
html.sx-dark .page-item span {
    background: #1b1c20 !important;
    border-color: #2f3036 !important;
    color: #cdd3dd !important;
}
html.sx-dark .page-item .page-link:hover {
    background: #2b2c31 !important;
    color: #fff !important;
}
html.sx-dark .page-item.active .page-link {
    background: var(--sx-orange) !important;
    border-color: var(--sx-orange) !important;
    color: #fff !important;
}
html.sx-dark .page-item.disabled .page-link,
html.sx-dark .page-item.disabled span {
    background: #18191d !important;
    border-color: #2b2c32 !important;
    color: #5b6472 !important;
}
html.sx-dark .text-secondary {
    color: #9aa3b2 !important;
}
html.sx-dark .text-dark,
html.sx-dark .text-body {
    color: #eceef3 !important;
}
html.sx-dark .border,
html.sx-dark .border-top,
html.sx-dark .border-bottom {
    border-color: #2b2c32 !important;
}
html.sx-dark hr {
    border-color: #2b2c32;
}
/* Cartes de stats du tableau de bord (.info-box / .small-box) */
html.sx-dark .info-box,
html.sx-dark .small-box {
    background: #1b1c20 !important;
    color: #eceef3 !important;
    box-shadow: 0 6px 22px -14px rgba(0, 0, 0, 0.55) !important;
}
html.sx-dark .info-box-text,
html.sx-dark .small-box p {
    color: #aeb6c4 !important;
}
html.sx-dark .info-box-number,
html.sx-dark .small-box h3 {
    color: #f2f3f7 !important;
}
html.sx-dark .small-box .icon {
    color: rgba(255, 255, 255, 0.15);
}

/* SweetAlert2 en mode sombre */
html.sx-dark .swal2-popup {
    background: #1b1c20 !important;
    color: #eceef3 !important;
}
html.sx-dark .swal2-title {
    color: #f2f3f7 !important;
}
html.sx-dark .swal2-html-container,
html.sx-dark .swal2-content {
    color: #cdd3dd !important;
}
html.sx-dark .swal2-input,
html.sx-dark .swal2-select,
html.sx-dark .swal2-textarea {
    background: #131417 !important;
    color: #eceef3 !important;
    border-color: #2f3036 !important;
}
/* Toasts (notifications coin haut-droit) en mode sombre */
html.sx-dark .swal2-popup.swal2-toast,
html.sx-dark div.swal2-toast {
    background: #1b1c20 !important;
    color: #eceef3 !important;
    box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.65) !important;
    border: 1px solid #2b2c32 !important;
}
html.sx-dark .swal2-toast .swal2-title {
    color: #f2f3f7 !important;
}
html.sx-dark .swal2-toast .swal2-html-container,
html.sx-dark .swal2-toast .swal2-content {
    color: #cdd3dd !important;
}
html.sx-dark .swal2-toast .swal2-timer-progress-bar {
    background: rgba(249, 115, 22, 0.5) !important;
}
html.sx-dark .swal2-toast .swal2-close {
    color: #9aa3b2 !important;
}

/* Modale des permissions (UserPermissions.vue) en mode sombre */
html.sx-dark .perm-modal {
    background: #1b1c20 !important;
}
html.sx-dark .perm-toolbar {
    background: #18191d !important;
    border-bottom-color: #2b2c32 !important;
}
html.sx-dark .perm-search input,
html.sx-dark .perm-search {
    background: #131417 !important;
    color: #eceef3 !important;
}
html.sx-dark .perm-counter {
    color: #9aa3b2 !important;
}
html.sx-dark .perm-body {
    background: #131417 !important;
}
html.sx-dark .perm-group {
    background: #1b1c20 !important;
    border-color: #2b2c32 !important;
}
html.sx-dark .perm-group-head:hover {
    background: #25262b !important;
}
html.sx-dark .perm-group-title {
    color: #eceef3 !important;
}
html.sx-dark .perm-item {
    background: #1b1c20 !important;
    border-color: #2b2c32 !important;
}
html.sx-dark .perm-item:hover {
    background: #25262b !important;
}
html.sx-dark .perm-item-on {
    background: rgba(16, 183, 220, 0.14) !important;
}
html.sx-dark .perm-item-text {
    color: #cdd3dd !important;
}
html.sx-dark .perm-item-name {
    color: #8a93a3 !important;
}
html.sx-dark .perm-footer {
    border-top-color: #2b2c32 !important;
}
html.sx-dark .perm-btn-ghost {
    background: #2b2c31 !important;
    color: #cdd3dd !important;
}

/* --------------------------- Responsive sidebar --------------------- */
@media (max-width: 991px) {
    .main-sidebar .brand-link {
        padding: 12px;
    }
}

/* ------------------------- Mobile : listes ------------------------- */
@media (max-width: 767px) {
    /* En-tête de carte : titre + "par page" sur une seule ligne, plus petits */
    .card-header {
        flex-wrap: nowrap;
        padding: 12px 14px;
        gap: 8px;
    }
    .card-header > .card-title {
        font-size: 15px;
        min-width: 0;
        overflow: visible;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .card-header > .card-title i {
        margin-right: 8px !important;
    }
    .card-header .card-tools {
        flex: none;
    }
    .card-header .card-tools .custom-select,
    .card-header .card-tools select {
        height: 34px;
        min-width: 104px;
        width: 104px;
        font-size: 12px;
        padding: 2px 22px 2px 8px;
        font-weight: 500;
    }

    /* Barre de filtres : le bouton FILTRES occupe tout l'espace restant,
     la recherche passe à la ligne en dessous. */
    .filterbar__bar {
        flex-wrap: wrap;
    }
    .filterbar__bar .filterbar__btn--toggle {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }
    .filterbar__bar .filterbar__search {
        flex: 1 1 100% !important;
        order: 3;
    }
}

/* Custom sidebar scrollbar */
.main-sidebar, .main-sidebar .sidebar {
    scrollbar-width: thin;
    scrollbar-color: #c3c9d4 transparent;
}
.main-sidebar::-webkit-scrollbar, .main-sidebar .sidebar::-webkit-scrollbar { width: 6px; }
.main-sidebar::-webkit-scrollbar-track, .main-sidebar .sidebar::-webkit-scrollbar-track { background: transparent; }
.main-sidebar::-webkit-scrollbar-thumb, .main-sidebar .sidebar::-webkit-scrollbar-thumb { background: #c3c9d4; border-radius: 6px; }
.main-sidebar::-webkit-scrollbar-thumb:hover, .main-sidebar .sidebar::-webkit-scrollbar-thumb:hover { background: #ff6a13; }
html.sx-dark .main-sidebar, html.sx-dark .main-sidebar .sidebar { scrollbar-color: #4a5260 transparent; }
html.sx-dark .main-sidebar::-webkit-scrollbar-thumb, html.sx-dark .main-sidebar .sidebar::-webkit-scrollbar-thumb { background: #4a5260; }
html.sx-dark .main-sidebar::-webkit-scrollbar-thumb:hover, html.sx-dark .main-sidebar .sidebar::-webkit-scrollbar-thumb:hover { background: #ff6a13; }

/* Dark tables: all cell text/icons #f5f5f5 (badges keep their own colors) */
html.sx-dark .table td,
html.sx-dark .table td i,
html.sx-dark .table td .fas,
html.sx-dark .table td .far,
html.sx-dark .table td .text-muted,
html.sx-dark .table td .text-secondary,
html.sx-dark .table td a:not(.btn):not(.badge) {
    color: #f5f5f5 !important;
}

/* --------------------- Sidebar : même police que le reste ------------- */
.main-sidebar,
.main-sidebar .sidebar,
.main-sidebar .nav-sidebar .nav-link,
.main-sidebar .nav-sidebar .nav-link p,
.main-sidebar .nav-sidebar .nav-header,
.main-sidebar .nav-sidebar .badge,
.main-sidebar .brand-text {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}
.nav-sidebar .nav-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ===================== Tableaux de données (listes) ===================== */
.content-wrapper .table {
    font-feature-settings: "tnum" 1, "cv11" 1; /* chiffres tabulaires alignés */
    color: #2b2f3a;
}
.content-wrapper .table-bordered,
.content-wrapper .table-bordered td,
.content-wrapper .table-bordered th {
    border-left: 0;
    border-right: 0;
}
.content-wrapper .table thead th,
.content-wrapper .table .thead-light th {
    background: transparent !important;
    border-top: 0;
    border-bottom: 1px solid var(--sx-line) !important;
    color: #8a8fa0 !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 16px;
    white-space: nowrap;
}
.content-wrapper .table thead th a {
    color: inherit !important;
}
.content-wrapper .table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--sx-line);
    font-size: 13px;
    line-height: 1.55;
}
.content-wrapper .table-striped tbody tr:nth-of-type(odd) {
    background: transparent;
}
.content-wrapper .table-hover tbody tr:hover {
    background: rgba(249, 115, 22, 0.05) !important;
}
/* ligne secondaire (après <br>) : plus discrète */
.content-wrapper .table tbody td br + span {
    color: #8a8fa0;
    font-size: 12px;
}
/* icônes de cellule : discrètes, largeur fixe pour aligner les textes */
.content-wrapper .table tbody td i.text-primary,
.content-wrapper .table tbody td .fas.text-primary,
.content-wrapper .table tbody td .far.text-primary {
    color: #a3a9b8 !important;
    width: 16px;
    text-align: center;
    font-size: 12px;
}
/* référence + actions */
.content-wrapper .table td.table-actions > .font-weight-bold {
    font-size: 13px;
    letter-spacing: 0.01em;
    margin-bottom: 6px;
}
.content-wrapper .table td.table-actions .table-action,
.content-wrapper .table td.table-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 2px 0 0;
    border-radius: 8px;
    color: #6b7280 !important;
    font-size: 12px;
    transition: background 0.15s, color 0.15s;
}
.content-wrapper .table td.table-actions a:hover {
    background: #f1f2f6;
    color: var(--sx-orange) !important;
}
/* pastilles de statut */
.content-wrapper .table td .badge {
    padding: 5px 10px !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
}

html.sx-dark .content-wrapper .table {
    color: #e6e8ee !important;
}
html.sx-dark .content-wrapper .table thead th,
html.sx-dark .content-wrapper .table .thead-light th {
    background: transparent !important;
    color: #8d909c !important;
    border-bottom-color: #2b2c32 !important;
}
html.sx-dark .content-wrapper .table tbody td {
    border-bottom: 1px solid #25262b !important;
}
html.sx-dark .content-wrapper .table-striped tbody tr:nth-of-type(odd) {
    background: transparent;
}
html.sx-dark .content-wrapper .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
html.sx-dark .content-wrapper .table tbody td br + span {
    color: #8d909c;
}
html.sx-dark .content-wrapper .table tbody td i.text-primary,
html.sx-dark .content-wrapper .table tbody td .fas.text-primary,
html.sx-dark .content-wrapper .table tbody td .far.text-primary {
    color: #7d818e !important;
}
html.sx-dark .content-wrapper .table td.table-actions a {
    color: #a8adba !important;
}
html.sx-dark .content-wrapper .table td.table-actions a:hover {
    background: #2b2c31;
    color: #fff !important;
}

/* Actions de ligne : toutes grises, compactes (n'occupent pas toute la largeur) */
.content-wrapper .table td.table-actions {
    width: 1%;
    white-space: nowrap;
}
.content-wrapper .table td.table-actions a,
.content-wrapper .table td.table-actions a i,
.content-wrapper .table td.table-actions a.text-dark,
.content-wrapper .table td.table-actions a.text-secondary {
    color: #8a8fa0 !important;
}
.content-wrapper .table td.table-actions a {
    width: 22px;
    height: 22px;
    margin: 0 1px 0 0;
    border-radius: 6px;
    font-size: 11px;
}
.content-wrapper .table td.table-actions a i {
    font-size: 11px;
}
.content-wrapper .table td.table-actions a:hover,
.content-wrapper .table td.table-actions a:hover i {
    color: var(--sx-orange) !important;
}
html.sx-dark .content-wrapper .table td.table-actions a,
html.sx-dark .content-wrapper .table td.table-actions a i {
    color: #7d818e !important;
}
html.sx-dark .content-wrapper .table td.table-actions a:hover,
html.sx-dark .content-wrapper .table td.table-actions a:hover i {
    color: #fff !important;
}

/* Actions de ligne : espacement réduit */
.content-wrapper .table td.table-actions a {
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 5px;
    font-size: 10.5px;
}
.content-wrapper .table td.table-actions a i {
    font-size: 10.5px;
}
.content-wrapper .table td.table-actions > .font-weight-bold {
    margin-bottom: 3px;
}

/* Ligne téléphone : numéro puis petits outils (loupe, doublon, liste noire) */
.phone-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.phone-line__tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.phone-line__tools .phone-lookup {
    margin: 0 !important;
    font-size: 0.8em;
}
.phone-line__dup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fdecea;
    color: #dc2626;
    font-size: 9px;
    cursor: help;
}

/* Lignes de tableau plus compactes + boutons d'action collés */
.content-wrapper .table tbody td {
    padding: 9px 12px;
}
.content-wrapper .table thead th {
    padding: 10px 12px;
}
.content-wrapper .table td.table-actions {
    font-size: 0; /* supprime l'espace blanc entre les boutons inline */
    padding: 9px 8px;
}
.content-wrapper .table td.table-actions > .font-weight-bold {
    font-size: 13px;
    margin-bottom: 4px;
}
.content-wrapper .table td.table-actions a {
    width: 22px;
    height: 22px;
    margin: 0 1px 0 0;
}

/* Lignes très compactes (3px) */
.content-wrapper .table tbody td,
.content-wrapper .table td.table-actions {
    padding-top: 3px;
    padding-bottom: 3px;
}
.content-wrapper .table thead th {
    padding-top: 6px;
    padding-bottom: 6px;
}