/* ==========================================================
   Menu repliable · bouton clair/sombre · mode sombre
   ========================================================== */

/* ---------- Bouton « replier le menu » ---------- */
.brand { justify-content: space-between; }
.brand-link { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-collapse {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08); color: #CFDCE0; cursor: pointer; display: grid; place-items: center;
  transition: transform .35s var(--spring, ease), background .2s, color .2s;
}
.nav-collapse:hover { background: rgba(91,192,194,.22); color: #fff; }
.nav-collapse .icn { font-size: 16px; }
.sidebar, .main { transition: width .3s cubic-bezier(.22,1,.36,1), margin-left .3s cubic-bezier(.22,1,.36,1), transform .25s ease; }
.sidebar-foot .sf-text { line-height: 1.45; }

@media (min-width: 961px) {
  .nav-mini { --sidebar-w: 78px; }
  .nav-mini .brand { flex-direction: column; justify-content: center; gap: 12px; padding: 20px 0 22px; }
  .nav-mini .brand-link > div { display: none; }
  .nav-mini .nav-collapse { transform: rotate(180deg); }
  .nav-mini .nav { padding: 0 14px; overflow: visible; }
  .nav-mini .nav a { justify-content: center; padding: 11px 0; }
  .nav-mini .nav a > span:not(.badge-count) { display: none; }
  .nav-mini .nav a .badge-count { position: absolute; top: 5px; right: 7px; min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0; line-height: 0; border: 2px solid #04344A; }
  .nav-mini .mod .nav a:hover, .mod.nav-mini .nav a:hover { transform: none; }
  /* Infobulle avec le nom de la page */
  .nav-mini .nav a::after {
    content: attr(data-label); position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-6px, -50%);
    padding: 7px 12px; border-radius: 10px; background: #04344A; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .15s, transform .2s; z-index: 60;
  }
  .nav-mini .nav a:hover::after { opacity: 1; transform: translate(0, -50%); }
  .nav-mini .sidebar { overflow: visible; }
  .nav-mini .sidebar-foot { padding: 8px; margin: 12px 10px; }
  .nav-mini .sidebar-foot .sf-text { display: none; }
  .nav-mini .sidebar-foot .btn { margin: 0; padding: 0; height: 40px; }
  .nav-mini .sidebar-foot .btn span { display: none; }
  .nav-mini .sidebar-foot .btn .icn { font-size: 18px; }
}
@media (max-width: 960px) { .nav-collapse { display: none; } }

/* ---------- Bouton clair / sombre ---------- */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle .icn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; line-height: 1; transition: transform .5s var(--spring, ease), opacity .3s; }
.theme-toggle .th-sun { opacity: 0; transform: rotate(-90deg) scale(.4); color: #F2B134; }
.theme-toggle .th-moon { color: var(--text-2); }
[data-theme="dark"] .theme-toggle .th-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
[data-theme="dark"] .theme-toggle .th-sun { opacity: 1; transform: none; }
.theme-toggle:hover .th-moon { transform: rotate(-20deg) scale(1.1); }
[data-theme="dark"] .theme-toggle:hover .th-sun { transform: rotate(45deg) scale(1.1); }
.t-to-light { display: none; }
[data-theme="dark"] .t-to-light { display: inline; }
[data-theme="dark"] .t-to-dark { display: none; }
.login-form { position: relative; }
.login-theme { position: absolute; top: 18px; right: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(8,36,48,.08), 0 0 0 1px var(--border); }

/* Dévoilement circulaire lors du changement de thème */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal .55s cubic-bezier(.22,1,.36,1); }
@keyframes theme-reveal { from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 30px)); } to { clip-path: circle(150vmax at var(--vt-x, 90%) var(--vt-y, 30px)); } }

/* ==========================================================
   Mode sombre
   ========================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #051820; --surface: #0A222C; --surface-2: #0F2B36;
  --border: rgba(255,255,255,.08); --border-2: rgba(255,255,255,.13);
  --text: #E6EEF0; --text-2: #B9C5C9; --muted: #879499; --muted-2: #67757A;
  --primary: #4AA3A6; --primary-600: #2A9599; --primary-700: #A2D4CB;
  --primary-50: rgba(74,163,166,.08); --primary-100: rgba(74,163,166,.16); --primary-200: rgba(74,163,166,.32);
  --warn: #F2B65A; --warn-bg: rgba(242,182,90,.12); --danger: #F28B82; --danger-bg: rgba(242,139,130,.12);
  --info: #94B8F5; --info-bg: rgba(148,184,245,.12);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.8);
  --line-m: rgba(255,255,255,.07);
  --sh-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 28px -14px rgba(0,0,0,.75);
  --sh-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -18px rgba(0,0,0,.85);
  scrollbar-color: #2C383D transparent;
}
[data-theme="dark"] body, [data-theme="dark"].mod body {
  background: radial-gradient(1100px 520px at 105% -8%, rgba(74,163,166,.10), transparent 60%), radial-gradient(800px 480px at -10% 108%, rgba(91,192,194,.06), transparent 60%), #051820;
  background-attachment: fixed;
}
[data-theme="dark"] ::selection { background: rgba(74,163,166,.35); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2C383D; border: 3px solid transparent; background-clip: padding-box; }

/* Menu latéral un peu plus profond */
[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #0C3D52 0%, #08303F 100%); box-shadow: 1px 0 0 rgba(91,192,194,.22), 8px 0 18px -2px rgba(0,0,0,.6), 24px 0 50px -10px rgba(0,0,0,.7); }

/* Surfaces qui étaient blanches */
[data-theme="dark"] :is(.dropdown-panel, .modal, .btn-outline, .btn-outline-green, .btn-danger-outline, .input, .select, .textarea, .tab, .cat-tile, .p-card, .qty, .opt, .pay-option, .method, .acc, .m-select-btn, .login-theme) { background-color: var(--surface); }
[data-theme="dark"] .search .input, [data-theme="dark"].mod .topbar .search .input { background: rgba(255,255,255,.04); }
[data-theme="dark"] .search-big .input { background: var(--surface); }
[data-theme="dark"] :is(.input, .select, .textarea, .m-select-btn, .qty) { border-color: var(--border-2); }
[data-theme="dark"] :is(.input, .select, .textarea, .m-select-btn):hover { border-color: rgba(255,255,255,.22); }
[data-theme="dark"] .qty input { background: transparent; color: var(--text); border-color: var(--border); }
[data-theme="dark"].mod .topbar, [data-theme="dark"] .topbar { background: rgba(16,24,28,.72); }
[data-theme="dark"].mod .topbar .search::after { background: var(--surface-2); border-color: var(--border-2); color: var(--muted); }
[data-theme="dark"].mod .dropdown-panel, [data-theme="dark"] .m-select-menu { background: rgba(16,24,28,.96); border-color: var(--border); }
[data-theme="dark"].mod .tab { background: rgba(255,255,255,.04); }
[data-theme="dark"].mod .tab:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"].mod .tab.active { background: var(--grad); }
[data-theme="dark"].mod .tab.active .n { background: rgba(255,255,255,.22); }
[data-theme="dark"].mod .tab .n { background: rgba(255,255,255,.08); }
[data-theme="dark"].mod .table th, [data-theme="dark"] .table th { background: rgba(16,24,28,.92); }
[data-theme="dark"].mod .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px rgba(74,163,166,.45); }
[data-theme="dark"] .icon-btn .dot { border-color: var(--surface); }
[data-theme="dark"] .p-img .tag { background: rgba(16,24,28,.85) !important; }
[data-theme="dark"].mod .p-price { color: #5BC0C2; }
[data-theme="dark"].mod .pd .price { background: linear-gradient(90deg, #5BC0C2, #4AA3A6); -webkit-background-clip: text; background-clip: text; }
[data-theme="dark"].mod .step .n, [data-theme="dark"] .step .n { background: rgba(255,255,255,.08); }
[data-theme="dark"] .progress { background: rgba(255,255,255,.08); }
[data-theme="dark"] .switch span { background: rgba(255,255,255,.18); }
[data-theme="dark"] .tl-item::before { background: var(--surface); }
[data-theme="dark"] .alert-warn { color: var(--warn); }
[data-theme="dark"] .alert-info { color: var(--info); }
[data-theme="dark"] .cat-tile .ci { background: color-mix(in srgb, var(--c) 18%, transparent); color: color-mix(in srgb, var(--c) 65%, #fff); }
[data-theme="dark"] .empty .ic { background: linear-gradient(140deg, rgba(74,163,166,.18), rgba(74,163,166,.04)); }
[data-theme="dark"] .img-fallback { filter: brightness(.6) saturate(1.2); }
[data-theme="dark"] .stat::after { background: radial-gradient(closest-side, rgba(74,163,166,.10), transparent); }
[data-theme="dark"] .modal-back, [data-theme="dark"].mod .modal-back { background: rgba(0,0,0,.55); }
[data-theme="dark"] .toast, [data-theme="dark"].mod .toast { background: rgba(26,41,48,.95); box-shadow: 0 0 0 1px rgba(255,255,255,.06), var(--shadow-lg); }
[data-theme="dark"] .mlogo.has-img { box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
[data-theme="dark"] .login-box .logo-top { content: url('../img/logos/lemultiservice-blanc.png'); }
[data-theme="dark"] .acc:hover { background: var(--primary-50); }

/* Statuts : fonds translucides */
[data-theme="dark"] .b-green { background: rgba(74,163,166,.14); }
[data-theme="dark"] .b-warn { background: rgba(242,182,90,.13); }
[data-theme="dark"] .b-info { background: rgba(148,184,245,.13); }
[data-theme="dark"] .b-danger { background: rgba(242,139,130,.13); }
[data-theme="dark"] .b-grey { background: rgba(255,255,255,.07); color: var(--text-2); }
[data-theme="dark"] .b-purple { background: rgba(142,92,240,.18); color: #C4A8FF; }
[data-theme="dark"] .badge.st[data-st="ok"]::after { background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); }