/* lju-am - Handcrafted Light Theme */
:root {
  --bg: #f8fafc; /* Latar belakang cerah */
  --text: #1e293b; /* Teks gelap untuk kontras */
  --muted: #64748b; /* Teks sekunder abu-abu */
  --line: rgba(0, 0, 0, .08); /* Garis pemisah tipis */
  --accent: #ff3b3b; /* Tetap merah sebagai aksen */
  --ok: #10b981;
  --err: #ef4444;
  --shadow: 0 10px 25px rgba(0, 0, 0, .05);
  --radius2: 22px;
  --focus: 0 0 0 3px rgba(255, 59, 59, .15);
  --sidebar-w: 280px;
  --topbar-h: 56px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  /* Gradient lembut untuk kesan premium */
  background: 
    radial-gradient(1000px 500px at 10% -10%, rgba(255, 59, 59, 0.05), transparent 50%),
    linear-gradient(180deg, #ffffff, var(--bg));
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 18px auto; padding: 0 14px 28px; }

/* Topbar yang bersih */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner { max-width: 1180px; margin: 0 auto; padding: 10px 14px; display: flex; align-items: center; gap: 14px; min-height: var(--topbar-h); }

.brand__title { font-weight: 800; color: #000; }
.brand__sub { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* Navigation */
.nav a { padding: 8px 10px; border-radius: 12px; color: var(--muted); border: 1px solid transparent; transition: 0.2s; }
.nav a.is-active { color: var(--accent); border-color: rgba(255, 59, 59, 0.2); background: rgba(255, 59, 59, 0.05); font-weight: 600; }
.nav a:hover { color: var(--text); background: rgba(0, 0, 0, 0.03); }

/* Right sidebar menu (ChatGPT-ish, but on the right) */
.iconbtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  display: flex;
  align-items: center;
  cursor: pointer;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
}
.iconbtn:hover{background:rgba(255,255,255,.06)}
.iconbtn:focus{outline:none;box-shadow:var(--focus)}
.iconbtn__line{display:block;width:18px;height:2px;background:rgba(233,238,252,.92);border-radius:2px}
.iconbtn__line + .iconbtn__line{margin-top:4px}

/* Sidebar cerah */
.sidebar {
  position: fixed; right: 0; top: 0;
  width: var(--sidebar-w); height: 100vh;
  padding-top: var(--topbar-h);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-left: 1px solid var(--line);
  z-index: 20;
}
.sidebar__inner{height:100%;display:flex;flex-direction:column;gap:12px;padding:14px}
.sidebar__hd{padding:10px 10px 8px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03)}
.sidebar__title{font-weight:800;letter-spacing:.2px}
.sidebar__sub{margin-top:4px;color:var(--muted);font-size:12px}

.snav{display:flex;flex-direction:column;gap:6px}
.snav a{
  padding:10px 10px;
  border-radius:14px;
  color:var(--muted);
  border:1px solid transparent;
  background:rgba(255,255,255,.02);
}
.snav a { background: rgba(0, 0, 0, 0.02); margin-bottom: 2px; }
.snav a.is-active { color: var(--accent); border-color: rgba(255, 59, 59, 0.2); background: rgba(255, 59, 59, 0.05); }

.sidebar-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease;
  z-index: 15;
}

/* Desktop: sidebar always visible, content keeps space on the right */
@media(min-width: 981px){
  body{padding-right:var(--sidebar-w)}
  .topbar__toggle{display:none}
  .sidebar{transform:none}
  .sidebar-backdrop{display:none}
}

/* Mobile: sidebar becomes a drawer */
@media(max-width: 980px){
  body{padding-right:0}
  .sidebar{transform: translateX(102%); transition: transform .18s ease}
  body.sidebar-open .sidebar{transform: translateX(0)}
  body.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}
}
.toast{padding:10px 12px;border-radius:14px;margin:10px 0 12px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.toast--ok{border-color:rgba(47,227,140,.35)}
.toast--err{border-color:rgba(255,107,107,.4)}
.hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:14px 0 12px}
.hdr h1{margin:0;font-size:22px;letter-spacing:.2px}
.hdr .sub{color:var(--muted);font-size:13px;margin-top:4px}
/* Panels & Cards */
.panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.panel__hd { border-bottom: 1px solid var(--line); background: #fafafa; padding: 6px;}
.panel__hd h2{margin:0;font-size:16px}
.panel__bd{padding:14px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:12px 0 18px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding:14px;
  box-shadow: var(--shadow);
}
.card__hd{color:var(--muted);font-size:12px}
.card__num{font-size:26px;font-weight:800;margin-top:6px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1 1 auto}
.input, select, textarea{
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.input:focus, select:focus, textarea:focus{box-shadow:var(--focus);border-color:rgba(255,59,59,.35)}
textarea{min-height:88px;resize:vertical}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--text);
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.06)}
.btn:focus{outline:none;box-shadow:var(--focus)}
.btn--pri{border-color:rgba(255,59,59,.35);background:rgba(255,59,59,.10)}
.btn--danger{border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.10)}
.btn--ghost{background:transparent}
.pill{
  padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);font-size:12px;background:rgba(255,255,255,.03)
}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.table tr:hover td{background:rgba(255,255,255,.03)}
.tr{text-align:right}
.muted{color:var(--muted)}
.small{font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.hr{height:1px;background:var(--line);margin:10px 0}
kbd{font-family:var(--mono);font-size:12px;padding:2px 6px;border:1px solid var(--line);border-bottom-color:rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.04)}


/* --- Tabs & form layout --- */
.formgrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media(max-width:980px){ .formgrid{grid-template-columns:1fr} }

.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 12px;
}
.tab{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}
.tab:hover{ color:var(--text); background:rgba(255,255,255,.05) }
.tab.is-active{
  color:var(--text);
  border-color:rgba(255,59,59,.35);
  background:rgba(255,59,59,.10);
}
.tabpane{ display:none; }
.tabpane.is-active{ display:block; }

.kvgrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
@media(max-width:980px){ .kvgrid{grid-template-columns:1fr} }
.kv{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.kv .k{ color:var(--muted); font-size:12px; margin-bottom:6px }
.kv .v{ font-weight:600; }
.link{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); }
.link:hover{ text-decoration-color: rgba(255,59,59,.65); }

.codepill{
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

/* === Responsive table: desktop table, mobile cards === */
.table-wrap{max-width:100%; overflow:auto; -webkit-overflow-scrolling:touch;}

.table.table--cards{
  min-width: 980px; /* supaya desktop/tablet nggak kepotong */
}

@media (max-width: 980px){
  .table.table--cards{min-width: 860px;}
}

@media (max-width: 720px){
  .table-wrap{overflow:visible}
  .table.table--cards{min-width:0}

  .table.table--cards thead{display:none}
  .table.table--cards,
  .table.table--cards tbody,
  .table.table--cards tr,
  .table.table--cards td{display:block; width:100%}

  .table.table--cards tr{
    border:1px solid var(--line);
    border-radius: var(--radius2);
    overflow:hidden;
    margin: 0 0 12px 0;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  }

  .table.table--cards td{
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:12px;
    align-items:flex-start;
    justify-content:space-between;
    min-width:0; /* biar value bisa wrap */
  }
  .table.table--cards td:last-child{border-bottom:0}

  .table.table--cards td::before{
    content: attr(data-label);
    flex: 0 0 42%;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .45px;
    padding-top:2px;
  }

  /* Kalau ada cell yang nggak mau pakai label */
  .table.table--cards td.no-label::before{display:none}

  /* Angka rata kiri di mobile */
  .table.table--cards td.tr{text-align:left}

  /* Kolom aksi enak dipencet */
  .table.table--cards td.actions-cell{display:block}
  .table.table--cards td.actions-cell::before{display:none}
  .table.table--cards td.actions-cell .actions{display:flex; gap:10px; flex-wrap:wrap}
  .table.table--cards td.actions-cell .btn{flex:1 1 110px; text-align:center}
}