/* ============================================================
   IGGEP — Design System v3 | Ultra Premium Dark
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ================================================================
   CSS CUSTOM PROPERTIES
   ================================================================ */
:root {
  /* === Backgrounds === */
  --bg-deep:     #07080F;
  --bg-base:     #0D0F1C;
  --surface-1:   #111420;
  --surface-2:   #171A2E;
  --surface-3:   #1E2138;
  --surface-4:   #252843;

  /* === Borders === */
  --border:       rgba(255,255,255,0.07);
  --border-soft:  rgba(255,255,255,0.04);
  --border-focus: rgba(124,111,247,0.5);

  /* === Brand (Purple-Indigo) === */
  --brand:        #7C6FF7;
  --brand-2:      #6358E8;
  --brand-3:      #9D93FA;
  --brand-glow:   rgba(124,111,247,0.28);
  --brand-bg:     rgba(124,111,247,0.10);
  --brand-bg2:    rgba(124,111,247,0.06);

  /* === Accent (Electric Blue) === */
  --accent:       #4F9EFF;
  --accent-glow:  rgba(79,158,255,0.25);
  --accent-bg:    rgba(79,158,255,0.10);

  /* === Text === */
  --text-1:      #EEF0FF;
  --text-2:      #A0A8C8;
  --text-3:      #5A6280;
  --text-4:      #333857;

  /* === Semantic Colors === */
  --green:       #2ECC8F;
  --green-dim:   #1A7A52;
  --green-bg:    rgba(46,204,143,0.12);
  --green-glow:  rgba(46,204,143,0.3);

  --red:         #FF4D6D;
  --red-dim:     #8B2035;
  --red-bg:      rgba(255,77,109,0.12);
  --red-glow:    rgba(255,77,109,0.25);

  --yellow:      #FFBE3D;
  --yellow-bg:   rgba(255,190,61,0.12);

  --cyan:        #22D4F5;
  --cyan-bg:     rgba(34,212,245,0.12);

  --orange:      #FF7F3D;
  --orange-bg:   rgba(255,127,61,0.12);

  --pink:        #F06292;
  --pink-bg:     rgba(240,98,146,0.12);

  /* === Layout === */
  --sidebar-w:   256px;
  --sidebar-col: 68px;
  --header-h:    60px;

  /* === Radii === */
  --r-xs:   4px;
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* === Shadows === */
  --sh-sm:   0 1px 3px rgba(0,0,0,0.5);
  --sh:      0 4px 20px rgba(0,0,0,0.5);
  --sh-lg:   0 12px 40px rgba(0,0,0,0.6);
  --sh-xl:   0 24px 60px rgba(0,0,0,0.7);
  --sh-brand: 0 8px 30px rgba(124,111,247,0.35);
  --sh-green: 0 8px 30px rgba(46,204,143,0.25);

  /* === Motion === */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur: 0.22s;
  --dur-slow: 0.35s;

  /* Font */
  --font: 'Poppins', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

/* ================================================================
   LEGACY VARIABLE ALIASES — old names used in inline styles / modules
   ================================================================ */
:root {
  /* Old name → new */
  --bg:              var(--bg-base);
  --bg-base-alt:     var(--bg-deep);
  --surface:         var(--surface-1);
  --surface-light:   var(--surface-2);

  --text:            var(--text-1);
  --text-muted:      var(--text-2);
  --text-faint:      var(--text-3);

  --brand-light:     var(--brand-3);
  --brand-dark:      var(--brand-2);
  --brand-subtle:    var(--brand-bg);
  --brand-xl-light:  var(--brand-bg2);

  --primary:         var(--brand);
  --primary-light:   var(--brand-3);
  --primary-dark:    var(--brand-2);
  --primary-glow:    var(--brand-glow);
  --primary-bg:      var(--brand-bg);

  --success:         var(--green);
  --success-light:   var(--green-bg);
  --success-glow:    var(--green-glow);

  --danger:          var(--red);
  --danger-light:    var(--red-bg);
  --danger-glow:     var(--red-glow);

  --warning:         var(--yellow);
  --warning-light:   var(--yellow-bg);

  --info:            var(--accent);
  --info-light:      var(--accent-bg);
  --info-glow:       var(--accent-glow);

  --purple:          #9D4EE8;
  --purple-light:    rgba(157,78,232,0.12);
  --purple-dim:      #6B21A8;

  --green-light:     var(--green-bg);
  --red-light:       var(--red-bg);
  --yellow-light:    var(--yellow-bg);
  --cyan-light:      var(--cyan-bg);

  /* Gray scale compat */
  --gray-50:    var(--surface-2);
  --gray-100:   var(--surface-3);
  --gray-200:   var(--surface-4);
  --gray-300:   rgba(255,255,255,0.10);
  --gray-500:   var(--text-3);
  --gray-600:   var(--text-3);
  --gray-700:   var(--text-2);
  --gray-800:   var(--text-2);
  --gray-900:   var(--text-1);

  /* Transition compat */
  --tr:           var(--dur) var(--ease);
  --transition:   all var(--dur) var(--ease);
  --tr-fast:      var(--dur-fast) var(--ease);

  /* Radius compat */
  --radius:       var(--r);
  --radius-sm:    var(--r-sm);
  --radius-lg:    var(--r-lg);
  --radius-full:  var(--r-full);

  /* Shadow compat */
  --shadow:       var(--sh);
  --shadow-sm:    var(--sh-sm);
  --shadow-lg:    var(--sh-lg);
  --shadow-xl:    var(--sh-xl);

  /* Font compat */
  --font-mono:    var(--mono);
}

/* Light mode override */
[data-theme="light"] {
  --bg-deep:    #F0F2FA;
  --bg-base:    #F5F7FE;
  --surface-1:  #FFFFFF;
  --surface-2:  #F0F3FD;
  --surface-3:  #E8ECFA;
  --surface-4:  #DDE3F7;

  --border:      rgba(0,0,0,0.08);
  --border-soft: rgba(0,0,0,0.04);
  --border-focus: rgba(124,111,247,0.5);

  --text-1: #0D0F1C;
  --text-2: #3D4470;
  --text-3: #7882AE;
  --text-4: #A8B0D0;

  --sh-sm:  0 1px 3px rgba(0,0,0,0.06);
  --sh:     0 4px 20px rgba(0,0,0,0.06);
  --sh-lg:  0 12px 40px rgba(0,0,0,0.08);
  --sh-xl:  0 24px 60px rgba(0,0,0,0.10);
}

/* ================================================================
   RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-1);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply theme transitions only after JS loads */
body.theme-ready,
body.theme-ready .sidebar,
body.theme-ready .topbar,
body.theme-ready .card,
body.theme-ready .surface-1 {
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

a { color: var(--brand-3); text-decoration: none; transition: color var(--dur) var(--ease); }
img, video, canvas, svg { max-width: 100%; display: block; }
button { font-family: var(--font); cursor: pointer; border: none; outline: none; background: none; }
input, select, textarea { font-family: var(--font); }
ul, ol { list-style: none; }

/* === Prévention du débordement global === */
.grid > *, [class*="grid-"] > * { min-width: 0; min-height: 0; }
pre, code { overflow-x: auto; max-width: 100%; white-space: pre-wrap; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* Selection */
::selection { background: var(--brand-bg); color: var(--brand-3); }

/* ================================================================
   LAYOUT
   ================================================================ */
.app-layout { display: flex; min-height: 100vh; width: 100%; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  height: 100vh;
  position: fixed;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  transition: width var(--dur) var(--ease),
              min-width var(--dur) var(--ease);
}

.sidebar.collapsed {
  width: var(--sidebar-col);
  min-width: var(--sidebar-col);
}

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
}

.sb-logo {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--brand), #9D4EE8);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--brand-glow);
  letter-spacing: -.5px;
}

.sb-brand-text { overflow: hidden; white-space: nowrap; }
.sb-brand-text .sb-name {
  display: block;
  font-size: .95rem; font-weight: 700;
  color: var(--text-1); line-height: 1.2;
}
.sb-brand-text .sb-sub {
  display: block;
  font-size: .65rem; color: var(--text-3);
  margin-top: 1px;
}

.sidebar.collapsed .sb-brand-text { display: none; }

/* NAV */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
}
.sidebar-nav::-webkit-scrollbar { width: 0; }

/* Group */
.nav-section {
  padding: 0 10px;
  margin-bottom: 2px;
}

.nav-section-title {
  display: flex;
  align-items: center;
  padding: 8px 8px 4px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

.sidebar.collapsed .nav-section-title {
  visibility: hidden;
  height: 16px;
  padding: 0;
  margin: 4px 0;
}

/* Nav item */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: .83rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 1px;
  min-height: 38px;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text-2);
}

.nav-item.active {
  background: var(--brand-bg);
  color: var(--brand-3);
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--brand);
  border-radius: 0 3px 3px 0;
}

/* Icon */
.nav-item .ni {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  font-size: .88rem;
  color: var(--text-3);
  transition: color var(--dur-fast) var(--ease);
}

.nav-item:hover .ni  { color: var(--text-2); }
.nav-item.active .ni { color: var(--brand);  }

/* Label */
.nav-item .nl {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--red);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.sidebar.collapsed .nav-item .nl,
.sidebar.collapsed .nav-badge { display: none; }

.sidebar.collapsed .nav-item { justify-content: center; padding: 9px; }

/* Tooltip on hover when collapsed */
.sidebar.collapsed .nav-item {
  position: relative;
}
.sidebar.collapsed .nav-item::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%; transform: translateY(-50%);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: .78rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast);
  box-shadow: var(--sh);
  z-index: 99999;
}
.sidebar.collapsed .nav-item:hover::after { opacity: 1; }

/* Sidebar footer */
.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: 10px;
  flex-shrink: 0;
}

.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
  overflow: hidden;
}
.sb-user:hover { background: var(--surface-2); }

.sb-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #9D4EE8);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--brand-bg);
}
.sb-av img { width: 100%; height: 100%; object-fit: cover; }

.sb-user-info { overflow: hidden; }
.sb-user-info .sn {
  display: block;
  font-size: .78rem; font-weight: 600;
  color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.sb-user-info .sr {
  font-size: .65rem; color: var(--text-3);
  display: block; white-space: nowrap;
}

.sidebar.collapsed .sb-user-info { display: none; }
.sidebar.collapsed .sb-user { justify-content: center; padding: 8px; }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 999;
}
.sidebar-overlay.show { display: block; }

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  transition: margin-left var(--dur) var(--ease);
}

.main-content.collapsed-mode { margin-left: var(--sidebar-col); }

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
  height: var(--header-h);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 900;
  flex-shrink: 0;
}

.tb-toggle {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; color: var(--text-3);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  flex-shrink: 0;
}
.tb-toggle:hover { background: var(--brand-bg); color: var(--brand-3); border-color: var(--border-focus); }

.tb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--text-3);
  overflow: hidden;
}
.tb-breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.tb-breadcrumb a:hover { color: var(--text-2); }
.tb-breadcrumb .sep { font-size: .55rem; color: var(--border); }
.tb-breadcrumb .cur { color: var(--text-1); font-weight: 600; font-size: .8rem; white-space: nowrap; }

.tb-spacer { flex: 1; }

/* Search */
.tb-search {
  position: relative;
  flex: 1;
  max-width: 280px;
}
.tb-search input {
  width: 100%;
  padding: 8px 14px 8px 34px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: .8rem; font-family: var(--font);
  color: var(--text-1); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.tb-search input:focus {
  border-color: var(--border-focus);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.tb-search input::placeholder { color: var(--text-3); }
.tb-search .si {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: .8rem; pointer-events: none;
}

/* Topbar actions */
.tb-actions { display: flex; align-items: center; gap: 5px; }

.tb-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; color: var(--text-3);
  cursor: pointer; transition: all var(--dur-fast);
  position: relative; flex-shrink: 0;
}
.tb-btn:hover { background: var(--brand-bg); color: var(--brand-3); border-color: var(--border-focus); }

.tb-btn .badge-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); border: 1.5px solid var(--surface-1);
}

.tb-lang-btn {
  padding: 0 12px; height: 34px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: .75rem; font-weight: 600; font-family: var(--font);
  color: var(--text-3); cursor: pointer;
  transition: all var(--dur-fast);
  display: flex; align-items: center; gap: 5px;
}
.tb-lang-btn:hover { background: var(--brand-bg); color: var(--brand-3); border-color: var(--border-focus); }

/* User button */
.tb-user {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--dur-fast);
  flex-shrink: 0;
}
.tb-user:hover { border-color: var(--border-focus); background: var(--brand-bg); }

.tb-user-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #9D4EE8);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff;
  overflow: hidden; flex-shrink: 0;
}
.tb-user-av img { width: 100%; height: 100%; object-fit: cover; }

.tb-user-text { line-height: 1.2; }
.tb-user-text .tu-name { font-size: .78rem; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.tb-user-text .tu-role { font-size: .64rem; color: var(--text-3); white-space: nowrap; }

@media (max-width: 768px) {
  .tb-user-text { display: none; }
  .tb-search { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
}

/* ================================================================
   PAGE
   ================================================================ */
.page-content { flex: 1; padding: 22px 24px; min-width: 0; overflow-x: hidden; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.page-content { animation: fadeUp 0.3s var(--ease-out) both; }

.page-hdr {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px; gap: 12px; flex-wrap: wrap;
}
.page-hdr-l h2 {
  font-size: 1.35rem; font-weight: 700; color: var(--text-1);
  display: flex; align-items: center; gap: 10px; line-height: 1.2;
}
.page-hdr-l h2 .ph-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; background: var(--brand-bg);
  color: var(--brand-3); flex-shrink: 0;
}
.page-hdr-l p { font-size: .8rem; color: var(--text-3); margin-top: 3px; }
.page-hdr-r { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ================================================================
   CARDS
   ================================================================ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.card-title {
  font-size: .875rem; font-weight: 600; color: var(--text-1);
  display: flex; align-items: center; gap: 8px;
}
.card-title i { color: var(--brand); font-size: .85rem; }

.card-body { padding: 18px; }
.card-foot {
  padding: 11px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  font-size: .75rem; color: var(--text-3);
}

/* ================================================================
   STAT CARDS
   ================================================================ */
.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  min-width: 0; /* évite le débordement dans les grilles */
  box-sizing: border-box;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}

/* Top accent bar (rectangle, no boule) */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r) var(--r) 0 0;
  pointer-events: none;
}
.stat-card.s-green::before  { background: var(--green);  }
.stat-card.s-red::before    { background: var(--red);    }
.stat-card.s-brand::before  { background: var(--brand);  }
.stat-card.s-yellow::before { background: var(--yellow); }
.stat-card.s-accent::before { background: var(--accent); }
.stat-card.s-cyan::before   { background: var(--cyan);   }
.stat-card.s-orange::before { background: var(--orange); }
.stat-card.s-pink::before   { background: var(--pink);   }

.sc-top { display: flex; align-items: flex-start; justify-content: space-between; }

/* Icon */
.sc-icon {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.sc-icon.s-green  { background: var(--green-bg);  color: var(--green);  }
.sc-icon.s-red    { background: var(--red-bg);    color: var(--red);    }
.sc-icon.s-brand  { background: var(--brand-bg);  color: var(--brand-3);}
.sc-icon.s-yellow { background: var(--yellow-bg); color: var(--yellow); }
.sc-icon.s-accent { background: var(--accent-bg); color: var(--accent); }
.sc-icon.s-cyan   { background: var(--cyan-bg);   color: var(--cyan);   }
.sc-icon.s-orange { background: var(--orange-bg); color: var(--orange); }
.sc-icon.s-pink   { background: var(--pink-bg);   color: var(--pink);   }

/* Trend badge */
.sc-trend {
  display: flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-full);
}
.sc-trend.up   { background: var(--green-bg);  color: var(--green);  }
.sc-trend.down { background: var(--red-bg);    color: var(--red);    }
.sc-trend.flat { background: var(--surface-3); color: var(--text-3); }

/* Values */
.sc-val {
  font-size: 1.6rem; font-weight: 800;
  color: var(--text-1); line-height: 1;
  letter-spacing: -0.5px;
}
.sc-label { font-size: .78rem; font-weight: 500; color: var(--text-3); }
.sc-sub   { font-size: .71rem; color: var(--text-4); }

/* Mini bar */
.sc-bar { height: 4px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; }
.sc-bar-fill { height: 100%; border-radius: var(--r-full); transition: width 1.4s var(--ease-out); }

/* Sparkline area */
.sc-spark { height: 40px; margin-top: 4px; }

/* ================================================================
   GRID
   ================================================================ */
.grid  { display: grid; gap: 16px; }
.grid > * { min-width: 0; min-height: 0; }
.g-2  { grid-template-columns: repeat(2,1fr); }
.g-3  { grid-template-columns: repeat(3,1fr); }
.g-4  { grid-template-columns: repeat(4,1fr); }
.g-5  { grid-template-columns: repeat(5,1fr); }
.g-6  { grid-template-columns: repeat(6,1fr); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

@media (max-width:1280px) { .g-5,.g-6 { grid-template-columns: repeat(3,1fr); } }
@media (max-width:1024px) { .g-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px) { .g-3,.g-4,.g-5,.g-6 { grid-template-columns: repeat(2,1fr); } .span-2,.span-3 { grid-column: span 1; } }
@media (max-width: 580px) { .g-2,.g-3,.g-4,.g-5,.g-6 { grid-template-columns: 1fr; } }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 9px 18px;
  border-radius: var(--r-sm);
  font-family: var(--font); font-size: .83rem; font-weight: 600;
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
  border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; line-height: 1.2;
  letter-spacing: .01em; user-select: none;
}
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn-sm  { padding: 6px 13px; font-size: .77rem; }
.btn-lg  { padding: 11px 22px; font-size: .9rem;  }
.btn-xl  { padding: 14px 28px; font-size: .95rem; }
.btn-icon { padding: 9px; border-radius: var(--r-sm); }
.btn-icon.btn-sm { padding: 6px; }

.btn-brand {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 4px 14px var(--brand-glow);
}
.btn-brand:hover { background: var(--brand-2); border-color: var(--brand-2); transform: translateY(-1px); box-shadow: 0 6px 20px var(--brand-glow); }

.btn-green {
  background: var(--green); color: #0D0F1C; border-color: var(--green);
  box-shadow: 0 4px 14px var(--green-glow);
}
.btn-green:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 20px var(--green-glow); }

.btn-red   { background: var(--red);    color: #fff; border-color: var(--red);    box-shadow: 0 4px 14px var(--red-glow);   }
.btn-red:hover   { filter: brightness(1.1); transform: translateY(-1px); }

.btn-yellow { background: var(--yellow); color: #0D0F1C; border-color: var(--yellow); }
.btn-yellow:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 14px var(--accent-glow); }
.btn-accent:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-ghost {
  background: transparent; color: var(--text-3); border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text-1); border-color: var(--border); }

.btn-surface {
  background: var(--surface-2); color: var(--text-2); border-color: var(--border);
}
.btn-surface:hover { background: var(--surface-3); color: var(--text-1); }

.btn-outline {
  background: transparent; color: var(--brand-3); border-color: var(--brand);
}
.btn-outline:hover { background: var(--brand-bg); }

.btn-outline-red {
  background: transparent; color: var(--red); border-color: var(--red);
}
.btn-outline-red:hover { background: var(--red-bg); }

/* ================================================================
   FORMS
   ================================================================ */
.form-group { margin-bottom: 16px; }
.form-row { display: flex; gap: 14px; }
.form-row .form-group { flex: 1; }

@media (max-width:600px) { .form-row { flex-direction: column; gap: 0; } }

.form-label {
  display: block;
  font-size: .76rem; font-weight: 600; color: var(--text-2);
  margin-bottom: 6px; letter-spacing: .02em;
}
.form-label .req { color: var(--red); margin-left: 2px; }

.fc {
  width: 100%; padding: 10px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font); font-size: .845rem;
  color: var(--text-1); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  line-height: 1.5;
}
.fc:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--brand-glow);
  background: var(--surface-2);
}
.fc::placeholder { color: var(--text-4); }
.fc:disabled { opacity: .5; cursor: not-allowed; }
.fc.is-err { border-color: var(--red); }
.fc.is-ok  { border-color: var(--green); }

textarea.fc { resize: vertical; min-height: 90px; }
select.fc   { cursor: pointer; }
select.fc option { background: var(--surface-2); color: var(--text-1); }

/* Input group */
.in-group { display: flex; }
.in-group .fc { border-radius: 0; }
.in-group .fc:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: none; }
.in-group .fc:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.in-addon {
  padding: 10px 13px;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: .83rem; color: var(--text-3);
  display: flex; align-items: center; white-space: nowrap;
}
.in-addon:first-child { border-right: none; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.in-addon:last-child  { border-left: none;  border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.form-hint  { font-size: .71rem; color: var(--text-3); margin-top: 4px; }
.form-error { font-size: .71rem; color: var(--red);    margin-top: 4px; }

/* Checkbox */
.f-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.f-check input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.f-check-label { font-size: .82rem; color: var(--text-2); cursor: pointer; }

/* ================================================================
   TABLES
   ================================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: .83rem; }

.table th {
  padding: 10px 15px;
  text-align: left;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-3); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: 11px 15px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover td { background: var(--surface-2); color: var(--text-1); }
.table tbody tr:last-child td { border-bottom: none; }

/* ================================================================
   BADGES
   ================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .3px; white-space: nowrap;
  border: 1px solid transparent;
}

.b-brand  { background: var(--brand-bg);  color: var(--brand-3); border-color: rgba(124,111,247,.2); }
.b-green  { background: var(--green-bg);  color: var(--green);   border-color: rgba(46,204,143,.2);  }
.b-red    { background: var(--red-bg);    color: var(--red);     border-color: rgba(255,77,109,.2);  }
.b-yellow { background: var(--yellow-bg); color: var(--yellow);  border-color: rgba(255,190,61,.2);  }
.b-cyan   { background: var(--cyan-bg);   color: var(--cyan);    border-color: rgba(34,212,245,.2);  }
.b-orange { background: var(--orange-bg); color: var(--orange);  border-color: rgba(255,127,61,.2);  }
.b-pink   { background: var(--pink-bg);   color: var(--pink);    border-color: rgba(240,98,146,.2);  }
.b-accent { background: var(--accent-bg); color: var(--accent);  border-color: rgba(79,158,255,.2);  }
.b-gray   { background: var(--surface-3); color: var(--text-3);  border-color: var(--border);        }

.badge.dot::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; display: inline-block; flex-shrink: 0;
}

/* ================================================================
   MODALS
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  transform: scale(0.95) translateY(12px);
  transition: transform var(--dur) var(--ease-spring);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-sm { max-width: 420px; }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 960px; }

.modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface-1); z-index: 1;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.modal-title {
  font-size: .9rem; font-weight: 700; color: var(--text-1);
  display: flex; align-items: center; gap: 9px;
}
.modal-title i { color: var(--brand); }
.modal-header[style*="gradient"] .modal-title,
.modal-header[style*="gradient"] .modal-title i { color: #fff !important; }
.modal-close {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; color: var(--text-3);
  cursor: pointer; transition: all var(--dur-fast);
}
.modal-close:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.modal-body { padding: 20px; }
.modal-ftr {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* Aliases for backward compat */
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-1); z-index: 1; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ================================================================
   TOASTS
   ================================================================ */
.toast-container {
  position: fixed; top: 16px; right: 16px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  box-shadow: var(--sh-lg);
  min-width: 280px; max-width: 380px;
  pointer-events: all;
  position: relative; overflow: hidden;
  animation: toastIn .28s var(--ease-spring) both;
}
.toast.removing { animation: toastOut .22s var(--ease) forwards; }

@keyframes toastIn  { from { opacity:0; transform:translateX(110%); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { to   { opacity:0; transform:translateX(110%); } }

.toast-stripe { position: absolute; left:0; top:0; bottom:0; width:3px; }
.t-green .toast-stripe  { background: var(--green);  }
.t-red   .toast-stripe  { background: var(--red);    }
.t-yellow .toast-stripe { background: var(--yellow); }
.t-brand .toast-stripe  { background: var(--brand);  }

.toast-icon { font-size: .95rem; flex-shrink:0; margin-top:2px; }
.t-green  .toast-icon { color: var(--green);  }
.t-red    .toast-icon { color: var(--red);    }
.t-yellow .toast-icon { color: var(--yellow); }
.t-brand  .toast-icon { color: var(--brand-3);}

.toast-body { flex:1; }
.toast-t { font-size:.82rem; font-weight:700; color:var(--text-1); }
.toast-m { font-size:.76rem; color:var(--text-2); margin-top:1px; line-height:1.4; }
.toast-x { background:none; border:none; cursor:pointer; color:var(--text-3); font-size:.85rem; padding:0; flex-shrink:0; }
.toast-x:hover { color:var(--text-1); }
.toast-prog { position:absolute; bottom:0; left:0; height:2px; animation: toastProg linear; }
.t-green  .toast-prog { background: var(--green);  }
.t-red    .toast-prog { background: var(--red);    }
.t-yellow .toast-prog { background: var(--yellow); }
.t-brand  .toast-prog { background: var(--brand);  }
@keyframes toastProg { from{width:100%} to{width:0} }

/* ================================================================
   DROPDOWNS
   ================================================================ */
.dropdown { position: relative; }
.dd-menu {
  position: absolute; right:0; top: calc(100% + 6px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  min-width: 200px; z-index: 9000;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transition: all var(--dur-fast) var(--ease);
  overflow: hidden;
}
.dd-menu.open { opacity:1; pointer-events:all; transform: translateY(0) scale(1); }
.dd-menu.left { right:auto; left:0; }

.dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px;
  font-size: .82rem; color: var(--text-2);
  cursor: pointer; transition: background var(--dur-fast);
  text-decoration: none;
  border: none; background: none;
  width: 100%; text-align: left; font-family: var(--font);
}
.dd-item:hover { background: var(--surface-3); color: var(--text-1); }
.dd-item.danger:hover { background: var(--red-bg); color: var(--red); }
.dd-item i { width:15px; color:var(--text-3); flex-shrink:0; font-size:.82rem; }
.dd-item:hover i { color: inherit; }
.dd-divider { height:1px; background:var(--border); margin:3px 0; }

/* ================================================================
   NOTIF PANEL
   ================================================================ */
.notif-panel {
  position: absolute; right:0; top: calc(100% + 8px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  width: 330px; z-index: 9000;
  opacity:0; pointer-events:none;
  transform: translateY(-8px) scale(.97);
  transition: all var(--dur) var(--ease);
}
.notif-panel.open { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }

.np-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border-bottom: 1px solid var(--border);
}
.np-hdr h5 { font-size:.875rem; color:var(--text-1); font-weight:600; display:flex; align-items:center; gap:7px; }
.np-hdr h5 i { color:var(--brand); }
.np-read-all { font-size:.72rem; color:var(--brand-3); font-weight:600; background:none; border:none; cursor:pointer; }

.np-list { max-height:320px; overflow-y:auto; }

.np-item {
  display: flex; gap: 10px; padding: 11px 15px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; transition: background var(--dur-fast);
}
.np-item:hover { background: var(--surface-3); }
.np-item.unread { background: var(--brand-bg2); }
.np-item.unread:hover { background: var(--brand-bg); }

.np-ico {
  width: 32px; height: 32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; flex-shrink:0;
}
.np-ico.c-brand  { background:var(--brand-bg); color:var(--brand-3); }
.np-ico.c-green  { background:var(--green-bg); color:var(--green);   }
.np-ico.c-yellow { background:var(--yellow-bg);color:var(--yellow);  }
.np-ico.c-red    { background:var(--red-bg);   color:var(--red);     }

.np-cnt .nt { font-size:.78rem; font-weight:600; color:var(--text-1); }
.np-cnt .nm { font-size:.73rem; color:var(--text-3); margin-top:1px; line-height:1.4; }
.np-cnt .nd { font-size:.67rem; color:var(--text-4); margin-top:2px; }

.np-ftr { padding:10px 15px; text-align:center; }
.np-ftr a { font-size:.76rem; color:var(--brand-3); font-weight:600; }

/* ================================================================
   TABS
   ================================================================ */
.tabs {
  display:flex; gap:3px; padding:3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width:fit-content;
}
.tab-btn {
  padding:6px 14px;
  border-radius:6px;
  font-size:.78rem; font-weight:500;
  color:var(--text-3); cursor:pointer;
  transition: all var(--dur-fast);
  border:none; background:none; font-family:var(--font);
  white-space:nowrap;
}
.tab-btn:hover { color:var(--text-2); }
.tab-btn.active {
  background: var(--surface-1);
  color: var(--brand-3);
  font-weight: 600;
  border: 1px solid var(--border);
}
.tab-content { display:none; }
.tab-content.active { display:block; animation: fadeUp .2s var(--ease-out) both; }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 18px; border-top:1px solid var(--border-soft);
  font-size:.75rem; color:var(--text-3);
}
.pag-btns { display:flex; gap:3px; }
.pag-btn {
  width:29px; height:29px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; cursor:pointer; transition:all var(--dur-fast);
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-3);
  font-family:var(--font);
}
.pag-btn:hover { background:var(--brand-bg); color:var(--brand-3); border-color:var(--border-focus); }
.pag-btn.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.pag-btn:disabled { opacity:.3; pointer-events:none; }

/* ================================================================
   FILTERS BAR
   ================================================================ */
.filters-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--border-soft);
  background: var(--surface-2);
}
.search-box { position:relative; flex:1; min-width:170px; max-width:280px; }
.search-box input {
  width:100%; padding:8px 12px 8px 32px;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-full);
  font-family:var(--font); font-size:.8rem;
  color:var(--text-1); outline:none; transition:all var(--dur-fast);
}
.search-box input:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--brand-glow); }
.search-box input::placeholder { color:var(--text-4); }
.search-box i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-4); font-size:.78rem; pointer-events:none; }
.filter-sel {
  padding:8px 11px;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font); font-size:.79rem;
  color:var(--text-2); cursor:pointer; outline:none; transition:all var(--dur-fast);
}
.filter-sel:focus { border-color:var(--border-focus); }
.filter-sel option { background:var(--surface-2); color:var(--text-1); }

/* ================================================================
   FILE DROP
   ================================================================ */
.file-drop {
  border:2px dashed var(--border);
  border-radius:var(--r);
  padding:24px 18px; text-align:center;
  cursor:pointer; transition:all var(--dur);
  background:var(--surface-2);
}
.file-drop:hover, .file-drop.over { border-color:var(--brand); background:var(--brand-bg); }
.file-drop .fd-ico { font-size:1.6rem; color:var(--text-4); margin-bottom:8px; display:block; }
.file-drop h5 { font-size:.82rem; color:var(--text-2); font-weight:600; }
.file-drop p  { font-size:.72rem; color:var(--text-3); margin-top:3px; }
.file-name    { font-size:.76rem; color:var(--brand-3); font-weight:600; margin-top:6px; }
.file-drop input { display:none; }

/* ================================================================
   AVATARS
   ================================================================ */
.av { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; overflow:hidden; flex-shrink:0; }
.av-xs { width:24px; height:24px; font-size:.62rem; }
.av-sm { width:30px; height:30px; font-size:.7rem; }
.av-md { width:38px; height:38px; font-size:.83rem; }
.av-lg { width:50px; height:50px; font-size:1rem; }
.av-xl { width:68px; height:68px; font-size:1.4rem; }
.av-brand  { background: linear-gradient(135deg, var(--brand), #9D4EE8); }
.av-green  { background: linear-gradient(135deg, var(--green-dim), var(--green)); }
.av-red    { background: linear-gradient(135deg, var(--red-dim),  var(--red));   }
.av-accent { background: linear-gradient(135deg, #2563EB, var(--accent)); }
.av-yellow { background: linear-gradient(135deg, #B45309, var(--yellow)); }
.av-cyan   { background: linear-gradient(135deg, #0E7490, var(--cyan)); }
.av img    { width:100%; height:100%; object-fit:cover; }

/* ================================================================
   LOADING
   ================================================================ */
.spinner {
  display:inline-block; border-radius:50%;
  border: 2.5px solid var(--surface-3);
  border-top-color: var(--brand);
  animation: spin .65s linear infinite;
}
.sp-sm { width:16px; height:16px; }
.sp-md { width:24px; height:24px; }
.sp-lg { width:38px; height:38px; border-width:3.5px; }
@keyframes spin { to { transform:rotate(360deg); } }

.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--r-sm);
}
@keyframes shimmer { to { background-position:-200% 0; } }

/* ================================================================
   PROGRESS
   ================================================================ */
.progress { height:5px; background:var(--surface-3); border-radius:var(--r-full); overflow:hidden; }
.pb { height:100%; border-radius:var(--r-full); transition:width 1.4s var(--ease-out); }
.pb-brand  { background: var(--brand);  }
.pb-green  { background: var(--green);  }
.pb-red    { background: var(--red);    }
.pb-yellow { background: var(--yellow); }
.pb-accent { background: var(--accent); }

/* ================================================================
   ALERTS
   ================================================================ */
.alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--r-sm);
  border-left:3px solid; margin-bottom:14px; font-size:.83rem;
  animation: fadeUp .22s var(--ease-out) both;
}
.alert i { flex-shrink:0; margin-top:1px; }
.alert-green  { background:var(--green-bg);  border-color:var(--green);  color:#86EFAC; }
.alert-red    { background:var(--red-bg);    border-color:var(--red);    color:#FCA5A5; }
.alert-yellow { background:var(--yellow-bg); border-color:var(--yellow); color:#FDE68A; }
.alert-brand  { background:var(--brand-bg);  border-color:var(--brand);  color:var(--brand-3); }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state { text-align:center; padding:48px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.empty-ico { width:60px; height:60px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--text-4); }
.empty-state h4 { font-size:.9rem; color:var(--text-2); }
.empty-state p  { font-size:.8rem; color:var(--text-3); max-width:260px; line-height:1.5; }

/* ================================================================
   TRANSACTION ROW
   ================================================================ */
.trx-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.trx-row:last-child { border-bottom:none; }
.trx-ico { width:36px; height:36px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.trx-ico.rev { background:var(--green-bg); color:var(--green); }
.trx-ico.dep { background:var(--red-bg);   color:var(--red);   }
.trx-info { flex:1; }
.trx-info .tt { font-size:.83rem; font-weight:500; color:var(--text-1); }
.trx-info .ts { font-size:.72rem; color:var(--text-3); }
.trx-right { text-align:right; }
.trx-right .ta { font-size:.875rem; font-weight:700; }
.trx-right .ta.rev { color:var(--green); }
.trx-right .ta.dep { color:var(--red);   }
.trx-right .td { font-size:.7rem; color:var(--text-4); }

/* ================================================================
   FOOTER
   ================================================================ */
.app-footer {
  padding:12px 22px; border-top:1px solid var(--border);
  background:var(--surface-1);
  display:flex; align-items:center; justify-content:space-between;
  font-size:.71rem; color:var(--text-4); flex-shrink:0;
}

/* ================================================================
   STEPS
   ================================================================ */
.steps { display:flex; counter-reset:step; }
.step  { flex:1; text-align:center; position:relative; }
.step::after { content:''; position:absolute; top:14px; left:50%; right:-50%; height:2px; background:var(--surface-4); z-index:0; }
.step:last-child::after { display:none; }
.step-c {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700;
  margin:0 auto 6px; position:relative; z-index:1;
  background:var(--surface-3); color:var(--text-3);
  border:2px solid var(--surface-4);
  transition:all var(--dur);
}
.step.active .step-c { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-glow); }
.step.done   .step-c { background:var(--green); color:#000; border-color:var(--green); }
.step.done::after    { background:var(--green); }
.step-lbl { font-size:.68rem; color:var(--text-3); font-weight:500; }
.step.active .step-lbl { color:var(--brand-3); font-weight:600; }
.step.done   .step-lbl { color:var(--green); }

/* ================================================================
   UTILITIES
   ================================================================ */
.d-flex { display:flex; } .d-none { display:none !important; } .d-block { display:block; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; } .items-start { align-items:flex-start; }
.justify-between { justify-content:space-between; } .justify-center { justify-content:center; } .justify-end { justify-content:flex-end; }
.flex-wrap { flex-wrap:wrap; } .flex-1 { flex:1; } .flex-shrink-0 { flex-shrink:0; }
.gap-1{gap:6px;}.gap-2{gap:10px;}.gap-3{gap:16px;}.gap-4{gap:22px;}
.w-full{width:100%;} .h-full{height:100%;}
.text-center{text-align:center;}.text-right{text-align:right;}
.fw-5{font-weight:500;}.fw-6{font-weight:600;}.fw-7{font-weight:700;}.fw-8{font-weight:800;}
.text-1{color:var(--text-1)!important;}.text-2{color:var(--text-2)!important;}.text-3{color:var(--text-3)!important;}.text-4{color:var(--text-4)!important;}
.text-green{color:var(--green)!important;}.text-red{color:var(--red)!important;}.text-yellow{color:var(--yellow)!important;}.text-brand{color:var(--brand-3)!important;}
.mt-1{margin-top:6px;}.mt-2{margin-top:12px;}.mt-3{margin-top:18px;}.mt-4{margin-top:24px;}
.mb-1{margin-bottom:6px;}.mb-2{margin-bottom:12px;}.mb-3{margin-bottom:18px;}.mb-4{margin-bottom:24px;}
.p-0{padding:0;}.p-2{padding:10px;}.p-3{padding:16px;}.p-4{padding:22px;}
.rounded{border-radius:var(--r);}.rounded-full{border-radius:var(--r-full);}
.overflow-hidden{overflow:hidden;}
.mono{font-family:var(--mono);}
.opacity-50{opacity:.5;}

/* Glow pulse animation */
.pulse-glow { animation: pglow 2.5s ease-in-out infinite; }
@keyframes pglow { 0%,100% { box-shadow: 0 0 0 0 var(--brand-glow); } 50% { box-shadow: 0 0 0 8px transparent; } }

/* ================================================================
   RESPONSIVE — MOBILE
   ================================================================ */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); width:var(--sidebar-w) !important; min-width:var(--sidebar-w) !important; transition:transform var(--dur) var(--ease); }
  .sidebar.mobile-open { transform:translateX(0); }
  .main-content { margin-left:0 !important; }
  .page-content { padding:14px; }
  .page-hdr { flex-direction:column; }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  .sidebar,.topbar,.page-hdr-r,.toast-container,.modal-overlay { display:none !important; }
  .main-content { margin-left:0 !important; }
  body,.card,.surface { background:#fff !important; color:#000 !important; }
  .card { border-color:#ddd !important; box-shadow:none !important; }
}

/* ================================================================
   DARK ONLY — force dark theme regardless of localStorage
   ================================================================ */
[data-theme="light"] {
  --bg-deep:     #07080F;
  --bg-base:     #0D0F1C;
  --surface-1:   #111420;
  --surface-2:   #171A2E;
  --surface-3:   #1E2138;
  --surface-4:   #252843;
  --border:       rgba(255,255,255,0.07);
  --border-soft:  rgba(255,255,255,0.04);
  --border-focus: rgba(124,111,247,0.5);
  --text-1:      #EEF0FF;
  --text-2:      #A0A8C8;
  --text-3:      #5A6280;
  --text-4:      #333857;
  --sh-sm:   0 1px 3px rgba(0,0,0,0.5);
  --sh:      0 4px 20px rgba(0,0,0,0.5);
  --sh-lg:   0 12px 40px rgba(0,0,0,0.6);
  --sh-xl:   0 24px 60px rgba(0,0,0,0.7);
}

/* ================================================================
   COMPATIBILITY LAYER — old PHP class names → new CSS design
   ================================================================ */

/* --- Grid compat --- */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.grid-5 { grid-template-columns: repeat(5,1fr); }
.grid-6 { grid-template-columns: repeat(6,1fr); }
@media (max-width:1280px) { .grid-5,.grid-6 { grid-template-columns: repeat(3,1fr); } }
@media (max-width:1024px) { .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:900px)  { .grid-3,.grid-4,.grid-5,.grid-6 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:580px)  { .grid-2,.grid-3,.grid-4,.grid-5,.grid-6 { grid-template-columns: 1fr; } }

/* --- Page header compat --- */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:22px; gap:12px; flex-wrap:wrap;
}
.page-header-left h2 { font-size:1.35rem; font-weight:700; color:var(--text-1); line-height:1.2; display:flex; align-items:center; gap:10px; }
.page-header-left p  { font-size:.8rem; color:var(--text-3); margin-top:3px; }
.page-header-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:768px) { .page-header { flex-direction:column; } }

/* --- Card header compat --- */
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; border-bottom:1px solid var(--border-soft);
}
.card-footer {
  padding:11px 18px; border-top:1px solid var(--border-soft);
  background:var(--surface-2); font-size:.75rem; color:var(--text-3);
}

/* --- Stat card compat --- */
.stat-card-header { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; }
.stat-card-header > *:first-child { flex-shrink:0; }
.stat-card.success::before { background:var(--green);  height:3px; width:100%; border-radius:var(--r) var(--r) 0 0; }
.stat-card.danger::before  { background:var(--red);    height:3px; width:100%; border-radius:var(--r) var(--r) 0 0; }
.stat-card.primary::before { background:var(--brand);  height:3px; width:100%; border-radius:var(--r) var(--r) 0 0; }
.stat-card.warning::before { background:var(--yellow); height:3px; width:100%; border-radius:var(--r) var(--r) 0 0; }
.stat-card.info::before    { background:var(--accent);  height:3px; width:100%; border-radius:var(--r) var(--r) 0 0; }
.stat-card.purple::before  { background:#9D4EE8; height:3px; width:100%; border-radius:var(--r) var(--r) 0 0; }

.stat-icon {
  width:42px; height:42px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.stat-icon.success, .stat-icon.green  { background:var(--green-bg);  color:var(--green);   }
.stat-icon.danger,  .stat-icon.red    { background:var(--red-bg);    color:var(--red);     }
.stat-icon.primary, .stat-icon.brand  { background:var(--brand-bg);  color:var(--brand-3); }
.stat-icon.warning, .stat-icon.yellow { background:var(--yellow-bg); color:var(--yellow);  }
.stat-icon.info,    .stat-icon.accent { background:var(--accent-bg); color:var(--accent);  }
.stat-icon.purple   { background:rgba(157,78,232,.12); color:#C084FC; }

.stat-trend { display:flex; align-items:center; gap:3px; font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:var(--r-full); flex-shrink:0; white-space:nowrap; }
.stat-trend.up   { background:var(--green-bg);  color:var(--green); }
.stat-trend.down { background:var(--red-bg);    color:var(--red);   }

.stat-value    { font-size:1.6rem; font-weight:800; color:var(--text-1); line-height:1; letter-spacing:-.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-label    { font-size:.78rem; font-weight:500; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-sublabel { font-size:.71rem; color:var(--text-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.stat-progress     { height:4px; background:var(--surface-3); border-radius:var(--r-full); overflow:hidden; }
.stat-progress-bar { height:100%; border-radius:var(--r-full); transition:width 1.4s var(--ease-out); }
.stat-progress-bar.success { background:var(--green);  }
.stat-progress-bar.danger  { background:var(--red);    }
.stat-progress-bar.primary { background:var(--brand);  }
.stat-progress-bar.warning { background:var(--yellow); }

/* --- Button compat --- */
.btn-primary   { background:var(--brand);  color:#fff;       border-color:var(--brand);  box-shadow:0 4px 14px var(--brand-glow); }
.btn-primary:hover   { background:var(--brand-2); transform:translateY(-1px); box-shadow:0 6px 20px var(--brand-glow); }
.btn-success   { background:var(--green);  color:#0D0F1C;    border-color:var(--green);  box-shadow:0 4px 14px var(--green-glow); }
.btn-success:hover   { filter:brightness(1.1); transform:translateY(-1px); }
.btn-danger    { background:var(--red);    color:#fff;       border-color:var(--red);    box-shadow:0 4px 14px var(--red-glow); }
.btn-danger:hover    { filter:brightness(1.1); transform:translateY(-1px); }
.btn-warning   { background:var(--yellow); color:#0D0F1C;    border-color:var(--yellow); }
.btn-warning:hover   { filter:brightness(1.08); transform:translateY(-1px); }
.btn-info      { background:var(--accent); color:#fff;       border-color:var(--accent); box-shadow:0 4px 14px var(--accent-glow); }
.btn-info:hover      { filter:brightness(1.1); transform:translateY(-1px); }
.btn-light, .btn-secondary { background:var(--surface-2); color:var(--text-2); border-color:var(--border); }
.btn-light:hover, .btn-secondary:hover { background:var(--surface-3); color:var(--text-1); }
.btn-outline-primary   { background:transparent; color:var(--brand-3); border-color:var(--brand); }
.btn-outline-primary:hover   { background:var(--brand-bg); }
.btn-outline-secondary { background:transparent; color:var(--text-3); border-color:var(--border); }
.btn-outline-secondary:hover { background:var(--surface-2); color:var(--text-1); }
.btn-outline-success   { background:transparent; color:var(--green); border-color:var(--green); }
.btn-outline-success:hover   { background:var(--green-bg); }
.btn-outline-danger    { background:transparent; color:var(--red); border-color:var(--red); }
.btn-outline-danger:hover    { background:var(--red-bg); }
.btn-purple    { background:rgba(157,78,232,.9); color:#fff; border-color:#9D4EE8; }
.btn-purple:hover    { filter:brightness(1.1); transform:translateY(-1px); }

/* --- Badge compat --- */
.badge-success, .badge-green  { background:var(--green-bg);  color:var(--green);   border-color:rgba(46,204,143,.2);  }
.badge-danger,  .badge-red    { background:var(--red-bg);    color:var(--red);     border-color:rgba(255,77,109,.2);  }
.badge-warning, .badge-yellow { background:var(--yellow-bg); color:var(--yellow);  border-color:rgba(255,190,61,.2);  }
.badge-primary, .badge-brand  { background:var(--brand-bg);  color:var(--brand-3); border-color:rgba(124,111,247,.2); }
.badge-info,    .badge-accent { background:var(--accent-bg); color:var(--accent);  border-color:rgba(79,158,255,.2);  }
.badge-gray   { background:var(--surface-3); color:var(--text-3); border-color:var(--border); }

/* --- Alert compat --- */
.alert-warning { background:var(--yellow-bg); border-color:var(--yellow); color:#FDE68A; }
.alert-danger  { background:var(--red-bg);    border-color:var(--red);    color:#FCA5A5; }
.alert-info    { background:var(--brand-bg);  border-color:var(--brand);  color:var(--brand-3); }
.alert-success { background:var(--green-bg);  border-color:var(--green);  color:#86EFAC; }

/* --- Form compat --- */
.form-control {
  width:100%; padding:10px 13px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); font-family:var(--font); font-size:.845rem;
  color:var(--text-1); outline:none;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast); line-height:1.5;
}
.form-control:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--brand-glow); background:var(--surface-2); }
.form-control::placeholder { color:var(--text-4); }
.form-control.err { border-color:var(--red); }
select.form-control { cursor:pointer; }
select.form-control option { background:var(--surface-2); color:var(--text-1); }
textarea.form-control { resize:vertical; min-height:90px; }
.required { color:var(--red); margin-left:2px; }
.input-group { display:flex; }
.input-group .form-control { border-radius:0; }
.input-group .form-control:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); border-right:none; }
.input-group .form-control:last-child  { border-radius:0 var(--r-sm) var(--r-sm) 0; }
.input-group-text {
  padding:10px 13px; background:var(--surface-3); border:1px solid var(--border);
  font-size:.83rem; color:var(--text-3); display:flex; align-items:center; white-space:nowrap;
  border-right:none; border-radius:var(--r-sm) 0 0 var(--r-sm);
}
.check { display:flex; align-items:center; gap:8px; cursor:pointer; }
.check input { width:15px; height:15px; accent-color:var(--brand); cursor:pointer; }
.check-label { font-size:.82rem; color:var(--text-2); cursor:pointer; }

/* --- Table compat --- */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* --- Spinner compat --- */
.spin-sm { width:16px !important; height:16px !important; }
.spin-md { width:24px !important; height:24px !important; }
.spin-lg { width:38px !important; height:38px !important; border-width:3.5px !important; }

/* --- Progress bar compat --- */
.progress-bar { height:100%; border-radius:var(--r-full); transition:width 1.4s var(--ease-out); }
.progress-bar.success { background:var(--green);  }
.progress-bar.danger  { background:var(--red);    }
.progress-bar.primary { background:var(--brand);  }
.progress-bar.warning { background:var(--yellow); }
.progress-bar.info    { background:var(--accent); }

/* --- Avatar compat --- */
.avatar    {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
  clip-path: circle(50%);
}
.avatar img {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.avatar-xs  { width: 24px;  height: 24px;  min-width: 24px;  min-height: 24px;  font-size: .62rem; }
.avatar-sm  { width: 30px;  height: 30px;  min-width: 30px;  min-height: 30px;  font-size: .7rem; }
.avatar-md  { width: 38px;  height: 38px;  min-width: 38px;  min-height: 38px;  font-size: .83rem; }
.avatar-lg  { width: 50px;  height: 50px;  min-width: 50px;  min-height: 50px;  font-size: 1rem; }
.avatar-xl  { width: 96px;  height: 96px;  min-width: 96px;  min-height: 96px;  font-size: 1.8rem; }
.avatar-2xl { width: 120px; height: 120px; min-width: 120px; min-height: 120px; font-size: 2.2rem; }

/* --- Transaction row compat --- */
.transaction-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.transaction-row:last-child { border-bottom:none; }
.trx-icon { width:36px; height:36px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.trx-icon.revenu  { background:var(--green-bg); color:var(--green); }
.trx-icon.depense { background:var(--red-bg);   color:var(--red);   }
.trx-info   { flex:1; }
.trx-title  { font-size:.83rem; font-weight:500; color:var(--text-1); }
.trx-subtitle { font-size:.72rem; color:var(--text-3); }
.trx-amount { font-size:.875rem; font-weight:700; }
.trx-amount.revenu  { color:var(--green); }
.trx-amount.depense { color:var(--red);   }
.trx-date { font-size:.7rem; color:var(--text-4); }

/* --- Steps compat --- */
.step-circle {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; margin:0 auto 6px;
  position:relative; z-index:1;
  background:var(--surface-3); color:var(--text-3); border:2px solid var(--surface-4);
  transition:all var(--dur);
}
.step.active .step-circle { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-glow); }
.step-label { font-size:.68rem; color:var(--text-3); font-weight:500; }
.step.active .step-label { color:var(--brand-3); font-weight:600; }

/* --- KPI compat --- */
.kpi-row   { display:flex; gap:8px; }
.kpi-item  { flex:1; text-align:center; }
.kpi-value { font-size:1.2rem; font-weight:800; color:var(--text-1); }
.kpi-label { font-size:.7rem; color:var(--text-3); }
.kpi-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.kpi-chip  { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full); padding:5px 13px; font-size:.73rem; color:var(--text-3); }
.kpi-chip strong { color:var(--brand-3); }

/* --- Budget bar compat --- */
.budget-bar-wrap  { display:flex; flex-direction:column; gap:6px; }
.budget-bar-info  { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; }
.budget-bar-title { color:var(--text-2); }
.budget-bar-pct   { font-weight:700; }
.budget-bar-pct.ok      { color:var(--green);  }
.budget-bar-pct.warning { color:var(--yellow); }
.budget-bar-pct.danger  { color:var(--red);    }
.budget-details { display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-3); margin-top:4px; }

/* --- Misc widget compat --- */
.filter-select {
  padding:8px 11px; background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-sm); font-family:var(--font); font-size:.79rem;
  color:var(--text-2); cursor:pointer; outline:none; transition:all var(--dur-fast);
}
.filter-select:focus { border-color:var(--border-focus); }
.filter-select option { background:var(--surface-2); color:var(--text-1); }

.pagination-info    { font-size:.75rem; color:var(--text-3); }
.pagination-buttons { display:flex; gap:3px; }

.chart-container { position:relative; width:100%; overflow:hidden; }

.empty-state-icon {
  width:60px; height:60px; border-radius:50%; background:var(--surface-2);
  border:1px solid var(--border); display:flex; align-items:center;
  justify-content:center; font-size:1.4rem; color:var(--text-4); margin:0 auto;
}

/* --- Topbar compat --- */
.topbar-toggle  { width:34px; height:34px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.88rem; color:var(--text-3); cursor:pointer; transition:all var(--dur-fast); flex-shrink:0; }
.topbar-toggle:hover { background:var(--brand-bg); color:var(--brand-3); border-color:var(--border-focus); }
.topbar-spacer  { flex:1; }
.topbar-search  { position:relative; flex:1; max-width:280px; }
.topbar-search input { width:100%; padding:8px 14px 8px 34px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full); font-size:.8rem; font-family:var(--font); color:var(--text-1); outline:none; transition:all var(--dur-fast); }
.topbar-search input:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--brand-glow); }
.topbar-search input::placeholder { color:var(--text-3); }
.topbar-search i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:.8rem; pointer-events:none; }
.topbar-actions { display:flex; align-items:center; gap:5px; }
.tb-lang { padding:0 12px; height:34px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); font-size:.75rem; font-weight:600; font-family:var(--font); color:var(--text-3); cursor:pointer; transition:all var(--dur-fast); display:flex; align-items:center; gap:5px; }
.tb-lang:hover { background:var(--brand-bg); color:var(--brand-3); border-color:var(--border-focus); }
.tb-user-name { line-height:1.2; }
.tb-user-name span { display:block; font-size:.78rem; font-weight:600; color:var(--text-1); white-space:nowrap; }
.tb-user-name small { display:block; font-size:.64rem; color:var(--text-3); white-space:nowrap; }
@media (max-width:768px) { .tb-user-name { display:none; } .topbar-search { display:none; } }

/* --- Dropdown menu compat --- */
.dropdown-menu {
  position:absolute; right:0; top:calc(100% + 6px);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--sh-lg);
  min-width:200px; z-index:9000;
  opacity:0; pointer-events:none;
  transform:translateY(-6px) scale(.97);
  transition:all var(--dur-fast) var(--ease);
  overflow:hidden;
}
.dropdown-menu.open { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
.d-item {
  display:flex; align-items:center; gap:9px; padding:9px 13px;
  font-size:.82rem; color:var(--text-2); cursor:pointer;
  transition:background var(--dur-fast); text-decoration:none;
  border:none; background:none; width:100%; text-align:left; font-family:var(--font);
}
.d-item:hover { background:var(--surface-3); color:var(--text-1); }
.d-item.danger:hover { background:var(--red-bg); color:var(--red); }
.d-item i { width:15px; color:var(--text-3); flex-shrink:0; font-size:.82rem; }
.d-item:hover i { color:inherit; }
.d-divider { height:1px; background:var(--border); margin:3px 0; }

/* --- Notification panel compat --- */
.notif-panel {
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-xl);
  width:330px; z-index:9000;
  opacity:0; pointer-events:none;
  transform:translateY(-8px) scale(.97);
  transition:all var(--dur) var(--ease);
}
.notif-panel.open { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
.notif-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 15px; border-bottom:1px solid var(--border);
}
.notif-head h5 { font-size:.875rem; color:var(--text-1); font-weight:600; display:flex; align-items:center; gap:7px; }
.notif-head h5 i { color:var(--brand); }
.notif-list { max-height:320px; overflow-y:auto; }
.notif-item {
  display:flex; gap:10px; padding:11px 15px;
  border-bottom:1px solid var(--border-soft); cursor:pointer;
  transition:background var(--dur-fast);
}
.notif-item:hover { background:var(--surface-3); }
.notif-item.unread { background:var(--brand-bg2); }
.notif-item.unread:hover { background:var(--brand-bg); }
.notif-ico {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; flex-shrink:0;
}
.notif-ico.brand  { background:var(--brand-bg); color:var(--brand-3); }
.notif-ico.green  { background:var(--green-bg); color:var(--green);   }
.notif-ico.yellow { background:var(--yellow-bg);color:var(--yellow);  }
.notif-ico.red    { background:var(--red-bg);   color:var(--red);     }
.notif-content .nt { font-size:.78rem; font-weight:600; color:var(--text-1); }
.notif-content .nm { font-size:.73rem; color:var(--text-3); margin-top:1px; line-height:1.4; }
.notif-content .nd { font-size:.67rem; color:var(--text-4); margin-top:2px; }
.notif-foot { padding:10px 15px; text-align:center; }
.notif-foot a { font-size:.76rem; color:var(--brand-3); font-weight:600; }

/* --- Sidebar compat (old PHP names) --- */
.sidebar-brand-icon {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:linear-gradient(135deg, var(--brand), #9D4EE8);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:800; color:#fff; flex-shrink:0;
  box-shadow:0 4px 12px var(--brand-glow); letter-spacing:-.5px;
}
.sidebar-brand-text { overflow:hidden; white-space:nowrap; }
.sidebar-brand-text strong { display:block; font-size:.95rem; font-weight:700; color:var(--text-1); line-height:1.2; }
.sidebar-brand-text span   { display:block; font-size:.65rem; color:var(--text-3); margin-top:1px; }
.sidebar.collapsed .sidebar-brand-text { display:none; }

.nav-group { padding:0 10px; margin-bottom:2px; }
.nav-group-label {
  display:flex; align-items:center; padding:8px 8px 4px;
  font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1.1px; color:var(--text-4); white-space:nowrap; user-select:none;
}
.sidebar.collapsed .nav-group-label { visibility:hidden; height:16px; padding:0; margin:4px 0; }

.nav-link {
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:var(--r-sm); color:var(--text-3); font-size:.83rem;
  font-weight:500; text-decoration:none; cursor:pointer;
  transition:background var(--dur-fast), color var(--dur-fast);
  position:relative; overflow:hidden; white-space:nowrap;
  margin-bottom:1px; min-height:38px;
}
.nav-link:hover { background:var(--surface-2); color:var(--text-2); }
.nav-link.active { background:var(--brand-bg); color:var(--brand-3); font-weight:600; }
.nav-link.active::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:3px; background:var(--brand); border-radius:0 3px 3px 0;
}
.nav-link i { width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:.88rem; color:var(--text-3); flex-shrink:0; }
.nav-link:hover i  { color:var(--text-2); }
.nav-link.active i { color:var(--brand);  }
.nav-link span     { flex:1; overflow:hidden; text-overflow:ellipsis; }
.sidebar.collapsed .nav-link span  { display:none; }
.sidebar.collapsed .nav-link       { justify-content:center; padding:9px; }

.sidebar-user {
  display:flex; align-items:center; gap:10px; padding:8px;
  border-radius:var(--r-sm); cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast); overflow:hidden;
}
.sidebar-user:hover { background:var(--surface-2); }
.sidebar-user-av {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand), #9D4EE8);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:#fff;
  flex-shrink:0; overflow:hidden; border:2px solid var(--brand-bg);
}
.sidebar-user-av img { width:100%; height:100%; object-fit:cover; }
.sidebar-user-info strong { display:block; font-size:.78rem; font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.sidebar-user-info small  { display:block; font-size:.65rem; color:var(--text-3); white-space:nowrap; }
.sidebar.collapsed .sidebar-user-info { display:none; }
.sidebar.collapsed .sidebar-user      { justify-content:center; }

/* ================================================================
   NO BOULES — suppression absolue des décorations circulaires
   ================================================================ */
.stat-card::before,
.stat-card::after { content: none !important; display: none !important; }

/* Top accent via border-top (clean, rectangulaire) */
.stat-card { border-top: 3px solid var(--border) !important; }
.stat-card.s-green,  .stat-card.success  { border-top-color: var(--green)  !important; }
.stat-card.s-red,    .stat-card.danger   { border-top-color: var(--red)    !important; }
.stat-card.s-brand,  .stat-card.primary  { border-top-color: var(--brand)  !important; }
.stat-card.s-yellow, .stat-card.warning  { border-top-color: var(--yellow) !important; }
.stat-card.s-accent, .stat-card.info     { border-top-color: var(--accent) !important; }
.stat-card.s-cyan                        { border-top-color: var(--cyan)   !important; }
.stat-card.s-orange                      { border-top-color: var(--orange) !important; }
.stat-card.s-pink                        { border-top-color: var(--pink)   !important; }
.stat-card.purple                        { border-top-color: #9D4EE8       !important; }
.stat-card.gray                          { border-top-color: var(--text-3)  !important; }

/* --- Improved responsive for dashboard --- */
@media (max-width:900px) {
  .page-content { padding:14px 12px; }
  .stat-value { font-size:1.25rem; }
  .card-body  { padding:14px; }
}
@media (max-width:580px) {
  .stat-value { font-size:1.1rem; }
  .page-header-actions { width:100%; }
  .topbar { gap:6px; padding:0 10px; }
}

/* ================================================================
   PRINT — Styles d'impression globaux
   ================================================================ */
@media print {
  /* Reset couleurs pour impression */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body { background: #fff !important; color: #000 !important; font-size: 12pt; }

  /* Masquer éléments non imprimables */
  .sidebar, .topbar, .app-footer,
  .page-header-actions, .btn, .modal-overlay,
  .toast-wrap, .sidebar-overlay,
  .tab-btn, .filters-bar .btn,
  [onclick], button:not(.print-show) { display: none !important; }

  /* Afficher tout le contenu */
  .main-content { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }

  /* En-tête d'impression */
  .print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
  }
  .print-header h1 { font-size: 18pt; font-weight: bold; }
  .print-header p  { font-size: 10pt; color: #555; }

  /* Cards et tables */
  .card { border: 1px solid #ddd !important; box-shadow: none !important; break-inside: avoid; }
  .table { border-collapse: collapse; width: 100%; }
  .table th, .table td {
    border: 1px solid #ccc !important;
    padding: 6px 8px !important;
    font-size: 10pt;
    color: #000 !important;
    background: #fff !important;
  }
  .table th { background: #f0f0f0 !important; font-weight: bold; }

  /* Stat cards */
  .stat-card { border: 1px solid #ddd !important; break-inside: avoid; }
  .stat-value { color: #000 !important; }
  .stat-label { color: #555 !important; }

  /* Badges */
  .badge { border: 1px solid #ccc !important; }

  /* Grids */
  .grid, .grid-2, .grid-4 { grid-gap: 10px; }

  /* Sauts de page */
  .page-break { page-break-before: always; }
  .no-break   { break-inside: avoid; }
}

/* Bouton print avec styles spéciaux */
.btn-print {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.btn-print:hover { background: var(--brand-bg); color: var(--brand-3); }

/* ================================================================
   QUICK ACTIONS — Actions Rapides du Dashboard
   ================================================================ */
.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px 16px;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
  text-align: center;
  background: var(--surface-1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.quick-action::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.quick-action:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }

.quick-action .qa-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease-spring);
}
.quick-action:hover .qa-icon { transform: scale(1.12); }

.quick-action .qa-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.3;
  transition: color var(--dur) var(--ease);
}
.quick-action:hover .qa-label { color: var(--text-1); }

/* Variantes couleur */
.qa-primary  { border-color: rgba(124,111,247,.2); }
.qa-primary .qa-icon  { background: var(--brand-bg);  color: var(--brand-3); }
.qa-primary:hover  { border-color: var(--brand);  background: var(--brand-bg); }

.qa-success  { border-color: rgba(46,204,143,.2); }
.qa-success .qa-icon  { background: var(--green-bg);  color: var(--green); }
.qa-success:hover  { border-color: var(--green);  background: var(--green-bg); }

.qa-danger   { border-color: rgba(255,77,109,.2); }
.qa-danger .qa-icon   { background: var(--red-bg);    color: var(--red); }
.qa-danger:hover   { border-color: var(--red);    background: var(--red-bg); }

.qa-warning  { border-color: rgba(255,190,61,.2); }
.qa-warning .qa-icon  { background: var(--yellow-bg); color: var(--yellow); }
.qa-warning:hover  { border-color: var(--yellow); background: var(--yellow-bg); }

.qa-info     { border-color: rgba(79,158,255,.2); }
.qa-info .qa-icon     { background: var(--accent-bg); color: var(--accent); }
.qa-info:hover     { border-color: var(--accent);  background: var(--accent-bg); }

.qa-purple   { border-color: rgba(157,78,232,.2); }
.qa-purple .qa-icon   { background: rgba(157,78,232,.1); color: #C084FC; }
.qa-purple:hover   { border-color: #9D4EE8; background: rgba(157,78,232,.08); }

.qa-cyan     { border-color: rgba(34,212,245,.2); }
.qa-cyan .qa-icon     { background: var(--cyan-bg); color: var(--cyan); }
.qa-cyan:hover     { border-color: var(--cyan); background: var(--cyan-bg); }

/* ================================================================
   TOPBAR — Responsive medium screens (overflow fix)
   ================================================================ */

/* Masquer la recherche entre 768px et 1200px */
@media (max-width:1200px) {
  .topbar-search, .tb-search { display:none !important; }
}

/* Masquer l'horloge sur écrans < 1060px */
@media (max-width:1060px) {
  #topbarClock { display:none !important; }
}

/* Masquer le texte du bouton utilisateur sur écrans < 960px */
@media (max-width:960px) {
  .tb-user-name, .tb-user-text { display:none !important; }
  .topbar { gap:6px; padding:0 12px; }
}

/* Masquer le breadcrumb texte sur très petits écrans */
@media (max-width:820px) {
  .topbar .d-flex { display:none !important; }
}

/* Forcer min-width:0 sur tous les enfants directs de topbar */
.topbar > * { min-width:0; flex-shrink:1; }
.topbar > .topbar-toggle,
.topbar > .tb-btn,
.topbar > .topbar-actions,
.topbar > .tb-actions { flex-shrink:0; }

/* ================================================================
   BOUTON IMPRIMER — Styles globaux
   ================================================================ */
.btn-print {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.btn-print:hover {
  background: var(--surface-4);
  color: var(--text-1);
  border-color: var(--border-focus);
}
.btn-print i { font-size: .85rem; }

/* ================================================================
   LAYOUT GLOBAL — Corrections définitives v1.3.0
   Appliqué à TOUT le projet automatiquement
   ================================================================ */

/* ----- 1. PAGE-CONTENT : espace bas suffisant pour que le footer
          ne cache jamais le dernier élément de la page ----- */
.page-content {
  padding-bottom: 80px !important;
}
@media (max-width: 900px) {
  .page-content { padding-bottom: 48px !important; }
}

/* ----- 2. MODAL : structure flex pour que header + footer
          soient toujours visibles même avec un formulaire long ----- */

/* Le modal entier passe en flex-colonne */
.modal,
.modal-sm, .modal-lg, .modal-xl {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;      /* plus de overflow-y:auto sur le modal */
  max-height: min(90vh, 860px);
}

/* Form à l'intérieur d'un modal : se comporte aussi en flex-colonne */
.modal > form,
.modal > .modal-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* En-tête du modal : toujours en haut, ne rétrécit jamais */
.modal-hdr,
.modal-header {
  flex-shrink: 0 !important;
  position: relative !important;    /* annule l'ancien sticky devenu inutile */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-1);
  z-index: 2;
}

/* Corps du modal : défile de façon indépendante */
.modal-body {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;        /* indispensable en flexbox */
  padding: 20px;
}

/* Pied du modal : toujours en bas, ne rétrécit jamais */
.modal-ftr,
.modal-footer {
  flex-shrink: 0 !important;
  position: relative !important;
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  z-index: 2;
}

/* ----- 3. FORMULAIRES : amélioration visuelle globale ----- */

/* Séparateur de section dans un formulaire */
.form-section {
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
  margin-top: 4px;
}
.form-section-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

/* Labels avec icône optionnelle */
.form-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.form-label .req,
.form-label .required { color: var(--red); }

/* Inputs : focus amélioré */
.fc:focus,
.form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
  outline: none;
}

/* Textarea : taille minimale */
textarea.fc,
textarea.form-control {
  min-height: 80px;
  resize: vertical;
}

/* File drop dans modal : taille réduite */
.modal .file-drop {
  padding: 14px 12px;
}
.modal .file-drop .fd-ico { font-size: 1.2rem; }
.modal .file-drop h5 { font-size: .78rem; }
.modal .file-drop p  { font-size: .68rem; }

/* Form-row responsive dans modal */
@media (max-width: 640px) {
  .form-row { flex-direction: column; gap: 0; }
}

/* ----- 4. FILTRES & TABLES : spacing homogène ----- */
.filters-bar {
  padding: 10px 16px;
  gap: 8px;
}

/* ----- 5. PAGE HEADER : cohérence dans tout le projet ----- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.page-header-left h2 {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.2;
  margin: 0;
}
.page-header-left h2 i {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--brand-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  color: var(--brand-3);
  flex-shrink: 0;
}
.page-header-left p {
  font-size: .8rem;
  color: var(--text-3);
  margin: 4px 0 0 43px;
}
.page-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 768px) {
  .page-header { flex-direction: column; }
  .page-header-actions { width: 100%; }
}

/* ----- 6. CARTES & TABLES : cohérence layout ----- */
.card-body   { padding: 18px; }
.card-header { padding: 14px 18px; }
.card-footer { padding: 10px 18px; }

.table-wrap,
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ----- 7. PAGINATION alignée dans tout le projet ----- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  font-size: .75rem;
  color: var(--text-3);
  flex-wrap: wrap;
  gap: 8px;
}
.pagination-buttons,
.pag-btns { display: flex; gap: 3px; flex-wrap: wrap; }
.page-btn, .pag-btn {
  min-width: 30px; height: 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: .78rem;
  cursor: pointer;
  transition: all var(--dur-fast);
  font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.page-btn:hover, .pag-btn:hover  { background: var(--brand-bg); color: var(--brand-3); border-color: var(--border-focus); }
.page-btn.active, .pag-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.page-btn:disabled, .pag-btn:disabled { opacity: .35; pointer-events: none; }

/* ----- 8. STAT CARDS dans les modules ----- */
.stat-card-mini {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.stat-card-mini .sc-ico {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.stat-card-mini .sc-body { min-width: 0; }
.stat-card-mini .sc-val  { font-size: 1.25rem; font-weight: 800; color: var(--text-1); line-height: 1; }
.stat-card-mini .sc-lbl  { font-size: .74rem; color: var(--text-3); margin-top: 3px; }

/* ----- 9. TOAST WRAP : ne bloque pas le contenu ----- */
.toast-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 32px);
}

/* ----- 10. RESPONSIVE : espacement sur tablettes ----- */
@media (max-width: 1024px) {
  .page-content { padding: 16px 16px 48px; }
  .modal-body   { padding: 16px; }
}
@media (max-width: 768px) {
  .page-content { padding: 12px 12px 48px; }
  .card-body    { padding: 14px; }
  .card-header  { padding: 12px 14px; }
}

/* ================================================================
   STYLES D'IMPRESSION (@media print)
   ================================================================ */
@media print {
  /* Masquer l'interface */
  .sidebar, .topbar, .app-footer,
  .page-header-actions, .filters-bar,
  .pagination, .btn, button,
  .modal-overlay, #sidebarOverlay,
  .toast-wrap, #mobileBlock         { display: none !important; }

  /* Mise en page impression */
  html, body                        { background: #fff !important; color: #111 !important; font-size: 11px !important; }
  .app-layout                       { display: block !important; }
  .main-content                     { margin: 0 !important; padding: 0 !important; width: 100% !important; }
  .page-content                     { padding: 0 !important; }
  .card                             { border: 1px solid #e5e7eb !important; box-shadow: none !important; break-inside: avoid; background: #fff !important; }
  .card-header, .card-title         { color: #1E3A8A !important; }

  /* Tableau impression */
  table                             { border-collapse: collapse !important; width: 100% !important; }
  th                                { background: #1E3A8A !important; color: #fff !important; padding: 6px 8px !important; font-size: 10px !important; }
  td                                { padding: 5px 8px !important; border-bottom: 1px solid #e5e7eb !important; font-size: 10px !important; color: #111 !important; }
  tr:nth-child(even) td             { background: #f9fafb !important; }

  /* En-tête impression (injecté par JS) */
  .print-header                     { display: block !important; margin-bottom: 16px; }

  /* Couleurs sémantiques conservées */
  .badge                            { border: 1px solid #ccc !important; background: #f3f4f6 !important; color: #374151 !important; }

  /* Page */
  @page                             { margin: 1.5cm; size: A4; }
}

/* ================================================================
   FORMULAIRES — GRANDS ESPACES (projet complet)
   Appliqué en dernier → surcharge tout
   ================================================================ */

/* ---- Modal : taille maximale généreuse ---- */
.modal,
.modal-sm, .modal-lg, .modal-xl {
  max-height: min(96vh, 1000px) !important;
}

/* ---- Modal header : hauteur confortable ---- */
.modal-hdr,
.modal-header {
  padding: 22px 28px !important;
  min-height: 66px;
}
.modal-title,
.modal-hdr .modal-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  gap: 10px;
}

/* ---- Modal body : grands espaces internes ---- */
.modal-body {
  padding: 32px 28px !important;
  gap: 0;
}

/* ---- Modal footer : bien aéré ---- */
.modal-ftr,
.modal-footer {
  padding: 18px 28px !important;
  min-height: 64px;
  gap: 10px !important;
  align-items: center;
}
.modal-ftr .btn,
.modal-footer .btn {
  min-width: 110px;
  padding: 10px 22px !important;
  font-size: .85rem !important;
}

/* ---- Groupes de champs : espace vertical généreux ---- */
.form-group,
.mb-3 {
  margin-bottom: 26px !important;
}
.form-group:last-child { margin-bottom: 0 !important; }

/* ---- Lignes de champs : espace horizontal ---- */
.form-row {
  gap: 22px !important;
}
@media (max-width: 640px) {
  .form-row { flex-direction: column !important; gap: 0 !important; }
}

/* ---- Labels : lisibles et aérés ---- */
.form-label,
.form-label.required {
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  margin-bottom: 9px !important;
  letter-spacing: .015em !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* ---- Inputs, selects, textarea : plus hauts et confortables ---- */
.fc,
.form-control {
  padding: 13px 16px !important;
  font-size: .875rem !important;
  border-radius: 8px !important;
  line-height: 1.5 !important;
  min-height: 46px;
}
.fc:focus,
.form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-glow) !important;
}

/* ---- Textarea ---- */
textarea.fc,
textarea.form-control {
  min-height: 110px !important;
  padding: 13px 16px !important;
  line-height: 1.6 !important;
}

/* ---- Select ---- */
select.fc,
select.form-control {
  cursor: pointer;
  appearance: auto;
}

/* ---- Input group ---- */
.input-group { gap: 0; }
.input-group-text {
  padding: 13px 16px !important;
  font-size: .875rem !important;
}
.input-group .form-control,
.input-group .fc {
  border-radius: 0 !important;
}
.in-addon {
  padding: 13px 16px !important;
  font-size: .875rem !important;
}

/* ---- Hints et erreurs ---- */
.form-hint,
.form-error {
  font-size: .76rem !important;
  margin-top: 6px !important;
}

/* ---- Section séparatrice dans formulaire long ---- */
.form-section {
  border-top: 1px solid var(--border) !important;
  padding-top: 26px !important;
  margin-top: 8px !important;
  margin-bottom: 6px;
}
.form-section-title {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: var(--text-3) !important;
  margin-bottom: 20px !important;
}

/* ---- File drop dans les formulaires ---- */
.file-drop {
  padding: 28px 20px !important;
  border-radius: 10px !important;
}
.file-drop .fd-ico { font-size: 1.6rem !important; margin-bottom: 10px !important; }
.file-drop h5      { font-size: .85rem !important; }
.file-drop p       { font-size: .78rem !important; margin-top: 4px !important; }

/* ---- Checkbox custom ---- */
.f-check,
.check {
  gap: 10px !important;
  padding: 4px 0;
}
.f-check input,
.check input {
  width: 17px !important;
  height: 17px !important;
}
.f-check-label,
.check-label {
  font-size: .85rem !important;
}

/* ---- Page content : espace bottom encore plus grand ---- */
.page-content {
  padding: 28px 28px 100px !important;
}
@media (max-width: 1024px) {
  .page-content { padding: 20px 18px 80px !important; }
  .modal-body   { padding: 24px 20px !important; }
  .modal-hdr,
  .modal-header { padding: 18px 20px !important; }
  .modal-ftr,
  .modal-footer { padding: 14px 20px !important; }
}
@media (max-width: 768px) {
  .page-content { padding: 14px 14px 64px !important; }
  .modal-body   { padding: 18px 16px !important; }
}

/* ---- Card body dans les pages de formulaires en ligne ---- */
.card-body {
  padding: 24px !important;
}
.card-header,
.card-hdr {
  padding: 18px 24px !important;
  min-height: 60px;
}
.card-footer,
.card-foot {
  padding: 16px 24px !important;
}

/* ---- Boutons dans les formulaires : bien visibles ---- */
.btn {
  padding: 10px 20px !important;
  font-size: .845rem !important;
  gap: 8px !important;
}
.btn-sm {
  padding: 8px 16px !important;
  font-size: .8rem !important;
}
.btn-lg {
  padding: 13px 26px !important;
  font-size: .92rem !important;
}
.btn-icon {
  padding: 10px !important;
  min-width: 40px;
  justify-content: center;
}
.btn-icon.btn-sm { padding: 7px !important; min-width: 32px; }

/* ================================================================
   MODAL SPACING FINAL — 10px haut/bas formulaires
   ================================================================ */

/* 1. Overlay : 40px de marge haut/bas → les boutons ne touchent
      jamais le footer de la page */
.modal-overlay {
  padding: 40px 20px !important;
  align-items: center !important;
  overflow-y: auto !important;
}

/* 2. Modal : hauteur max calculée sur le viewport disponible
      = 100vh - 80px (40px overlay haut + 40px bas) */
.modal,
.modal-sm, .modal-lg, .modal-xl {
  max-height: calc(100vh - 80px) !important;
  width: 100% !important;
}

/* 3. Corps du formulaire : exactement 10px haut et bas
      (séparation header ↔ champs ↔ footer) */
.modal-body {
  padding: 10px 24px !important;
}

/* 4. Un peu plus d'air entre chaque groupe de champs */
.modal-body .form-group,
.modal-body .mb-3 {
  margin-bottom: 18px !important;
}
.modal-body .form-group:last-child { margin-bottom: 4px !important; }

/* 5. Form-row : espace horizontal raisonnable */
.modal-body .form-row {
  gap: 16px !important;
  margin-bottom: 0;
}
.modal-body .form-row .form-group { margin-bottom: 18px !important; }

/* 6. Header modal : 10px bas pour rejoindre le corps */
.modal-hdr,
.modal-header {
  padding: 16px 24px !important;
  min-height: 58px;
}

/* 7. Footer modal : 10px haut pour respirer après le dernier champ */
.modal-ftr,
.modal-footer {
  padding: 14px 24px !important;
  min-height: 58px;
  gap: 10px !important;
}

/* 8. Inputs dans les modals : hauteur confortable */
.modal-body .fc,
.modal-body .form-control {
  padding: 11px 14px !important;
  min-height: 42px;
}
.modal-body textarea.fc,
.modal-body textarea.form-control {
  min-height: 90px !important;
  padding: 11px 14px !important;
}

/* 9. Input-group dans les modals */
.modal-body .input-group-text {
  padding: 11px 14px !important;
}

/* 10. File-drop dans les modals : taille compacte */
.modal-body .file-drop {
  padding: 18px 14px !important;
}
.modal-body .file-drop .fd-ico { font-size: 1.3rem !important; margin-bottom: 6px !important; }
.modal-body .file-drop h5      { font-size: .8rem  !important; margin-bottom: 2px !important; }
.modal-body .file-drop p       { font-size: .72rem !important; }

/* 11. Séparateur de section dans le modal */
.modal-body .form-section {
  padding-top: 16px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.modal-body .form-section-title {
  margin-bottom: 14px !important;
  font-size: .68rem !important;
}

/* 12. Responsive : mobile */
@media (max-width: 640px) {
  .modal-overlay { padding: 12px !important; }
  .modal, .modal-sm, .modal-lg, .modal-xl {
    max-height: calc(100vh - 24px) !important;
  }
  .modal-body { padding: 10px 16px !important; }
  .modal-hdr, .modal-header { padding: 14px 16px !important; }
  .modal-ftr, .modal-footer { padding: 12px 16px !important; }
}