/* CAT IT SOLUTIONS — Admin panel styles */
:root{
  --brand:#1a73c7;--brand-d:#0f3057;--accent:#00c2a8;
  --bg:#0b1420;--panel:#111f30;--panel-2:#0e1a29;--line:#20344c;
  --text:#e9f0f8;--muted:#8ea6c0;--danger:#e5484d;--ok:#12a150;--warn:#f5a623;
  --radius:12px;--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ff);background:var(--bg);color:var(--text);font-size:15px}
a{color:var(--brand);text-decoration:none}
.wrap{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

/* Sidebar */
.side{background:var(--panel-2);border-right:1px solid var(--line);padding:1.2rem;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;margin-bottom:1.6rem}
.side .side-logo{height:52px;width:auto;display:block}
.side nav a{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:9px;color:var(--muted);font-weight:500;margin-bottom:.15rem}
.side nav a svg{width:19px;height:19px}
.side nav a:hover{background:var(--panel);color:var(--text)}
.side nav a.active{background:linear-gradient(135deg,rgba(26,115,199,.25),rgba(0,194,168,.15));color:#fff}
.side nav a .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:.72rem;font-weight:700;border-radius:999px;padding:.05rem .45rem}
.side .sep{height:1px;background:var(--line);margin:1rem 0}
.side .who{font-size:.82rem;color:var(--muted)}

/* Main */
.main{padding:1.6rem clamp(1rem,3vw,2.4rem)}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem;gap:1rem;flex-wrap:wrap}
.topbar h1{font-size:1.5rem;margin:0}
.topbar .sub{color:var(--muted);font-size:.9rem}

/* Cards / tables */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;margin-bottom:1.3rem}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.4rem}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem}
.kpi .n{font-size:1.9rem;font-weight:800}
.kpi .l{color:var(--muted);font-size:.85rem}
.kpi .i{width:40px;height:40px;border-radius:10px;background:rgba(26,115,199,.16);color:var(--brand);display:grid;place-items:center;margin-bottom:.6rem}
.kpi .i svg{width:22px;height:22px}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.75rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
tr:hover td{background:rgba(255,255,255,.02)}
td.actions{white-space:nowrap;text-align:right}
.muted{color:var(--muted)}
.pill{display:inline-block;font-size:.75rem;font-weight:600;padding:.15rem .55rem;border-radius:999px}
.pill.on{background:rgba(18,161,80,.18);color:#3ad07f}
.pill.off{background:rgba(142,166,192,.16);color:var(--muted)}
.pill.new{background:rgba(229,72,77,.18);color:#ff7b7f}

/* Buttons & forms */
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:600;font-size:.9rem;
  padding:.55rem 1rem;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--brand)}
.btn svg{width:16px;height:16px}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--accent));border-color:transparent;color:#fff}
.btn-danger{color:#ff8a8d;border-color:rgba(229,72,77,.4)}
.btn-danger:hover{background:rgba(229,72,77,.14)}
.btn-sm{padding:.35rem .6rem;font-size:.82rem}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

.field{margin-bottom:1rem}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem}
.field input,.field textarea,.field select{width:100%;padding:.65rem .8rem;background:var(--panel-2);
  border:1px solid var(--line);border-radius:9px;color:var(--text);font:inherit}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,115,199,.25)}
.field textarea{min-height:110px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hint{font-size:.78rem;color:var(--muted);margin-top:.25rem}
fieldset{border:1px solid var(--line);border-radius:10px;padding:1rem;margin:0 0 1rem}
legend{padding:0 .5rem;color:var(--accent);font-weight:600;font-size:.85rem}

.alert{padding:.75rem 1rem;border-radius:9px;margin-bottom:1rem;font-size:.9rem}
.alert-ok{background:rgba(18,161,80,.14);color:#3ad07f;border:1px solid rgba(18,161,80,.35)}
.alert-err{background:rgba(229,72,77,.12);color:#ff8a8d;border:1px solid rgba(229,72,77,.35)}
.alert-warn{background:rgba(245,166,35,.12);color:#f5c265;border:1px solid rgba(245,166,35,.35)}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(60% 60% at 70% 10%,rgba(0,194,168,.16),transparent),
             radial-gradient(50% 50% at 10% 90%,rgba(26,115,199,.22),transparent),var(--bg)}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:2rem;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.login-card .login-logo{height:80px;width:auto;display:block;margin:0 auto 1.2rem}
.login-card h1{text-align:center;font-size:1.3rem;margin:0 0 .3rem}
.login-card p.sub{text-align:center;color:var(--muted);margin:0 0 1.5rem;font-size:.9rem}

@media(max-width:860px){
  .wrap{grid-template-columns:1fr}
  .side{position:static;height:auto;display:flex;flex-direction:column}
  .grid-2{grid-template-columns:1fr}
  table{font-size:.88rem}
}