/* FinCore Console — SOCAR-Market admin aesthetic: navy radial-gradient,
   slate surfaces, SOCAR-blue primary, emerald/amber/rose semantics, colored KPI
   cards, emoji sidebar, clean right-aligned data tables. */
:root{
  --primary:#00A3E0; --primary-2:#0085c7; --cyan:#22d3ee;
  --bg-0:#070b14; --bg-1:#0a0f1c; --glow:#103a5e;
  --surface:#0f172a; --surface-2:#15213b; --border:#1e2a47;
  --text:#e2e8f0; --muted:#94a3b8; --muted-2:#64748b;
  --emerald:#10b981; --amber:#f59e0b; --rose:#f43f5e;
  --radius:14px;
}
[data-theme="light"]{
  --bg-0:#eef2f7; --bg-1:#f5f8fc; --glow:#d6e9f7;
  --surface:#ffffff; --surface-2:#f1f5f9; --border:#e2e8f0;
  --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{
  font:14px/1.55 'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%, var(--glow) 0%, var(--bg-1) 45%, var(--bg-0) 100%) fixed;
}
button{font:inherit;cursor:pointer}
.hidden{display:none!important}

/* Login */
#login{display:flex;align-items:center;justify-content:center;height:100vh}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px;width:400px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px}
.logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--cyan));display:flex;align-items:center;justify-content:center;color:#02121d;font-weight:900;font-size:18px;flex:0 0 auto}
.brand small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.sub{color:var(--muted);margin:6px 0 0}
input{width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);margin-top:14px}
input:focus{outline:none;border-color:var(--primary)}
.btn{background:var(--primary);color:#02121d;border:none;border-radius:11px;padding:12px 14px;font-weight:800;width:100%;margin-top:16px}
.btn:hover{background:var(--primary-2)}
.btn-ghost{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px;font-weight:600}
.btn-ghost:hover{border-color:var(--primary)}
.err{color:var(--rose);margin-top:10px;font-size:13px;min-height:18px}

/* Shell */
#shell{display:grid;grid-template-columns:248px 1fr;height:100vh}
nav{border-right:1px solid var(--border);background:rgba(10,15,28,.55);backdrop-filter:blur(6px);overflow:auto;padding:16px 12px}
[data-theme="light"] nav{background:rgba(255,255,255,.7)}
.nav-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px}
.group{color:var(--muted-2);font-size:11px;text-transform:uppercase;letter-spacing:.07em;padding:14px 12px 5px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:500}
.nav-item .ico{width:20px;text-align:center}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:linear-gradient(90deg,rgba(0,163,224,.16),transparent);color:var(--primary);font-weight:700;box-shadow:inset 2px 0 0 var(--primary)}
main{overflow:auto;padding:24px 30px}

/* Header within main */
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.page-head h1{font-size:26px;font-weight:800;margin:0}
.page-head .sub{margin-top:3px}
.page-head .actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.chip{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.chip.prod{color:var(--emerald);border-color:rgba(16,185,129,.4)}
.chip.sandbox{color:var(--amber);border-color:rgba(245,158,11,.4)}
.kbd{font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:7px;padding:3px 8px}

/* KPI cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:22px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.card .k{color:var(--muted);font-size:13px;font-weight:500}
.card .v{font-size:30px;font-weight:800;margin-top:8px;letter-spacing:-.5px}
.card .s{color:var(--muted-2);font-size:12px;margin-top:6px}
.v.blue{color:var(--primary)} .v.green{color:var(--emerald)} .v.amber{color:var(--amber)} .v.rose{color:var(--rose)}

/* needs-attention strip */
.needs{display:flex;gap:22px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 20px;margin-bottom:22px;color:var(--muted)}
.needs b{color:var(--text)}

/* Section + tables */
.section-title{font-size:16px;font-weight:700;margin:6px 0 12px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 16px;font-size:13px;border-bottom:1px solid var(--border)}
th{color:var(--muted-2);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:11px;background:transparent}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2);cursor:pointer}
.badge{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600}
.badge.ok{background:rgba(16,185,129,.16);color:var(--emerald)}
.badge.warn{background:rgba(245,158,11,.16);color:var(--amber)}
.badge.bad{background:rgba(244,63,94,.16);color:var(--rose)}
.state{padding:48px;text-align:center;color:var(--muted)}
.skeleton{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

/* Drawer */
#drawer{position:fixed;top:0;right:0;height:100vh;width:480px;background:var(--surface);border-left:1px solid var(--border);box-shadow:-20px 0 60px rgba(0,0,0,.4);transform:translateX(100%);transition:.22s;overflow:auto;z-index:30}
#drawer.open{transform:none}
.drawer-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);font-weight:700}
pre{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px;overflow:auto;font-size:12px;margin:18px;color:var(--text)}

/* Palette */
#palette{position:fixed;inset:0;background:rgba(2,8,20,.55);display:none;align-items:flex-start;justify-content:center;z-index:40}
#palette.open{display:flex}
.pal{margin-top:13vh;width:540px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.pal input{margin:0;border:none;border-bottom:1px solid var(--border);border-radius:0;font-size:15px;padding:16px}
.pal-item{padding:12px 16px;display:flex;gap:11px;color:var(--muted)}
.pal-item:hover,.pal-item.sel{background:var(--surface-2);color:var(--primary)}