/* ============================================================ PKM Manager UI
   Diadaptasi dari prototipe desain "PKM Manager.dc.html".
   Token + komponen class-based; tema terang/gelap via [data-theme]. */

:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#F1F3F6; --surface-3:#E9ECF1;
  --border:#E4E8EE; --border-2:#D5DBE4;
  --text:#171A1F; --text-2:#586173; --text-3:#8b93a3;
  --primary:#3B5BDB; --primary-soft:#EAEEFC; --on-primary:#fff;
  --ai:#7C3AED; --ai-soft:#F2ECFD; --ai-row:#FBF8FE;
  --ok:#0E9F6E; --ok-soft:#E4F6EE;
  --warn:#B7791F; --warn-soft:#FBF0DA;
  --err:#E02424; --err-soft:#FBE7E7;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
  --shadow-lg:0 16px 40px -12px rgba(16,24,40,.22);
  --rowpad:9px;
}
[data-theme="dark"]{
  --bg:#0D0F13; --surface:#15181E; --surface-2:#1B1F27; --surface-3:#222732;
  --border:#262C36; --border-2:#333B47;
  --text:#E7EAF0; --text-2:#9AA3B2; --text-3:#69717f;
  --primary:#6E8AFF; --primary-soft:#1B2238; --on-primary:#fff;
  --ai:#A98BF7; --ai-soft:#23203A; --ai-row:#191726;
  --ok:#34D399; --ok-soft:#10271F;
  --warn:#E3A93C; --warn-soft:#2A2310;
  --err:#F87171; --err-soft:#2C1717;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 18px 44px -10px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--text);
  font:14px/1.5 'Hanken Grotesk',system-ui,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
::selection{ background:rgba(110,138,255,.25); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@keyframes shimmer{ 0%,100%{ opacity:.55;} 50%{ opacity:1;} }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }

/* --------------------------------------------------------------- layout */
.app{ display:flex; min-height:100vh; }
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.scroll{ flex:1; overflow:auto; }
.page{ padding:24px; animation:fadeUp .25s ease; }
.page.narrow{ max-width:1080px; margin:0 auto; }
.page.mid{ max-width:900px; margin:0 auto; }

/* --------------------------------------------------------------- sidebar */
.sidebar{ width:236px; flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; }
.brand{ padding:18px 18px 14px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--border); text-decoration:none; }
.brand .logo{ width:34px; height:34px; border-radius:9px; background:var(--primary);
  color:var(--on-primary); display:grid; place-items:center; font-weight:800;
  font-size:15px; box-shadow:var(--shadow); }
.brand b{ font-size:14px; } .brand small{ font-size:11px; color:var(--text-3); }
.nav{ padding:12px; display:flex; flex-direction:column; gap:3px; flex:1; }
.nav .label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); font-weight:700; padding:14px 10px 5px; }
.nav .label:first-child{ padding-top:8px; }
.navlink{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px;
  border-radius:9px; border:none; background:transparent; color:var(--text-2);
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-align:left;
  text-decoration:none; }
.navlink:hover{ background:var(--surface-2); }
.navlink.on{ background:var(--primary-soft); color:var(--primary); }
.navlink .count{ margin-left:auto; font-size:11px; color:var(--text-3); font-weight:600; }
.navlink .pill{ margin-left:auto; min-width:19px; text-align:center; font-size:11px;
  font-weight:700; padding:1px 6px; border-radius:20px; background:var(--warn-soft); color:var(--warn); }
.sidefoot{ padding:12px; border-top:1px solid var(--border); display:flex;
  flex-direction:column; gap:9px; }
.conn{ display:flex; align-items:center; gap:9px; padding:8px 10px;
  background:var(--surface-2); border-radius:9px; }
.conn .dot{ width:8px; height:8px; border-radius:50%; }
.conn.ok .dot{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.conn.off .dot{ background:var(--err); box-shadow:0 0 0 3px var(--err-soft); }
.conn b{ font-size:12px; } .conn small{ font-size:10.5px; color:var(--text-3); }

/* --------------------------------------------------------------- topbar */
.topbar{ height:60px; flex-shrink:0; border-bottom:1px solid var(--border);
  background:var(--surface); display:flex; align-items:center; gap:14px;
  padding:0 22px; position:sticky; top:0; z-index:20; }
.topbar .title{ font-size:14.5px; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:460px; }
.topbar .meta{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-3); }
.topbar .meta .skema{ color:var(--primary); font-weight:700; letter-spacing:.03em; }
.topbar .meta .idu{ background:var(--surface-2); padding:1px 6px; border-radius:5px; font-size:10px; }
.spacer{ flex:1; }
.userbox{ display:flex; align-items:center; gap:8px; padding-left:14px;
  border-left:1px solid var(--border); }
.userbox .who{ text-align:right; line-height:1.2; }
.userbox .who b{ font-size:12.5px; } .userbox .who small{ font-size:10.5px; color:var(--text-3); }
.avatar{ border-radius:30%; flex-shrink:0; color:#fff; display:grid; place-items:center;
  font-weight:700; }

/* --------------------------------------------------------------- cards */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:13px;
  padding:18px; box-shadow:var(--shadow); }
.cards4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.cards2{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.stat .cap{ display:flex; align-items:center; gap:8px; color:var(--text-2);
  font-size:12px; font-weight:600; }
.stat .num{ font-size:30px; font-weight:800; margin:8px 0 2px; font-family:'JetBrains Mono',monospace; }
.stat .sub{ font-size:11.5px; color:var(--text-3); }
.grid-dash{ display:grid; grid-template-columns:1.55fr 1fr; gap:14px; }
h1{ font-size:21px; font-weight:700; margin:0 0 3px; }
h2{ font-size:14px; font-weight:700; margin:0; }
.lead{ margin:0 0 22px; color:var(--text-2); font-size:13.5px; }

/* sync bar */
.syncbar{ height:9px; border-radius:6px; background:var(--surface-3); overflow:hidden;
  display:flex; margin:0 0 10px; }
.syncbar span{ height:100%; }
.legend{ display:flex; gap:18px; font-size:11.5px; }
.legend span{ display:flex; align-items:center; gap:6px; }
.legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; }

/* activity / member rows */
.row-line{ display:flex; gap:11px; padding:9px 0; border-top:1px solid var(--border); }
.row-line:first-child{ border-top:none; }
.adot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0;
  box-shadow:0 0 0 3px var(--surface-2); }
.memrow{ display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--border); }
.tag-maint{ font-size:9.5px; font-weight:700; color:var(--ai); background:var(--ai-soft);
  padding:1px 6px; border-radius:20px; letter-spacing:.02em; }

/* --------------------------------------------------------------- buttons */
.btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px;
  border-radius:9px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  text-decoration:none; box-shadow:var(--shadow); }
.btn:hover{ border-color:var(--border-2); }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn.ai{ background:var(--ai); border-color:var(--ai); color:#fff; }
.btn.ghost{ background:transparent; box-shadow:none; }
.btn.sm{ padding:6px 11px; font-size:11.5px; }
.btn:disabled{ background:var(--surface-2); color:var(--text-3); border-color:var(--border);
  cursor:not-allowed; box-shadow:none; }
.btn .badge{ background:rgba(255,255,255,.22); padding:1px 7px; border-radius:20px; font-size:11px; }
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:28px;
  height:28px; border-radius:7px; border:1px solid transparent; background:transparent;
  color:var(--text-3); cursor:pointer; }
.iconbtn:hover{ background:var(--surface-2); }
.iconbtn.ok{ border-color:var(--ok); background:var(--ok-soft); color:var(--ok); }
.iconbtn.del:hover{ background:var(--err-soft); color:var(--err); }
.aibtn{ display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px;
  border-radius:7px; border:1px solid var(--ai); background:var(--ai-soft); color:var(--ai);
  font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; }

/* --------------------------------------------------------------- forms */
label.field{ display:flex; flex-direction:column; gap:5px; font-size:12px;
  color:var(--text-2); font-weight:600; }
label.field span.opt{ font-weight:400; color:var(--text-3); }
input,textarea,select{ border:1px solid var(--border); background:var(--bg); color:var(--text);
  border-radius:8px; padding:9px 10px; font:inherit; font-size:13px; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--primary); }

/* --------------------------------------------------------------- tables */
.tablewrap{ background:var(--surface); border:1px solid var(--border); border-radius:13px;
  box-shadow:var(--shadow); overflow:hidden; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
thead tr{ background:var(--surface-2); }
th{ text-align:left; font-size:11px; font-weight:700; color:var(--text-2);
  text-transform:uppercase; letter-spacing:.04em; padding:10px 12px;
  border-bottom:1px solid var(--border); }
th.r{ text-align:right; } td{ border-bottom:1px solid var(--border); vertical-align:middle; }
td.pad{ padding:var(--rowpad) 12px; } td.r{ text-align:right; }
tr.row-ai{ background:var(--ai-row); box-shadow:inset 3px 0 0 var(--ai); }
tr.row-synced{ opacity:.62; } tr.row-error{ box-shadow:inset 3px 0 0 var(--err); }
.cell{ width:100%; border:none; background:transparent; color:var(--text); font:inherit;
  font-size:13px; padding:var(--rowpad) 12px; outline:none; border-radius:0; }
.cell:focus{ background:var(--primary-soft); }
.cell.mono{ font-family:'JetBrains Mono',monospace; }
.cell.r{ text-align:right; }
.cell.ai{ color:var(--ai); font-weight:600; }
tfoot td{ padding:11px 12px; }
.total-foot{ text-align:right; font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:13.5px; color:var(--primary); }
.filetag{ display:inline-flex; align-items:center; gap:5px; background:var(--surface-2);
  border:1px solid var(--border); padding:3px 8px; border-radius:7px; font-size:11px;
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash{ color:var(--text-3); }
.acts{ display:flex; gap:4px; justify-content:flex-end; align-items:center; }

/* chips */
.chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:20px; white-space:nowrap; }
.chip-pending{ background:var(--warn-soft); color:var(--warn); }
.chip-synced{ background:var(--ok-soft); color:var(--ok); }
.chip-error{ background:var(--err-soft); color:var(--err); }
.chip-ai{ background:var(--ai-soft); color:var(--ai); }

/* arsip rail */
.rail{ width:280px; flex-shrink:0; background:var(--surface); border:1px solid var(--border);
  border-radius:13px; box-shadow:var(--shadow); overflow:hidden; align-self:flex-start; }
.rail .head{ padding:14px 15px; border-bottom:1px solid var(--border); }
.rail .item{ padding:12px 15px; border-bottom:1px solid var(--border); }
.rail .note{ font-size:11px; color:var(--text-2); margin:7px 0 0; padding-left:39px; }
.rail .empty{ padding:26px 15px; text-align:center; color:var(--text-3); font-size:12px; }
.thumb{ width:30px; height:30px; border-radius:7px; background:var(--surface-2);
  display:grid; place-items:center; font-size:14px; flex-shrink:0; }

/* drop zone */
.dropzone{ display:block; border:2px dashed var(--border-2); border-radius:14px; background:var(--surface);
  padding:34px 24px; text-align:center; cursor:pointer; transition:.15s; }
.dropzone:hover{ border-color:var(--primary); background:var(--primary-soft); }
.dropzone .ic{ width:50px; height:50px; border-radius:13px; background:var(--primary-soft);
  color:var(--primary); display:grid; place-items:center; margin:0 auto 12px; }
.toggle2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.choice{ display:flex; align-items:center; justify-content:center; gap:9px; padding:13px;
  border-radius:11px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border); color:var(--text-2); }
.choice.on{ background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }
.staged{ margin-top:14px; display:inline-flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.staged span{ display:inline-flex; align-items:center; gap:6px; background:var(--surface-2);
  border:1px solid var(--border); padding:5px 10px; border-radius:8px; font-size:12px; }

/* drawer (nota) */
.scrim{ position:fixed; inset:0; background:rgba(10,12,18,.45); z-index:60; animation:fadeUp .2s ease; }
.drawer{ position:fixed; top:0; right:0; width:420px; max-width:92vw; height:100vh;
  background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-lg);
  z-index:61; display:flex; flex-direction:column; animation:fadeUp .25s ease; }
.drawer .dhead{ padding:16px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; }
.drawer .dbody{ flex:1; overflow:auto; padding:18px; }
.ai-ic{ width:30px; height:30px; border-radius:8px; background:var(--ai-soft); color:var(--ai);
  display:grid; place-items:center; }
.receipt{ background:var(--surface-2); border:1px solid var(--border); border-radius:11px;
  padding:18px; margin-bottom:18px; display:flex; flex-direction:column; align-items:center; }
.receipt .paper{ width:190px; background:#fff; border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.14); padding:14px 16px;
  font-family:'JetBrains Mono',monospace; color:#222; font-size:10px; }
.receipt .paper .st{ text-align:center; font-weight:700; font-size:11px; letter-spacing:.05em;
  border-bottom:1px dashed #bbb; padding-bottom:7px; margin-bottom:7px; }
.field-ai{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 13px; background:var(--ai-soft); border:1px solid var(--ai); border-radius:10px; margin-bottom:8px; }
.field-ai .lab{ font-size:10.5px; color:var(--ai); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.field-ai .val{ font-size:13.5px; font-weight:600; margin-top:1px; }
.field-ai .conf{ text-align:right; flex-shrink:0; }
.field-ai .conf b{ font-size:12px; color:var(--ai); font-family:'JetBrains Mono',monospace; }
.field-ai .conf small{ font-size:10px; color:var(--text-3); display:block; }
.spin{ animation:spin .8s linear infinite; }

/* toast */
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:80;
  background:var(--text); color:var(--bg); padding:11px 18px; border-radius:11px;
  font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); display:flex;
  align-items:center; gap:9px; animation:fadeUp .25s ease; }

/* misc */
.muted{ color:var(--text-3); } .error{ color:var(--err); }
.banner{ display:flex; align-items:center; gap:12px; justify-content:space-between;
  background:var(--warn-soft); color:var(--warn); border:1px solid var(--border);
  border-radius:11px; padding:12px 16px; margin-bottom:18px; font-size:13px; font-weight:600; }
.banner form{ display:flex; gap:8px; align-items:center; }
.banner input{ padding:6px 9px; font-size:12px; }
.flexbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
select.proj{ max-width:220px; }
.remote-list .row-line a{ color:var(--text-2); }

@media (max-width:920px){
  .cards4{ grid-template-columns:1fr 1fr; }
  .grid-dash{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
}