/* ===== Theme (Batman) ===== */
:root{
  --bg:#0b0b0b; --bg2:#101010; --panel:#141414; --muted:#242424;
  --text:#EAEAEA; --text-d:#BDBDBD; --brand:#FFC400; --brand-2:#FFDF5A;
  --ok:#2ecc71; --warn:#f1c40f; --bad:#e74c3c;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font:14px/1.5 system-ui,Segoe UI,Roboto,Inter,Arial}
a{color:var(--brand);text-decoration:none}
button{cursor:pointer}

/* Layout */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#0e0e0e;border-right:1px solid var(--muted);padding:12px;position:sticky;top:0;height:100vh}
.sidebar .brand{display:flex;align-items:center;gap:10px;margin:6px 6px 12px}
.brand .mark{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--brand-2),var(--brand) 60%,transparent 61%),conic-gradient(from 200deg at 55% 55%, var(--bg) 0 40deg, transparent 40deg 320deg, var(--bg) 0);display:grid;place-items:center;color:#000;font-weight:900}
.sidebar .toggle{margin:6px}
.nav{display:grid;gap:6px;margin-top:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;color:var(--text-d);border:1px solid transparent}
.nav a:hover,.nav a.active{color:var(--text);border-color:var(--muted);background:#121212}
.nav .ico{width:18px;text-align:center}
.sidebar.collapsed{width:76px}
.sidebar.collapsed .name{display:none}
.sidebar.collapsed .brand span{display:none}
.sidebar.collapsed .toggle span{display:none}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--muted);background:#0f0f0f;position:sticky;top:0;z-index:5}
.main{padding:18px;display:grid;gap:18px;max-width:1200px;margin:0 auto}
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:linear-gradient(180deg,#121212,#171717);border:1px solid var(--muted);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .content{padding:14px}
.card h3{margin:0 0 8px}
.kpi{display:flex;align-items:center;justify-content:space-between}
.kpi .value{font-size:24px;font-weight:800}
.input{background:#0f0f0f;border:1px solid var(--muted);color:var(--text);padding:9px 12px;border-radius:10px}
.btn{background:var(--brand);color:#000;border:0;padding:10px 14px;border-radius:10px;font-weight:700}
.btn.ghost{background:#0f0f0f;color:var(--text);border:1px solid var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--muted);background:#111}
.badge.ok{color:var(--ok);border-color:#284c35;background:rgba(46,204,113,.08)}
.badge.warn{color:var(--warn);border-color:#564a1a;background:rgba(241,196,15,.08)}
.badge.bad{color:var(--bad);border-color:#532424;background:rgba(231,76,60,.08)}
.days{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--muted);background:#0f0f0f}
.days.ok{color:var(--ok);border-color:#284c35}
.days.warn{color:var(--warn);border-color:#5a4a18}
.days.bad{color:var(--bad);border-color:#5a2323}
.table-wrap{overflow:auto;border:1px solid var(--muted);border-radius:12px}
.table{width:100%;border-collapse:collapse;min-width:960px}
.table th,.table td{padding:10px;border-bottom:1px solid var(--muted);text-align:left}
.table th{color:var(--text-d);background:#111;position:sticky;top:0}
.table tr.warn td{background:#101000}
.table tr.bad td{background:#100b0b}
.pf-wrap{display:flex;gap:6px}
.pf{width:14px;height:14px;border-radius:50%;border:1px solid var(--muted);background:#2a2a2a}
.pf.used{background:var(--ok);border-color:#1f6a3f}
.footer{padding:14px;text-align:center;color:var(--text-d);border-top:1px solid var(--muted)}

/* Modal */
.modal__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:50}
.modal{background:#111;border:1px solid var(--muted);border-radius:16px;box-shadow:var(--shadow);width:min(620px,92vw)}
.modal header{padding:14px 16px;border-bottom:1px solid var(--muted);display:flex;justify-content:space-between;align-items:center}
.modal main{padding:16px;display:grid;gap:12px}
.modal footer{padding:14px 16px;border-top:1px solid var(--muted);display:flex;justify-content:flex-end;gap:10px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .field{display:grid;gap:6px}
.form .field.full{grid-column:1/-1}
.label{color:var(--text-d);font-size:12px}
.select,.text,.date,.number{background:#0f0f0f;border:1px solid var(--muted);color:var(--text);padding:10px;border-radius:10px}
@media (max-width:900px){.app{grid-template-columns:76px 1fr}.sidebar{width:76px}.name,.brand span{display:none} .form{grid-template-columns:1fr}}