/* ==========================================================================
 * AutoPRD.id — Design System
 * Referensi: kenari.id — warm editorial "paper" aesthetic.
 * Light = warm paper (krem + espresso + bata). Dark = espresso pekat.
 * Tema via <html data-theme="light|dark">, tersimpan di localStorage.
 * ========================================================================== */

:root,
[data-theme="light"] {
  --canvas: #FBF6EE;
  --surface: #FFFFFF;
  --sunken: #F1E6DA;
  --ink: #241F1B;
  --ink-soft: #6B5D51;
  --ink-faint: #7A6B5B;
  --line: #ECDFD2;
  --accent: #B5362A;
  --accent-hover: #A33025;
  --accent-active: #8E2A20;
  --on-accent: #FFF4F0;
  --accent-soft: rgba(181, 54, 42, 0.10);
  --money: #B5781F;
  --positive: #4F7A4A;
  --positive-soft: rgba(79, 122, 74, 0.12);
  --warn: #B5781F;
  --danger: #B5362A;
  --shadow: 0 1px 2px rgba(80, 40, 30, 0.06), 0 4px 14px rgba(80, 40, 30, 0.05);
  --shadow-lg: 0 12px 40px rgba(80, 40, 30, 0.14);
  --field-bg: #FFFFFF;
}

[data-theme="dark"] {
  --canvas: #171310;
  --surface: #241F1B;
  --sunken: #1A1512;
  --ink: #F3EDE4;
  --ink-soft: #C4B5A2;
  --ink-faint: #8A7A68;
  --line: #3A2F27;
  --accent: #D65448;
  --accent-hover: #E06558;
  --accent-active: #C24336;
  --on-accent: #FFF4F0;
  --accent-soft: rgba(214, 84, 72, 0.14);
  --money: #D9A441;
  --positive: #7BA774;
  --positive-soft: rgba(123, 167, 116, 0.14);
  --warn: #D9A441;
  --danger: #E06558;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.20);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --field-bg: #2E2823;
}

* { box-sizing: border-box; }

/* fallback kritis bila Tailwind CDN gagal dimuat — dipakai logika show/hide JS */
.hidden { display: none !important; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  margin: 0;
  transition: background 0.25s ease, color 0.25s ease;
}

.font-display { font-family: 'Archivo', 'Inter', system-ui, sans-serif; }
.font-mono2 { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem;
  padding: 0.7rem 1.4rem; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink-faint); background: var(--accent-soft); }
.btn-soft { background: var(--accent-soft); color: var(--accent); }
.btn-soft:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }

/* ---------- kartu ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.card-pad { padding: 1.5rem; }
@media (max-width: 640px) { .card-pad { padding: 1.1rem; } }

/* ---------- field ---------- */
.field {
  width: 100%; background: var(--field-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0.7rem 0.9rem; font-size: 0.95rem; font-family: inherit;
  transition: border-color 0.15s ease;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.field { resize: vertical; }

/* ---------- badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent);
}
.badge-green { background: var(--positive-soft); color: var(--positive); }
.badge-muted { background: var(--sunken); color: var(--ink-soft); }

/* ---------- misc ---------- */
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.ink { color: var(--ink); }
.accent-text { color: var(--accent); }
.bd { border-color: var(--line); }
.bg-surface { background: var(--surface); }
.bg-sunken { background: var(--sunken); }
.bg-canvas { background: var(--canvas); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.kicker::before { content: ""; width: 9px; height: 9px; background: var(--accent); border-radius: 2px; display: inline-block; }

/* toggle tema */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; font-size: 1.1rem;
}
.theme-toggle:hover { border-color: var(--ink-faint); }

/* dropdown menu */
.menu-wrap { position: relative; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 15rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lg); z-index: 60; padding: 0.35rem;
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; text-align: left; padding: 0.6rem 0.8rem; font-size: 0.875rem;
  color: var(--ink); border-radius: 6px; background: none; border: 0; cursor: pointer;
  font-family: inherit;
}
.menu-item:not(:disabled):hover { background: var(--accent-soft); }
.menu-item:disabled { opacity: 0.35; cursor: not-allowed; }
.menu-item .st { font-size: 0.75rem; color: var(--positive); font-weight: 700; }
.menu-sep { border-top: 1px solid var(--line); margin: 0.35rem 0.5rem; }
.menu-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); padding: 0.55rem 0.8rem 0.1rem; }

/* modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 12, 8, 0.55); backdrop-filter: blur(2px);
  z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem; max-width: 24rem; width: 100%; box-shadow: var(--shadow-lg);
}

/* markdown render */
.md-body { line-height: 1.75; font-size: 1rem; color: var(--ink-soft); }
.md-body h2 { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: 2.25rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); font-family: 'Archivo', sans-serif; }
.md-body h3 { font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 1.75rem 0 0.75rem; font-family: 'Archivo', sans-serif; }
.md-body p { margin: 0.9rem 0; }
.md-body ul, .md-body ol { margin: 0.9rem 0; padding-left: 1.5rem; }
.md-body ul { list-style: disc; } .md-body ol { list-style: decimal; }
.md-body li { margin: 0.35rem 0; }
.md-body strong { color: var(--ink); }
.md-body code { background: var(--accent-soft); color: var(--accent); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.875em; font-family: 'JetBrains Mono', monospace; }
.md-body pre { background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.25rem; overflow-x: auto; margin: 1rem 0; }
.md-body pre code { background: none; color: var(--ink); padding: 0; }
.md-body table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.92rem; display: block; overflow-x: auto; }
.md-body th, .md-body td { border: 1px solid var(--line); padding: 0.6rem 0.9rem; text-align: left; }
.md-body th { background: var(--accent-soft); color: var(--ink); }
.md-body hr { border-color: var(--line); margin: 2rem 0; }
.md-body a { color: var(--accent); }

/* toast */
#toast { transition: opacity 0.3s, transform 0.3s; }

/* skeleton */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--sunken) 25%, var(--line) 50%, var(--sunken) 75%);
  background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 8px;
}

/* ============ Navbar ala kenari.id (CSS murni, tanpa Tailwind responsive) ============ */
.site-header{position:sticky;top:0;z-index:40;background:var(--canvas);border-bottom:1px solid var(--line);}
.site-header-inner{max-width:80rem;margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;gap:1rem;}
.site-logo{font-family:'Archivo','Inter',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;flex:none;line-height:1;}
.site-logo>span{color:var(--accent);}
.site-nav{display:none;align-items:center;gap:1.5rem;margin-left:1.25rem;}
.site-nav a{color:var(--ink-soft);text-decoration:none;font-size:.92rem;white-space:nowrap;}
.site-nav a:hover{color:var(--ink);}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600;}
.site-actions{margin-left:auto;display:flex;align-items:center;gap:.55rem;}
.site-cta{white-space:nowrap;text-decoration:none;flex:none;}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:9px;width:38px;height:38px;cursor:pointer;padding:0;flex:none;}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .18s ease,opacity .18s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.mobile-menu{border-top:1px solid var(--line);background:var(--canvas);padding:.25rem 1rem 1rem;}
.mobile-menu[hidden]{display:none;}
.mobile-menu nav{display:flex;flex-direction:column;}
.mobile-menu nav a{padding:.8rem .25rem;color:var(--ink);text-decoration:none;font-weight:500;border-bottom:1px solid var(--line);font-size:.95rem;}
.mobile-menu nav a:last-child{border-bottom:none;}
.mobile-menu nav a[aria-current="page"]{color:var(--accent);font-weight:700;}
.mobile-account{display:flex;align-items:center;gap:.6rem;padding-top:.9rem;flex-wrap:wrap;}
@media(min-width:640px){
  .site-nav{display:flex;}
  .nav-toggle{display:none;}
  .mobile-menu{display:none;}
}
@media(max-width:639.98px){
  .hide-mobile{display:none !important;}
  .site-header-inner{gap:.6rem;}
}

/* ============ Menu akun (dropdown) ============ */
.account-menu{position:relative;flex:none;}
.account-btn{display:flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.42rem .85rem;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--ink);font-family:inherit;max-width:13rem;}
.account-btn:hover{border-color:var(--accent);}
.account-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.account-caret{font-size:.65rem;color:var(--ink-soft);flex:none;}
.account-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:12rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px -12px rgba(0,0,0,.28);padding:.35rem;z-index:60;}
.account-dropdown[hidden]{display:none;}
.account-dropdown a,.account-dropdown button{display:flex;width:100%;align-items:center;padding:.6rem .8rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.88rem;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;font-weight:500;}
.account-dropdown a:hover,.account-dropdown button:hover{background:var(--accent-soft);}
.account-dropdown a:focus-visible,.account-dropdown button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.account-dropdown button[data-logout]{color:var(--danger);}
.mobile-account [data-account]{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.mobile-account .account-name{font-weight:600;color:var(--ink);}