:root{--red:#E30613;--red-d:#B80510;--gray:#4A4A4A;--bg:#fff;--bg2:#f5f5f5;--bg3:#eaeaea;--text:#1a1a1a;--text2:#666;--card:#fff;--brd:#e0e0e0;--shd:rgba(0,0,0,.06);--grn:#27ae60;--org:#f39c12;--blu:#2980b9;--dgr:#e74c3c;--prp:#8e44ad}
.dark{--bg:#121212;--bg2:#1e1e1e;--bg3:#2a2a2a;--text:#e0e0e0;--text2:#999;--card:#1e1e1e;--brd:#333;--shd:rgba(0,0,0,.3)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);transition:background .3s,color .3s;font-size:13px}
#login-screen{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg)}
.login-box{background:var(--card);border:1px solid var(--brd);border-radius:12px;padding:40px;text-align:center;width:340px;box-shadow:0 8px 32px var(--shd)}
.login-box img{width:140px;margin-bottom:24px}
.login-box input{width:100%;padding:12px;border:1px solid var(--brd);border-radius:8px;font-size:14px;background:var(--bg2);color:var(--text);margin-bottom:12px;outline:none}
.login-box input:focus{border-color:var(--red)}
.login-box button{width:100%;padding:12px;background:var(--red);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}
.login-box button:hover{background:var(--red-d)}
.login-err{color:var(--dgr);font-size:12px;margin-top:6px;display:none}
#app{display:none}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--brd);position:sticky;top:0;z-index:100}
.topbar-l{display:flex;align-items:center;gap:10px}
.topbar-l img{height:28px}
.topbar-t{font-size:15px;font-weight:700;color:var(--red)}
.topbar-r{display:flex;align-items:center;gap:12px}
.sync-d{width:7px;height:7px;border-radius:50%;background:var(--grn);display:inline-block}
.sync-d.off{background:var(--dgr)}
.sync-l{font-size:11px;color:var(--text2)}
.tbtn{background:none;border:1px solid var(--brd);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:13px;color:var(--text)}
.health-bar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--bg2);border-bottom:1px solid var(--brd)}
.health-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.health-dot.green{background:var(--grn)}.health-dot.orange{background:var(--org)}.health-dot.red{background:var(--dgr)}
.health-txt{font-size:12px;font-weight:600}
.nav{display:flex;gap:3px;padding:6px 20px;background:var(--bg2);overflow-x:auto;border-bottom:1px solid var(--brd)}
.nav button{padding:7px 14px;border:none;background:transparent;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;border-radius:5px;white-space:nowrap;transition:all .2s}
.nav button.active{background:var(--red);color:#fff}
.nav button:hover:not(.active){background:var(--bg3)}
.content{padding:20px;max-width:1400px;margin:0 auto}
.module{display:none}.module.active{display:block}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.card{background:var(--card);border:1px solid var(--brd);border-radius:8px;padding:14px;box-shadow:0 1px 4px var(--shd)}
.card-l{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.card-v{font-size:22px;font-weight:700}
.card-s{font-size:11px;color:var(--text2);margin-top:2px}
.red{color:var(--dgr)}.green{color:var(--grn)}.orange{color:var(--org)}.blue{color:var(--blu)}
.alrt{border-radius:6px;padding:10px 14px;margin-bottom:10px;font-size:12px}
.alrt-w{background:#fef3cd;border:1px solid #ffc107;color:#856404}
.alrt-d{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}
.alrt-i{background:#d1ecf1;border:1px solid #bee5eb;color:#0c5460}
.dark .alrt-w{background:#3d3200;border-color:#665200;color:#ffc107}
.dark .alrt-d{background:#3d0a0a;border-color:#5c1010;color:#f5c6cb}
.dark .alrt-i{background:#0a2d33;border-color:#0c5460;color:#bee5eb}
.tw{overflow-x:auto;margin-bottom:16px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{background:var(--bg2);color:var(--text2);font-weight:600;text-align:left;padding:8px 10px;border-bottom:2px solid var(--brd);cursor:pointer;user-select:none;white-space:nowrap}
th:hover{background:var(--bg3)}
td{padding:8px 10px;border-bottom:1px solid var(--brd)}
tr:hover td{background:var(--bg2)}
.tag{display:inline-block;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:600}
.tag-u{background:#f8d7da;color:#721c24}.tag-a{background:#d4edda;color:#155724}.tag-i{background:#e2e3e5;color:#383d41}
.tag-r{background:#f5c6cb;color:#721c24}.tag-w{background:#fff3cd;color:#856404}.tag-b{background:#cce5ff;color:#004085}
.dark .tag-u{background:#5c1010;color:#f5c6cb}.dark .tag-a{background:#0d3d1a;color:#a3d9b1}.dark .tag-i{background:#333;color:#999}
.dark .tag-r{background:#5c1010;color:#f5c6cb}.dark .tag-w{background:#3d3200;color:#ffc107}.dark .tag-b{background:#003366;color:#cce5ff}
.stitle{font-size:16px;font-weight:700;margin-bottom:12px;padding-bottom:6px;border-bottom:2px solid var(--red);display:flex;align-items:center;gap:6px}
.acc{border:1px solid var(--brd);border-radius:8px;margin-bottom:10px;overflow:hidden}
.acc-h{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg2);cursor:pointer;font-weight:600;font-size:13px;user-select:none}
.acc-h:hover{background:var(--bg3)}
.acc-h .arr{transition:transform .2s;font-size:10px}
.acc-h.open .arr{transform:rotate(90deg)}
.acc-b{display:none;padding:10px 14px}
.acc-h.open+.acc-b{display:block}
.cht{background:var(--card);border:1px solid var(--brd);border-radius:8px;padding:14px;margin-bottom:16px}
.cht h4{font-size:13px;margin-bottom:8px}
.frow{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.fgrp{flex:1;min-width:140px}
.fgrp label{display:block;font-size:11px;color:var(--text2);margin-bottom:3px;font-weight:600}
.fgrp input,.fgrp select,.fgrp textarea{width:100%;padding:6px 10px;border:1px solid var(--brd);border-radius:5px;font-size:12px;background:var(--bg);color:var(--text)}
.btn{padding:6px 12px;border:none;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-p{background:var(--red);color:#fff}.btn-p:hover{background:var(--red-d)}
.btn-s{background:var(--bg3);color:var(--text)}.btn-d{background:var(--dgr);color:#fff}
.btn-g{background:var(--grn);color:#fff}
.btn-sm{padding:3px 8px;font-size:11px}
.mo{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center}
.mo.show{display:flex}
.mo-c{background:var(--card);border-radius:10px;padding:20px;width:90%;max-width:520px;max-height:80vh;overflow-y:auto}
.mo-c h3{font-size:15px;margin-bottom:12px}
.tbar{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.upload-zone{border:2px dashed var(--brd);border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:border-color .2s;margin-bottom:12px}
.upload-zone:hover{border-color:var(--red)}
.upload-zone.dragover{border-color:var(--red);background:rgba(227,6,19,.05)}
.pip-c{background:var(--card);border:1px solid var(--brd);border-radius:6px;padding:12px;margin-bottom:8px}
.cal-i{display:flex;align-items:flex-start;gap:10px;padding:10px;border-bottom:1px solid var(--brd)}
.cal-d{min-width:75px;font-weight:700;font-size:12px;color:var(--red)}
.caisse-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.caisse-nav button{padding:4px 10px;border:1px solid var(--brd);background:var(--bg2);border-radius:5px;cursor:pointer;font-size:12px;color:var(--text)}
.caisse-nav button:hover{background:var(--bg3)}
.caisse-nav span{font-weight:700;font-size:14px;min-width:100px;text-align:center}
@media(max-width:768px){.cards{grid-template-columns:1fr 1fr}.content{padding:12px}.card-v{font-size:18px}}
@media(max-width:480px){.cards{grid-template-columns:1fr}.frow{flex-direction:column}}

.autocomplete-wrap{position:relative}
.autocomplete-list{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--brd);border-radius:0 0 6px 6px;max-height:150px;overflow-y:auto;z-index:300;display:none}
.autocomplete-list.show{display:block}
.autocomplete-item{padding:6px 10px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--brd)}
.autocomplete-item:hover,.autocomplete-item.selected{background:var(--bg2)}
.validation-row{background:rgba(255,193,7,.1)!important;border-left:3px solid #ffc107}
.validation-row td{position:relative}
.validation-badge{display:inline-block;background:#ffc107;color:#000;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:4px}

.toast{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:600;z-index:400;animation:toastIn .3s ease;max-width:400px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.toast-ok{background:var(--grn);color:#fff}
.toast-err{background:var(--dgr);color:#fff}
.toast-warn{background:var(--org);color:#fff}
.toast-info{background:var(--blu);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}
.dlg-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:350;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}
.dlg-box{background:var(--card);border:1px solid var(--brd);border-radius:12px;padding:24px;width:90%;max-width:420px;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.dlg-title{font-size:15px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.dlg-msg{font-size:13px;color:var(--text);margin-bottom:16px;line-height:1.5;white-space:pre-line}
.dlg-btns{display:flex;gap:8px;justify-content:flex-end}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.smart-select{position:relative}
.smart-select select{width:100%;padding:6px 10px;border:1px solid var(--brd);border-radius:5px;font-size:12px;background:var(--bg);color:var(--text)}
.smart-select-search{width:100%;padding:5px 8px;border:1px solid var(--brd);border-bottom:none;border-radius:5px 5px 0 0;font-size:11px;background:var(--bg);color:var(--text);display:none}
.smart-select.has-search .smart-select-search{display:block}
.smart-select.has-search select{border-radius:0 0 5px 5px}
.add-option-row{display:flex;gap:4px;margin-top:4px}
.add-option-row input{flex:1;padding:4px 8px;border:1px solid var(--brd);border-radius:4px;font-size:11px;background:var(--bg);color:var(--text)}
.add-option-row button{padding:4px 8px;font-size:11px;white-space:nowrap}