/* ═══════════════════════════════════════════════════
   SignBJ — CSS Principal
   PKI nationale du Bénin
   Couleurs : Vert #006B3F · Jaune #FCBE00 · Rouge #CE1126
════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root,[data-theme="light"]{
  --green:#006B3F;--gl:#E8F5EE;--gm:#2E9B63;--gd:#004D2C;
  --yellow:#FCBE00;--yl:#FFF9E0;--red:#CE1126;--rl:#FEF2F2;
  --bg:#F4F6F9;--sf:#FFFFFF;--sf2:#F0F2F5;--sf3:#E8EAF0;
  --bd:#E2E5EA;--bd2:#CDD0D8;
  --tx:#1A1D23;--tx2:#6B7280;--tx3:#9CA3AF;--ah:#005534;
  --blue:#1A56DB;--bl:#EBF5FF;--orange:#D97706;--ol:#FFFBEB;
  --purple:#7C3AED;--pl:#F5F3FF;--teal:#0E7490;--tl:#ECFEFF;
  --pink:#BE185D;--pkl:#FDF2F8;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
  --shadow-md:0 2px 8px rgba(0,0,0,.08),0 8px 32px rgba(0,0,0,.06);
  --shadow-lg:0 4px 24px rgba(0,0,0,.12),0 16px 48px rgba(0,0,0,.08);
  --r:12px;--rs:6px;--font:'DM Sans',sans-serif;--mono:'DM Mono',monospace;
}
[data-theme="dark"]{
  --green:#2E9B63;--gl:#0A2E1A;--gm:#3DB87A;--gd:#4ECF8A;
  --yellow:#FCBE00;--yl:#2A2200;--red:#F87171;--rl:#2D1010;
  --bg:#0D1117;--sf:#161B26;--sf2:#1C2333;--sf3:#222B3D;
  --bd:#283044;--bd2:#324060;
  --tx:#E2E8F0;--tx2:#8892A4;--tx3:#586280;--ah:#3DB87A;
  --blue:#60A5FA;--bl:#0F1E3D;--orange:#FBD38D;--ol:#2D1E00;
  --purple:#A78BFA;--pl:#1A0F3D;--teal:#67E8F9;--tl:#0C2830;
  --pink:#F9A8D4;--pkl:#2D0A1C;
  --shadow:0 1px 4px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.2);
  --shadow-md:0 2px 10px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.25);
  --shadow-lg:0 4px 24px rgba(0,0,0,.4),0 16px 48px rgba(0,0,0,.35);
}

body{font-family:var(--font);background:var(--bg);color:var(--tx);font-size:14px;line-height:1.5;height:100vh;display:flex;flex-direction:column;overflow:hidden;transition:background .3s,color .3s}

/* ══ TOPBAR ══ */
.topbar{background:#e6e6e6;border-bottom:1px solid var(--bd);padding:0 20px;height:70px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:200;transition:background .3s,border-color .3s}
.tbl{display:flex;align-items:center;gap:12px}
.logo-mark{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:2}
.logo-text{font-size:15px;font-weight:600;color:var(--tx);letter-spacing:-.3px}
.logo-sub{font-size:11px;color:var(--tx2);margin-top:-2px}
.logo-stack{display:flex;flex-direction:column}
.dv{width:1px;height:28px;background:var(--bd);margin:0 4px;flex-shrink:0}
.cert-badge{display:flex;align-items:center;gap:6px;background:var(--gl);border:1px solid var(--gm);padding:5px 10px;border-radius:20px;font-size:12px;font-weight:500;color:var(--green);cursor:pointer;transition:all .15s}
.cert-badge:hover{opacity:.85}
.cert-dot{width:7px;height:7px;background:var(--gm);border-radius:50%}
.tb-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--bd);background:var(--sf);transition:all .15s;flex-shrink:0;position:relative}
.tb-btn:hover{background:var(--sf2)}
.tb-btn svg{width:14px;height:14px;stroke:var(--tx2);fill:none;stroke-width:2}
.tb-dot{position:absolute;top:1px;right:1px;width:8px;height:8px;background:var(--red);border-radius:50%;border:1.5px solid var(--sf)}
.avatar{width:32px;height:32px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;cursor:pointer;flex-shrink:0}
.offline-badge{display:flex;align-items:center;gap:5px;background:var(--ol);border:1px solid var(--orange);padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:600;color:var(--orange);cursor:pointer;display:none}
.offline-badge.show{display:flex}

/* ══ PKI BAR ══ */
.pki-bar{background:var(--sf);border-bottom:1px solid var(--bd);padding:4px 20px;display:flex;align-items:center;gap:14px;flex-shrink:0;transition:background .3s}
.pki-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tx2)}
.pdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pdot.ok{background:var(--gm)} .pdot.warn{background:var(--yellow)} .pdot.err{background:var(--red)} .pdot.off{background:var(--tx3)}
.pki-right{margin-left:auto;font-size:12px;color:var(--tx3);display:flex;align-items:center;gap:8px}

/* ══ APP ══ */
.app{display:flex;flex:1;overflow:hidden}
.sidebar{width:20%;background:var(--sf);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:10px 0;flex-shrink:0;overflow-y:auto;transition:background .3s,border-color .3s}
.ss{padding:0 10px;margin-bottom:14px}
.sl{font-size:10px;font-weight:600;color:var(--tx3);letter-spacing:.7px;text-transform:uppercase;padding:0 8px;margin-bottom:5px}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--rs);cursor:pointer;color:var(--tx2);font-size:14px;transition:all .15s}
.nav-item:hover{background:var(--sf2);color:var(--tx)}
.nav-item.active{background:var(--gl);color:var(--green);font-weight:500}
.nav-item svg{width:15px;height:15px;opacity:.7;flex-shrink:0}
.nav-item.active svg{opacity:1}
.nav-badge{margin-left:auto;font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px}
.nb-y{background:var(--yellow);color:#6B4800} .nb-r{background:var(--rl);color:var(--red)} .nb-b{background:var(--bl);color:var(--blue)} .nb-p{background:var(--pl);color:var(--purple)}
.sidebar-footer{margin-top:auto;padding:8px 10px;border-top:1px solid var(--bd)}
.sf-user{display:flex;align-items:center;gap:8px;padding:7px;border-radius:var(--rs);cursor:pointer;transition:all .15s}
.sf-user:hover{background:var(--sf2)}
.sf-av{width:27px;height:27px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;flex-shrink:0}

/* ══ MAIN / TOOLBAR ══ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.toolbar{background:var(--sf);border-bottom:1px solid var(--bd);padding:9px 16px;display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;transition:background .3s}
.tbtn{display:flex;align-items:center;gap:5px;padding:6px 11px;border-radius:var(--rs);border:1px solid var(--bd);background:var(--sf);color:var(--tx2);font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap}
.tbtn:hover{background:var(--sf2);color:var(--tx);border-color:var(--bd2)}
.tbtn svg{width:13px;height:13px;flex-shrink:0}
.tbtn.primary{background:var(--green);color:#fff;border-color:var(--green)}
.tbtn.primary:hover{background:var(--ah)}
.tbtn.active{background:var(--gl);color:var(--green);border-color:var(--gm)}
.tbtn.danger{background:var(--rl);color:var(--red);border-color:var(--red)}
.tbtn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.tsep{width:1px;height:22px;background:var(--bd);margin:0 2px;flex-shrink:0}
.zoom-ctl{display:flex;align-items:center;gap:3px;background:var(--sf2);border:1px solid var(--bd);border-radius:var(--rs);padding:4px 7px;font-size:12px;color:var(--tx2)}
.zbtn{cursor:pointer;padding:0 3px;font-size:15px;color:var(--tx3);user-select:none;line-height:1}
.zbtn:hover{color:var(--tx)}
.content{display:flex;flex:1;overflow:hidden}

/* ══ PDF AREA + DRAWING MODE ══ */
.pdf-area{flex:1;overflow:auto;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding:20px 20px 40px;position:relative}
.pdf-area.drawing-mode{cursor:crosshair}
.pdf-area.drawing-mode .sig-zone{pointer-events:none}
.pdf-page{width:578px;min-height:816px;background:#fff;box-shadow:var(--shadow-md);position:relative;border-radius:3px;overflow:hidden;transition:transform .2s;transform-origin:top center;flex-shrink:0;margin-bottom:12px}
.pdf-page.drawing-mode{cursor:crosshair}
.pdf-header{padding:24px 36px 12px;border-bottom:2px solid var(--green);display:flex;justify-content:space-between;align-items:flex-start}
.pdf-org{font-size:11.5px;font-weight:600;color:var(--green)}
.pdf-org-sub{font-size:9px;color:#666}
.pdf-body{padding:20px 36px;display:flex;flex-direction:column;gap:12px}
.pdf-title{font-size:15px;font-weight:600;text-align:center;color:#1A1D23}
.pdf-subtitle{font-size:10px;text-align:center;color:#666;margin-top:-8px}
.pdf-section{font-size:10.5px;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.pdf-text{font-size:10.5px;color:#333;line-height:1.7;text-align:justify}
.pdf-table{width:100%;border-collapse:collapse;font-size:10px}
.pdf-table th{background:var(--green);color:#fff;padding:5px 8px;text-align:left;font-weight:500}
.pdf-table td{padding:5px 8px;border-bottom:1px solid #EEE;color:#333}
.pdf-table tr:nth-child(even) td{background:#FAFAFA}
/* Drawing guide overlay */
.draw-guide{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,107,63,.9);color:#fff;padding:7px 16px;border-radius:20px;font-size:12px;font-weight:500;pointer-events:none;z-index:50;display:none;align-items:center;gap:7px;box-shadow:var(--shadow-md)}
.draw-guide.show{display:flex}
.draw-guide svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2;flex-shrink:0}
/* Draw selection rect */
.draw-rect{position:absolute;border:2.5px dashed var(--green);background:rgba(0,107,63,.1);border-radius:4px;pointer-events:none;z-index:40}
/* Grid overlay */
.pdf-grid{position:absolute;inset:0;pointer-events:none;display:none;z-index:5}
.pdf-grid.show{display:block;background-image:repeating-linear-gradient(0deg,rgba(0,107,63,.05) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(0,107,63,.05) 0 1px,transparent 1px 40px);background-size:40px 40px}

/* ══ SIG ZONES ══ */
.sig-zone{position:absolute;border:2px dashed var(--green);background:rgba(0,107,63,.07);cursor:move;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;user-select:none;transition:background .15s;z-index:20}
.sig-zone:hover:not(.signed){background:rgba(0,107,63,.14)}
.sig-zone.signed{border:2px solid var(--green);background:rgba(0,107,63,.06);cursor:default}
.sig-zone.focused{outline:2.5px solid var(--green);outline-offset:2px}
.sig-zone-label{font-size:8.5px;font-weight:600;color:var(--green);text-align:center;padding:0 6px}
.sig-zone-hint{font-size:7px;color:var(--gm);opacity:.8}
.sig-remove{position:absolute;top:-7px;right:-7px;width:15px;height:15px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s;z-index:30}
.sig-zone:hover .sig-remove{opacity:1}
.sig-resize{position:absolute;bottom:-4px;right:-4px;width:10px;height:10px;background:var(--green);border-radius:2px;cursor:se-resize;opacity:0;transition:opacity .15s;z-index:30}
.sig-zone:hover .sig-resize{opacity:1}

/* ══ SIGNATURE PREVIEW MODAL ══ */
.sig-preview-modal{position:fixed;inset:0;background:rgba(10,14,20,.55);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.sig-preview-modal.show{opacity:1;pointer-events:all}
.spm-card{background:var(--sf);border-radius:var(--r);box-shadow:var(--shadow-lg);width:640px;max-width:94vw;overflow:hidden;transform:translateY(12px);transition:transform .2s;border:1px solid var(--bd)}
.sig-preview-modal.show .spm-card{transform:none}
.spm-header{padding:16px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.spm-body{padding:20px;display:flex;gap:20px}
.spm-left{flex:1}
.spm-right{width:200px;display:flex;flex-direction:column;gap:12px;flex-shrink:0}
.sig-canvas-wrap{background:#fff;border:1px solid var(--bd);border-radius:var(--rs);padding:16px;display:flex;align-items:center;justify-content:center;min-height:100px;position:relative}
.sig-canvas{border:none;cursor:crosshair;display:block}
.spm-footer{padding:14px 20px;border-top:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center}
/* Sig styles */
.sig-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sig-style-opt{border:1.5px solid var(--bd);border-radius:var(--rs);padding:8px;cursor:pointer;transition:all .15s;text-align:center;font-size:11px;color:var(--tx2)}
.sig-style-opt:hover{border-color:var(--gm);background:var(--gl)}
.sig-style-opt.active{border-color:var(--green);background:var(--gl);color:var(--green);font-weight:500}
.sig-style-opt .preview{font-size:14px;font-weight:500;color:var(--tx);margin-bottom:3px}
.sig-style-opt.active .preview{color:var(--green)}
/* Stamp preview */
.stamp-preview{width:160px;height:80px;border:2.5px solid var(--green);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px;position:relative}
.stamp-preview::before{content:'';position:absolute;inset:3px;border:1px solid var(--gl);border-radius:3px}
.stamp-name{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--green)}
.stamp-date{font-size:8.5px;color:var(--gm)}
.stamp-hash{font-size:7px;color:var(--tx3);font-family:var(--mono)}
.stamp-watermark{position:absolute;font-size:32px;font-weight:700;color:rgba(0,107,63,.06);letter-spacing:-1px;pointer-events:none;text-transform:uppercase}

/* ══ RIGHT PANEL ══ */
.panel{width:20%;background:var(--sf);border-left:1px solid var(--bd);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;transition:background .3s}
.ps{padding:12px;border-bottom:1px solid var(--bd)}
.pt{font-size:11px;font-weight:600;color:var(--tx);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.pt svg{width:12px;height:12px;stroke:var(--green);fill:none;flex-shrink:0;stroke-width:2}
.cert-info{display:flex;flex-direction:column;gap:5px}
.cr{display:flex;justify-content:space-between;gap:8px}
.ck{font-size:10px;color:var(--tx2);flex-shrink:0}
.cv{font-size:10px;color:var(--tx);text-align:right;font-weight:500;word-break:break-all}
.cv.mono{font-family:var(--mono);font-size:9px}
.zone-list{display:flex;flex-direction:column;gap:4px}
.zone-item{background:var(--sf2);border-radius:var(--rs);padding:6px 8px;display:flex;align-items:center;gap:6px;border:1px solid var(--bd);transition:all .25s;cursor:pointer}
.zone-item:hover{border-color:var(--gm)}
.zone-item.signed{border-color:var(--gm);background:var(--gl)}
.zone-item.active-z{border-color:var(--green);box-shadow:0 0 0 2px rgba(46,155,99,.15)}
.zone-num{width:16px;height:16px;background:var(--green);color:#fff;border-radius:50%;font-size:8.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.zone-meta{flex:1;font-size:10px;color:var(--tx2)}
.zone-meta strong{display:block;color:var(--tx);font-size:10.5px;font-weight:500}
.zst{font-size:9px;font-weight:600;padding:2px 5px;border-radius:8px;white-space:nowrap}
.zst.pending{background:var(--yl);color:#6B4800}
.zst.done{background:var(--gl);color:var(--green)}
.add-zone-btn{width:100%;padding:7px;border:1.5px dashed var(--green);background:var(--gl);color:var(--green);border-radius:var(--rs);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.add-zone-btn:hover{opacity:.85}
.sign-btn{width:100%;padding:9px;background:var(--green);color:#fff;border:none;border-radius:var(--rs);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.sign-btn:hover{background:var(--ah)}
.sign-btn:active{transform:scale(.99)}
.sign-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.dl-btn{width:100%;padding:7px;background:var(--sf);color:var(--green);border:1px solid var(--green);border-radius:var(--rs);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px;margin-top:6px}
.dl-btn:hover{background:var(--gl)}
.dl-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.pbar{height:4px;background:var(--bd);border-radius:3px;overflow:hidden;margin-top:6px}
.pfill{height:100%;background:var(--green);border-radius:3px;width:0%;transition:width .4s ease}

/* ══ ANALYTICS DASHBOARD ══ */
.analytics-layout{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:16px;transition:background .3s}
.kpi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi-icon svg{width:16px;height:16px;fill:none;stroke-width:2}
.ki-green{background:var(--gl)} .ki-green svg{stroke:var(--green)}
.ki-blue{background:var(--bl)} .ki-blue svg{stroke:var(--blue)}
.ki-purple{background:var(--pl)} .ki-purple svg{stroke:var(--purple)}
.ki-orange{background:var(--ol)} .ki-orange svg{stroke:var(--orange)}
.kpi-trend{font-size:11px;font-weight:600;padding:2px 7px;border-radius:8px}
.kt-up{background:var(--gl);color:var(--green)} .kt-dn{background:var(--rl);color:var(--red)} .kt-neu{background:var(--sf2);color:var(--tx2)}
.kpi-value{font-size:28px;font-weight:600;color:var(--tx);letter-spacing:-.5px;line-height:1}
.kpi-label{font-size:11px;color:var(--tx2);margin-top:4px}
.kpi-sparkline{height:32px;margin-top:8px}
.analytics-row{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.analytics-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.ac{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:background .3s}
.ac-head{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.ac-title{font-size:12.5px;font-weight:600;color:var(--tx)}
.ac-body{padding:16px}
/* Chart bars */
.bar-chart{display:flex;align-items:flex-end;gap:5px;height:100px}
.bc-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bc-bar{width:100%;border-radius:3px 3px 0 0;transition:height .6s ease,opacity .2s;cursor:pointer;position:relative}
.bc-bar:hover{opacity:.85}
.bc-bar-tooltip{position:absolute;bottom:105%;left:50%;transform:translateX(-50%);background:var(--tx);color:var(--sf);padding:3px 8px;border-radius:4px;font-size:10px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.bc-bar:hover .bc-bar-tooltip{opacity:1}
.bc-label{font-size:9.5px;color:var(--tx3)}
.bc-value{font-size:10px;color:var(--tx2);font-weight:500}
/* Donut chart */
.donut-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.donut-center{position:absolute;text-align:center}
.donut-center-val{font-size:22px;font-weight:600;color:var(--tx)}
.donut-center-label{font-size:10px;color:var(--tx2)}
.donut-legend{display:flex;flex-direction:column;gap:7px}
.dl-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tx2)}
.dl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dl-val{margin-left:auto;font-weight:600;color:var(--tx)}
/* Heatmap */
.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.hm-cell{aspect-ratio:1;border-radius:2px;cursor:pointer;transition:opacity .15s}
.hm-cell:hover{opacity:.7}
.hm-label{font-size:9px;color:var(--tx3);text-align:center}
/* Line chart */
.line-chart-wrap{position:relative;overflow:hidden}
/* Recent activity list */
.activity-list{display:flex;flex-direction:column;gap:0}
.al-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd)}
.al-item:last-child{border-bottom:none}
.al-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.al-title{font-size:12px;font-weight:500;color:var(--tx);flex:1}
.al-sub{font-size:10.5px;color:var(--tx2)}
.al-time{font-size:10px;color:var(--tx3);white-space:nowrap;flex-shrink:0}
/* Ranking */
.rank-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd)}
.rank-item:last-child{border-bottom:none}
.rank-num{width:20px;font-size:12px;font-weight:600;color:var(--tx2);flex-shrink:0;text-align:center}
.rank-bar-wrap{flex:1;height:6px;background:var(--sf2);border-radius:3px;overflow:hidden}
.rank-bar-fill{height:100%;border-radius:3px;transition:width .8s ease}
.rank-count{font-size:11px;font-weight:600;color:var(--tx);flex-shrink:0;min-width:24px;text-align:right}

/* ══ ADMIN / USERS ══ */
.admin-layout{flex:1;overflow:auto;padding:24px;display:flex;gap:20px;align-items:flex-start}
.admin-nav{width:200px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;flex-shrink:0;transition:background .3s}
.an-item{padding:9px 14px;font-size:12.5px;cursor:pointer;color:var(--tx2);border-bottom:1px solid var(--bd);transition:all .15s;display:flex;align-items:center;gap:8px}
.an-item:last-child{border-bottom:none}
.an-item:hover{background:var(--sf2);color:var(--tx)}
.an-item.active{color:var(--green);font-weight:500;background:var(--gl)}
.an-item svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;opacity:.7}
.admin-content{flex:1;display:flex;flex-direction:column;gap:14px}
.admin-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:background .3s}
.acard-head{padding:13px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.acard-title{font-size:13px;font-weight:600;color:var(--tx)}
/* User table */
.user-table{width:100%;border-collapse:collapse}
.user-th{padding:9px 16px;font-size:10px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.4px;text-align:left;background:var(--sf2);border-bottom:1px solid var(--bd)}
.user-row{border-bottom:1px solid var(--bd);transition:background .12s;cursor:pointer}
.user-row:last-child{border-bottom:none}
.user-row:hover{background:var(--sf2)}
.user-td{padding:11px 16px;font-size:12px;color:var(--tx2)}
.user-td.name-cell{color:var(--tx);font-weight:500;display:flex;align-items:center;gap:9px}
.user-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;flex-shrink:0}
.role-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px}
.rb-admin{background:var(--pl);color:var(--purple)}
.rb-manager{background:var(--bl);color:var(--blue)}
.rb-user{background:var(--sf2);color:var(--tx2)}
.rb-viewer{background:var(--tl);color:var(--teal)}
.status-indicator{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}
.si-active{background:var(--gm)} .si-inactive{background:var(--tx3)}
/* Actions */
.user-actions{display:flex;gap:5px}
.ua-btn{width:26px;height:26px;border:1px solid var(--bd);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--sf);transition:all .15s}
.ua-btn:hover{background:var(--sf2)}
.ua-btn svg{width:12px;height:12px;stroke:var(--tx2);fill:none;stroke-width:2}
.ua-btn.blue:hover{background:var(--bl);border-color:var(--blue)} .ua-btn.blue:hover svg{stroke:var(--blue)}
.ua-btn.red:hover{background:var(--rl);border-color:var(--red)} .ua-btn.red:hover svg{stroke:var(--red)}
/* Permissions table */
.perm-table{width:100%;border-collapse:collapse}
.perm-th{padding:8px 14px;font-size:10.5px;font-weight:600;color:var(--tx2);text-align:center;background:var(--sf2);border-bottom:1px solid var(--bd)}
.perm-th:first-child{text-align:left}
.perm-row{border-bottom:1px solid var(--bd)}
.perm-row:last-child{border-bottom:none}
.perm-td{padding:10px 14px;font-size:12px;color:var(--tx);text-align:center}
.perm-td:first-child{text-align:left;font-weight:500}
.perm-check{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--bd);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.perm-check.on{background:var(--green);border-color:var(--green)}
.perm-check.on svg{stroke:#fff}
.perm-check svg{width:10px;height:10px;stroke:transparent;fill:none;stroke-width:2.5;display:block}
/* Audit log */
.log-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--bd)}
.log-item:last-child{border-bottom:none}
.log-badge{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-top:1px}
.lb-auth{background:var(--bl);color:var(--blue)} .lb-sign{background:var(--gl);color:var(--green)} .lb-admin{background:var(--pl);color:var(--purple)} .lb-error{background:var(--rl);color:var(--red)}
.log-msg{font-size:11.5px;color:var(--tx);flex:1}
.log-time{font-size:10px;color:var(--tx3);white-space:nowrap;font-family:var(--mono)}

/* ══ OFFLINE MODE ══ */
.offline-banner{background:var(--ol);border-bottom:1px solid var(--orange);padding:7px 20px;display:none;align-items:center;gap:10px;flex-shrink:0}
.offline-banner.show{display:flex}
.offline-banner svg{width:14px;height:14px;stroke:var(--orange);fill:none;stroke-width:2;flex-shrink:0}
.offline-banner span{font-size:12px;color:var(--orange);font-weight:500;flex:1}
.offline-sync-btn{padding:4px 12px;border:1px solid var(--orange);border-radius:4px;background:transparent;color:var(--orange);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .15s}
.offline-sync-btn:hover{background:var(--orange);color:#fff}
/* Pending queue */
.queue-item{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--bd)}
.queue-item:last-child{border-bottom:none}
.qi-icon{width:26px;height:26px;background:var(--ol);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qi-icon svg{width:12px;height:12px;stroke:var(--orange);fill:none;stroke-width:2}
.qi-name{font-size:12px;font-weight:500;color:var(--tx);flex:1}
.qi-status{font-size:10px;color:var(--orange);font-weight:600}

/* ══ MODALS ══ */
.modal-overlay{position:fixed;inset:0;background:rgba(10,14,20,.5);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.show{opacity:1;pointer-events:all}
.modal{background:var(--sf);border-radius:var(--r);box-shadow:var(--shadow-lg);width:460px;max-width:94vw;overflow:hidden;transform:translateY(12px) scale(.97);transition:transform .2s;border:1px solid var(--bd)}
.modal-overlay.show .modal{transform:none}
.modal.wide{width:560px}
.mh{padding:16px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.mt{font-size:14px;font-weight:600;color:var(--tx)}
.mc{width:26px;height:26px;border-radius:50%;border:none;background:var(--sf2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.mc svg{width:11px;height:11px;stroke:var(--tx2);fill:none;stroke-width:2.5}
.mb{padding:18px 20px}
.mf{padding:12px 20px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end;gap:8px}
.mbtn{padding:7px 14px;border-radius:var(--rs);font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s;border:1px solid var(--bd);background:var(--sf);color:var(--tx2)}
.mbtn:hover{background:var(--sf2)}
.mbtn.primary{background:var(--green);color:#fff;border-color:var(--green)}
.mbtn.primary:hover{background:var(--ah)}
.pin-grid{display:flex;gap:8px;justify-content:center;margin:18px 0}
.pin-inp{width:42px;height:50px;border:1.5px solid var(--bd);border-radius:var(--rs);text-align:center;font-size:22px;font-family:var(--mono);color:var(--tx);outline:none;background:var(--sf2);transition:border-color .15s}
.pin-inp:focus{border-color:var(--green);background:var(--sf)}
.form-row{margin-bottom:12px}
.form-label{font-size:11.5px;font-weight:500;color:var(--tx);margin-bottom:5px;display:block}
.form-inp{width:100%;height:36px;border:1px solid var(--bd);border-radius:var(--rs);padding:0 10px;font-size:12.5px;font-family:var(--font);background:var(--sf);color:var(--tx);outline:none}
.form-inp:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,107,63,.08)}
.form-sel{width:100%;height:36px;border:1px solid var(--bd);border-radius:var(--rs);padding:0 10px;font-size:12.5px;font-family:var(--font);background:var(--sf);color:var(--tx);outline:none}
.form-sel:focus{border-color:var(--green)}

/* ══ TOAST ══ */
.toast{position:fixed;bottom:22px;right:22px;background:var(--tx);color:var(--sf);padding:9px 14px;border-radius:var(--rs);font-size:12px;font-weight:500;opacity:0;transform:translateY(8px);transition:all .3s;z-index:9999;pointer-events:none;max-width:300px;display:flex;align-items:center;gap:7px;border:1px solid var(--bd2)}
.toast.show{opacity:1;transform:translateY(0)}
.toast svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
.toast.success{background:#064E3B;color:#A7F3D0;border-color:#065F46}
.toast.error{background:#7F1D1D;color:#FCA5A5;border-color:#991B1B}
.toast.info{background:#1E3A5F;color:#BAE6FD;border-color:#1E40AF}
.toast.warn{background:#7C2D12;color:#FED7AA;border-color:#9A3412}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN (MOBILES & TABLETTES)
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* 1. On passe l'application de Horizontale à Verticale */
    .app { flex-direction: column; }
    
    /* 2. Le menu de gauche devient un menu défilant en haut */
    .sidebar { width: 100%; height: auto; flex-direction: row; padding: 10px; border-right: none; border-bottom: 1px solid var(--bd); overflow-x: auto; white-space: nowrap; flex-shrink: 0; }
    .sidebar .sl { display: none; } /* On cache les titres de section */
    .sidebar .nav-item { margin: 0 5px 0 0; padding: 8px 12px; }
    .sidebar .sf-user { display: none; } /* On cache le profil du bas */
    
    /* 3. La zone centrale s'empile (PDF en haut, Panneau en bas) */
    .main { height: calc(100vh - 60px); }
    .content { flex-direction: column; overflow: hidden; }
    .pdf-area { flex: 1; align-items: flex-start; padding: 10px; }
    
    .panel { width: 100%; height: 40vh; flex-shrink: 0; border-left: none; border-top: 1px solid var(--bd); overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; }
    .panel .ps { width: 100%; border-bottom: 1px solid var(--bd); border-right: none; }
    
    /* 4. La barre d'outils s'adapte */
    .toolbar { flex-wrap: wrap; height: auto; min-height: 56px; padding: 10px; gap: 10px; }
    .tbtn { flex: 1; justify-content: center; }
    .tsep { display: none; }
    
    /* 5. Mode Masse (Batch) : Les 3 colonnes deviennent 3 lignes */
    #view-batch > div:nth-child(2) { flex-direction: column; overflow-y: auto; }
    #view-batch > div:nth-child(2) > div { width: 100% !important; border-right: none !important; border-left: none !important; border-bottom: 1px solid var(--bd); flex-shrink: 0; }
    #batch-file-list { max-height: 200px; }
    
    /* 6. On rétrécit le PDF par défaut pour qu'il tienne sur l'écran */
    #pdf-page-1, #batch-pdf-page { transform-origin: top left !important; transform: scale(0.65) !important; }
}