/* ============================================================
   CVN OS — Base: reset, wallpaper, shell kaca, kontrol dasar
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  background: var(--bg-base);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-bright);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); }

.u-hidden { display: none !important; }
.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   WALLPAPER — lapisan paling belakang
   Preset: data-wp="<nama>" → token --wp-<nama> (punya versi terang).
   Gambar sendiri: data-wp="image" + --wp-image dari js/appearance.js,
   diredupkan --wp-dim supaya teks di atas kaca tetap terbaca.
   ============================================================ */

#wallpaper {
  position: fixed;
  inset: 0;
  z-index: var(--z-wallpaper);
  background: var(--wp-aurora);
  background-color: var(--bg-base);
  transition: background var(--dur-slow) var(--ease-out);
}
#wallpaper[data-wp='senja']   { background: var(--wp-senja); }
#wallpaper[data-wp='samudra'] { background: var(--wp-samudra); }
#wallpaper[data-wp='hutan']   { background: var(--wp-hutan); }
#wallpaper[data-wp='grafit']  { background: var(--wp-grafit); }
#wallpaper[data-wp='image'] {
  background: var(--wp-image) center / cover no-repeat, var(--bg-base);
}
#wallpaper[data-wp='image']::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--bg-base);
  opacity: var(--wp-dim, 0.35);
}

/* ============================================================
   BOOT
   ============================================================ */

#boot {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  display: grid;
  place-items: center;
  background: var(--bg-void);
  transition: opacity var(--dur-slow) var(--ease-out);
}
#boot.is-done { opacity: 0; pointer-events: none; }

.boot-mark { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.boot-mark__word {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  color: var(--ink-bright);
}
.boot-mark__bar {
  width: 120px; height: 3px;
  border-radius: var(--r-full);
  background: var(--line-soft);
  overflow: hidden;
}
.boot-mark__bar::after {
  content: '';
  display: block;
  width: 40%; height: 100%;
  border-radius: inherit;
  background: var(--grad-brand);
  animation: bootSlide 1.1s var(--ease-inout) infinite;
}
@keyframes bootSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.boot-note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-faint); }

/* ============================================================
   AUTH
   ============================================================ */

#auth-view {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--glass-card);
  backdrop-filter: var(--glass-card-blur);
  -webkit-backdrop-filter: var(--glass-card-blur);
  border: 1px solid var(--glass-card-line);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg), var(--edge-hi);
}
.auth-head { margin-bottom: var(--sp-8); }
.auth-head__brand {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  color: var(--ink-bright);
}
.auth-head__sub { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-muted); }
.auth-head__units { display: flex; gap: var(--sp-1); margin-top: var(--sp-4); }
.auth-head__units span { height: 3px; flex: 1; border-radius: var(--r-full); }
.auth-head__units span:nth-child(1) { background: var(--unit-isadaya); }
.auth-head__units span:nth-child(2) { background: var(--unit-von); }
.auth-head__units span:nth-child(3) { background: var(--unit-breaker); }
.auth-foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-hair);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  text-align: center;
  line-height: var(--lh-snug);
}

/* ============================================================
   KONTROL DASAR
   ============================================================ */

.field { margin-bottom: var(--sp-3); }
.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
}

.input {
  width: 100%;
  padding: 9px var(--sp-3);
  font-size: var(--fs-md);
  background: var(--glass-ctrl);
  backdrop-filter: var(--glass-ctrl-blur);
  -webkit-backdrop-filter: var(--glass-ctrl-blur);
  color: var(--ink-bright);
  border: 1px solid var(--glass-ctrl-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--ink-faint); opacity: 0.7; }
select.input:invalid,
select.input.is-empty { color: var(--ink-faint); }
select.input option { color: var(--ink-bright); background: var(--bg-surface); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input[aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-glow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  white-space: nowrap;
  backdrop-filter: var(--glass-ctrl-blur);
  -webkit-backdrop-filter: var(--glass-ctrl-blur);
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.btn--primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow-accent), var(--hi-on-color);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn--ghost {
  background: var(--glass-ctrl);
  color: var(--ink-body);
  border-color: var(--glass-ctrl-line);
}
.btn--ghost:hover:not(:disabled) { background: var(--bg-overlay); border-color: var(--line-strong); color: var(--ink-bright); }

.btn--quiet { background: transparent; color: var(--ink-muted); backdrop-filter: none; }
.btn--quiet:hover:not(:disabled) { color: var(--ink-bright); background: var(--bg-overlay); }

.btn--block { width: 100%; }

.btn.is-loading { color: transparent; position: relative; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-4);
  border: 1px solid;
}
.alert--error { background: var(--danger-glow); border-color: var(--danger); color: var(--danger); }
.alert--ok    { background: var(--ok-glow);     border-color: var(--ok);     color: var(--ok); }
.alert--info  { background: var(--info-glow);   border-color: var(--info);   color: var(--info); }

.range { width: 100%; accent-color: var(--accent); }

/* ============================================================
   PANEL KACA
   Satu aturan untuk semua permukaan panel: kartu, statistik, kolom
   kanban, pembungkus tabel sheet. React memakai kelas yang sama.
   ============================================================ */

.card,
.stat,
.qa__item,
.kanban__col,
.sheet-wrap,
.glass {
  background: var(--glass-card);
  border: 1px solid var(--glass-card-line);
  box-shadow: var(--shadow-card), var(--edge-hi);
  backdrop-filter: var(--glass-card-blur);
  -webkit-backdrop-filter: var(--glass-card-blur);
}

/*
   Di layar sentuh dan layar sempit, blur kartu DIMATIKAN.
   Puluhan backdrop-filter yang ikut tergulir membuat gulir patah-patah di
   HP kelas menengah — yang dipakai sebagian besar karyawan. Kartunya tetap
   tembus tipis (--glass-card-solid), jadi wallpaper masih terasa; yang
   tetap memakai blur hanya topbar, bottom bar, dan kontrol, karena
   jumlahnya sedikit dan tidak ikut tergulir.
*/
@media (max-width: 1024px), (hover: none) {
  .card,
  .stat,
  .qa__item,
  .kanban__col,
  .sheet-wrap,
  .glass {
    background: var(--glass-card-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/*
   Di dalam jendela aplikasi, panel TIDAK memakai blur sendiri: jendelanya
   sudah satu lapis kaca ber-blur. Blur di atas blur tidak menambah apa-apa
   secara visual, tapi biayanya dihitung ulang setiap frame saat .main
   digulir — penyebab utama gulir patah-patah yang terukur sebelumnya.
*/
.win .card, .win .stat, .win .qa__item, .win .kanban__col, .win .sheet-wrap, .win .glass,
.win .sidebar, .win .topbar, .win .input, .win .btn, .win .search__input,
.win .filter-pill, .win .viewswitch, .win .pager__btn, .win .chipdate {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.win .card, .win .stat, .win .qa__item, .win .kanban__col, .win .sheet-wrap, .win .glass {
  background: var(--glass-card);
}

/* ============================================================
   APP SHELL — frame mengambang di atas wallpaper
   ============================================================ */

/* Shell Project Management hidup di dalam jendela (.win__body), jadi
   tingginya mengikuti jendela dan yang menggulir hanya .main. */
#app-view {
  height: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    'sidebar topbar'
    'sidebar main';
  column-gap: var(--frame-gap);
  padding: var(--frame-gap) var(--frame-gap) 0;
}
body.is-os { height: 100dvh; overflow: hidden; }

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.02em;
  color: var(--ink-bright);
  line-height: 1;
}
.logo small {
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-top: 1px;
}
.logo--lg { font-size: var(--fs-2xl); }

/* ---------- Sidebar ---------- */
.sidebar {
  grid-area: sidebar;
  position: relative;
  z-index: var(--z-sidebar);
  margin-bottom: var(--frame-gap);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-card-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card), var(--edge-hi);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-6);
  flex-shrink: 0;
}
.sidebar__units { display: flex; gap: 2px; margin-left: auto; }
.sidebar__units i { width: 3px; height: 14px; border-radius: var(--r-full); }
.sidebar__units i:nth-child(1) { background: var(--unit-isadaya); }
.sidebar__units i:nth-child(2) { background: var(--unit-von); }
.sidebar__units i:nth-child(3) { background: var(--unit-breaker); }

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.navlink {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 42px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--ink-muted);
  position: relative;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* Label satu baris — "Admin Panel" di dalam <button> tidak boleh patah. */
.navlink > span:not(.admin-tag):not(.navcount) {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navlink:hover { background: var(--bg-overlay); color: var(--ink-bright); }
.navlink svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Menu aktif: pil oranye bergradien (gelap) / pil violet lembut (terang),
   sesuai referensi. */
.navlink.is-active {
  background: var(--grad-active);
  color: #fff;
  box-shadow: var(--shadow-accent-2), var(--hi-on-color);
}
:root[data-theme='light'] .navlink.is-active {
  background: var(--accent-soft);
  color: var(--accent-dim);
  box-shadow: none;
}

.navcount {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-align: center;
  color: #fff;
  background: var(--accent);
}
.navlink.is-active .navcount { background: rgba(255, 255, 255, 0.25); }
:root[data-theme='light'] .navlink.is-active .navcount { background: var(--accent); }

.navgroup__toggle { width: 100%; gap: var(--sp-2); }
.navgroup__toggle > svg:first-child { margin-right: 4px; }
.navgroup__caret { margin-left: auto; transition: transform var(--dur-base) var(--ease-out); }
.navgroup__toggle .navgroup__caret { width: 15px; height: 15px; margin-left: 0; color: var(--ink-faint); }
.navgroup.is-open .navgroup__caret { transform: rotate(90deg); }
.navgroup__items {
  display: none;
  margin: var(--sp-1) 0 var(--sp-2) var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line-soft);
}
.navgroup.is-open .navgroup__items { display: block; }
.navgroup__items .navlink { min-height: 36px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.navgroup__items .navlink.is-active,
:root[data-theme='light'] .navgroup__items .navlink.is-active {
  background: var(--cyan-soft);
  color: var(--cyan);
  box-shadow: none;
}

.sidebar__foot { padding: var(--sp-4); flex-shrink: 0; }
.brandcard {
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 100% 100%, var(--accent-2-soft), transparent 60%),
    var(--glass-inset);
  border: 1px solid var(--line-hair);
}
.brandcard__line {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: var(--lh-snug);
}

/* ---------- Topbar ---------- */
.topbar {
  grid-area: topbar;
  position: relative;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-3) 0 var(--sp-3);
  margin-bottom: var(--frame-gap);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-card-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card), var(--edge-hi);
}

/* Judul halaman hanya tampil di HP; di desktop tempatnya diisi kotak cari,
   dan judul besar ada di kepala halaman. */
.topbar__title {
  display: none;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink-bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.topbar__spacer { flex: 1; }

.topbar__action {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  color: var(--ink-muted);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.topbar__action:hover { background: var(--bg-overlay); color: var(--ink-bright); }
.topbar__action svg { width: 19px; height: 19px; }

.topbar__badge[data-count]:not([data-count='0'])::after {
  content: attr(data-count);
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: var(--accent-2);
  border-radius: var(--r-full);
  box-shadow: 0 0 0 2px var(--bg-surface);
}

/* Kotak cari — membuka palet perintah (⌘K). */
.searchbox {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: min(380px, 40vw);
  height: 40px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-md);
  background: var(--glass-ctrl);
  border: 1px solid var(--glass-ctrl-line);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
  text-align: left;
  transition: border-color var(--dur-fast);
}
.searchbox:hover { border-color: var(--line-strong); }
.searchbox svg { width: 16px; height: 16px; flex-shrink: 0; }
.searchbox__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.searchbox__kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--bg-overlay);
  border: 1px solid var(--line-hair);
  color: var(--ink-muted);
}

/* Saklar Dark / Light — kapsul seperti di referensi. */
.themeswitch {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--glass-ctrl);
  border: 1px solid var(--glass-ctrl-line);
}
.themeswitch button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.themeswitch svg { width: 15px; height: 15px; }
:root:not([data-theme='light']) .themeswitch [data-theme-set='dark'],
:root[data-theme='light'] .themeswitch [data-theme-set='light'] {
  background: var(--bg-surface);
  color: var(--ink-bright);
  box-shadow: var(--shadow-sm);
}

/* ---------- Menu akun ---------- */
.usermenu { position: relative; }
.userchip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 240px;
  padding: 4px var(--sp-2) 4px 4px;
  border-radius: var(--r-full);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.userchip:hover, .userchip[aria-expanded='true'] { background: var(--bg-overlay); }
.userchip .avatar { width: 36px; height: 36px; }
.userchip__meta { min-width: 0; flex: 1; }
.userchip__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.userchip__role {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.userchip__caret { width: 16px; height: 16px; color: var(--ink-faint); flex-shrink: 0; }

.menu {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  z-index: var(--z-menu);
  min-width: 230px;
  padding: var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg), var(--edge-hi);
}
.menu__item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-body);
  text-align: left;
}
.menu__item:hover { background: var(--bg-overlay); color: var(--ink-bright); }
.menu__item svg { width: 16px; height: 16px; color: var(--ink-muted); }
.menu__item--danger:hover { background: var(--danger-glow); color: var(--danger); }
.menu__item--danger:hover svg { color: var(--danger); }
.menu__sep { height: 1px; margin: var(--sp-2) 0; background: var(--line-hair); }

.avatar {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--grad-brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  user-select: none;
  box-shadow: 0 0 0 2px var(--glass-card-line);
}

/* ---------- Main ---------- */
.main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--sp-1) var(--sp-12) 0;
}
.main__inner { max-width: var(--content-max); margin: 0 auto; }

.page-head {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-2) 0 var(--sp-5);
}
.page-head__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--track-tighter);
}
.page-head__sub { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-muted); }
.page-head__actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.page-head .u-eyebrow { color: var(--accent-2); margin-bottom: var(--sp-1); }

/* ---------- Kartu + brand rail ---------- */
.card {
  position: relative;
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  overflow: hidden;
}
.card--rail { padding-left: calc(var(--sp-5) + var(--rail-w)); }
.card--rail::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  background: var(--rail, var(--unit-holding));
}
.card__title { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }

/* ---------- Status halaman ---------- */
.state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-2);
  min-height: 32dvh;
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
}
.card .state { min-height: 0; padding: var(--sp-6) var(--sp-4); }
.state__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--bg-overlay);
  border: 1px solid var(--line-hair);
  color: var(--ink-muted);
}
.state__icon svg { width: 22px; height: 22px; }
.state__title { font-size: var(--fs-md); }
.state__body { font-size: var(--fs-sm); color: var(--ink-muted); max-width: 34ch; line-height: var(--lh-snug); }

.route-loading {
  height: 3px;
  background: var(--grad-brand);
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-toast);
  transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base);
}

/* ---------- Bottom bar (HP) — kapsul kaca mengambang ---------- */
.bottombar {
  display: none;
  position: fixed;
  left: var(--sp-3); right: var(--sp-3);
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  z-index: var(--z-topbar);
  height: var(--bottombar-h);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-card-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), var(--edge-hi);
}
.bottombar__list { display: flex; height: 100%; padding: 0 var(--sp-1); }
.bottombar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ink-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-out);
}
.bottombar__item svg {
  width: 20px; height: 20px;
  box-sizing: content-box;
  padding: 5px 14px;
  border-radius: var(--r-full);
  transition: background var(--dur-fast) var(--ease-out);
}
.bottombar__item.is-active { color: var(--ink-bright); }
.bottombar__item.is-active svg { background: var(--grad-active); color: #fff; box-shadow: var(--shadow-accent-2); }
:root[data-theme='light'] .bottombar__item.is-active svg { background: var(--accent-soft); color: var(--accent-dim); box-shadow: none; }

/* ---------- Drawer nav (HP) ---------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--bg-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
  .themeswitch span { display: none; }
  .themeswitch button { padding: 0 var(--sp-2); }
  .userchip__meta, .userchip__caret { display: none; }
  .userchip { padding: 4px; }
}

@media (max-width: 1024px) {
  #app-view { grid-template-columns: var(--sidebar-w-mini) minmax(0, 1fr); }
  .logo small,
  .sidebar__units,
  .navlink > span,
  .navcount,
  .sidebar__foot { display: none; }
  .sidebar__brand { justify-content: center; padding: 0; }
  .navlink { justify-content: center; }
  .navgroup__items { display: none !important; }
  .navgroup__caret { display: none; }
}

@media (max-width: 720px) {
  #app-view {
    /* minmax(0, …) — bukan 1fr — supaya teks banner yang tidak boleh patah
       tidak ikut melebarkan seluruh halaman melewati layar HP. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'topbar' 'main';
    padding: 0;
  }

  .sidebar {
    position: fixed;
    left: var(--sp-2); top: var(--sp-2); bottom: var(--sp-2);
    width: min(var(--sidebar-w), 82vw);
    height: auto;
    z-index: calc(var(--z-drawer) + 1);
    transform: translateX(-110%);
    transition: transform var(--dur-base) var(--ease-out);
    background: var(--bg-surface);
  }
  .sidebar.is-open { transform: none; }
  /* Batalkan penyusutan mode tablet saat drawer terbuka */
  .logo small { display: inline; }
  .sidebar__units, .sidebar__foot { display: flex; }
  .sidebar__foot { display: block; }
  .navlink > span { display: block; }
  .navcount { display: inline-block; }
  .sidebar__brand { justify-content: flex-start; padding: 0 var(--sp-5); }
  .navlink { justify-content: flex-start; }
  .navgroup__caret { display: block; }
  .navgroup.is-open .navgroup__items { display: block !important; }

  .topbar {
    margin: 0 0 var(--sp-4);
    padding: 0 var(--sp-2);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    border-top: none;
    gap: var(--sp-1);
  }
  .topbar__title { display: block; flex: 1; }
  .searchbox { width: 40px; padding: 0; justify-content: center; border: none; background: none; color: var(--ink-muted); flex-shrink: 0; }
  .searchbox svg { width: 19px; height: 19px; }
  .searchbox__text, .searchbox__kbd { display: none; }
  .themeswitch { display: none; }
  #appearance-btn { display: none; }

  .main { padding: 0 var(--sp-4) calc(var(--bottombar-h) + var(--sp-10)); }
  .page-head__title { font-size: var(--fs-xl); }
  .card { padding: var(--sp-4); }
  .card--rail { padding-left: calc(var(--sp-4) + var(--rail-w)); }
  .bottombar { display: block; }
  .page-head__actions { margin-left: 0; width: 100%; }
  .auth-card { padding: var(--sp-6); }
}

/* Layar laptop yang pendek: kartu merek di kaki sidebar memberi ruang untuk menu. */
@media (max-height: 860px) and (min-width: 721px) { .sidebar__foot { display: none; } }

@media print {
  .sidebar, .topbar, .bottombar, #wallpaper { display: none; }
  #app-view { display: block; padding: 0; }
}