/* ═══════════════════════════════════════════════════
   Deposito Gomme — Industrial Dark Theme
═══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0c10; --s1:#111620; --s2:#181e2c; --s3:#1f2840;
  --border:#253050; --text:#d8dde8; --muted:#5a6580; --dim:#3a4560;
  --acc:#e8c84a; --acc2:#ff5f3d;
  --blue:#3d9cff; --green:#2ee89a; --red:#ff4757; --orange:#ff9040;
  --mono:'IBM Plex Mono',monospace;
  --head:'Bebas Neue',sans-serif;
  --body:'Manrope',sans-serif;
  --r:8px;
}

html,body{height:100%;font-family:var(--body);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* LOGIN */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);position:relative;overflow:hidden}
#login-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(232,200,74,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 80% 30%,rgba(61,156,255,.05) 0%,transparent 70%);pointer-events:none}
.login-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px;opacity:.18;pointer-events:none}
.login-box{position:relative;width:100%;max-width:400px;background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:40px 36px 36px;box-shadow:0 40px 100px rgba(0,0,0,.6);animation:loginIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes loginIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo-sym{font-family:var(--head);font-size:64px;color:var(--acc);line-height:1;letter-spacing:4px;text-shadow:0 0 40px rgba(232,200,74,.3)}
.login-logo-name{font-family:var(--head);font-size:20px;letter-spacing:.12em;color:var(--text);margin-top:4px}
.login-logo-sub{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.18em;margin-top:4px;text-transform:uppercase}
.login-divider{width:40px;height:2px;background:var(--acc);margin:16px auto 28px}
.login-title{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px}
.login-fg{margin-bottom:16px}
.login-fg label{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.login-fi{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:var(--text);font-family:var(--body);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}
.login-fi:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(232,200,74,.08)}
.login-fi::placeholder{color:var(--muted)}
.login-err{background:rgba(255,71,87,.1);border:1px solid rgba(255,71,87,.25);color:var(--red);border-radius:6px;padding:10px 14px;font-size:12px;margin-bottom:14px}
.login-err.show{display:block;animation:fadeIn .2s ease}
.login-btn{width:100%;padding:12px;border:none;border-radius:8px;background:var(--acc);color:#000;font-family:var(--head);font-size:18px;letter-spacing:.08em;cursor:pointer;transition:all .15s;margin-top:4px}
.login-btn:hover{background:#f5d84a;transform:translateY(-1px);box-shadow:0 8px 24px rgba(232,200,74,.2)}
.login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* SHELL */
.shell{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar{width:210px;min-width:210px;background:var(--s1);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
.logo{padding:22px 18px 18px;border-bottom:1px solid var(--border)}
.logo-sym{font-family:var(--head);font-size:38px;color:var(--acc);line-height:1;letter-spacing:2px}
.logo-sub{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.15em;margin-top:2px}
.logo-line{width:30px;height:2px;background:var(--acc);margin-top:8px}
.nav{padding:14px 10px;flex:1}
.nav-section{font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.12em;padding:8px 8px 4px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:all .15s ease;text-decoration:none;width:100%}
.nav-item:hover{background:var(--s2);color:var(--text)}
.nav-item.active{background:rgba(232,200,74,.08);color:var(--acc)}
.nav-item.active .nav-dot{background:var(--acc)}
.nav-dot{width:6px;height:6px;border-radius:50%;background:var(--border);flex-shrink:0;transition:.15s}
.sidebar-foot{padding:12px 14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.user-info{display:flex;flex-direction:column}
.user-name{font-size:12px;font-weight:600;color:var(--text)}
.user-role{font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:1px}
.logout-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:5px;padding:4px 8px;font-size:10px;cursor:pointer;font-family:var(--mono);transition:.15s}
.logout-btn:hover{border-color:var(--red);color:var(--red)}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:var(--s1);border-bottom:1px solid var(--border);padding:12px 28px;display:flex;align-items:center;gap:16px;flex-shrink:0}
.topbar-title{font-family:var(--head);font-size:22px;letter-spacing:.05em;color:var(--text);flex:1}
.content{flex:1;overflow-y:auto;padding:28px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:6px;border:none;font-family:var(--body);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;text-decoration:none}
.btn-acc{background:var(--acc);color:#000}
.btn-acc:hover{background:#f5d84a;transform:translateY(-1px)}
.btn-ghost{background:var(--s2);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--s3)}
.btn-danger{background:rgba(255,71,87,.12);color:var(--red);border:1px solid rgba(255,71,87,.25)}
.btn-danger:hover{background:rgba(255,71,87,.22)}
.btn-sm{padding:5px 12px;font-size:12px}

/* PAGE LAYOUT */
.page-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.page-head-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.page-head-row h1{font-family:var(--head);font-size:26px;letter-spacing:.03em}
.page-subtitle{font-size:12px;color:var(--muted);margin-top:3px}
.back-bar{margin-bottom:10px}
.back-link{font-size:12px;color:var(--muted);text-decoration:none;transition:color .12s}
.back-link:hover{color:var(--acc)}

/* SEARCH */
.topbar-search{background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:7px 12px;color:var(--text);font-family:var(--body);font-size:13px;outline:none;width:280px;transition:border-color .15s;flex:1;max-width:400px}
.topbar-search:focus{border-color:var(--acc)}
.topbar-search::placeholder{color:var(--muted)}

/* STATS */
.stats-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:24px}
.stat{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:16px 14px;position:relative;overflow:hidden}
.stat::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--c,var(--border))}
.stat-n{font-family:var(--head);font-size:34px;color:var(--c,var(--text));line-height:1;letter-spacing:.02em}
.stat-l{font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}

/* DASHBOARD GRID */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dash-row{grid-template-columns:70px 1fr 80px}
.tbl-section-head{padding:14px 16px;border-bottom:1px solid var(--border);font-family:var(--head);font-size:16px;letter-spacing:.04em}

/* TABLE */
.tbl-wrap{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.tbl-header{display:grid;padding:9px 16px;background:var(--s2);font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border)}
.tbl-row{display:grid;padding:12px 16px;border-bottom:1px solid var(--border);align-items:center;cursor:pointer;transition:background .12s}
.tbl-row:last-child{border-bottom:none}
.tbl-row:hover{background:var(--s2)}
.tbl-empty{padding:48px;text-align:center;color:var(--muted);font-size:13px}
.tbl-empty-icon{font-size:36px;margin-bottom:10px;opacity:.3}
.cols-clients{grid-template-columns:1fr 140px 60px 60px 100px}
.cols-cars{grid-template-columns:1fr 110px 110px 90px 50px 90px}
.cols-tires{grid-template-columns:70px 1fr 100px 110px 80px 100px 90px}

/* BADGES */
.badge{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.04em}
.b-instorage{background:rgba(61,156,255,.12);color:var(--blue)}
.b-oncar{background:rgba(46,232,154,.12);color:var(--green)}
.b-disposed{background:rgba(90,101,128,.15);color:var(--muted)}
.b-forsale{background:rgba(232,200,74,.12);color:var(--acc)}
.b-summer{background:rgba(255,144,64,.12);color:var(--orange)}
.b-winter{background:rgba(61,156,255,.12);color:var(--blue)}
.b-allseason{background:rgba(46,232,154,.12);color:var(--green)}
.b-private{background:rgba(46,232,154,.1);color:var(--green)}
.b-rental{background:rgba(255,95,61,.12);color:var(--acc2)}
.plate{font-family:var(--mono);font-size:12px;font-weight:600;background:var(--s3);border:1px solid var(--border);padding:2px 8px;border-radius:4px;letter-spacing:.08em;color:var(--text)}
.plate-sm{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.storage-no{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--acc)}

/* ROLE CHIPS */
.role-chip{font-family:var(--mono);font-size:10px;font-weight:600;padding:3px 10px;border-radius:12px;letter-spacing:.05em}
.role-admin{background:rgba(232,200,74,.15);color:var(--acc);border:1px solid rgba(232,200,74,.25)}
.role-operator{background:rgba(61,156,255,.12);color:var(--blue);border:1px solid rgba(61,156,255,.2)}
.role-readonly{background:rgba(90,101,128,.15);color:var(--muted);border:1px solid var(--border)}

/* FORMS */
.form-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:24px;margin-bottom:20px}
.form-section-title{font-family:var(--head);font-size:16px;font-weight:700;margin-bottom:18px;letter-spacing:.04em}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:4px}
.fg{margin-bottom:14px}
.fg label{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.fi{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--text);font-family:var(--body);font-size:13px;outline:none;transition:border-color .15s}
.fi:focus{border-color:var(--acc)}
.fi::placeholder{color:var(--muted)}
select.fi option{background:var(--s2)}
textarea.fi{resize:vertical}
.plate-input{text-transform:uppercase;font-family:var(--mono);letter-spacing:.1em}
.txt-mono{font-family:var(--mono)}
.form-actions{display:flex;gap:10px;margin-top:16px}
.alert-err{background:rgba(255,71,87,.1);border:1px solid rgba(255,71,87,.25);color:var(--red);border-radius:6px;padding:10px 14px;font-size:12px;margin-top:12px}
.alert-ok{background:rgba(46,232,154,.1);border:1px solid rgba(46,232,154,.25);color:var(--green);border-radius:6px;padding:10px 14px;font-size:12px;margin-top:12px}

/* TOGGLES */
.tog-group{display:flex;gap:6px;flex-wrap:wrap}
.tog{background:var(--s2);border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;font-family:var(--body)}
.tog:hover{border-color:var(--muted);color:var(--text)}
.tog.on{background:var(--acc);border-color:var(--acc);color:#000}
.tog.on-blue{background:rgba(61,156,255,.2);border-color:var(--blue);color:var(--blue)}
.tog.on-green{background:rgba(46,232,154,.2);border-color:var(--green);color:var(--green)}
.tog.on-orange{background:rgba(255,144,64,.2);border-color:var(--orange);color:var(--orange)}
.tog.on-muted{background:rgba(90,101,128,.2);border-color:var(--muted);color:var(--muted)}

/* FILTER BAR */
.filter-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filter-label{font-size:11px;color:var(--muted);margin-right:2px}
.chip{background:var(--s1);border:1px solid var(--border);color:var(--muted);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600;cursor:pointer;transition:.15s;font-family:var(--mono);letter-spacing:.04em}
.chip:hover{border-color:var(--muted);color:var(--text)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#000}

/* SUB CARDS */
.section-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;margin-top:4px}
.section-bar h2{font-family:var(--head);font-size:18px;letter-spacing:.04em}
.sub-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:14px;margin-bottom:6px;text-decoration:none}
.sub-card:hover{border-color:var(--acc);background:var(--s3);transform:translateX(4px)}
.sc-main{flex:1}
.sc-title{font-weight:600;font-size:14px;color:var(--text)}
.sc-sub{font-size:11px;color:var(--muted);margin-top:2px}
.sc-meta{display:flex;gap:8px;align-items:center;flex-shrink:0}
.sc-arrow{color:var(--dim);font-size:18px;flex-shrink:0}

/* DETAIL ROWS */
.dp-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(37,48,80,.5)}
.dp-row:last-child{border-bottom:none}
.dp-key{font-size:12px;color:var(--muted)}
.dp-val{font-size:12px;font-weight:600;text-align:right}

/* UTIL */
.fw6{font-weight:600}
.txt-sm{font-size:12px}
.txt-muted{color:var(--muted)}
.txt-center{text-align:center}
.txt-orange{color:var(--orange)}
.loading{padding:40px;text-align:center;color:var(--muted)}

/* TOASTS */
.toast-wrap{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:999;pointer-events:none}
.toast{background:var(--s1);border:1px solid var(--border);border-radius:8px;padding:12px 18px;font-size:13px;font-weight:500;box-shadow:0 8px 32px rgba(0,0,0,.4);animation:toastIn .2s ease;display:flex;align-items:center;gap:8px}
@keyframes toastIn{from{transform:translateY(10px);opacity:0}to{opacity:1;transform:none}}
.toast-ok{border-color:rgba(46,232,154,.3);color:var(--green)}
.toast-err{border-color:rgba(255,71,87,.3);color:var(--red)}