/* ═══════════════════════════════════════════════════
   NicePark Pro v3.0 — Nice Security Systems
   Design System — SaaS Dark Premium (Vercel / Linear)
   ═══════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────
   RESET
────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ──────────────────────────────────────────────────
   DESIGN TOKENS
────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg-root:      #070913;
  --bg-card:      #111527;
  --bg-card2:     #141830;
  --bg-input:     rgba(255,255,255,.035);
  --bg-hover:     rgba(255,255,255,.028);
  --bg-main:      #0d1020;

  /* Borders — ultra-fines, jamais de couleur vive */
  --border:       rgba(255,255,255,.05);
  --border-hi:    rgba(255,255,255,.09);
  --border-focus: rgba(99,102,241,.45);

  /* Typographie */
  --text-hi:      #ffffff;       /* blanc pur → titres & grands chiffres */
  --text-main:    #94a3b8;       /* gris slate doux → texte courant */
  --text-muted:   #4e5a78;       /* gris foncé → labels secondaires */
  --text-dim:     #232d45;       /* quasi-invisible → numéros de ligne */

  /* Brand */
  --indigo:       #6366f1;
  --indigo-li:    #818cf8;
  --blue:         #3b82f6;
  --blue-li:      #60a5fa;

  /* Statuts */
  --green:        #10b981;
  --green-li:     #34d399;
  --orange:       #f97316;
  --orange-li:    #fb923c;
  --purple:       #8b5cf6;
  --purple-li:    #a78bfa;
  --teal:         #14b8a6;
  --teal-li:      #2dd4bf;
  --red:          #ef4444;
  --gold:         #f59e0b;
  --gold-li:      #fbbf24;

  /* Ombres */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.55);
  --shadow-card:  0 1px 3px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.28);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.65), 0 16px 40px rgba(0,0,0,.38);
  --shadow-modal: 0 0 0 1px rgba(255,255,255,.04), 0 40px 80px rgba(0,0,0,.75);

  /* Rayons */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
}

/* ──────────────────────────────────────────────────
   BASE
────────────────────────────────────────────────── */
html, body {
  height: 100%;
  background: var(--bg-root);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fond ambiant subtil */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 40% at 5%  -5%,  rgba(99,102,241,.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 95% 105%, rgba(59,130,246,.04) 0%, transparent 60%);
}

/* Scrollbar discrète */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }

/* ══════════════════════════════════════════════════
   HEADER
   ── Présence forte, air généreux, fond translucide
══════════════════════════════════════════════════ */
header {
  position: sticky; top: 0; z-index: 300;
  background: rgba(7,9,19,.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--border);
  padding: 0 36px;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: background .3s;
}

/* ── Bloc marque NSS ── */
.nss-brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }

.nss-shield { height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nss-shield img {
  height: 42px; width: auto; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(99,102,241,.3));
  transition: filter .3s;
}
.nss-shield img:hover { filter: drop-shadow(0 0 20px rgba(99,102,241,.55)); }

.nss-text { display: flex; flex-direction: column; gap: 1px; }
.nss-text h1 {
  font-size: 15px; font-weight: 700; color: #ffffff;
  letter-spacing: -0.02em; line-height: 1.15;
}
.nss-text h1 span { color: var(--indigo-li); }
.nss-text p {
  font-size: 9px; color: var(--text-muted);
  letter-spacing: .07em; text-transform: uppercase; line-height: 1;
}
.nss-version {
  display: inline-flex; align-items: center; margin-top: 2px;
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.18);
  color: var(--indigo-li); font-size: 9px; font-weight: 600;
  padding: 1px 7px; border-radius: 20px; letter-spacing: .06em;
  width: fit-content;
}

/* ── Séparateur ── */
.header-sep { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }

/* ── Client ── */
.client-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.client-label {
  font-size: 9px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 600;
}
.client-logo-img { height: 22px; width: auto; object-fit: contain; opacity: .7; transition: opacity .2s; }
.client-logo-img:hover { opacity: 1; }
.client-logo-fallback {
  height: 26px; padding: 0 11px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--r-xs);
  display: flex; align-items: center;
  font-size: 11px; font-weight: 700; color: var(--text-main); white-space: nowrap;
  letter-spacing: -.01em;
}

/* ── Centre ── */
.header-center { flex: 1; text-align: center; }
.header-center h2 {
  font-size: 14px; font-weight: 700; color: #ffffff;
  letter-spacing: -0.02em; line-height: 1.2;
}
.header-center p {
  font-size: 10px; color: var(--text-muted); margin-top: 2px;
  letter-spacing: .02em;
}

/* ── Droite ── */
.header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Badge LIVE — pastel translucide */
.badge-live {
  display: flex; align-items: center; gap: 6px;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.15);
  border-radius: 20px; padding: 5px 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; color: var(--green-li);
}
.dot-live {
  width: 6px; height: 6px; background: var(--green-li); border-radius: 50%;
  box-shadow: 0 0 5px var(--green); animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.25;transform:scale(.7)} }

#horloge {
  font-size: 18px; font-weight: 800; color: #ffffff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

/* Badge utilisateur */
.user-badge {
  display: flex; align-items: center; gap: 7px;
  background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.15);
  border-radius: 20px; padding: 5px 13px;
  font-size: 11px; color: var(--indigo-li); font-weight: 600;
  cursor: pointer; transition: all .18s; user-select: none; white-space: nowrap;
}
.user-badge:hover {
  background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.32);
  box-shadow: 0 2px 10px rgba(99,102,241,.16); transform: translateY(-1px);
}

.btn-cloture {
  display: flex; align-items: center; gap: 7px;
  background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.22);
  color: #fca5a5; padding: 8px 15px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.btn-cloture:hover {
  background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.45); color: #fecaca;
  box-shadow: 0 4px 16px rgba(239,68,68,.15); transform: translateY(-1px);
}

.btn-deconnexion {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 500; cursor: pointer; transition: all .18s;
  white-space: nowrap; font-family: 'Inter', sans-serif;
}
.btn-deconnexion:hover { background: rgba(255,255,255,.04); color: #ffffff; border-color: var(--border-hi); }

/* ══════════════════════════════════════════════════
   NAVIGATION ONGLETS
══════════════════════════════════════════════════ */
.tab-nav {
  position: sticky; top: 68px; z-index: 200;
  background: rgba(7,9,19,.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 36px; height: 50px;
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 15px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  color: var(--text-muted); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .16s; white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.tab-btn:hover:not(.active) {
  background: rgba(255,255,255,.04); color: var(--text-main);
  border-color: var(--border);
}
.tab-btn.active {
  background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.2);
  color: var(--indigo-li); font-weight: 600;
}
.tab-btn-icon { font-size: 13px; }

.tab-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.15);
  color: var(--green-li);
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeUp .18s ease; }
@keyframes fadeUp { from{opacity:.2;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ══════════════════════════════════════════════════
   ZONE PRINCIPALE
══════════════════════════════════════════════════ */
.main-area {
  position: relative; z-index: 1;
  padding: 30px 36px 72px;
  max-width: 1540px; margin: 0 auto;
}

.barre-statut {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 26px; flex-wrap: wrap; gap: 8px;
}
.date-jour {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
}
.session-info { font-size: 11px; color: var(--text-muted); }
.session-info span { color: var(--indigo-li); font-weight: 600; }

/* ══════════════════════════════════════════════════
   SECTION HEADER COMMUN
══════════════════════════════════════════════════ */
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; margin-top: 12px; }
.section-header h3 {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.section-line { flex: 1; height: 1px; background: var(--border); }
.section-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   PANNEAU HERO
══════════════════════════════════════════════════ */
.panneau-hero {
  background: linear-gradient(140deg, var(--bg-card) 0%, rgba(99,102,241,.04) 55%, var(--bg-card) 100%);
  border: 1px solid var(--border-hi); border-radius: var(--r-xl);
  padding: 34px 38px; margin-bottom: 22px;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: center; gap: 30px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.panneau-hero::before {
  content:''; position:absolute; top:-120px; left:-80px; width:320px; height:320px;
  background:radial-gradient(circle,rgba(99,102,241,.08),transparent 70%); pointer-events:none;
}
.panneau-hero::after {
  content:''; position:absolute; bottom:-80px; right:-60px; width:200px; height:200px;
  background:radial-gradient(circle,rgba(59,130,246,.04),transparent 70%); pointer-events:none;
}

.hero-label {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px;
}
.hero-montant {
  font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 15%, #c7d2fe 85%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-devise {
  font-size: 19px; font-weight: 400; color: var(--text-muted);
  margin-left: 8px; -webkit-text-fill-color: var(--text-muted);
}
.hero-detail { font-size: 12px; color: var(--text-muted); margin-top: 11px; line-height: 1.7; }
.hero-detail strong { color: var(--indigo-li); font-weight: 600; }

.hero-stat {
  text-align: center; padding: 18px 20px;
  background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color .2s, background .2s;
}
.hero-stat:hover { border-color: var(--border-hi); background: rgba(255,255,255,.03); }
.hero-stat-val { font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 6px; letter-spacing: -0.02em; color: #ffffff; }
.hero-stat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }

.hero-tarif-block {
  background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.14); border-radius: var(--r-md);
  padding: 20px 24px; text-align: center; transition: border-color .2s, background .2s;
}
.hero-tarif-block:hover { border-color: rgba(99,102,241,.26); background: rgba(99,102,241,.09); }
.hero-tarif-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .11em; font-weight: 600; margin-bottom: 8px; }
.hero-tarif-val { font-size: 32px; font-weight: 800; color: var(--indigo-li); line-height: 1; letter-spacing: -0.02em; }
.hero-tarif-sous { font-size: 10px; color: var(--text-muted); margin-top: 6px; }

/* ══════════════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════════════ */
.grille-kpi { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }

.kpi-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 20px 18px 16px; position: relative; overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  box-shadow: var(--shadow-card);
}
.kpi-card:hover {
  transform: translateY(-3px); border-color: var(--border-hi);
  box-shadow: var(--shadow-hover);
}

.kpi-top { width: 100%; height: 2px; border-radius: var(--r-md) var(--r-md) 0 0; position: absolute; top: 0; left: 0; opacity: .7; }
.kpi-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.kpi-lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; }
.kpi-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.kpi-val { font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 4px; letter-spacing: -0.02em; color: #ffffff; }
.kpi-sous { font-size: 11px; color: var(--text-muted); }

.kc-blue  .kpi-top{background:linear-gradient(90deg,#3b82f6,#6366f1)} .kc-blue  .kpi-val{color:var(--blue-li)}   .kc-blue  .kpi-icon{background:rgba(59,130,246,.09);border:1px solid rgba(59,130,246,.14)}
.kc-green .kpi-top{background:linear-gradient(90deg,#10b981,#34d399)} .kc-green .kpi-val{color:var(--green-li)}  .kc-green .kpi-icon{background:rgba(16,185,129,.09);border:1px solid rgba(16,185,129,.14)}
.kc-orange.kpi-top{background:linear-gradient(90deg,#f97316,#fb923c)} .kc-orange .kpi-val{color:var(--orange-li)} .kc-orange .kpi-icon{background:rgba(249,115,22,.09);border:1px solid rgba(249,115,22,.14)}
.kc-purple.kpi-top{background:linear-gradient(90deg,#8b5cf6,#a78bfa)} .kc-purple .kpi-val{color:var(--purple-li)} .kc-purple .kpi-icon{background:rgba(139,92,246,.09);border:1px solid rgba(139,92,246,.14)}
.kc-teal  .kpi-top{background:linear-gradient(90deg,#14b8a6,#2dd4bf)} .kc-teal  .kpi-val{color:var(--teal-li);font-size:22px;padding-top:5px} .kc-teal .kpi-icon{background:rgba(20,184,166,.09);border:1px solid rgba(20,184,166,.14)}

/* ══════════════════════════════════════════════════
   GRAPHIQUES
══════════════════════════════════════════════════ */
.grille-charts { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 22px; }

.chart-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 22px 22px 18px; position: relative; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  box-shadow: var(--shadow-card);
}
.chart-card:hover { border-color: var(--border-hi); box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.chart-card-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--r-md) var(--r-md) 0 0; }
.chart-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.chart-title { font-size: 13px; font-weight: 700; color: #ffffff; line-height: 1.3; letter-spacing: -0.01em; }
.chart-subtitle { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.chart-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.chart-legend-txt { font-size: 10px; color: var(--text-muted); }
.canvas-wrapper { position: relative; height: 200px; }

.donut-wrapper { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; }
.donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.donut-pct { font-size: 28px; font-weight: 900; background: linear-gradient(135deg,#60a5fa,#a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.donut-lbl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

.gauge-wrapper { position: relative; height: 200px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.gauge-canvas-box { position: relative; width: 220px; height: 130px; }
.gauge-center { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); text-align: center; }
.gauge-pct { font-size: 36px; font-weight: 900; background: linear-gradient(135deg,#3b82f6,#8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.gauge-lbl { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.gauge-needle { position: absolute; bottom: 0; left: 50%; width: 2px; height: 90px; transform-origin: bottom center; transform: translateX(-50%) rotate(-85deg); transition: transform 1.5s cubic-bezier(.34,1.3,.64,1); }
.gauge-needle-bar { width: 100%; height: calc(100% - 12px); background: linear-gradient(to top,transparent,#fff); border-radius: 2px; opacity: .9; }
.gauge-needle-pivot { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background: #fff; border-radius: 50%; box-shadow: 0 0 8px rgba(255,255,255,.5); }

.chart-legend-row { display: flex; gap: 16px; margin-top: 10px; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 12px; height: 4px; border-radius: 2px; }
.legend-txt { font-size: 10px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════
   CAISSES AGENTS
══════════════════════════════════════════════════ */
.grille-agents { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 22px; }

.agent-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px 22px 20px; position: relative; overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  box-shadow: var(--shadow-card);
}
.agent-card:hover { transform: translateY(-4px); border-color: var(--border-hi); box-shadow: var(--shadow-hover); }
.agent-card-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--r-lg) var(--r-lg) 0 0; }

.agent-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.agent-avatar { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; flex-shrink: 0; border: 1px solid rgba(255,255,255,.06); }
.agent-info-nom { font-size: 15px; font-weight: 800; color: #ffffff; line-height: 1.2; letter-spacing: -0.01em; }
.agent-info-role { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* Badge "En service" — pastel translucide */
.badge-actif {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.16);
  color: #10b981; padding: 2px 9px; border-radius: 20px;
  font-size: 9px; font-weight: 700; letter-spacing: .05em; margin-top: 4px;
}
.badge-actif-dot { width: 5px; height: 5px; border-radius: 50%; background: #10b981; animation: blink 1.8s infinite; }

.agent-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.agent-stat { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.agent-stat-lbl { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.agent-stat-val { font-size: 26px; font-weight: 800; line-height: 1; color: #ffffff; }
.agent-stat-sous { font-size: 9px; color: var(--text-muted); margin-top: 2px; }

.agent-montant { display: flex; align-items: center; justify-content: space-between; border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 16px; border: 1px solid; }
.agent-montant-lbl { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 4px; }
.agent-montant-val { font-size: 28px; font-weight: 900; line-height: 1; }
.agent-montant-devise { font-size: 13px; color: var(--text-muted); margin-left: 4px; font-weight: 400; }
.agent-montant-formule { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.agent-montant-ico { font-size: 28px; opacity: .3; }

.btn-reset { width: 100%; padding: 11px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .2s; border: 1px solid; }
.btn-reset:hover { transform: translateY(-1px); }
.btn-reset:disabled { opacity: .3; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.agent-encaisse-msg { width: 100%; padding: 11px; background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.16); border-radius: 10px; text-align: center; font-size: 12px; font-weight: 600; color: var(--green-li); animation: fadeSlide .4s ease; display: none; }
@keyframes fadeSlide { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ══════════════════════════════════════════════════
   ÉQUIPEMENTS
══════════════════════════════════════════════════ */
.grille-equipements { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 22px; }

.equip-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px 18px; display: flex; align-items: flex-start; gap: 13px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  box-shadow: var(--shadow-card);
}
.equip-card:hover { border-color: var(--border-hi); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.equip-icon-box { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.equip-icon-green { background: rgba(16,185,129,.08);  border: 1px solid rgba(16,185,129,.15); }
.equip-icon-red   { background: rgba(239,68,68,.08);   border: 1px solid rgba(239,68,68,.15); }
.equip-icon-orange{ background: rgba(249,115,22,.08);  border: 1px solid rgba(249,115,22,.15); }
.equip-info { flex: 1; min-width: 0; }
.equip-nom { font-size: 12px; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 5px; }
.equip-statut-row { display: flex; align-items: center; gap: 7px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; position: relative; }
.pulse-dot::before { content:''; position: absolute; inset: -3px; border-radius: 50%; animation: pulse-ring 1.8s infinite; }
.pulse-green          { background: var(--green-li); box-shadow: 0 0 5px var(--green); }
.pulse-green::before  { background: rgba(74,222,128,.18); }
.pulse-orange         { background: var(--orange-li); box-shadow: 0 0 5px var(--orange); }
.pulse-orange::before { background: rgba(251,146,60,.18); }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:.8} 70%,100%{transform:scale(2.2);opacity:0} }
.equip-statut-txt { font-size: 11px; font-weight: 700; }
.txt-green  { color: var(--green-li); }
.txt-orange { color: var(--orange-li); }
.txt-red    { color: #f87171; }
.equip-detail { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.equip-uptime { font-size: 9px; color: var(--text-dim); margin-top: 2px; }

/* ══════════════════════════════════════════════════
   TABLEAUX — aérés, zéro bordure verticale
══════════════════════════════════════════════════ */
.tableau-container {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; overflow-x: auto;
  box-shadow: var(--shadow-card);
}

table { width: 100%; border-collapse: collapse; }

thead {
  background: rgba(255,255,255,.018);
  border-bottom: 1px solid var(--border);
}
thead th {
  padding: 14px 18px; text-align: left;
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .1em;
  white-space: nowrap;
  /* Pas de border-right : zéro bordure verticale */
}

tbody tr { border-top: 1px solid var(--border); transition: background .18s ease; }
tbody tr:first-child { border-top: none; }
tbody tr:hover { background: rgba(99,102,241,.03); }

tbody td {
  padding: 14px 18px; font-size: 13px;
  color: var(--text-main); vertical-align: middle;
}

.badge-entree {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.16);
  color: var(--green-li); padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.recette-cell { font-weight: 700; color: var(--green-li); }
.num-cell     { color: var(--text-dim); font-size: 11px; }
.heure-cell   { font-variant-numeric: tabular-nums; font-weight: 600; color: #ffffff; }

/* ══════════════════════════════════════════════════
   KPI DIRECTION (onglet 2)
══════════════════════════════════════════════════ */
.kpi-direction {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-bottom: 26px;
}
.kpi-dir-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 22px 18px 16px; position: relative; overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  box-shadow: var(--shadow-card);
}
.kpi-dir-card:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: var(--shadow-hover); }
.kpi-dir-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--r-md) var(--r-md) 0 0; }
.kpi-dir-icon { font-size: 24px; margin-bottom: 10px; }
.kpi-dir-lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.kpi-dir-val { font-size: 26px; font-weight: 800; line-height: 1; margin-bottom: 4px; color: #ffffff; letter-spacing: -0.02em; }
.kpi-dir-sous { font-size: 11px; color: var(--text-muted); }
.kpi-dir-delta { font-size: 11px; font-weight: 700; margin-top: 5px; display: inline-flex; align-items: center; gap: 4px; }
.delta-pos { color: var(--green-li); }
.delta-neg { color: var(--red); }

/* ══════════════════════════════════════════════════
   TABLEAU CLÔTURES
══════════════════════════════════════════════════ */
.tableau-clotures-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; overflow-x: auto;
  box-shadow: var(--shadow-card);
}
.tableau-clotures-wrap table thead th:last-child { text-align: center; }

/* Badges statuts — pastels translucides uniquement */
.statut-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 600;
}
.statut-valide  { background: rgba(16,185,129,.09);  border: 1px solid rgba(16,185,129,.2);  color: #10b981; }
.statut-attente { background: rgba(245,158,11,.08);  border: 1px solid rgba(245,158,11,.18); color: #f59e0b; }

.agent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; }

.total-row td {
  font-weight: 700; color: #ffffff;
  border-top: 1px solid var(--border-hi) !important;
  background: rgba(255,255,255,.018);
}
.total-row .recette-cell { font-size: 14px; }
.tableau-vide { text-align: center; padding: 60px; color: var(--text-muted); font-size: 13px; }

/* ══════════════════════════════════════════════════
   BARRE DE FILTRES
══════════════════════════════════════════════════ */
.filter-zone {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 18px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.filter-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }

.filter-select, .filter-date {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-main);
  padding: 7px 11px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: border-color .16s;
  appearance: none; -webkit-appearance: none; font-family: 'Inter', sans-serif;
}
.filter-select {
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234e5a78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
.filter-select:focus, .filter-date:focus {
  outline: none; border-color: rgba(99,102,241,.4);
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}
.filter-select option { background: #111527; color: var(--text-main); }
.filter-date::-webkit-calendar-picker-indicator { filter: invert(.3); cursor: pointer; }

.btn-reinit {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  padding: 7px 13px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .16s; font-family: 'Inter', sans-serif;
}
.btn-reinit:hover { background: rgba(255,255,255,.04); color: var(--text-main); border-color: var(--border-hi); }

.btn-excel {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.18); color: var(--green-li);
  padding: 7px 16px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .16s; white-space: nowrap; font-family: 'Inter', sans-serif;
}
.btn-excel:hover { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.36); box-shadow: 0 4px 14px rgba(16,185,129,.1); transform: translateY(-1px); }
.btn-excel svg { flex-shrink: 0; }

/* ── Bouton filtrer ── */
.btn-filtrer {
  display: flex; align-items: center; gap: 7px;
  background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.18);
  color: var(--indigo-li); padding: 7px 15px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .16s;
  white-space: nowrap; font-family: 'Inter', sans-serif;
}
.btn-filtrer:hover { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.35); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
footer {
  position: relative; z-index: 1;
  text-align: center; padding: 20px 36px;
  color: var(--text-muted); font-size: 11px;
  border-top: 1px solid var(--border); margin-top: 8px;
}
footer strong { color: var(--text-main); }

/* ══════════════════════════════════════════════════
   MODALES
══════════════════════════════════════════════════ */
.overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.6); backdrop-filter: blur(18px) saturate(140%);
  align-items: center; justify-content: center;
}
.overlay.active { display: flex; }

.modale {
  background: var(--bg-card2); border: 1px solid var(--border-hi);
  border-radius: var(--r-xl); padding: 38px; max-width: 480px; width: 90%;
  box-shadow: var(--shadow-modal);
  animation: modalIn .26s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn { from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:none} }

.modale-icon { width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; }
.modale h2, .modale-titre { font-size: 19px; font-weight: 800; color: #ffffff; margin-bottom: 6px; letter-spacing: -0.02em; }
.modale-sous { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; line-height: 1.65; }

.modale-recap { background: rgba(0,0,0,.28); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; margin-bottom: 22px; }
.recap-ligne { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.recap-ligne:not(:last-child) { border-bottom: 1px solid var(--border); }
.recap-cle { font-size: 12px; color: var(--text-muted); }
.recap-val { font-size: 13px; font-weight: 600; color: #ffffff; }
.recap-val.grand { font-size: 21px; color: var(--green-li); font-weight: 700; }

.modale-btns { display: flex; gap: 10px; }
.btn-annuler {
  flex: 1; padding: 12px; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--r-md); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .16s; font-family: 'Inter', sans-serif;
}
.btn-annuler:hover { background: rgba(255,255,255,.07); color: #ffffff; border-color: var(--border-hi); }
.btn-confirmer {
  flex: 2; padding: 12px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.24);
  color: #fca5a5; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .16s; font-family: 'Inter', sans-serif;
}
.btn-confirmer:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.45); box-shadow: 0 4px 16px rgba(239,68,68,.15); }

.modale-succes { text-align: center; }
.modale-succes .modale-icon { margin: 0 auto 18px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.18); }

.btn-fermer {
  width: 100%; padding: 13px;
  background: rgba(16,185,129,.09); border: 1px solid rgba(16,185,129,.2); color: var(--green-li);
  border-radius: var(--r-md); font-size: 14px; font-weight: 600;
  cursor: pointer; margin-top: 6px; transition: all .16s; font-family: 'Inter', sans-serif;
}
.btn-fermer:hover { background: rgba(16,185,129,.17); box-shadow: 0 4px 16px rgba(16,185,129,.15); }

.modale-agent-avatar { width: 54px; height: 54px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 900; margin-bottom: 16px; border: 1px solid var(--border); }
.modale-montant-hl { background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.16); border-radius: var(--r-md); padding: 16px 20px; text-align: center; margin: 16px 0; }
.modale-montant-hl p:first-child { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 8px; }
.modale-montant-hl-val { font-size: 42px; font-weight: 800; color: var(--gold-li); line-height: 1; letter-spacing: -0.03em; }
.modale-montant-hl-dev { font-size: 17px; color: var(--text-muted); margin-left: 5px; font-weight: 400; }

/* ══════════════════════════════════════════════════
   ÉCRAN DE CONNEXION — SaaS Premium
══════════════════════════════════════════════════ */
#login-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: #050710;
  display: flex;
}

.login-left {
  width: 44%; flex-shrink: 0;
  background: linear-gradient(158deg, #0c0e1e 0%, #090b18 50%, #070810 100%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 50px 54px; position: relative; overflow: hidden;
}
.login-left::before {
  content:''; position:absolute; top:-100px; left:-100px;
  width:380px; height:380px;
  background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%);
  pointer-events:none;
}
.login-left::after {
  content:''; position:absolute; bottom:-80px; right:-60px;
  width:260px; height:260px;
  background:radial-gradient(circle,rgba(59,130,246,.07) 0%,transparent 70%);
  pointer-events:none;
}

.login-left-brand { display:flex; flex-direction:column; gap:6px; position:relative; z-index:1; }
.login-left-logo  { height:50px; width:auto; object-fit:contain; align-self:flex-start; filter:drop-shadow(0 0 14px rgba(99,102,241,.4)); }
.login-left-name  { font-size:22px; font-weight:800; color:#ffffff; letter-spacing:-0.02em; margin-top:16px; }
.login-left-name span { color:var(--indigo-li); }
.login-left-tagline   { font-size:13px; color:var(--text-muted); margin-top:5px; line-height:1.6; }

.login-left-features { display:flex; flex-direction:column; gap:16px; position:relative; z-index:1; margin-top:48px; }
.login-feature { display:flex; align-items:flex-start; gap:14px; }
.login-feature-icon {
  width:36px; height:36px; border-radius:var(--r-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  background:rgba(99,102,241,.09); border:1px solid rgba(99,102,241,.16);
}
.login-feature-text h4 { font-size:13px; font-weight:700; color:#ffffff; margin-bottom:2px; letter-spacing:-0.01em; }
.login-feature-text p  { font-size:12px; color:var(--text-muted); line-height:1.5; }
.login-left-footer { font-size:11px; color:var(--text-muted); position:relative; z-index:1; }
.login-left-footer strong { color:var(--text-main); }

.login-right {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:50px 54px; background:var(--bg-root);
}
.login-card { width:100%; max-width:390px; animation:modalIn .4s cubic-bezier(.16,1,.3,1); }
.login-card-header { margin-bottom:34px; }
.login-card-title { font-size:26px; font-weight:800; color:#ffffff; letter-spacing:-0.02em; margin-bottom:8px; }
.login-card-sub   { font-size:13px; color:var(--text-muted); line-height:1.6; }

.login-label { font-size:12px; font-weight:600; color:var(--text-main); margin-bottom:7px; display:block; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }

.login-field {
  display:flex; align-items:center; gap:10px;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--r-md); padding:13px 16px; margin-bottom:12px;
  transition:border-color .16s, box-shadow .16s;
}
.login-field:focus-within { border-color:rgba(99,102,241,.4); box-shadow:0 0 0 3px rgba(99,102,241,.09); }
.login-field-icon  { font-size:14px; flex-shrink:0; opacity:.4; }
.login-input {
  background:transparent; border:none; color:#ffffff;
  font-size:14px; flex:1; outline:none; font-family:'Inter', sans-serif;
}
.login-input::placeholder { color:var(--text-muted); }
.login-error {
  background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.2);
  color:#fca5a5; padding:10px 14px; border-radius:var(--r-sm);
  font-size:12px; display:none; margin-bottom:12px; line-height:1.5;
}
.btn-login {
  width:100%; padding:13px;
  background:var(--indigo); border:none; color:#fff; border-radius:var(--r-md);
  font-size:14px; font-weight:700; cursor:pointer; transition:all .2s;
  letter-spacing:.01em; font-family:'Inter', sans-serif;
  box-shadow:0 4px 18px rgba(99,102,241,.28), inset 0 1px 0 rgba(255,255,255,.13);
}
.btn-login:hover { background:#5254d4; box-shadow:0 6px 26px rgba(99,102,241,.42), inset 0 1px 0 rgba(255,255,255,.13); transform:translateY(-1px); }
.btn-login:active { transform:translateY(0); }

.login-divider { display:flex; align-items:center; gap:12px; margin:20px 0 14px; }
.login-divider hr { flex:1; border:none; border-top:1px solid var(--border); }
.login-divider span { font-size:11px; color:var(--text-muted); white-space:nowrap; }

.login-powered { margin-top:30px; text-align:center; font-size:11px; color:var(--text-muted); display:flex; align-items:center; justify-content:center; gap:7px; }
.login-powered-dot { width:4px; height:4px; border-radius:50%; background:var(--border-hi); }

@media (max-width:768px) { .login-left { display:none; } .login-right { padding:32px 24px; } }

/* ══════════════════════════════════════════════════
   VISIBILITÉ PAR RÔLE
══════════════════════════════════════════════════ */
body.role-caissier [data-role="admin"]    { display: none !important; }
[data-role="caissier"]                    { display: none; }
body.role-caissier [data-role="caissier"] { display: block !important; }

body.role-caissier .grille-agents { grid-template-columns: minmax(300px, 500px); justify-content: center; }
body.role-caissier .agent-card    { padding: 30px 26px 24px; }
body.role-caissier .agent-stat-val    { font-size: 36px !important; }
body.role-caissier .agent-montant-val { font-size: 32px !important; }

/* ══════════════════════════════════════════════════
   MON COMPTE
══════════════════════════════════════════════════ */
.compte-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; align-items: start; }
@media (max-width:900px) { .compte-layout { grid-template-columns: 1fr; } }

.compte-profil-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 30px 22px; text-align: center; position: sticky; top: 20px;
}
.compte-avatar {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--blue), #6366f1);
  border: 3px solid rgba(59,130,246,.22);
}
.compte-nom              { font-size: 17px; font-weight: 800; color: #ffffff; margin-bottom: 4px; letter-spacing: -0.01em; }
.compte-identifiant      { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.compte-role-badge       { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
.compte-role-badge.admin    { background: rgba(251,146,60,.09); color: #fb923c; border: 1px solid rgba(251,146,60,.2); }
.compte-role-badge.caissier { background: rgba(59,130,246,.08); color: var(--blue-li); border: 1px solid rgba(59,130,246,.2); }
.compte-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 4px; }
.compte-stat { background: var(--bg-main); border: 1px solid var(--border); border-radius: 9px; padding: 9px 8px; text-align: center; }
.compte-stat-val { font-size: 15px; font-weight: 700; color: var(--blue-li); }
.compte-stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.compte-form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px; margin-bottom: 18px; }
.compte-form-title { font-size: 14px; font-weight: 800; color: #ffffff; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
.compte-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width:600px) { .compte-form-grid { grid-template-columns: 1fr; } }
.compte-field { display: flex; flex-direction: column; gap: 5px; }
.compte-field label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.compte-field input { background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; padding: 10px 13px; color: var(--text-main); font-size: 14px; transition: border-color .16s, box-shadow .16s; outline: none; font-family: 'Inter', sans-serif; }
.compte-field input:focus { border-color: rgba(99,102,241,.4); box-shadow: 0 0 0 3px rgba(99,102,241,.09); }
.compte-field input:disabled { opacity: .3; cursor: not-allowed; }
.compte-field .field-hint { font-size: 11px; color: var(--text-muted); }
.compte-alert { padding: 10px 13px; border-radius: 9px; font-size: 13px; margin-top: 12px; display: none; }
.compte-alert.success { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: #34d399; }
.compte-alert.error   { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: #f87171; }
.compte-btn-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.compte-btn { padding: 10px 22px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; border: none; }
.compte-btn-primary { background: var(--indigo); color: #fff; box-shadow: 0 4px 16px rgba(99,102,241,.25), inset 0 1px 0 rgba(255,255,255,.13); }
.compte-btn-primary:hover { background: #5254d4; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.35); }
.compte-btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.password-strength { margin-top: 5px; height: 3px; border-radius: 4px; background: var(--border); overflow: hidden; }
.password-strength-bar { height: 100%; border-radius: 4px; transition: width .3s, background .3s; width: 0%; }
.strength-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ══════════════════════════════════════════════════
   ONGLET POINTAGE
══════════════════════════════════════════════════ */
.ptg-filtres { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:26px; }
.ptg-titre   { font-size:20px; font-weight:800; color:#ffffff; margin:0 0 4px; letter-spacing:-0.02em; }
.ptg-sous    { font-size:13px; color:var(--text-muted); margin:0; }
.ptg-filtres-droite { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.ptg-periode-btns { display:flex; gap:5px; }
.ptg-btn-periode  { padding:6px 13px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--bg-card2); color:var(--text-muted); font-size:12px; font-weight:500; cursor:pointer; transition:all .14s; }
.ptg-btn-periode:hover  { border-color:var(--border-hi); color:var(--text-main); }
.ptg-btn-periode.active { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.28); color:var(--indigo-li); font-weight:600; }

.ptg-dates-custom { display:flex; align-items:center; gap:7px; }
.ptg-date-input   { padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--bg-input); color:var(--text-main); font-size:12px; color-scheme:dark; }

.btn-export-ptg { padding:7px 14px; border-radius:var(--r-sm); border:1px solid rgba(99,102,241,.26); background:rgba(99,102,241,.08); color:var(--indigo-li); font-size:12px; font-weight:600; cursor:pointer; transition:all .14s; }
.btn-export-ptg:hover { background:rgba(99,102,241,.16); transform:translateY(-1px); }

.ptg-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-bottom:8px; }
.ptg-loading { color:var(--text-muted); font-size:13px; padding:40px; text-align:center; grid-column:1/-1; }

.ptg-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md); padding:18px; transition:box-shadow .2s, border-color .2s; }
.ptg-card:hover { box-shadow:var(--shadow-hover); border-color:var(--border-hi); }
.ptg-card-header { display:flex; align-items:center; gap:11px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.ptg-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.ptg-card-nom  { font-size:14px; font-weight:800; color:#ffffff; letter-spacing:-0.01em; }
.ptg-card-role { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Badge "En cours" — pastel */
.ptg-badge-en-cours { margin-left:auto; padding:3px 8px; border-radius:20px; font-size:10px; font-weight:700; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); color:var(--green-li); letter-spacing:.05em; }

.ptg-kpis { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.ptg-kpi  { display:flex; flex-direction:column; gap:3px; }
.ptg-kpi-lbl  { font-size:11px; color:var(--text-muted); }
.ptg-kpi-val  { font-size:17px; font-weight:700; color:#ffffff; }
.ptg-kpi-val.green  { color:var(--green-li); }
.ptg-kpi-val.indigo { color:var(--indigo-li); }
.ptg-kpi-val.orange { color:var(--orange-li); }
.ptg-kpi-val.red    { color:var(--red); }
.ptg-kpi-val.gold   { color:var(--gold-li); }
.ptg-kpi-sub { font-size:10px; color:var(--text-muted); }

.ptg-select { padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--bg-card2); color:var(--text-main); font-size:12px; }
.ptg-table-wrapper { overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--border); }
.ptg-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.ptg-table th { padding:12px 16px; text-align:left; font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:.09em; text-transform:uppercase; background:var(--bg-card2); border-bottom:1px solid var(--border); }
.ptg-table td { padding:13px 16px; border-bottom:1px solid var(--border); color:var(--text-main); vertical-align:middle; }
.ptg-table tr:last-child td { border-bottom:none; }
.ptg-table tr:hover td { background:rgba(99,102,241,.028); }
.ptg-empty { text-align:center; padding:40px; color:var(--text-muted); font-style:italic; }

/* Badges statut pointage — pastels */
.ptg-statut { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:600; }
.ptg-statut.en-cours { background:rgba(16,185,129,.08);  border:1px solid rgba(16,185,129,.18);  color:var(--green-li); }
.ptg-statut.cloture  { background:rgba(99,102,241,.08);  border:1px solid rgba(99,102,241,.18);  color:var(--indigo-li); }
.ptg-statut.sans-clo { background:rgba(249,115,22,.08);  border:1px solid rgba(249,115,22,.18);  color:var(--orange-li); }
.ptg-ecart-pos { color:var(--green-li); font-weight:600; }
.ptg-ecart-neg { color:var(--red);      font-weight:600; }

/* ══════════════════════════════════════════════════
   TABLE SESSION EN COURS — 6 colonnes
══════════════════════════════════════════════════ */
.table-session-en-cours { min-width: 560px; }
.table-session-en-cours .num-cell  { width: 36px; text-align: center; }
.table-session-en-cours .col-date  { white-space: nowrap; }
.table-session-en-cours .heure-cell{ white-space: nowrap; }

/* Badges Montant */
.badge-montant {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-montant-dh     { color: #4ade80; font-weight: 700; }
.badge-montant-abonne { background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.25); }
.badge-montant-admin  { background: rgba(99,102,241,.12); color: #818cf8; border: 1px solid rgba(99,102,241,.25); }
.badge-montant-sup    { background: rgba(20,184,166,.12);  color: #2dd4bf; border: 1px solid rgba(20,184,166,.25); }
.badge-montant-vide   { color: var(--text-muted); }

/* Scroll indicator sur mobile */
.tableau-container { position: relative; }
.tableau-container::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
  background: linear-gradient(to right, transparent, rgba(7,9,19,.6));
  pointer-events: none; border-radius: 0 var(--r-md) var(--r-md) 0;
  opacity: 0; transition: opacity .2s;
}
.tableau-container.has-scroll::after { opacity: 1; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width:1200px) {
  .grille-charts, .grille-agents, .grille-equipements, .kpi-direction { grid-template-columns: repeat(2,1fr); }
  .grille-kpi { grid-template-columns: repeat(2,1fr); }
  .panneau-hero { grid-template-columns: 1fr 1fr; }
  .hero-tarif-block { display: none; }
  .header-center { display: none; }
}

@media (max-width:768px) {
  /* ── Header ── */
  .header-sep, .client-brand, .nss-version, .badge-live { display: none !important; }
  header { padding: 0 14px; height: 58px; }
  .nss-shield img { height: 28px; }
  .nss-text h1 { font-size: 13px; }
  .nss-text p  { display: none; }
  #horloge { font-size: 15px; }
  .btn-deconnexion { padding: 6px 10px; font-size: 11px; }

  /* ── Navigation ── */
  .tab-nav { padding: 0 10px; height: 46px; top: 58px; }
  .tab-btn { padding: 5px 11px; font-size: 12px; }

  /* ── Layout ── */
  .main-area { padding: 16px 14px 52px; }
  .grille-kpi, .grille-charts, .grille-agents, .grille-equipements, .kpi-direction { grid-template-columns: 1fr; }

  /* ── Hero ── */
  .hero-montant { font-size: 36px; }
  .panneau-hero { padding: 20px 18px; grid-template-columns: 1fr; }
  .hero-stat, .hero-tarif-block { display: none; }

  /* ── Modales ── */
  .modale { padding: 22px 16px; border-radius: var(--r-lg); max-width: calc(100vw - 20px); }
  .modale-titre, .modale h2 { font-size: 16px; }
  .modale-montant-hl-val { font-size: 30px; }
  .modale-btns { flex-direction: column; }
  .btn-annuler, .btn-confirmer { flex: none; width: 100%; }

  /* ── Filtres / formulaires ── */
  .filter-zone { flex-direction: column; align-items: stretch; gap: 8px; }
  .filter-select, .filter-date, .btn-reinit { width: 100%; }
  .btn-excel, .btn-filtrer { margin-left: 0; width: 100%; justify-content: center; }
  .compte-form-card { padding: 18px 14px; }

  /* ── Pointage ── */
  .ptg-filtres, .ptg-filtres-droite { flex-direction: column; align-items: stretch; }
  .ptg-periode-btns { display: grid; grid-template-columns: repeat(3,1fr); }
  .ptg-btn-periode { text-align: center; }
  .ptg-dates-custom, .ptg-date-input { width: 100%; }
  .btn-export-ptg { width: 100%; text-align: center; padding: 10px; }
  body.role-caissier .grille-agents { grid-template-columns: 1fr; }

  /* ── Touch targets ── */
  .tab-btn, .btn-reset, .btn-cloture, .btn-login, .btn-fermer,
  .btn-annuler, .btn-confirmer, .btn-excel, .compte-btn,
  .ptg-btn-periode, .btn-export-ptg, .btn-filtrer { min-height: 44px; }

  /* ── Table Session en cours ── */
  .table-session-en-cours { min-width: 480px; }
  .table-session-en-cours tbody td { padding: 10px 10px; font-size: 12px; }
  .table-session-en-cours thead th { padding: 10px 10px; font-size: 10px; }

  /* ── Autres tables ── */
  tbody td { padding: 11px 12px; font-size: 12px; }
  thead th  { padding: 10px 12px; font-size: 10px; }

  footer { padding: 14px; font-size: 10px; }
}

@media (max-width:480px) {
  /* ── Navigation : emoji uniquement ── */
  .tab-btn { font-size: 0; padding: 6px 9px; gap: 0; }
  .tab-btn-icon { font-size: 16px; }
  .tab-badge { display: none; }
  .nss-text { display: none; }

  /* ── Typographie ── */
  #horloge { font-size: 13px; }
  .hero-montant { font-size: 28px; }
  .hero-devise  { font-size: 13px; }
  .kpi-val { font-size: 26px; }
  .kpi-dir-val { font-size: 21px; }
  body.role-caissier .agent-stat-val    { font-size: 28px !important; }
  body.role-caissier .agent-montant-val { font-size: 24px !important; }

  /* ── Modales ── */
  .modale { padding: 16px 12px; }
  .modale-titre, .modale h2 { font-size: 14px; }
  .modale-sous { font-size: 12px; margin-bottom: 12px; }
  .modale-montant-hl-val { font-size: 26px; }

  /* ── Pointage ── */
  .ptg-kpis { grid-template-columns: 1fr; gap: 8px; }
  .barre-statut { flex-direction: column; align-items: flex-start; gap: 4px; }
  .main-area { padding: 12px 10px 52px; }

  /* ── Table Session en cours : masquer colonne Date ── */
  .table-session-en-cours .col-date { display: none; }
  .table-session-en-cours { min-width: 360px; }
}

/* ══════════════════════════════════════════════════
   CAISSIER ULTRA-MINIMAL
══════════════════════════════════════════════════ */
body.role-caissier #tab-dashboard .barre-statut       { display: none !important; }
body.role-caissier #tab-dashboard .panneau-hero       { display: none !important; }
body.role-caissier #tab-dashboard .grille-charts      { display: none !important; }
body.role-caissier #tab-dashboard .grille-equipements { display: none !important; }
body.role-caissier #section-historique-entrees        { display: none !important; }
body.role-caissier #tableau-acces-wrap                { display: none !important; }
body.role-caissier .grille-kpi[data-role="caissier"]  { display: grid; grid-template-columns: 1fr; max-width: 320px; }
body.role-caissier .grille-kpi[data-role="caissier"] .kpi-card:not(#card-ecart-caissier) { display: none !important; }
body.role-caissier #grille-agents { margin-top: 8px; }
body.role-caissier #tab-dashboard .section-header[data-role="admin"] { display: none !important; }
body.role-caissier #tab-dashboard { padding-top: 0; }
body.role-caissier .nav-tabs { justify-content: flex-start; }

/* ══════════════════════════════════════════════════
   SUPER ADMIN
══════════════════════════════════════════════════ */
body.role-super_admin .panneau-hero { border-color: rgba(168,85,247,.25); }
body.role-super_admin .panneau-hero::before { background: linear-gradient(135deg, rgba(168,85,247,.06) 0%, transparent 100%); }