@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&family=Figtree:wght@400;500;600;700&display=swap');

/* ===== Token ===== */
:root{
  --primary:#1d5c4d; --primary-hover:#174a3e; --secondary:#b9852a;
  --success:#2e7d5b; --warning:#c47f17; --danger:#b8453a;
  --dark:#14302a; --bg-app:#f2f4f1; --surface:#fff;
  --border:#d8dfda; --line:#d8dfda; --gray:#5f716b;
  --text-main:#2b3a35; --text-muted:#5f716b;
  --radius-lg:12px; --radius-md:8px;
  --shadow-sm:none; --shadow-md:0 2px 8px rgba(20,48,42,.08); --shadow-float:0 12px 30px rgba(20,48,42,.18);
  --sb:#12312b; --sb-text:#bcd0c8; --soft:#f6f8f6; --tint:#e6efeb;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07'%3E%3Crect x='12' y='12' width='32' height='32'/%3E%3Crect x='12' y='12' width='32' height='32' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
}
body.dark-mode{
  --primary:#4fb89c; --primary-hover:#6cc9b0; --secondary:#d8a449;
  --dark:#e6efeb; --bg-app:#0d1613; --surface:#142420; --border:#27403a; --line:#27403a; --gray:#93a9a1;
  --text-main:#d5e2dc; --text-muted:#93a9a1; --sb:#0a1210; --soft:#101d19; --tint:#1b332d;
}

/* ===== Kerangka ===== */
body{display:block;height:100vh;overflow:hidden;background:var(--bg-app);font-family:'Figtree',system-ui,sans-serif;font-size:15px;color:var(--text-main)}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Figtree',sans-serif;color:var(--dark)}
.app-wrapper{width:100vw;height:100vh}
.dashboard-layout{border:0;border-radius:0;box-shadow:none;background:var(--bg-app)}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== Sidebar ===== */
.sidebar{width:256px;background:var(--sb) var(--star);border-right:0;color:var(--sb-text)}
.brand{display:flex;gap:12px;align-items:center;padding:26px 22px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{width:42px;height:42px;border-radius:10px;background:var(--secondary);color:#12312b;display:grid;place-items:center}
.brand-mark .ic{width:24px;height:24px;stroke-width:1.9}
.brand-name{font:700 17px/1.15 'Bricolage Grotesque',sans-serif;color:#fff}
.brand-sub{font-size:12px;color:var(--sb-text);margin-top:3px;line-height:1.3}
.sidebar-nav{padding:16px 12px;gap:2px}
.nav-btn{padding:12px 14px;border-radius:8px;color:var(--sb-text);font-size:14.5px;font-weight:500;gap:12px;border:0}
.nav-btn:hover{background:rgba(255,255,255,.06);color:#fff;transform:none}
.nav-btn.active{background:rgba(255,255,255,.1);color:#fff;font-weight:600;border:0;box-shadow:inset 3px 0 0 var(--secondary)}
.sidebar-footer{padding:12px;border-top:1px solid rgba(255,255,255,.08);gap:2px}
.btn-sidebar-action{display:flex;align-items:center;gap:10px;color:var(--sb-text);font-size:13px;font-weight:500;padding:9px 12px}
.btn-sidebar-action:hover{background:rgba(255,255,255,.07);color:#fff}
#btnCleanDraft:hover{color:#ffb4a8}

/* ===== Topbar & halaman ===== */
.topbar{height:60px;padding:0 36px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:inset 0 -3px 0 -2px var(--secondary)}
.topbar-title h1{font-size:16px;font-weight:600;color:var(--text-muted)}
.btn-panduan{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--primary);font-weight:600;font-size:14px;text-decoration:none}
.btn-panduan:hover{background:var(--tint)}
.page-content{max-width:1040px;padding:34px 40px 110px;animation:none;opacity:1;transform:none}
.page-header{margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.page-header h2{font-size:28px;font-weight:700;letter-spacing:-.4px;margin-bottom:6px}
.page-header p{font-size:15px}
.page-header-center{text-align:left}

/* ===== Kartu & form ===== */
.card-box{padding:26px 28px;border-radius:var(--radius-lg);margin-bottom:18px;box-shadow:none;background:var(--surface)}
.card-box:hover{box-shadow:none;transform:none}
.card-box h3{font:700 16px 'Bricolage Grotesque',sans-serif;text-transform:none;letter-spacing:0;margin:0 0 18px;color:var(--dark)}
.card-box h3::before{display:none}
label{font-weight:600;font-size:13.5px;color:var(--text-main)}
input[type="text"],input[type="number"],select{height:42px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text-main);font-family:inherit;font-size:14.5px}
input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);outline:0}
.dynamic-row{border-radius:10px}
.helper-text,.empty-text{color:var(--text-muted)}

/* ===== Tombol ===== */
.btn-action{height:42px;border-radius:8px;font:600 14px 'Figtree',sans-serif;letter-spacing:0;gap:8px;background:var(--primary);color:#fff}
.btn-action:hover{filter:none;transform:none;box-shadow:none;background:var(--primary-hover)}
.btn-export{background:var(--primary)}
.btn-import{background:var(--surface);color:var(--primary);border:1px solid var(--border)}
.btn-import:hover{background:var(--tint);border-color:var(--primary)}
.btn-generate{background:var(--secondary);color:#14302a;height:48px;font-size:15px;box-shadow:none}
.btn-generate:hover{background:#a67620;color:#fff;transform:none;box-shadow:none}
.btn-generate-wide-lg{height:52px;font-size:16px}
.btn-action-dark{background:var(--dark);color:var(--surface)}
.btn-action-danger{background:var(--danger)}
.btn-action-secondary{background:var(--tint);color:var(--primary)}
.btn-action-secondary:hover{background:var(--border)}
.btn-sm{border-radius:8px;gap:6px;box-shadow:none}
.btn-sm:hover{transform:none;box-shadow:none}
.btn-panduan.btn-sm{height:38px}

/* ===== Tabel ===== */
table{background:var(--surface);font-size:14px}
th{background:var(--soft);font:600 12.5px 'Figtree',sans-serif;text-transform:none;letter-spacing:.2px;padding:12px;color:var(--text-muted);border-bottom:1px solid var(--border)}
td{padding:11px 12px;border-bottom:1px solid var(--border)}
tr:hover td{background:var(--soft)}
.preview-box{border:1px solid var(--border);border-radius:10px;overflow:auto}
.jadwal-wrapper{border-radius:10px;box-shadow:none}
.jadwal-wrapper h3{background:var(--soft);font-size:16px;padding:14px 20px}
.jadwal-wrapper th,.jadwal-wrapper th:first-child{background:var(--tint);color:var(--dark)}
.jadwal-wrapper td:first-child{background:var(--soft);font-family:'Bricolage Grotesque',sans-serif;color:var(--dark)}
.cell-jadwal{background:var(--surface);border:1px solid var(--border);padding:10px!important}
.cell-jadwal:hover{background:var(--tint);transform:none;box-shadow:0 0 0 2px var(--secondary) inset;border-radius:0}
.cell-jadwal-empty{background:var(--soft);color:var(--text-muted)}

/* ===== Tab hasil ===== */
.tabs{gap:2px;padding:0;border-bottom:1px solid var(--border);margin-bottom:22px;flex-wrap:wrap}
.tab-btn{height:44px;padding:0 16px;border:0;border-bottom:2px solid transparent;border-radius:0;font:600 14px 'Figtree',sans-serif;display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);margin-bottom:-1px}
.tab-btn:hover{background:transparent;color:var(--dark)}
.tab-btn.active{background:transparent;border-color:var(--secondary);color:var(--dark)}

/* ===== Stepper, ringkasan, validasi ===== */
.workflow-step{border-radius:10px;box-shadow:none;background:var(--surface);border-color:var(--border)}
.workflow-step.done{background:var(--tint);border-color:transparent}
.workflow-step.current{background:var(--surface);border-color:var(--secondary);box-shadow:inset 0 3px 0 var(--secondary)}
.workflow-step-index{background:var(--border);color:var(--dark)}
.workflow-step.done .workflow-step-index{background:var(--primary);color:#fff}
.workflow-step.current .workflow-step-index{background:var(--secondary);color:#14302a}
.quick-health-card{border-radius:10px;box-shadow:none;background:var(--surface);border-top:1px solid var(--border)!important;border-left:4px solid var(--primary)}
.quick-health-card.tone-amber{border-left-color:var(--warning)}.quick-health-card.tone-red{border-left-color:var(--danger)}
.quick-health-card.tone-purple{border-left-color:var(--secondary)}
.quick-health-icon,.stat-icon{border-radius:10px;background:var(--tint)!important;color:var(--primary)!important;font-size:22px}
.stat-card{border-radius:10px;box-shadow:none}.stat-card:hover{transform:none;box-shadow:none}
.validation-item{border-radius:8px;gap:10px;align-items:center}
.validation-item.ok{background:var(--tint);color:var(--primary)}
.validation-item.warn{background:#fbf0dc;color:#7a4f0c}.validation-item.bad{background:#f7e3df;color:#8c2f26}
.validation-item .ic{flex:none}
.status-good{background:var(--tint);color:var(--primary)}
.status-badge{border:0}

/* ===== Aksi, modal, toast ===== */
.sticky-action-bar{background:color-mix(in srgb,var(--surface) 92%,transparent);border-top:1px solid var(--border);box-shadow:none;border-radius:0}
.toast{border-radius:10px;font-family:'Figtree',sans-serif;font-weight:600;font-size:14px}
.modal-box{border-radius:14px;padding:32px}
.modal-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;border-radius:12px;background:var(--tint);color:var(--primary);font-size:24px}
.empty-state-panel{padding:64px 32px;border-radius:12px;border:1px dashed var(--border);background:var(--soft) var(--star);background-blend-mode:multiply}
.empty-state-icon{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:14px;background:var(--tint);color:var(--primary);font-size:28px;margin-bottom:12px}
.empty-hint-pill{border-radius:8px}
.spinner{border-color:var(--border);border-top-color:var(--secondary)}
.loading-overlay{background:rgba(13,26,22,.78)}
.badge{background:var(--danger);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;margin-left:4px}

/* ===== Dark mode: sisa kelas berwarna keras ===== */
body.dark-mode .sidebar,body.dark-mode .topbar{background-color:var(--sb)}
body.dark-mode .topbar{background:var(--surface)}
body.dark-mode .card-box,body.dark-mode .stat-card,body.dark-mode .quick-health-card,body.dark-mode .workflow-step,body.dark-mode .dynamic-row,body.dark-mode .modal-box{background:var(--surface);border-color:var(--border)}
body.dark-mode .btn-generate:hover{color:#14302a}
body.dark-mode .btn-action{color:#0d1613}
body.dark-mode .btn-action-dark,body.dark-mode .btn-action-danger{color:#0d1613}
body.dark-mode .btn-import{color:var(--primary)}

@media(max-width:860px){.sidebar{width:72px}.brand>div:last-child,.nav-btn span,.btn-sidebar-action span{display:none}.page-content{padding:24px 18px 110px}.generate-health-grid{grid-template-columns:1fr 1fr}}
@media print{.sidebar,.topbar{display:none!important}}
.btn-sm{background:var(--surface);color:var(--text-main);border:1px solid var(--border)}
.btn-sm:hover{background:var(--tint)}
.btn-save{color:var(--primary);border-color:var(--primary)}
.btn-save:hover{background:var(--primary);color:var(--surface)}
.btn-panduan.btn-sm{background:var(--surface)}