/* =========================================================
   SISTEM MONITORING KPI - Custom Theme
   ========================================================= */
:root{
  --navy-950:#0F1B33;
  --navy-900:#14213D;
  --navy-800:#1C2E52;
  --ink:#1F2937;
  --ink-soft:#5B6472;
  --bg:#F4F6F9;
  --card:#FFFFFF;
  --line:#E4E8EF;
  --teal:#0F8B8D;
  --teal-dark:#0B6B6D;
  --amber:#E9A23B;
  --coral:#D64545;
  --green:#2E9E5B;
  --radius:10px;
}

*{box-sizing:border-box;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:14.5px;
  line-height:1.5;
}

h1,h2,h3,h4,h5{ font-weight:600; letter-spacing:-0.01em; color:var(--navy-900); }

a{ color:var(--teal-dark); text-decoration:none; }
a:hover{ color:var(--teal); }

/* ---------- Layout shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.app-sidebar{
  width:250px;
  flex-shrink:0;
  background:var(--navy-900);
  color:#D9E2F1;
  position:fixed;
  top:0; bottom:0; left:0;
  display:flex; flex-direction:column;
  z-index:40;
}
.app-sidebar .brand{
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.app-sidebar .brand-name{ color:#fff; font-weight:700; font-size:1.05rem; }
.app-sidebar .brand-sub{ color:#8FA0C2; font-size:.75rem; }

.app-sidebar nav{ padding:14px 10px; overflow-y:auto; flex:1; }
.app-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:#7488AD; padding:14px 12px 6px;
}
.app-sidebar a.nav-link{
  color:#C6D2E8; padding:9px 12px; border-radius:8px; font-size:.9rem;
  display:flex; align-items:center; gap:10px; margin-bottom:2px;
}
.app-sidebar a.nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.app-sidebar a.nav-link.active{ background:var(--teal); color:#fff; font-weight:600; }
.app-sidebar .nav-link .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.6; }

.app-main{ margin-left:250px; flex:1; min-width:0; display:flex; flex-direction:column; }

.app-topbar{
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:30;
}
.app-topbar .page-title{ font-size:1.15rem; font-weight:600; color:var(--navy-900); margin:0;}
.app-topbar .page-eyebrow{ color:var(--ink-soft); font-size:.8rem; margin:0 0 2px;}

.app-content{ padding:24px; flex:1; }

/* ---------- Cards ---------- */
.card{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:none; }
.card-kpi{ background:var(--card); }
.stat-tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px;
}
.stat-tile .stat-label{ color:var(--ink-soft); font-size:.8rem; margin-bottom:6px; }
.stat-tile .stat-value{ font-size:1.7rem; font-weight:700; color:var(--navy-900); }
.stat-tile.accent-teal{ border-top:3px solid var(--teal); }
.stat-tile.accent-amber{ border-top:3px solid var(--amber); }
.stat-tile.accent-coral{ border-top:3px solid var(--coral); }
.stat-tile.accent-green{ border-top:3px solid var(--green); }

/* ---------- Badges ---------- */
.badge-status{ font-weight:500; font-size:.72rem; padding:.4em .65em; border-radius:6px; }

/* ---------- Buttons ---------- */
.btn-primary{ background:var(--teal); border-color:var(--teal); }
.btn-primary:hover{ background:var(--teal-dark); border-color:var(--teal-dark); }
.btn-outline-primary{ color:var(--teal); border-color:var(--teal); }
.btn-outline-primary:hover{ background:var(--teal); border-color:var(--teal); }

/* ---------- Table ---------- */
.table thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); border-bottom:2px solid var(--line); font-weight:600;
}
.table td, .table th{ vertical-align:middle; }

/* ---------- Progress ---------- */
.progress{ height:8px; border-radius:4px; background:var(--line); }

/* ---------- Login page ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--navy-950),var(--navy-800));
}
.login-card{
  background:var(--card); border-radius:14px; padding:40px 36px; width:100%; max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

/* ---------- Utility ---------- */
.text-soft{ color:var(--ink-soft); }
.evidence-thumb{ width:100%; height:90px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }

@media (max-width: 900px){
  .app-sidebar{ transform:translateX(-100%); transition:transform .2s; }
  .app-sidebar.open{ transform:translateX(0); }
  .app-main{ margin-left:0; }
}