/* ============================================================
   MAJU GANDARA CONSOLE v2 — design system
   Satu struktur, dua tema: terang (Paper) & gelap (Studio).
   Tema dikontrol html[data-theme], tersimpan di localStorage.
   ============================================================ */

:root, html[data-theme="light"] {
  --bg: #f2ecdf;
  --bg-2: #fdfbf6;
  --card: #fdfbf6;
  --ink: #1a1713;
  --ink-soft: #6b6354;
  --line: #d9d0bd;
  --line-strong: #1a1713;
  --signal: #ff4b1f;
  --green: #1e8a5a;
  --red: #c4321e;
  --amber: #b97f0e;
  --shadow: 4px 4px 0 rgba(26,23,19,.08);
  --nav-hover: rgba(255,75,31,.06);
}
html[data-theme="dark"] {
  --bg: #121008;
  --bg-2: #1a1710;
  --card: #201c13;
  --ink: #efe8d8;
  --ink-soft: #9a9078;
  --line: #353021;
  --line-strong: #353021;
  --signal: #ff4b1f;
  --green: #3ddc84;
  --red: #ff5c47;
  --amber: #e8b44a;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --nav-hover: rgba(255,75,31,.07);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body {
  background:var(--bg); color:var(--ink);
  font-family:"Space Grotesk", system-ui, sans-serif;
  transition: background .25s ease, color .25s ease;
}
a { color:inherit; text-decoration:none; }
.mono { font-family:"IBM Plex Mono", monospace; }
[hidden] { display:none !important; }

svg.ic { width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ============ LOGIN ============ */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:2rem;
  background:
    radial-gradient(ellipse 60% 40% at 70% 8%, rgba(255,75,31,.09), transparent),
    var(--bg);
}
.login-card {
  width:min(380px, 100%); background:var(--card);
  border:2px solid var(--line-strong); border-radius:10px;
  box-shadow:var(--shadow);
  padding:2.4rem 2.2rem;
}
.brand-word { font-family:"Anton", sans-serif; font-size:1.5rem; letter-spacing:.03em; }
.brand-word i { color:var(--signal); font-style:normal; }
.login-sub { font-family:"IBM Plex Mono", monospace; font-size:.68rem; letter-spacing:.18em; color:var(--ink-soft); margin:.3rem 0 1.8rem; text-transform:uppercase; }
.field label { display:block; font-family:"IBM Plex Mono", monospace; font-size:.66rem; letter-spacing:.16em; color:var(--ink-soft); margin:1.1rem 0 .3rem; text-transform:uppercase; }
.field input {
  width:100%; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--line); border-radius:6px;
  font:inherit; font-size:.98rem; padding:.7rem .9rem;
}
.field input:focus { outline:none; border-color:var(--signal); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:"IBM Plex Mono", monospace; font-size:.8rem; letter-spacing:.1em;
  border:none; border-radius:6px; padding:.9rem 1.4rem; cursor:pointer;
  text-transform:uppercase;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary { background:var(--signal); color:#fff; box-shadow:0 6px 24px rgba(255,75,31,.3); width:100%; margin-top:1.6rem; }
.btn-primary:hover { transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.login-foot { margin-top:1.5rem; font-size:.8rem; color:var(--ink-soft); text-align:center; }
.login-foot a { color:var(--signal); font-weight:500; }
.alert {
  border:1px solid var(--red); color:var(--red);
  background:color-mix(in srgb, var(--red) 8%, transparent);
  border-radius:6px; padding:.7rem .9rem; font-size:.85rem; margin-bottom:1rem;
}
.alert-ok { border-color:var(--green); color:var(--green); background:color-mix(in srgb, var(--green) 8%, transparent); }

/* ============ LAYOUT APP ============ */
.app { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
.side {
  background:var(--bg-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  padding:1.2rem 0; position:sticky; top:0; height:100vh;
}
.side-logo { padding:0 1.2rem .35rem; font-family:"Anton", sans-serif; font-size:1.02rem; }
.side-logo i { color:var(--signal); font-style:normal; }
.side-role { font-family:"IBM Plex Mono", monospace; font-size:.6rem; letter-spacing:.18em; color:var(--ink-soft); padding:0 1.2rem 1.1rem; border-bottom:1px solid var(--line); text-transform:uppercase; }
.nav { list-style:none; padding:.7rem 0; flex:1; overflow-y:auto; }
.nav a {
  display:flex; align-items:center; gap:.7rem;
  padding:.62rem 1.2rem; font-size:.9rem; color:var(--ink-soft);
  border-left:3px solid transparent;
}
.nav a:hover { background:var(--nav-hover); color:var(--ink); }
.nav a.active { border-left-color:var(--signal); background:var(--nav-hover); color:var(--ink); font-weight:600; }
.nav .badge { margin-left:auto; background:var(--signal); color:#fff; font-family:"IBM Plex Mono", monospace; font-size:.62rem; border-radius:99px; padding:.05rem .45rem; }
.side-user { border-top:1px solid var(--line); padding:.9rem 1.2rem 0; font-size:.82rem; display:flex; align-items:center; gap:.7rem; }
.side-user .mono { font-size:.62rem; color:var(--ink-soft); }
.avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--signal); color:#fff;
  font-family:"IBM Plex Mono", monospace; font-size:.68rem;
  display:flex; align-items:center; justify-content:center; flex:none;
}

.main { display:flex; flex-direction:column; min-width:0; }
.topbar {
  display:flex; align-items:center; gap:1rem;
  background:var(--bg-2); border-bottom:1px solid var(--line);
  padding:.75rem 1.6rem; position:sticky; top:0; z-index:20;
}
.topbar .right { margin-left:auto; display:flex; gap:.6rem; align-items:center; }
.icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:6px; cursor:pointer;
  position:relative;
}
.icon-btn:hover { border-color:var(--signal); }
.icon-btn .dot {
  position:absolute; top:-5px; right:-5px; min-width:15px; height:15px;
  background:var(--signal); color:#fff; border-radius:99px;
  font-family:"IBM Plex Mono", monospace; font-size:.58rem;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}

.content { padding:1.6rem; display:flex; flex-direction:column; gap:1.3rem; max-width:1280px; width:100%; }
.crumb { font-family:"IBM Plex Mono", monospace; font-size:.64rem; letter-spacing:.16em; color:var(--ink-soft); text-transform:uppercase; }
.page-title { font-size:1.45rem; font-weight:700; margin-top:.15rem; }

/* stat cards */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1rem; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.05rem 1.15rem; box-shadow:var(--shadow); }
.stat .k { font-family:"IBM Plex Mono", monospace; font-size:.6rem; letter-spacing:.16em; color:var(--ink-soft); text-transform:uppercase; }
.stat .v { font-family:"IBM Plex Mono", monospace; font-size:1.4rem; font-weight:600; margin:.3rem 0 .15rem; }
.stat .d { font-size:.76rem; color:var(--ink-soft); }
.t-green { color:var(--green) !important; } .t-red { color:var(--red) !important; } .t-amber { color:var(--amber) !important; }

/* panel & tabel */
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:.8rem 1.15rem; border-bottom:1px solid var(--line); }
.panel-head h3 { font-size:.95rem; }
.panel-head .mono { font-size:.62rem; color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase; }
table { width:100%; border-collapse:collapse; font-size:.84rem; }
th { font-family:"IBM Plex Mono", monospace; font-size:.6rem; letter-spacing:.13em; color:var(--ink-soft); text-align:left; padding:.6rem 1.15rem; border-bottom:1px solid var(--line); text-transform:uppercase; }
td { padding:.62rem 1.15rem; border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; font-family:"IBM Plex Mono", monospace; }
.pill { font-family:"IBM Plex Mono", monospace; font-size:.6rem; letter-spacing:.05em; padding:.16rem .5rem; border-radius:99px; border:1px solid; text-transform:uppercase; }
.pill-green { color:var(--green); border-color:var(--green); }
.pill-amber { color:var(--amber); border-color:var(--amber); }
.pill-red { color:var(--red); border-color:var(--red); }
.pill-signal { color:var(--signal); border-color:var(--signal); }
.empty { padding:1.6rem 1.15rem; color:var(--ink-soft); font-size:.85rem; text-align:center; }

/* tabel panjang: tampil ~10 baris, sisanya scroll; header & total menempel */
.scroll-table { max-height:432px; overflow-y:auto; }
.scroll-table thead th { position:sticky; top:0; background:var(--card); z-index:2; box-shadow:0 1px 0 var(--line); }
.scroll-table tfoot td { position:sticky; bottom:0; background:var(--card); z-index:2; box-shadow:0 -1px 0 var(--line); }

/* responsive */
@media (max-width: 880px) {
  .app { grid-template-columns:1fr; }
  .side { position:fixed; inset:0 auto 0 0; width:240px; z-index:40; transform:translateX(-100%); transition:transform .25s ease; }
  .side.open { transform:none; box-shadow:0 0 60px rgba(0,0,0,.4); }
  .menu-toggle { display:flex !important; }
}
.menu-toggle { display:none; }

/* modal */
.modal-bg {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.modal {
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  width:min(440px, 100%); padding:1.8rem;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  max-height:92vh; overflow-y:auto;
}