/* Simple admin UI - Oasis & Aflaj (Soft Light / Not Too Bright) */

:root{
  --bg:#eef2f7;          /* page background */
  --surface:#f8fafc;     /* top surfaces */
  --card:#f1f5f9;        /* cards/panels */
  --muted:#334155;
  --text:#0f172a;
  --primary:#2563eb;
  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#d97706;
  --border:#cbd5e1;
  --shadow:rgba(15,23,42,.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,#f8fafc,#e9eef7);
  color:var(--text)
}

a{color:var(--primary);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:18px}

/* Topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  position:sticky;
  top:0;
  z-index:20;
  gap:10px;
  flex-wrap:wrap;
  box-shadow:0 6px 16px rgba(15,23,42,.06)
}

.brand{font-weight:700;letter-spacing:.2px}

.topbar-title{font-size:20px;font-weight:800}
.topbar-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.22);
  background:rgba(37,99,235,.10);
  font-size:12px;
  color:rgba(37,99,235,.95)
}

.layout{display:grid;grid-template-columns:260px 1fr; gap:16px; padding:16px}

.sidebar{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  position:sticky;
  top:70px;
  /*height:calc(100vh - 90px);*/
  overflow:auto;
  box-shadow:0 10px 24px rgba(15,23,42,.06)
}

.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  color:var(--text)
}

.nav a:hover{background:rgba(37,99,235,.08)}

.nav .active{
  background:rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.22)
}

.nav a.logout{
  margin-top:2px;
  border:1px solid rgba(244,63,94,.18);
  background:rgba(244,63,94,.08);
}
.nav a.logout:hover{
  background:rgba(244,63,94,.14);
}

.nav-sep{
  height:1px;
  background:var(--border);
  margin:10px 8px;
  border-radius:999px;
}

.content{
  background:rgba(248,250,252,.85);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 26px rgba(15,23,42,.06)
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 22px rgba(15,23,42,.06)
}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1000px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;top:0}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){.cards{grid-template-columns:1fr}}

h1,h2{margin:0 0 10px}
.small{color:var(--muted);font-size:12px}
hr{border:0;border-top:1px solid var(--border);margin:14px 0}

.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface)
}

.table th,.table td{
  padding:10px;
  border-bottom:1px solid var(--border);
  vertical-align:top
}

.table th{
  background:rgba(15,23,42,.06);
  text-align:right;
  color:rgba(15,23,42,.88);
  font-weight:800
}

.table tr:hover td{background:rgba(37,99,235,.06)}

.actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(15,23,42,.03)
}

.btn:hover{
  border-color:rgba(37,99,235,.32);
  background:#f3f6fc
}

.btn.primary{
  background:rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.26);
  color:var(--primary)
}

.btn.danger{
  background:rgba(220,38,38,.10);
  border-color:rgba(220,38,38,.22);
  color:var(--danger)
}

.btn.ok{
  background:rgba(22,163,74,.10);
  border-color:rgba(22,163,74,.22);
  color:var(--ok)
}

.input,.select,.textarea{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text)
}

.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 3px rgba(37,99,235,.12)
}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.form-grid .full{grid-column:1/-1}

.alert{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  margin-bottom:12px;
  background:rgba(15,23,42,.04)
}

.alert.success{
  border-color:rgba(22,163,74,.26);
  background:rgba(22,163,74,.10)
}

.alert.error{
  border-color:rgba(220,38,38,.26);
  background:rgba(220,38,38,.10)
}

.kpi{display:flex;justify-content:space-between;align-items:flex-start}

.kpi .num{font-size:26px;font-weight:800}

.tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  color:var(--muted);
  background:rgba(15,23,42,.04)
}

.tag.ok{
  color:var(--ok);
  border-color:rgba(22,163,74,.22);
  background:rgba(22,163,74,.10)
}

.tag.warn{
  color:var(--warn);
  border-color:rgba(217,119,6,.22);
  background:rgba(217,119,6,.10)
}

.tag.danger{
  color:var(--danger);
  border-color:rgba(220,38,38,.22);
  background:rgba(220,38,38,.10)
}

.login-wrap{max-width:420px;margin:8vh auto}

/* v0.2 widgets */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.kpis{grid-template-columns:repeat(1,1fr)}}

.kpi{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:0 8px 22px rgba(15,23,42,.06)
}

.kpi .num{font-size:22px;font-weight:800;letter-spacing:.3px}
.kpi .lbl{color:var(--muted);font-size:12px;margin-top:3px}
.kpi .hint{color:rgba(15,23,42,.80);font-size:12px;margin-top:8px}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media(max-width:1100px){.grid-3{grid-template-columns:1fr}.grid-5{grid-template-columns:1fr}}

.progress{
  height:10px;
  border-radius:999px;
  background:rgba(15,23,42,.08);
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08)
}
.progress > div{height:100%;background:rgba(22,163,74,.85)}

.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.charts{grid-template-columns:1fr}}

.chart-card{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:0 8px 22px rgba(15,23,42,.06)
}

.chart-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.chart-title h3{margin:0;font-size:14px}

.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;
  color:rgba(15,23,42,.85)
}

details.json{
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  background:rgba(15,23,42,.06)
}

details.json summary{cursor:pointer;color:rgba(15,23,42,.86)}
pre.json{margin:8px 0 0;white-space:pre-wrap;word-break:break-word}

.footer{margin-top:12px;color:var(--muted);text-align:center;padding:10px}
