/* ============================================================
   SUN7 LIFE — feuille de style
   Direction : poste de contrôle nocturne — comme si les comptes
   de l'entreprise s'affichaient sur le terminal d'un dispatch :
   fond quasi noir, un seul signal bleu qui pulse dans les
   données, alarme magenta pour ce qui casse la caisse, chiffres
   calés sur une grille comme un radar. Chaque panneau porte des
   coins d'équerre — le repère visuel qui revient partout.
   (Les noms de variables --gold-* sont conservés tels quels
   pour rester compatibles avec les styles injectés en JS ; ils
   ne pilotent plus de l'or mais le signal bleu du thème.)
   ============================================================ */

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

:root{
  /* --- Fond & surfaces --- */
  --bg:#050a11;
  --bg-soft:#070d15;
  --panel:#0a121c;
  --panel-alt:#0e1826;
  --panel-raised:#132132;
  --card:#0e1826;
  --border:#1b2c40;
  --border-soft:#142234;
  --border-strong:#2c4a68;

  /* --- Signal (accent) : repris sous les anciens noms --gold-* --- */
  --gold-light:#8fc7ff;
  --gold:#2d8ef7;
  --gold-deep:#0e5fc9;
  --gold-dark:#0a2f5c;
  --gold-ink:#00101f;
  --gold-glow:rgba(45,142,247,.35);

  /* --- Texte --- */
  --text:#e6f2f8;
  --muted:#5f7c92;
  --muted-2:#3a5468;

  /* --- États --- */
  --green:#2fe6a6;
  --green-dim:#0a2e28;
  --red:#ff3f70;
  --red-dim:#33101d;
  --danger:#ff3f70;
  --blue:#8b8bff;
  --blue-dim:#161233;

  /* --- Forme : angulaire, pas de courbes molles --- */
  --radius:3px;
  --radius-lg:6px;
  --radius-sm:2px;

  /* --- Profondeur --- */
  --shadow-sm:0 2px 14px rgba(0,0,0,.45);
  --shadow-md:0 18px 46px rgba(0,0,0,.55);
  --shadow-lg:0 36px 96px rgba(0,0,0,.7);
  --shadow-gold:0 0 26px rgba(45,142,247,.3);

  /* Ancien alias conservé pour compat avec les styles injectés en JS */
  --gold-dark-legacy:#0a2f5c;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
svg{width:18px !important; height:18px !important; flex-shrink:0; display:inline-block;}

body{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 640px at 12% -10%, rgba(45,142,247,.06), transparent 55%),
    radial-gradient(900px 520px at 102% 6%, rgba(255,63,112,.045), transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.brand-font{font-family:'Chakra Petch',sans-serif; letter-spacing:.03em; font-weight:700;}
.mono{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--gold); color:var(--gold-ink);}

:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:2px;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

#app{min-height:100vh; display:flex; flex-direction:column;}
.center-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}

/* ============================================================
   COINS D'ÉQUERRE — signature du thème
   Appliqués aux panneaux principaux (cartes, sections, modals)
   pour évoquer un cadrage radar / viseur de terminal.
   ============================================================ */
.card, .section-card, .modal{position:relative;}
.card::before, .card::after,
.section-card::before, .section-card::after,
.modal::before, .modal::after{
  content:""; position:absolute; width:13px; height:13px; pointer-events:none;
  border:1.5px solid var(--gold); opacity:.55;
}
.card::before, .section-card::before, .modal::before{
  top:-1px; left:-1px; border-right:none; border-bottom:none;
}
.card::after, .section-card::after, .modal::after{
  bottom:-1px; right:-1px; border-left:none; border-top:none;
}

/* ============================================================
   BOUTONS — angles coupés, style commande de console
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 19px; border-radius:0; border:1px solid transparent;
  font-weight:600; font-size:13.5px; letter-spacing:.04em; text-transform:uppercase;
  clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition:transform .12s ease, filter .12s ease, box-shadow .18s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
  position:relative;
}
.btn:active{transform:scale(.97);}
.btn-gold{
  background:linear-gradient(155deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color:var(--gold-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-gold);
}
.btn-gold:hover{filter:brightness(1.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 34px rgba(45,142,247,.45); transform:translateY(-1px);}
.btn-outline{background:rgba(255,255,255,.015); border-color:var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold); background:rgba(45,142,247,.07);}
.btn-danger{background:transparent; border-color:#4a1522; color:#ff8fab;}
.btn-danger:hover{background:var(--red-dim); border-color:#5c1c2b;}
.btn-green{background:linear-gradient(155deg,#5cf0bd,var(--green)); color:#04241a; box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.btn-green:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn-sm{padding:6px 13px; font-size:11.5px;}
.btn-block{width:100%; justify-content:center;}
.btn[disabled]{opacity:.35; cursor:not-allowed; transform:none !important; filter:none !important; box-shadow:none !important;}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.field{margin-bottom:16px;}
.field label{display:block; font-size:11.5px; color:var(--muted); margin-bottom:7px; text-transform:uppercase; letter-spacing:.09em; font-weight:700; font-family:'JetBrains Mono',monospace;}
.input, select, textarea{
  width:100%; background:var(--panel-alt); border:1px solid var(--border);
  color:var(--text); padding:10.5px 12px; border-radius:var(--radius-sm); font-size:14.5px; font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input:hover, select:hover, textarea:hover{border-color:var(--border-strong);}
.input:focus, select:focus, textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow); background:var(--panel-raised);}
.input-row{display:flex; gap:12px;}
.input-row .field{flex:1;}
.hint{font-size:12px; color:var(--muted-2); margin-top:6px;}
.error-text{color:#ff8fab; font-size:13px; margin:-6px 0 14px; font-weight:500;}

.checkbox-row input[type="checkbox"]{accent-color:var(--gold); width:16px; height:16px;}

/* ============================================================
   BADGES — étiquettes d'état, plus pilule mais plaque
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:0;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  border:1px solid transparent; border-left-width:3px; font-family:'JetBrains Mono',monospace;
}
.badge-pending{background:#332405; color:#ffc94d; border-color:rgba(255,201,77,.3);}
.badge-cdd{background:#0f1c33; color:#8b9bff; border-color:rgba(139,139,255,.28);}
.badge-cdi{background:#0a2e28; color:#2fe6a6; border-color:rgba(47,230,166,.28);}
.badge-rejected{background:#331018; color:#ff7d9c; border-color:rgba(255,63,112,.28);}
.badge-admin{background:#1c1035; color:#c39bff; border-color:rgba(195,155,255,.28);}
.badge-patron{background:#332405; color:#ffc94d; border-color:rgba(255,201,77,.28);}
.badge-employe{background:#101a26; color:#88a4b8; border-color:rgba(136,164,184,.2);}

/* ============================================================
   ÉCRAN DE CONNEXION
   ============================================================ */
.auth-shell{
  width:100%; max-width:940px; display:grid; grid-template-columns:1.05fr 1fr;
  background:var(--panel); border:1px solid var(--border); border-radius:0; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
@media(max-width:760px){.auth-shell{grid-template-columns:1fr;}}

.auth-side{
  background:
    radial-gradient(480px 320px at 15% 8%, var(--gold-glow), transparent 60%),
    radial-gradient(360px 260px at 100% 100%, rgba(139,139,255,.1), transparent 60%),
    linear-gradient(165deg, #0c141f, #050810 72%);
  padding:46px 40px; display:flex; flex-direction:column; justify-content:space-between; position:relative;
  border-right:1px solid var(--border); overflow:hidden;
}
@media(max-width:760px){.auth-side{border-right:none; border-bottom:1px solid var(--border);}}
.auth-side::before{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(45,142,247,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(45,142,247,.05) 0 1px, transparent 1px 34px);
  pointer-events:none;
}
.auth-side::after{
  content:""; position:absolute; top:-40%; left:-10%; width:60%; height:180%;
  background:radial-gradient(circle, var(--gold-glow), transparent 65%);
  filter:blur(10px); opacity:.5; animation:driftGlow 14s ease-in-out infinite; pointer-events:none;
}
@keyframes driftGlow{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(6%, 8%) scale(1.12);}
}

.brand-mark{display:flex; align-items:center; gap:11px; position:relative;}
.brand-mark .glyph{
  width:40px; height:40px; border-radius:0;
  background:linear-gradient(155deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  display:flex; align-items:center; justify-content:center; color:var(--gold-ink); font-weight:800; font-size:19px;
  font-family:'Chakra Petch',sans-serif; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 30px rgba(45,142,247,.3);
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.brand-mark .name{font-size:22px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
.brand-mark .name small{display:block; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); font-weight:600; letter-spacing:.2em;}

.sun7-stats{position:relative; margin:32px 0;}
.sun7-stats .row{display:flex; justify-content:space-between; align-items:baseline; padding:13px 0; border-bottom:1px dashed var(--border-soft);}
.sun7-stats .row:last-child{border-bottom:none;}
.sun7-stats .row .k{color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-family:'JetBrains Mono',monospace;}
.sun7-stats .row .v{font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:700; color:var(--gold-light);}

.auth-quote{position:relative; color:var(--muted-2); font-size:12.5px; line-height:1.65; border-left:2px solid var(--gold-deep); padding-left:13px; font-family:'JetBrains Mono',monospace;}

.auth-form-side{padding:46px 42px; display:flex; flex-direction:column;}
.tabs{display:flex; gap:4px; background:var(--panel-alt); padding:4px; border-radius:0; margin-bottom:28px; border:1px solid var(--border-soft);}
.tabs button{flex:1; background:transparent; border:none; padding:10px; border-radius:0; color:var(--muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; transition:.15s;}
.tabs button.active{background:linear-gradient(155deg, var(--gold-light), var(--gold)); color:var(--gold-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
.admin-note{margin-top:auto; padding-top:19px; font-size:11.5px; color:var(--muted-2); border-top:1px solid var(--border-soft);}
.admin-note .mono{color:var(--muted);}

/* ============================================================
   STRUCTURE APP : SIDEBAR + MAIN
   ============================================================ */
.shell{display:flex; flex:1; min-height:100vh;}
.sidebar{
  width:252px; background:linear-gradient(180deg, var(--panel), var(--bg-soft) 92%);
  border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; position:sticky;
  top:0; height:100vh; height:100dvh; overscroll-behavior:contain;
}
.sidebar::after{
  content:""; position:absolute; top:0; right:-1px; width:1px; height:100%;
  background:linear-gradient(180deg, var(--gold-glow), transparent 30%);
  pointer-events:none;
}
.sidebar-brand{padding:23px 20px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border-soft); position:relative;}
.sidebar-brand::before{
  content:""; position:absolute; inset:0; background:radial-gradient(120px 60px at 20px 10px, var(--gold-glow), transparent 70%);
  pointer-events:none;
}
.sidebar-brand .glyph{
  width:33px; height:33px; border-radius:0;
  background:linear-gradient(155deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  display:flex; align-items:center; justify-content:center; color:var(--gold-ink); font-weight:800; font-size:16px;
  font-family:'Chakra Petch',sans-serif; flex-shrink:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  clip-path:polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.sidebar-brand .name{font-size:15.5px; font-weight:700; line-height:1.15; position:relative; text-transform:uppercase; letter-spacing:.05em;}
.sidebar-brand .name small{display:block; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--muted); font-weight:600; letter-spacing:.15em; text-transform:none;}

.sidebar-section-label{font-size:10px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.13em; padding:19px 20px 8px; font-weight:700; font-family:'JetBrains Mono',monospace;}

/* Zone défilante : logo, entreprise, catégories de menu.
   Le footer (pseudo + déconnexion) est un frère EN DEHORS de ce
   bloc, donc il ne défile jamais avec la liste des catégories. */
.sidebar-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;}

.nav-item{
  display:flex; align-items:center; gap:11px; padding:11px 20px; color:var(--muted); font-size:13.5px; font-weight:500;
  border-left:3px solid transparent; transition:.15s ease; position:relative;
}
.nav-item:hover{color:var(--text); background:var(--panel-alt);}
.nav-item.active{
  color:var(--gold-light); background:linear-gradient(90deg, rgba(45,142,247,.1), transparent 85%);
  border-left-color:var(--gold); font-weight:600;
}
.nav-item svg{flex-shrink:0; width:17px !important; height:17px !important;}

.nav-subgroup{display:flex; flex-direction:column; margin:2px 0 4px 22px; border-left:1px solid var(--border-soft); padding-left:8px;}
.nav-subitem{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:0; font-size:12px; color:var(--muted); cursor:pointer; transition:.15s;}
.nav-subitem svg{width:13px !important; height:13px !important;}
.nav-subitem:hover{background:var(--panel-alt); color:var(--text);}
.nav-subitem.active{background:rgba(45,142,247,.1); color:var(--gold-light);}

.sidebar-footer{flex-shrink:0; padding:16px; border-top:1px solid var(--border-soft); background:linear-gradient(180deg, var(--panel), var(--bg-soft) 92%);}
.userchip{display:flex; align-items:center; gap:10px; padding:8px 6px 14px;}
.userchip .av{
  width:34px; height:34px; border-radius:0;
  background:linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--gold-ink);
  font-family:'Chakra Petch',sans-serif; box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.userchip .info{overflow:hidden;}
.userchip .info .n{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.userchip .info .r{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-family:'JetBrains Mono',monospace;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:21px 32px;
  border-bottom:1px solid var(--border-soft); flex-wrap:wrap; gap:14px; position:relative;
  background:linear-gradient(180deg, rgba(45,142,247,.035), transparent);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-glow), transparent);
}
.topbar h1{margin:0; font-size:24px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.topbar .sub{color:var(--muted); font-size:13px; margin-top:3px; font-family:'JetBrains Mono',monospace;}
.topbar-right{display:flex; align-items:center; gap:16px;}
.clock{
  font-family:'JetBrains Mono',monospace; font-size:13.5px; color:var(--gold-light);
  background:var(--panel-alt); border:1px solid var(--border); padding:7px 13px; border-radius:0;
  letter-spacing:.04em;
}
.content{padding:28px 32px; flex:1;}

/* ============================================================
   CARTES & STATS
   ============================================================ */
.grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:26px;}
.card{
  background:linear-gradient(165deg, var(--panel-raised), var(--panel));
  border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong);}
.stat-card{display:flex; flex-direction:column; gap:14px;}
.stat-card .top-row{display:flex; align-items:center; gap:10px;}
.icon-box{width:37px; height:37px; border-radius:0; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);}
.icon-box svg{width:18px !important; height:18px !important;}
.ib-green{background:linear-gradient(155deg,#0f3d2e,#0a251c); color:#4ff2be;}
.ib-blue{background:linear-gradient(155deg,#1a1a45,#111129); color:#a5a5ff;}
.ib-gold{background:linear-gradient(155deg,#0d2a42,#081522); color:#6fa8ff;}
.ib-purple{background:linear-gradient(155deg,#2c1544,#1a0d29); color:#cd94ff;}
.stat-card .label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-family:'JetBrains Mono',monospace;}
.stat-card .value{font-family:'JetBrains Mono',monospace; font-size:25px; font-weight:700; letter-spacing:-.01em;}

.section-card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:24px; box-shadow:var(--shadow-sm); overflow:hidden;
}
.section-card .sc-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border-soft); gap:12px; flex-wrap:wrap; position:relative;}
.section-card .sc-head::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold);}
.section-card .sc-head h3{margin:0; font-size:16px; display:flex; align-items:center; gap:9px; text-transform:uppercase; letter-spacing:.03em;}
.section-card .sc-body{padding:20px;}

/* ============================================================
   TABLEAUX
   ============================================================ */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{text-align:left; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:0 12px 11px; font-weight:700; font-family:'JetBrains Mono',monospace;}
tbody td{padding:12.5px; border-top:1px solid var(--border-soft);}
tbody tr{transition:background-color .12s ease;}
tbody tr:hover{background:var(--panel-alt);}
td.num, th.num{text-align:right; font-family:'JetBrains Mono',monospace;}
.table-wrap{overflow-x:auto;}

.empty-state{text-align:center; padding:46px 20px; color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:13px;}
.empty-state a{color:var(--gold); font-weight:600; text-decoration:none;}
.empty-state a:hover{text-decoration:underline;}

/* ============================================================
   TOASTS
   ============================================================ */
.toast{
  position:fixed; bottom:22px; right:22px; background:var(--panel-raised); border:1px solid var(--border);
  border-left:3px solid var(--gold); padding:13px 18px; border-radius:0; font-size:13.5px;
  box-shadow:var(--shadow-lg); z-index:999; animation:toastin .22s ease; font-family:'JetBrains Mono',monospace;
}
.toast.err{border-left-color:var(--red);}
.toast.ok{border-left-color:var(--green);}
@keyframes toastin{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(2,4,7,.82); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:900; padding:20px;
  animation:overlayin .15s ease;
}
@keyframes overlayin{from{opacity:0;} to{opacity:1;}}
.modal{
  background:var(--panel-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); width:100%; max-width:460px; max-height:88vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); animation:modalin .18s ease;
}
@keyframes modalin{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--border-soft);}
.modal-head h3{margin:0; font-size:16px; text-transform:uppercase; letter-spacing:.03em;}
.modal-close{background:none; border:none; color:var(--muted); font-size:20px; line-height:1; transition:color .12s ease;}
.modal-close:hover{color:var(--text);}
.modal-body{padding:20px 22px;}
.modal-wide{max-width:600px;}

/* ============================================================
   DIVERS
   ============================================================ */
.divider-label{display:flex; align-items:center; gap:10px; color:var(--muted-2); font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; margin:18px 0; font-weight:700; font-family:'JetBrains Mono',monospace;}
.divider-label::before, .divider-label::after{content:""; flex:1; height:1px; background:var(--border);}

.radio-toggle{display:flex; gap:8px; margin-bottom:16px;}
.radio-toggle label{flex:1; text-align:center; padding:9px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12.5px; color:var(--muted); cursor:pointer; transition:.15s; text-transform:uppercase; letter-spacing:.03em;}
.radio-toggle input{display:none;}
.radio-toggle input:checked + label{border-color:var(--gold); color:var(--gold-light); background:rgba(45,142,247,.08); box-shadow:inset 0 0 0 1px rgba(45,142,247,.15);}

.banner-screen{max-width:480px; text-align:center;}
.banner-screen .glyph-big{width:64px; height:64px; margin:0 auto 20px; border-radius:0; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:var(--shadow-md);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);}

.inline-input-num{width:90px; padding:6px 8px; font-size:13px;}
.taux-cell{display:flex; align-items:center; gap:4px;}
.actions-cell{display:flex; gap:6px; flex-wrap:wrap;}
.service-btn{display:flex; align-items:center; gap:9px;}

.pulse-dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(47,230,166,.6); animation:pulse 1.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,230,166,.55);} 70%{box-shadow:0 0 0 8px rgba(47,230,166,0);} 100%{box-shadow:0 0 0 0 rgba(47,230,166,0);}}

.footer-note{text-align:center; color:var(--muted-2); font-size:11px; padding:18px; font-family:'JetBrains Mono',monospace;}

::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:#1c2a3a; border-radius:0; border:2px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep); background-clip:content-box;}
::-webkit-scrollbar-track{background:transparent;}

.glyph img{width:100%; height:100%; object-fit:contain;}

/* ============================================================
   ENTREPRISES / LOGOS / CHIPS
   ============================================================ */
.company-chip{display:flex; align-items:center; gap:10px; padding:12px 20px; border-bottom:1px solid var(--border-soft);}
.company-logo{width:30px; height:30px; border-radius:0; object-fit:contain; background:var(--panel-alt); border:1px solid var(--border); flex-shrink:0;}
.company-logo-placeholder{display:flex; align-items:center; justify-content:center; color:var(--muted);}
.company-logo-placeholder svg{width:15px !important; height:15px !important;}
.company-chip-name{font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.logo-thumb{width:34px; height:34px; border-radius:0; object-fit:contain; background:var(--panel-alt); border:1px solid var(--border);}
.logo-thumb-placeholder{display:flex; align-items:center; justify-content:center; color:var(--muted-2);}
.logo-upload-row{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.logo-preview{width:56px; height:56px; border-radius:0; object-fit:contain; background:var(--panel-alt); border:1px dashed var(--border); flex-shrink:0;}
.logo-preview-placeholder{display:flex; align-items:center; justify-content:center; color:var(--muted-2);}
.logo-preview-placeholder svg{width:22px !important; height:22px !important;}
.logo-upload-controls{flex:1;}
.logo-upload-controls input[type="file"]{width:100%; font-size:12.5px; color:var(--muted);}

.user-pick-list{max-height:230px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel-alt);}
.user-pick-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border-soft); font-size:13.5px;}
.user-pick-row:last-child{border-bottom:none;}
.user-pick-row input{flex-shrink:0; width:16px; height:16px; accent-color:var(--gold);}
.user-pick-row .upn{color:var(--muted); font-size:11.5px; font-family:'JetBrains Mono',monospace;}

/* ============================================================
   DISCORD
   ============================================================ */
.discord-btn{background:#5865F2; color:#fff;}
.discord-btn:hover{filter:brightness(1.1); transform:translateY(-1px);}
.discord-linked{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--green-dim); border:1px solid #124a3a; color:#8ff5d0; font-size:13.5px; margin-bottom:12px;}
.discord-unlinked{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); background:rgba(45,142,247,.06); border:1px solid rgba(45,142,247,.2); color:var(--muted); font-size:13.5px; margin-bottom:12px;}

.footer-credit {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: 0px;
    padding: 15px 0;
    border-top: 1px solid #eeeeee13; /* facultatif */
    font-family: Arial, sans-serif;
}

/* ============================================================
   RESPONSIVE — mobile / tablette
   Le sidebar devient un panneau "off-canvas" qui glisse depuis
   la gauche sur petits écrans, ouvert via le bouton hamburger
   ajouté dans la topbar. Tout le reste (grilles, tableaux,
   formulaires, modals) se réajuste par paliers.
   ============================================================ */

/* Bouton hamburger : masqué par défaut (desktop), affiché <900px */
.mobile-menu-btn{
  display:none; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; padding:0; background:var(--panel-alt);
  border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm);
}
.mobile-menu-btn:active{transform:scale(.94);}
.mobile-menu-btn svg{width:19px !important; height:19px !important;}

/* Voile sombre derrière le sidebar ouvert, masqué par défaut */
.sidebar-overlay{display:none;}

/* ---------- Écrans larges (petits laptops / grands tablettes) ---------- */
@media (max-width:1180px){
  .sidebar{width:220px;}
  .content{padding:24px 22px;}
}

/* ---------- Tablette (portrait) et téléphone : sidebar off-canvas ---------- */
@media (max-width:900px){
  .shell{position:relative; overflow-x:hidden;}
  .sidebar{
    position:fixed; top:0; left:0; z-index:960; width:82vw; max-width:300px;
    height:100vh; height:100dvh; transform:translateX(-100%);
    transition:transform .25s ease; box-shadow:var(--shadow-lg);
  }
  .shell.sidebar-open .sidebar{transform:translateX(0);}
  .sidebar-overlay{
    display:block; position:fixed; inset:0; z-index:950; background:rgba(2,4,7,.7);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .shell.sidebar-open .sidebar-overlay{opacity:1; pointer-events:auto;}
  .mobile-menu-btn{display:inline-flex;}
  .main{width:100%; min-width:0;}
  .topbar{padding:16px 18px;}
  .topbar h1{font-size:19px;}
  .content{padding:20px 16px;}
}

/* ---------- Téléphone ---------- */
@media (max-width:640px){
  .content{padding:16px 12px;}
  .topbar{padding:13px 14px; gap:10px; flex-wrap:wrap;}
  .topbar h1{font-size:17px; line-height:1.25;}
  .topbar .sub{font-size:11.5px;}
  .topbar-right{gap:10px;}
  .clock{padding:6px 10px; font-size:12px;}

  .grid-cards{grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px;}
  .stat-card{gap:9px;}
  .stat-card .value{font-size:18px;}
  .stat-card .label{font-size:10px;}
  .icon-box{width:32px; height:32px;}
  .icon-box svg{width:16px !important; height:16px !important;}
  .card{padding:14px;}

  .section-card{margin-bottom:16px;}
  .section-card .sc-head{padding:14px 15px;}
  .section-card .sc-head h3{font-size:14px;}
  .section-card .sc-body{padding:15px;}

  .btn{padding:9px 14px; font-size:12.5px;}
  .btn-sm{padding:6px 10px; font-size:11px;}
  .actions-cell{gap:5px;}

  .input-row{flex-direction:column; gap:0;}
  .field{margin-bottom:13px;}

  table{font-size:12px;}
  thead th{padding:0 9px 9px;}
  tbody td{padding:9px;}

  .modal{max-width:94vw;}
  .modal-wide{max-width:94vw;}
  .modal-head{padding:14px 16px;}
  .modal-head h3{font-size:14.5px;}
  .modal-body{padding:15px 16px;}

  .auth-side, .auth-form-side{padding:28px 20px;}
  .brand-mark .name{font-size:18px;}
  .sun7-stats .row .v{font-size:17px;}
  .auth-quote{font-size:11.5px;}

  .banner-screen .glyph-big{width:52px; height:52px; font-size:22px;}
  .toast{left:12px; right:12px; bottom:14px; padding:11px 14px;}
}

/* ---------- Très petits écrans ---------- */
@media (max-width:420px){
  .grid-cards{grid-template-columns:1fr;}
  .sidebar-brand{padding:18px 16px;}
  .userchip .info .n{font-size:12px;}
  .company-chip{padding:10px 16px;}
  .clock{display:none;}
}

/* ============================================================
   MODE FIVEM (NUI) — cadre fixe 1272 x 685
   La classe "env-fivem" est posée sur <html> par le script inline
   d'index.html UNIQUEMENT quand l'appli tourne dans la NUI FiveM
   (détection via window.invokeNative). Le mode web classique
   ("env-web") n'est jamais impacté par ce bloc et garde son
   comportement 100% responsive habituel.

   On fige la tablette à 1272 x 685px, centrée à l'écran, avec un
   fond transparent tout autour pour laisser voir le jeu derrière
   la NUI. script.js gère en plus une mise à l'échelle (transform:
   scale) pour que le cadre reste toujours visible en entier quelle
   que soit la résolution du jeu.
   ============================================================ */
html.env-fivem, html.env-fivem body{
  background:transparent !important;
  width:100%; height:100%;
  margin:0; padding:0;
  overflow:hidden;
}
html.env-fivem body{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
html.env-fivem .tablet-frame{
  width:1272px;
  height:685px;
  flex-shrink:0;
  box-sizing:border-box;
  padding:14px 14px 22px;
  border-radius:34px;
  background:linear-gradient(155deg, #202832, #10151c 55%, #05080c);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 50px 120px rgba(0,0,0,.65),
    0 14px 34px rgba(0,0,0,.55),
    var(--shadow-gold);
  display:flex;
  flex-direction:column;
  position:relative;
}
/* Petite caméra frontale en haut du bezel : le détail qui vend l'effet "tablette" */
html.env-fivem .tablet-frame::before{
  content:"";
  position:absolute;
  top:6.5px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%;
  background:#000;
  box-shadow:0 0 0 2.5px rgba(255,255,255,.045), inset 0 0 2px rgba(120,170,255,.5);
  z-index:2;
}
/* L'écran proprement dit : coins plus petits que le bezel, fond du thème,
   légère vignette + reflet diagonal pour un vrai rendu "verre de tablette". */
html.env-fivem .tablet-frame #app{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  border-radius:20px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 640px at 12% -10%, rgba(45,142,247,.06), transparent 55%),
    radial-gradient(900px 520px at 102% 6%, rgba(255,63,112,.045), transparent 50%),
    var(--bg);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 2px 16px rgba(0,0,0,.5);
}
html.env-fivem .tablet-frame #app::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:linear-gradient(115deg, rgba(255,255,255,.05) 0%, transparent 16%, transparent 84%, rgba(255,255,255,.025) 100%);
}
html.env-fivem .tablet-frame #app > *{position:relative; z-index:1;}
html.env-fivem .tablet-frame .footer-credit{
  flex-shrink:0;
  color:rgba(255,255,255,.28);
}
/* En mode FiveM, le cadre est plus petit que la résolution du jeu : les éléments
   normalement "position:fixed" (calés sur toute la fenêtre) doivent rester
   confinés à l'intérieur de l'écran de la tablette, pas déborder sur le jeu. */
html.env-fivem .modal-overlay{position:absolute; inset:0;}
html.env-fivem .toast{position:absolute; bottom:18px; right:18px;}

/* --- Hauteurs internes calées sur le cadre (685px) et non plus sur 100vh --- */
html.env-fivem .shell{
  min-height:0;
  height:100%;
  flex:1 1 auto;
  overflow:hidden;
}
html.env-fivem .sidebar{
  position:relative;
  top:auto;
  height:100%;
}
html.env-fivem .main{
  height:100%;
  min-width:0;
  overflow:hidden;
}
html.env-fivem .content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}
html.env-fivem .topbar{
  flex-shrink:0;
}

/* --- Mode compact : le cadre ne fait que 685px de haut, donc on
   réduit fonts/paddings sur toutes les pages (cartes, tableaux,
   modals...) pour que rien ne déborde ni ne paraisse surdimensionné,
   quelle que soit la résolution réelle du jeu. --- */
html.env-fivem .sidebar-brand{padding:20px 20px;}
html.env-fivem .company-chip{padding:12px 20px;}
html.env-fivem .sidebar-section-label{padding:18px 20px 8px;}
html.env-fivem .nav-item{padding:11px 20px; font-size:13.5px;}
html.env-fivem .sidebar-footer{padding:16px 16px;}

html.env-fivem .topbar{padding:18px 28px;}
html.env-fivem .topbar h1{font-size:21px;}
html.env-fivem .topbar .sub{font-size:12.5px; margin-top:3px;}
html.env-fivem .clock{padding:7px 13px; font-size:13px;}
html.env-fivem .content{padding:24px 28px;}

html.env-fivem .grid-cards{gap:15px; margin-bottom:22px;}
html.env-fivem .card{padding:16px;}
html.env-fivem .stat-card{gap:12px;}
html.env-fivem .stat-card .value{font-size:22px;}
html.env-fivem .stat-card .label{font-size:11px;}
html.env-fivem .icon-box{width:35px; height:35px;}
html.env-fivem .icon-box svg{width:17px !important; height:17px !important;}

html.env-fivem .section-card{margin-bottom:20px;}
html.env-fivem .section-card .sc-head{padding:16px 18px;}
html.env-fivem .section-card .sc-head h3{font-size:15px;}
html.env-fivem .section-card .sc-body{padding:18px;}

html.env-fivem table{font-size:13.5px;}
html.env-fivem thead th{padding:0 12px 10px;}
html.env-fivem tbody td{padding:11px 12px;}

html.env-fivem .btn{padding:9px 18px; font-size:13px;}
html.env-fivem .btn-sm{padding:6px 12px; font-size:11.5px;}

html.env-fivem .field{margin-bottom:15px;}
html.env-fivem .input, html.env-fivem select, html.env-fivem textarea{padding:10px 11px; font-size:14px;}

html.env-fivem .modal{max-width:450px; max-height:86%;}
html.env-fivem .modal-wide{max-width:600px;}
html.env-fivem .modal-head{padding:16px 20px;}
html.env-fivem .modal-head h3{font-size:15.5px;}
html.env-fivem .modal-body{padding:18px 20px;}