/* SGO v2 — royal blue + platinum, tech premium */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100dvh; min-height: 100vh; }

:root {
  /* Royal blue scale */
  --blue-50:  #eff3fb;
  --blue-100: #dbe3f6;
  --blue-200: #b8c8ed;
  --blue-300: #8ba6e0;
  --blue-400: #5a7fcf;
  --blue-500: #345bbd;
  --blue-600: #1e3a8a;   /* primary */
  --blue-700: #172554;
  --blue-800: #0f172a;
  --blue-900: #060b1d;

  /* Platinum / cool neutral */
  --plat-50:  #f4f6fb;
  --plat-100: #e7ebf3;
  --plat-200: #d8dde6;
  --plat-300: #c0c8d3;   /* accent */
  --plat-400: #94a3b8;
  --plat-500: #64748b;
  --plat-600: #475569;

  --bg:           var(--plat-50);
  --surface:      #ffffff;
  --surface-2:    var(--plat-50);
  --border:       var(--plat-200);
  --border-soft:  var(--plat-100);
  --text:         #0f1729;
  --muted:        var(--plat-500);
  --primary:      var(--blue-600);
  --primary-dark: var(--blue-700);
  --primary-soft: var(--blue-50);

  --danger:       #b91c1c;
  --danger-soft:  #fee2e2;
  --success:      #047857;
  --success-soft: #ecfdf5;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 22px -8px rgba(30, 58, 138, .22);
  --shadow-lg: 0 20px 42px -18px rgba(30, 58, 138, .35);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  --grad-primary: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  --grad-hero:    linear-gradient(135deg, var(--blue-800) 0%, var(--blue-600) 55%, var(--blue-400) 100%);
  --grad-platinum: linear-gradient(135deg, #cbd5e1 0%, #f1f5f9 50%, #cbd5e1 100%);
}

:root[data-theme="dark"] {
  --bg:           #050a18;
  --surface:      #0d1428;
  --surface-2:    #111b35;
  --border:       #1e293b;
  --border-soft:  #162039;
  --text:         #e6ecf7;
  --muted:        #94a3b8;
  --primary:      #6184e8;
  /* In dark mode, --primary-dark is used as FOREGROUND on --primary-soft bg.
     Use a light blue so it reads well on the dark soft bg instead of the
     too-dark blue-600 which disappears. */
  --primary-dark: #93c5fd;
  --primary-soft: #172554;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 24px -10px rgba(67, 97, 238, .35);
  --shadow-lg: 0 20px 44px -18px rgba(67, 97, 238, .5);
  --grad-primary: linear-gradient(135deg, #1e3a8a 0%, #4361ee 100%);
  --grad-hero:    linear-gradient(135deg, #060b1d 0%, #1e3a8a 55%, #4361ee 100%);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); }

.container {
  max-width: 880px;
  margin: 0 auto;
  /* Bottom padding = navbar (56px) + FAB pop-up (22px) + buffer (32px) + safe area
     supaya konten paling bawah gak ke-cover navbar di mobile PWA (iOS home
     indicator). Sebelumnya 88px, di-tweak ke 110 setelah report user. */
  padding: 16px 16px calc(110px + var(--safe-bottom)) 16px;
}
.container--auth {
  max-width: 480px;
  padding: 16px;
}

/* ------- App shell: sidebar (desktop) + main (mobile/desktop) ------- */
.app-shell { display: block; min-height: 100dvh; min-height: 100vh; }
.app-shell__main { min-width: 0; min-height: 100dvh; min-height: 100vh; }

/* ------- Mobile topbar (shown ONLY <900px) ------- */
.mobile-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
:root[data-theme="dark"] .mobile-topbar { background: rgba(13, 20, 40, .9); }
.mobile-topbar__brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
  font-weight: 800; font-size: 1.05rem; letter-spacing: 1px;
  background: var(--grad-primary); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mobile-topbar__logo {
  width: 32px; height: 32px; object-fit: cover; border-radius: 7px;
  flex-shrink: 0;
}

/* ------- Sidebar (desktop ≥900px) ------- */
.sidenav {
  display: none; /* shown via media query */
  position: fixed; left: 0; top: 0; bottom: 0; width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  flex-direction: column;
  padding: 18px 14px;
  z-index: 30;
  box-shadow: 0 0 32px -16px rgba(15, 23, 42, .08);
}
:root[data-theme="dark"] .sidenav { box-shadow: 0 0 32px -16px rgba(0, 0, 0, .5); }
.sidenav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  padding: 6px 8px 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.sidenav__logo { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.sidenav__name {
  font-weight: 800; font-size: 1.1rem; letter-spacing: 1px;
  background: var(--grad-primary); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.sidenav__sub {
  font-size: .62rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.sidenav__items {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto;
}
.sidenav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
  font-size: .92rem; font-weight: 500;
  transition: background .12s, color .12s;
}
.sidenav__item:hover { background: var(--surface-2); }
.sidenav__item--active {
  background: var(--primary-soft); color: var(--primary-dark);
  font-weight: 700;
}
.sidenav__icon {
  flex-shrink: 0; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
}
.sidenav__icon svg { width: 20px; height: 20px; display: block; }
.sidenav__label { flex: 1; min-width: 0; }

.sidenav__footer {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px; margin-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.sidenav__user {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  padding: 6px 8px; border-radius: var(--r-md);
  transition: background .12s;
}
.sidenav__user:hover { background: var(--surface-2); }
.sidenav__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
.sidenav__user-text { min-width: 0; line-height: 1.2; }
.sidenav__user-name {
  font-weight: 600; font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidenav__user-role {
  font-size: .68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px; font-weight: 600;
}
.sidenav .theme-toggle { margin: 0; }

@media (min-width: 900px) {
  .sidenav { display: flex; }
  .app-shell__main { margin-left: 240px; }
  .mobile-topbar { display: none; }
  .bottomnav { display: none; }
  .container { padding-bottom: 32px; max-width: 1100px; }
}

/* ------- Topbar ------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + var(--safe-top)) 18px 12px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
:root[data-theme="dark"] .topbar { background: rgba(13, 20, 40, .82); }
.topbar__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.topbar__logo-img {
  width: 36px; height: 36px; object-fit: cover; border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .25);
}
.topbar__brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.topbar__logo {
  font-weight: 800; font-size: 1.05rem; letter-spacing: 1px;
  background: var(--grad-primary); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.topbar__sub {
  font-size: .62rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.topbar__user { text-align: right; max-width: 55%; }

/* ------- Theme toggle ------- */
.theme-toggle {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  cursor: pointer; padding: 0;
  font-family: inherit; font-size: 1rem;
  transition: background .15s, border-color .15s, transform .08s;
}
.theme-toggle:hover { background: var(--primary-soft); border-color: var(--primary); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle__icon {
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
}
.theme-toggle__icon svg { width: 18px; height: 18px; display: block; }
:root[data-theme="light"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

.topbar__name { font-weight: 600; font-size: .9rem; line-height: 1.1; }
.topbar__role { font-size: .7rem; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }

/* ------- Bottom nav (PWA-optimized) ------- */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  overflow: visible; /* FAB sticks above nav */
  border-top: 1px solid var(--border-soft);
  /* Pad bottom by safe-area inset for iPhone home indicator. Backdrop also
     extends through inset since bg is opaque. */
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  /* Solid background for PWA standalone — avoids transparency seeing through
     web view bottom bar. Glass keeps look on browser tabs. */
  box-shadow: 0 -1px 0 var(--border-soft), 0 -8px 20px -12px rgba(15, 23, 42, .12);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  /* Hanya pakai blur kalau didukung — di standalone PWA iOS lebih stabil */
  .bottomnav {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
  }
}
.bottomnav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px 6px; min-height: 56px;
  text-decoration: none; color: var(--muted); font-size: .72rem;
  font-weight: 500; letter-spacing: .1px;
  transition: color .15s, transform .08s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  /* Reset button defaults — element bisa <a> atau <button> (Lainnya) */
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; appearance: none;
}
.bottomnav__item:hover { color: var(--primary); }
.bottomnav__item:active { color: var(--primary); transform: scale(.95); }
.bottomnav__item--active { color: var(--primary); font-weight: 600; }
.bottomnav__item--active::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--grad-primary);
}
.bottomnav__icon {
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  position: relative;
  color: currentColor;
}
.bottomnav__icon svg { width: 22px; height: 22px; display: block; }
.bottomnav__label { white-space: nowrap; }

/* ---- Floating Action Button di tengah bottom nav (RTB Aktif) ---- */
.bottomnav--with-fab {
  grid-template-columns: 1fr 1fr 80px 1fr 1fr;
}
.bottomnav__fab {
  align-self: start;
  margin-top: -22px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  text-decoration: none;
  justify-self: center;
  box-shadow:
    0 8px 22px -6px rgba(30, 58, 138, .55),
    0 0 0 4px var(--surface);
  transition: transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.bottomnav__fab:hover {
  box-shadow: 0 12px 28px -8px rgba(30, 58, 138, .7), 0 0 0 4px var(--surface);
}
.bottomnav__fab:active { transform: scale(.94); }
.bottomnav__fab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}
.bottomnav__fab-icon svg { width: 20px; height: 20px; }
.bottomnav__fab-label {
  font-size: .56rem; font-weight: 700;
  letter-spacing: 1px;
  margin-top: 1px;
}
/* Variant: RTB + nomor batch — stacked vertikal supaya muat di lingkaran 60px */
.bottomnav__fab--rtb { gap: 0; padding: 6px 0; }
.bottomnav__fab-rtb {
  font-size: .56rem; font-weight: 700; letter-spacing: 1.2px;
  line-height: 1; opacity: .85;
}
.bottomnav__fab-num {
  font-size: 1rem; font-weight: 800;
  line-height: 1.1; margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Override: di desktop sidenav yang dipakai, bottomnav hide. Ditaruh setelah
   .bottomnav base biar specificity menang vs urutan source. */
@media (min-width: 900px) {
  .bottomnav { display: none !important; }
  .mobile-topbar { display: none !important; }
}

/* Notification dot di nav icon (kalau ada unread) */
.bottomnav__icon[data-badge]::after {
  content: attr(data-badge);
  position: absolute; top: -4px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ef4444; color: #fff;
  font-size: .62rem; font-weight: 700;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}

/* ------- Hero ------- */
.hero { padding: 24px 4px 20px; }
.hero__greeting {
  font-size: 1.65rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.025em;
}
.hero__sub { color: var(--muted); margin-top: 6px; font-size: .95rem; }

/* ------- Card ------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 8px; }
.card__title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.card__chip {
  background: var(--primary-soft); color: var(--primary-dark);
  font-size: .68rem; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .5px;
}

/* ------- Key-Value list ------- */
.kv { margin: 0; }
.kv__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.kv__row:last-child { border-bottom: 0; }
.kv__row dt { color: var(--muted); font-size: .82rem; }
.kv__row dd { margin: 0; font-weight: 500; text-align: right; word-break: break-word; font-size: .9rem; }

.muted { color: var(--muted); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: .9rem; }
.checklist li:last-child { border-bottom: 0; }

/* ------- Form ------- */
.field { display: block; margin-bottom: 14px; }
.field[hidden] { display: none; }
.field__label {
  display: block; font-size: .78rem; color: var(--muted);
  font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}
.field__input {
  width: 100%; padding: 12px 14px; font-size: 1rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.field__input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.field__input--code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.2rem; letter-spacing: 1px; text-align: center;
  text-transform: lowercase;
}
.field__hint {
  display: block; margin-top: 6px; color: var(--muted); font-size: .76rem;
}
.field__hint code {
  background: var(--surface-2); padding: 1px 6px; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: .72rem; color: var(--primary-dark);
}

/* ------- Buttons ------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 20px; font-size: .95rem; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; text-decoration: none; font-family: inherit;
  letter-spacing: .1px;
  transition: transform .08s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 4px 14px -4px rgba(30, 58, 138, .5);
}
.btn--primary:hover {
  box-shadow: 0 6px 22px -6px rgba(30, 58, 138, .6);
}
.btn--ghost {
  background: transparent; color: var(--muted); border-color: var(--border);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--primary); }
.btn--block { width: 100%; }
.btn--danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn--danger:hover { background: #991b1b; }
.btn--success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff; border-color: #059669;
  box-shadow: 0 4px 14px -4px rgba(5, 150, 105, .5);
}
.btn--success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: #047857;
  box-shadow: 0 6px 22px -6px rgba(5, 150, 105, .65);
}

/* ------- Alerts ------- */
.alert {
  padding: 12px 14px; border-radius: var(--r-md); font-size: .88rem;
  margin-bottom: 14px;
}
.alert--error {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid rgba(220, 38, 38, .25);
}
.alert--success {
  background: var(--success-soft); color: var(--success);
  border: 1px solid rgba(4, 120, 87, .2);
}
:root[data-theme="dark"] .alert--error { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
:root[data-theme="dark"] .alert--success { background: #064e3b; color: #6ee7b7; border-color: #065f46; }

/* ------- Login shell ------- */
.login-shell {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(900px 500px at 50% -10%, var(--primary-soft) 0%, transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(67, 97, 238, .08) 0%, transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--surface); border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
}
.login-card__head { text-align: center; margin-bottom: 24px; }
.login-logo {
  display: inline-block; padding: 8px 18px;
  background: var(--grad-primary); color: #fff; font-weight: 800; font-size: .95rem;
  border-radius: var(--r-pill); letter-spacing: 2px;
  box-shadow: var(--shadow-md);
  margin-bottom: 18px;
}
.login-logo-img {
  display: block; margin: 0 auto 14px;
  max-width: 280px; width: 100%; height: auto;
  object-fit: contain;
}
.login-logo-sub {
  display: inline-block; padding: 3px 12px;
  background: var(--primary-soft); color: var(--primary-dark);
  font-weight: 700; font-size: .72rem; letter-spacing: 2px;
  border-radius: var(--r-pill);
  margin: -6px 0 14px;
}
.login-title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.login-sub { margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
.login-foot {
  margin-top: 18px; text-align: center; color: var(--muted); font-size: .8rem;
}
.logout-form { margin-top: 8px; }

/* ------- Paket grid (TL home) ------- */
.paket-group { margin: 14px 0 18px; }
.paket-group__summary {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-size: .95rem; font-weight: 700;
  list-style: none;
}
.paket-group__summary::-webkit-details-marker { display: none; }
.paket-group__summary::before {
  content: '▸'; font-size: .75rem; color: var(--muted);
  transition: transform .15s;
}
.paket-group[open] > .paket-group__summary::before { transform: rotate(90deg); }
.paket-group__summary:hover { background: var(--surface); border-color: var(--primary); }
.paket-group__title { flex: 1; letter-spacing: -0.01em; }
.paket-group__count {
  padding: 2px 10px;
  background: var(--primary-soft); color: var(--primary-dark);
  border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 700;
}
.paket-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin: 12px 0 16px;
}
.paket-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 16px 18px;
  transition: transform .12s, box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.paket-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: var(--grad-primary); opacity: 0;
  transition: opacity .15s;
}
.paket-card:hover::before, .paket-card:active::before { opacity: 1; }
.paket-card:hover {
  border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px);
}
.paket-card__head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.paket-card__code { color: var(--muted); margin-left: auto; font-size: .78rem; }
.paket-card__name { margin: 0 0 12px; font-size: 1.02rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
.paket-card__meta {
  display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 10px;
}
.paket-card__date { display: flex; flex-direction: column; }
.paket-card__date-lbl { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .5px; }
.paket-card__date-val { font-weight: 600; font-size: .88rem; }
.paket-card__status { display: flex; align-items: center; gap: 8px; }
.paket-card__branch { color: var(--muted); font-size: .8rem; }

.paket-card__link {
  display: block; text-decoration: none; color: inherit;
}
.paket-card__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.paket-card__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: .82rem; font-weight: 600;
  text-decoration: none; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px;
  transition: background .12s, border-color .12s, color .12s;
}
.paket-card__btn:hover { background: var(--surface); border-color: var(--primary); }
.paket-card__btn-ico { font-size: .9em; line-height: 1; }
.paket-card__btn--primary { background: var(--primary-soft); color: var(--primary-dark); border-color: transparent; }
.paket-card__btn--primary:hover { background: var(--primary); color: #fff; }
.paket-card__btn--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.paket-card__btn--warn { background: #fef3c7; color: #92400e; border-color: transparent; }
.paket-card__btn--danger { background: #fee2e2; color: #991b1b; border-color: transparent; }
.paket-card__btn--muted { background: transparent; color: var(--muted); }
.paket-card__btn--muted:hover { color: var(--text); }

/* User Briefing read-only */
.ub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 16px;
}
.ub-kv { display: flex; flex-direction: column; gap: 2px; }
.ub-kv__lbl { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ub-kv__val { font-weight: 600; font-size: .9rem; }
.ub-itin { display: flex; flex-direction: column; gap: 8px; }
.ub-itin__day {
  padding: 8px 10px; background: var(--surface-2);
  border-left: 3px solid var(--primary-soft); border-radius: 6px;
}
.ub-itin__head { font-size: .9rem; }

/* User Evaluasi read-only */
.ue-list { display: flex; flex-direction: column; gap: 10px; }
.ue-row {
  display: grid; grid-template-columns: 1.2fr 1.5fr; gap: 12px;
  padding: 8px 10px; background: var(--surface-2); border-radius: 6px;
  font-size: .88rem;
}
.ue-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ue-table th, .ue-table td {
  padding: 6px 8px; border-bottom: 1px dashed var(--border-soft); text-align: left;
}
.ue-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.ue-table .num { text-align: right; }
@media (max-width: 600px) {
  .ue-row { grid-template-columns: 1fr; }
}

/* ------- Badges ------- */
.badge {
  display: inline-block; padding: 4px 10px;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill); font-size: .7rem; font-weight: 600;
  letter-spacing: .2px;
}
.badge--primary {
  background: var(--primary-soft); color: var(--primary-dark); border-color: transparent;
}
.badge--ok {
  background: var(--success-soft); color: var(--success); border-color: rgba(4, 120, 87, .15);
}
.badge--off {
  background: #fee4e7; color: #9b1c2a; border-color: transparent;
}
:root[data-theme="dark"] .badge--ok { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .badge--off { background: #450a0a; color: #fca5a5; }

/* ------- Paket summary ------- */
.paket-summary__name {
  font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; line-height: 1.35;
  letter-spacing: -0.015em;
}
.paket-summary__meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.paket-summary__dates {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.paket-summary__date { display: flex; flex-direction: column; gap: 3px; }
.paket-summary__date-lbl { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.paket-summary__date-val { font-weight: 600; font-size: .9rem; }

/* ------- Stats grid ------- */
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 12px;
}
.stat {
  text-align: center; padding: 16px 8px;
  background: var(--surface-2); border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
}
.stat__val {
  font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  /* Fallback solid color buat browser yang gak support background-clip: text
     (di iOS Safari < 14 atau autofill mode kadang gradient-nya leak jadi
     background blok hijau menutupi text). */
  color: var(--primary);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat__val {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
/* Dark mode: pakai solid bright blue. Gradient pada text kadang
   ke-render aneh kalau ada autofill overlay / chrome rendering glitch. */
:root[data-theme="dark"] .stat__val {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #93c5fd;
}
.stat__lbl { color: var(--muted); font-size: .72rem; margin-top: 6px; text-transform: uppercase; letter-spacing: .5px; }

/* ------- Sub-nav (paket tabs) ------- */
.subnav {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 14px; padding-bottom: 4px;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav__item {
  flex-shrink: 0; padding: 8px 16px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-pill); color: var(--muted); font-size: .85rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.subnav__item:hover { color: var(--primary); border-color: var(--primary); }
.subnav__item--active {
  background: var(--grad-primary); color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px -3px rgba(30, 58, 138, .5);
}

/* ------- Mini stats strip ------- */
.mini-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin-bottom: 12px;
}
.mini-stat {
  text-align: center; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 10px 4px;
}
.mini-stat__val { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.mini-stat__lbl { color: var(--muted); font-size: .62rem; margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.mini-stat--ok .mini-stat__val { color: var(--success); }
.mini-stat--off .mini-stat__val { color: var(--muted); }

/* ------- Search form ------- */
.search-form { position: relative; margin-bottom: 12px; }
.search-form .field__input { padding-right: 40px; }

/* ------- Broadcast module ------- */
.broadcast-filter {
  display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.broadcast-filter .field__input { flex: 1; min-width: 160px; }
.broadcast-filter__sort { flex: 0 0 auto; max-width: 180px; }
.broadcast-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.broadcast-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 16px;
  text-decoration: none; color: var(--text);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  min-height: 160px;
}
.broadcast-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.broadcast-card__head { display: flex; gap: 12px; align-items: flex-start; }
.broadcast-card__icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.broadcast-card__icon svg { width: 20px; height: 20px; }
.broadcast-card__creator-icon {
  display: inline-flex; align-items: center;
  margin-right: 4px; opacity: .7;
}
.broadcast-card__creator-icon svg { width: 13px; height: 13px; }
.broadcast-card__creator { display: inline-flex; align-items: center; }
.broadcast-card__name {
  font-size: .95rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em; flex: 1;
}
.broadcast-card__preview {
  font-size: .82rem; color: var(--muted); line-height: 1.5;
  flex: 1;
}
.broadcast-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .72rem; color: var(--muted);
  padding-top: 10px; border-top: 1px solid var(--border-soft);
}
.broadcast-card__creator { font-weight: 500; }
.broadcast-card__date { font-variant-numeric: tabular-nums; }

.broadcast-detail__head {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px;
}
.broadcast-detail__icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--grad-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(30, 58, 138, .55);
}
.broadcast-detail__icon svg { width: 26px; height: 26px; }
.broadcast-detail__creator { display: inline-flex; align-items: center; gap: 4px; }
.inline-icon { display: inline-flex; align-items: center; }
.inline-icon svg { width: 14px; height: 14px; }
.action-with-icon { display: inline-flex; align-items: center; gap: 8px; }
.action-with-icon svg { width: 16px; height: 16px; }
.broadcast-detail__title { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; }
.broadcast-detail__meta { display: flex; gap: 6px; color: var(--muted); font-size: .82rem; margin-top: 4px; }
.broadcast-detail__actions { display: flex; gap: 12px; margin: 14px 0 18px; flex-wrap: wrap; align-items: center; }
.broadcast-detail__hint {
  font-size: .76rem; color: var(--muted);
  font-style: italic;
}
.broadcast-detail__hint::before { content: '✨ '; opacity: .8; font-style: normal; }
.broadcast-detail__content {
  font-size: .95rem; line-height: 1.65;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 18px;
  max-height: 70vh; overflow-y: auto;
  word-wrap: break-word;
}
.broadcast-detail__content p { margin: 0 0 12px; }
.broadcast-detail__content p:last-child { margin-bottom: 0; }
.broadcast-detail__content br + br { display: none; }
.broadcast-detail__content strong, .broadcast-detail__content b { color: var(--text); }
.broadcast-detail__content ul, .broadcast-detail__content ol { padding-left: 22px; margin: 8px 0; }

/* ------- Visa module ------- */
.visa-tl-card {
  border: 1px solid var(--primary); position: relative;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 100%);
}
.visa-tl-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.visa-tl-card__badge {
  background: var(--grad-primary); color: #fff;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
}
.visa-tl-card__name { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.visa-tl-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.visa-tl-card__field { background: var(--surface); padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border-soft); }
.visa-tl-card__lbl { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.visa-tl-card__val { font-size: .9rem; font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.visa-group { margin-bottom: 16px; }
.visa-group__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--border-soft); border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.visa-group__name { font-weight: 700; font-size: .92rem; letter-spacing: -0.01em; }
.visa-group__count { font-size: .78rem; color: var(--muted); font-weight: 500; }
.visa-list {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.visa-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; gap: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.visa-row:last-child { border-bottom: 0; }
.visa-row__main { min-width: 0; flex: 1; }
.visa-row__name { font-weight: 600; font-size: .92rem; }
.visa-row__meta { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.visa-row__meta--warn { color: var(--danger); }
.visa-row__action { flex-shrink: 0; }

.visa-row__thumb {
  flex-shrink: 0; width: 56px; height: 76px;
}
.visa-row__thumb-link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 6px; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  text-decoration: none; color: var(--muted);
  transition: border-color .15s, transform .15s;
  position: relative;
}
.visa-row__thumb-link:hover { border-color: var(--primary); transform: scale(1.04); }
.visa-row__thumb-link img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.visa-row__thumb-link--pdf {
  flex-direction: column; gap: 2px;
  color: #dc2626; background: #fee2e2;
}
:root[data-theme="dark"] .visa-row__thumb-link--pdf {
  color: #fca5a5; background: #450a0a;
}
.visa-row__thumb-lbl {
  font-size: .58rem; font-weight: 700; letter-spacing: 0.05em;
}
.visa-row__thumb-link--empty {
  color: var(--muted); opacity: .5;
  cursor: default;
}
.visa-row__thumb-link--empty:hover { border-color: var(--border-soft); transform: none; }

/* PDF inline preview: browser renders first page via <object>. Overlay link
   catches clicks since the embedded object element is non-interactive here. */
.visa-row__thumb-link--pdfprev {
  position: relative; padding: 0; cursor: pointer;
  background: #fee2e2;
  display: block;
}
:root[data-theme="dark"] .visa-row__thumb-link--pdfprev { background: #450a0a; }
.visa-row__thumb-obj {
  width: 100%; height: 100%; display: block;
  pointer-events: none; border: 0;
}
.visa-row__thumb-pdf-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; gap: 2px;
  color: #dc2626;
}
:root[data-theme="dark"] .visa-row__thumb-pdf-fallback { color: #fca5a5; }
.visa-row__thumb-overlay {
  position: absolute; inset: 0; z-index: 2;
}

/* ------- Small reusable: btn-sm + status pill (port dari admin.css) ------- */
.btn-sm {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  font-size: .78rem; font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-sm:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); }
.status {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700; letter-spacing: .3px;
}
.status--ok { background: var(--success-soft); color: var(--success); }
.status--off { background: var(--danger-soft); color: var(--danger); }
.status--warn { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.status--danger { background: var(--danger-soft); color: var(--danger); }



.search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted); text-decoration: none;
  font-weight: 700; font-size: 1.1rem;
}

/* ------- Stats grid 4-col variant ------- */
.stats-grid--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 12px; }
.stats-grid--4 .stat { padding: 12px 6px; }
.stats-grid--4 .stat__val { font-size: 1.4rem; }
.stats-grid--4 .stat__lbl { font-size: .68rem; }
.stats-grid--5 { grid-template-columns: repeat(5, 1fr); margin-bottom: 12px; }
.stats-grid--5 .stat { padding: 12px 6px; }
.stats-grid--5 .stat__val { font-size: 1.35rem; }
.stats-grid--5 .stat__lbl { font-size: .68rem; }
@media (max-width: 720px) { .stats-grid--5 { grid-template-columns: repeat(2, 1fr); } }

.stats-grid--3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
@media (max-width: 640px) { .stats-grid--3 { grid-template-columns: 1fr; gap: 8px; } }
.stat__hint { font-size: .72rem; color: var(--muted); margin-top: 4px; }
.stat--perf .stat__val { font-size: 1.8rem; font-weight: 800; }
.stat--perf-ok .stat__val { color: var(--success); }
.stat--perf-soso .stat__val { color: #ca8a04; }
.stat--perf-warn .stat__val { color: #d97706; }
.stat--perf-danger .stat__val { color: var(--danger); }

/* Budget context hint banner */
.budget-hint {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-md);
  font-size: .85rem; line-height: 1.55;
  color: var(--text);
}
.budget-hint__icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.budget-hint strong { font-weight: 700; }
.budget-hint em { font-style: italic; color: var(--success); font-weight: 600; }

/* ------- Budget head (3-button action bar) ------- */
.budget-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin: 6px 0 14px; flex-wrap: wrap;
}
.budget-head__title { min-width: 0; flex: 1; }
.budget-head__sub { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.budget-head__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------- Manual entry collapsible ------- */
.budget-manual {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.budget-manual__head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-size: .9rem; font-weight: 600;
  list-style: none;
}
.budget-manual__head::-webkit-details-marker { display: none; }
.budget-manual__icon { font-size: 1.1rem; }
.budget-manual__title { flex: 1; }
.budget-manual__chev { color: var(--muted); transition: transform .15s; }
.budget-manual[open] .budget-manual__chev { transform: rotate(180deg); }

/* ------- Print stylesheet ------- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .no-print, .sidenav, .bottomnav, .mobile-topbar, .theme-toggle { display: none !important; }
  .app-shell__main { margin-left: 0 !important; }
  .container { max-width: 100% !important; padding: 0 !important; }

  /* Roomlist fit-to-one-page: scale dari JS via --print-scale variable */
  .printing-roomlist {
    /* set @page A4 portrait, margin tipis */
    --print-margin: 6mm;
  }
  .printing-roomlist .container > *:not(.roomlist-print-header):not(#roomlist-sheet) {
    display: none !important;
  }
  .printing-roomlist .container {
    transform: scale(var(--print-scale, 1));
    transform-origin: top left;
    width: calc(100% / var(--print-scale, 1));
  }
  .printing-roomlist .roomlist-sheet,
  .printing-roomlist .roomlist-print-header {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .printing-roomlist .roomlist-sheet { margin-top: 8px; }
}
@page { size: A4 portrait; margin: 6mm; }

/* ------- Public share (no-auth roomlist view) ------- */
.public-share-body {
  background: var(--bg); color: var(--text);
  margin: 0; min-height: 100vh;
}
.public-share-banner {
  background: var(--grad-primary); color: #fff;
  padding: 10px 16px;
  text-align: center;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .3px;
}
.public-share-footer {
  margin-top: 28px; padding: 16px;
  text-align: center; font-size: .78rem;
  color: var(--muted); border-top: 1px solid var(--border-soft);
}
.public-share-footer a { color: var(--primary); text-decoration: none; }
.print-page {
  padding: 24px 28px;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  color: #111;
}
.print-head { border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 16px; }
.print-head h1 { margin: 0; font-size: 1.4rem; }
.print-paket { font-size: 1rem; margin-top: 4px; color: #444; }
.print-meta { font-size: .8rem; color: #888; margin-top: 4px; }
.print-stats { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.print-stats td { padding: 6px 10px; border-bottom: 1px solid #eee; font-size: .92rem; }
.print-stats td:first-child { width: 35%; color: #555; }
.print-group { margin-top: 18px; page-break-inside: avoid; }
.print-group h3 {
  margin: 0 0 8px; font-size: 1rem;
  background: #f3f3f3; padding: 6px 10px; border-left: 4px solid #1e3a8a;
}
.print-items { width: 100%; border-collapse: collapse; font-size: .82rem; }
.print-items th, .print-items td {
  padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left;
  vertical-align: top;
}
.print-items th { background: #fafafa; font-weight: 700; color: #555; }
.print-items .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.print-foot { margin-top: 30px; padding-top: 12px; border-top: 1px solid #ddd; font-size: .78rem; color: #888; }

/* btn--sm helper (for action bar) */
.btn--sm { padding: 6px 12px; font-size: .82rem; }

/* ------- Generation grid ------- */
.generation-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.gen-box {
  text-align: center; padding: 8px 4px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}
.gen-box--has { border-color: var(--primary); background: var(--primary-soft); }
.gen-box--has .gen-box__val { color: var(--primary-dark); }
.gen-box--empty { opacity: .55; }
.gen-box__val { font-size: 1.2rem; font-weight: 700; line-height: 1; }
.gen-box__lbl { font-size: .72rem; font-weight: 600; margin-top: 2px; }
.gen-box__range { font-size: .62rem; color: var(--muted); margin-top: 1px; }

/* ------- Jamaah groups ------- */
.jamaah-groups { display: flex; flex-direction: column; gap: 18px; }
.jamaah-group {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.jamaah-group__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 16px; gap: 10px;
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  color: #fff;
}
.jamaah-group__pemesan { flex: 1; min-width: 0; }
.jamaah-group__name { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.jamaah-group__meta {
  font-size: .78rem; opacity: .85; margin-top: 2px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.jamaah-group__meta .mono { font-size: .75rem; }
.jamaah-group__head .contact-btn--wa {
  flex-shrink: 0; background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3);
}
.jamaah-group__head .contact-btn--wa:hover { background: rgba(255,255,255,.28); color: #fff; }
.jamaah-group__note {
  background: var(--surface-2); padding: 10px 16px;
  font-size: .85rem; color: var(--text); border-bottom: 1px solid var(--border-soft);
}

.jamaah-cards { display: flex; flex-direction: column; }

.jamaah-detail-card {
  padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
}
.jamaah-detail-card:last-child { border-bottom: 0; }
.jamaah-detail-card__top { display: flex; gap: 12px; margin-bottom: 12px; }
.jamaah-detail-card__avatar {
  flex-shrink: 0; width: 56px; height: 56px;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.jamaah-detail-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--grad-primary); color: #fff; font-weight: 700; font-size: 1.4rem;
}
.jamaah-detail-card__info { flex: 1; min-width: 0; }
.jamaah-detail-card__name {
  font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  line-height: 1.25;
}
.jamaah-detail-card__name .muted { font-weight: 500; }
.jamaah-detail-card__meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: 6px; font-size: .82rem; color: var(--muted);
}

.jamaah-kv { margin: 0 0 10px; }
.jamaah-kv__row {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px;
  padding: 5px 0; font-size: .82rem;
}
.jamaah-kv__row dt { color: var(--muted); }
.jamaah-kv__row dd { margin: 0; color: var(--text); word-break: break-word; }

.jamaah-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 600;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-soft);
}
.tag--priority { background: #fef3c7; color: #92400e; border-color: #fde68a; }
:root[data-theme="dark"] .tag--priority { background: #451a03; color: #fbbf24; border-color: #78350f; }

.jamaah-alert {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  padding: 8px 12px; border-radius: var(--r-md); font-size: .82rem;
  margin-bottom: 10px;
}
:root[data-theme="dark"] .jamaah-alert { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }

.jamaah-note {
  background: var(--surface-2); border-left: 3px solid var(--primary);
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: .82rem; margin-bottom: 10px; color: var(--text);
}

.jamaah-detail-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Generation badge tint */
.badge--gen { font-size: .65rem; padding: 2px 8px; }
.badge--gen-boomers { background: #fce7f3; color: #831843; border-color: transparent; }
.badge--gen-x { background: #ede9fe; color: #5b21b6; border-color: transparent; }
.badge--gen-millennials { background: var(--primary-soft); color: var(--primary-dark); border-color: transparent; }
.badge--gen-z { background: #d1fae5; color: #065f46; border-color: transparent; }
.badge--gen-alpha { background: #ccfbf1; color: #115e59; border-color: transparent; }
.badge--gen-silent, .badge--gen-greatest, .badge--gen-lost { background: #f1f5f9; color: #475569; border-color: transparent; }
:root[data-theme="dark"] .badge--gen-boomers { background: #500724; color: #f9a8d4; }
:root[data-theme="dark"] .badge--gen-x { background: #2e1065; color: #c4b5fd; }
:root[data-theme="dark"] .badge--gen-z { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .badge--gen-alpha { background: #134e4a; color: #5eead4; }
:root[data-theme="dark"] .badge--gen-silent { background: #1e293b; color: #cbd5e1; }

/* Legacy single-card class (still used kalau ada panggilan) */
.jamaah-list { display: flex; flex-direction: column; gap: 10px; }
.jamaah-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 14px 16px;
}
.jamaah-card__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  margin-bottom: 6px;
}
.jamaah-card__name { font-weight: 600; line-height: 1.3; flex: 1; }
.jamaah-card__title { color: var(--muted); font-weight: 500; margin-right: 4px; font-size: .85rem; }
.jamaah-card__meta { color: var(--muted); font-size: .8rem; margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.jamaah-card__meta .mono { font-size: .75rem; }
.jamaah-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 7px 12px;
  font-size: .82rem; font-weight: 500; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.contact-btn:hover { border-color: var(--primary); color: var(--primary); }
.contact-btn--wa {
  background: rgba(37, 211, 102, .12); color: #128c4d;
  border-color: rgba(37, 211, 102, .3);
}
.contact-btn--wa:hover {
  background: rgba(37, 211, 102, .2); color: #0a6e3a; border-color: #25d366;
}
:root[data-theme="dark"] .contact-btn--wa { background: rgba(37, 211, 102, .18); color: #6ee7b7; border-color: rgba(37, 211, 102, .35); }

/* ------- File list (itinerary) ------- */
.file-list { display: flex; flex-direction: column; gap: 8px; }
.file-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 14px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.file-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.file-card__icon { font-size: 1.6rem; flex-shrink: 0; }
.file-card__body { flex: 1; min-width: 0; }
.file-card__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card__meta { color: var(--muted); font-size: .76rem; display: flex; gap: 6px; margin-top: 2px; }
.file-card__chev { color: var(--muted); font-size: 1.6rem; flex-shrink: 0; line-height: 1; }

/* Itinerary terstruktur dari master_itinerary (TA) */
.itin-days { display: flex; flex-direction: column; gap: 14px; }
.itin-day {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 16px; }
.itin-day__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.itin-day__num {
  flex-shrink: 0; min-width: 64px; padding: 6px 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark, var(--primary)));
  color: #fff; border-radius: 999px; font-size: .75rem; font-weight: 700;
  text-align: center; letter-spacing: .04em; }
.itin-day__heading { flex: 1; min-width: 0; }
.itin-day__title { font-weight: 700; font-size: 1.05rem; color: var(--text); line-height: 1.3; }
.itin-day__rute { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.itin-day__desc { color: var(--muted); font-size: .88rem; margin: 6px 0 10px; line-height: 1.55; }
.itin-day__desc p { margin: 0 0 4px; }
.itin-day__desc p:last-child { margin-bottom: 0; }
.itin-day__items { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.itin-item-kegiatan { padding: 10px 12px; background: var(--bg, #fafafa); border-radius: 8px; border-left: 3px solid var(--primary); }
.itin-item-point { padding: 4px 12px; }
.itin-item__title { font-weight: 600; font-size: .9rem; color: var(--text); margin-bottom: 4px; }
.itin-item__acts { list-style: disc; padding-left: 18px; margin: 4px 0; font-size: .85rem; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.itin-item__acts li { line-height: 1.4; }
.itin-item__time { display: inline-block; font-weight: 600; color: var(--primary); margin-right: 6px; font-variant-numeric: tabular-nums; }
.itin-item__name { color: var(--text); }
.itin-item__note { color: var(--muted); font-size: .78rem; margin-top: 2px; font-style: italic; }
.itin-files { margin-top: 22px; }
.itin-files__title { font-size: .9rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }

/* ------- Raudhah list ------- */
.raudhah-list { display: flex; flex-direction: column; gap: 10px; }
.raudhah-card {
  display: flex; gap: 14px; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 14px;
}
.raudhah-card__date {
  flex-shrink: 0; width: 62px;
  background: var(--grad-primary); color: #fff;
  border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 0;
  box-shadow: 0 4px 12px -4px rgba(30, 58, 138, .45);
}
.raudhah-card__day { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.raudhah-card__month { font-size: .68rem; text-transform: uppercase; margin-top: 2px; letter-spacing: .7px; font-weight: 600; }
.raudhah-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.raudhah-card__head { display: flex; gap: 8px; align-items: center; }
.raudhah-card__gender { font-weight: 600; font-size: .9rem; }
.raudhah-card__times { display: flex; gap: 14px; color: var(--muted); font-size: .8rem; }
.raudhah-card__times strong { color: var(--text); font-weight: 700; }
.raudhah-card__stats { color: var(--muted); font-size: .78rem; }

/* ------- Action Items card (paket dashboard) ------- */
.actions-card { padding: 0; overflow: hidden; }
.actions-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
}
.actions-card__head .card__title { margin: 0; }
.actions-card__count {
  background: var(--primary-soft); color: var(--primary-dark);
  font-size: .68rem; font-weight: 700; padding: 4px 10px;
  border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .5px;
}
.actions-list { display: flex; flex-direction: column; }
.action-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  text-decoration: none; color: inherit;
  border-top: 1px solid var(--border-soft);
  position: relative;
  transition: background .15s;
}
.action-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.action-row--critical::before { background: var(--danger); }
.action-row--warn::before { background: #f59e0b; }
.action-row--ok::before { background: var(--success); }
.action-row--info::before { background: var(--primary); }
.action-row:hover { background: var(--surface-2); }
.action-row__icon {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: var(--surface-2);
}
.action-row--critical .action-row__icon { background: #fee2e2; }
.action-row--warn .action-row__icon { background: #fef3c7; }
.action-row--ok .action-row__icon { background: #d1fae5; }
.action-row--info .action-row__icon { background: var(--primary-soft); }
:root[data-theme="dark"] .action-row--critical .action-row__icon { background: #450a0a; }
:root[data-theme="dark"] .action-row--warn .action-row__icon { background: #422006; }
:root[data-theme="dark"] .action-row--ok .action-row__icon { background: #064e3b; }
:root[data-theme="dark"] .action-row--info .action-row__icon { background: #172554; }
.action-row__body { flex: 1; min-width: 0; }
.action-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.action-row__title { font-weight: 700; font-size: .92rem; letter-spacing: -0.005em; }
.action-row__pct {
  font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.action-row--critical .action-row__pct { color: var(--danger); }
.action-row--warn .action-row__pct { color: #d97706; }
.action-row--ok .action-row__pct { color: var(--success); }
.action-row--info .action-row__pct { color: var(--primary); }
.action-row__sub { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.action-row__bar {
  margin-top: 8px; height: 4px; border-radius: 4px;
  background: var(--surface-2); overflow: hidden;
}
.action-row__bar { position: relative; }
.action-row__bar-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.action-row--critical .action-row__bar-fill { background: var(--danger); }
.action-row--warn .action-row__bar-fill { background: #f59e0b; }
.action-row--ok .action-row__bar-fill { background: var(--success); }
.action-row--info .action-row__bar-fill { background: var(--primary); }
.action-row__bar-marker {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--text); opacity: .55; border-radius: 1px;
}
.action-row__kpi {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.action-row__warn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: #fef3c7; color: #92400e;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  border: 1px solid #fde68a;
}
.action-row--critical .action-row__warn { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.action-row__ok {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: #d1fae5; color: #065f46;
  font-size: .72rem; font-weight: 700;
  border: 1px solid #a7f3d0;
}
.action-row__kpi-target {
  font-size: .7rem; color: var(--muted); font-weight: 600;
  letter-spacing: .01em;
}
:root[data-theme="dark"] .action-row__warn { background: #422006; color: #fbbf24; border-color: #78350f; }
:root[data-theme="dark"] .action-row--critical .action-row__warn { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
:root[data-theme="dark"] .action-row__ok { background: #064e3b; color: #6ee7b7; border-color: #065f46; }
.action-row__chev { color: var(--muted); font-size: 1.5rem; line-height: 1; flex-shrink: 0; }

/* ------- AI Tanya (inline di paket detail) ------- */
.ai-inline { margin: 12px 0 18px; }
.ai-inline__form {
  display: flex; gap: 8px; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 6px;
  transition: border-color .15s, box-shadow .15s;
}
.ai-inline__form:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.ai-inline__field {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: flex-start;
}
.ai-inline__icon {
  position: absolute; left: 10px; top: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary);
  pointer-events: none;
}
.ai-inline__icon svg { width: 18px; height: 18px; }
.ai-inline__input {
  flex: 1; min-width: 0; padding: 10px 12px 10px 38px; font-size: 0.95rem;
  border: none; outline: none; background: transparent; color: var(--text);
  font-family: inherit; resize: vertical; min-height: 64px;
  line-height: 1.5;
}
.ai-inline__input:focus { outline: none; }
.ai-inline__btn { flex-shrink: 0; padding: 10px 18px; align-self: flex-end; }
.ai-inline__loading {
  margin-top: 10px; color: var(--muted); font-size: 0.9rem;
  display: none;
}
.htmx-request .ai-inline__loading,
.htmx-request.ai-inline__loading { display: block; }
#ai-inline-answer:not(:empty) { margin-top: 12px; }

/* ------- AI Tanya ------- */
.ai-form { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-textarea {
  width: 100%; padding: 14px 16px; font-size: 1rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-family: inherit; resize: vertical; min-height: 88px;
}
.ai-textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.ai-suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.suggestion-form { margin: 0; }
.suggestion-btn {
  width: 100%; text-align: left; padding: 12px 14px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); font-size: .9rem; cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.suggestion-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); }

.ai-answer { padding: 18px; }
.ai-explanation { color: var(--text); margin-bottom: 12px; font-size: .92rem; line-height: 1.55; }
.ai-result-meta { color: var(--muted); font-size: .76rem; margin-bottom: 10px; }
.ai-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md); border: 1px solid var(--border-soft);
}
.ai-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ai-table thead th {
  background: var(--surface-2); padding: 10px 14px;
  text-align: left; font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--border-soft); white-space: nowrap;
  text-transform: uppercase; font-size: .7rem; letter-spacing: .5px;
}
.ai-table tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
  vertical-align: top; white-space: nowrap;
}
.ai-table tbody tr:last-child td { border-bottom: 0; }
.ai-table tbody tr:hover { background: var(--surface-2); }

.ai-debug { margin-top: 16px; }
.ai-debug summary {
  cursor: pointer; color: var(--muted); font-size: .78rem;
  padding: 6px 12px; background: var(--surface-2); border-radius: var(--r-sm);
  display: inline-block; border: 1px solid var(--border-soft);
}
.ai-debug pre {
  margin: 8px 0 0; padding: 12px 14px;
  background: var(--surface-2); border-radius: var(--r-sm);
  font-family: ui-monospace, monospace; font-size: .75rem;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  border: 1px solid var(--border-soft);
}

/* ------- Module grid (17 modul per paket) ------- */
.modules-section { margin-top: 18px; }
.modules-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.modules-section__title {
  margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em;
  position: relative; padding-right: 14px;
}
.modules-section__title::after {
  content: ''; position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  width: 120px; height: 1px; background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
.modules-section__count {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-pill); padding: 4px 12px;
  font-size: .72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.module-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 22px 16px 18px;
  text-decoration: none; color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.module-card--active::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-primary);
}
.module-card--active:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary);
}
.module-card--soon { opacity: .75; }
.module-card--soon::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--plat-300);
}
.module-card--locked {
  opacity: .85; cursor: not-allowed; background: var(--surface-2);
  border-style: dashed;
}
.module-card--locked::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,#f59e0b,#b45309);
}
.module-card--locked .module-card__title { color: var(--muted); }
.module-card--locked .module-card__desc {
  color: var(--muted); font-size: .78rem; line-height: 1.35;
}

.module-card__index {
  position: absolute; top: 10px; left: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft);
}
.module-card--active .module-card__index {
  background: var(--primary-soft); color: var(--primary-dark); border-color: transparent;
}

.module-card__icon {
  line-height: 1; margin-top: 6px; margin-bottom: 12px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border-radius: 18px;
  color: var(--muted);
}
.module-card__icon svg { width: 28px; height: 28px; display: block; }
.module-card--active .module-card__icon {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(30, 58, 138, .5);
}
.module-card--active .module-card__icon svg { stroke-width: 2; }
.module-card__title {
  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em; margin-bottom: 4px;
  line-height: 1.25;
}
.module-card__desc {
  color: var(--muted); font-size: .78rem; line-height: 1.4;
  margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.module-card__cta {
  margin-top: auto;
  font-size: .78rem; font-weight: 600;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--primary-dark);
  transition: background .15s, color .15s;
}
.module-card--active:hover .module-card__cta {
  background: var(--grad-primary); color: #fff;
}
.module-card__cta--soon {
  background: var(--surface-2); color: var(--muted);
}

/* Stub module page */
.stub-card { text-align: center; padding: 36px 24px; }
.stub-icon {
  line-height: 1; margin-bottom: 14px;
  display: inline-flex; width: 84px; height: 84px;
  background: var(--grad-primary); border-radius: 24px;
  align-items: center; justify-content: center;
  color: #fff;
}
.stub-icon svg { width: 42px; height: 42px; }

/* ------- Module categories ------- */
.module-category { margin-bottom: 26px; }
.module-category__head {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 12px;
  color: var(--text);
}
.module-category__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--primary-soft); color: var(--primary-dark);
  border-radius: var(--r-md);
}
.module-category__icon svg { width: 18px; height: 18px; }
.module-category__name {
  margin: 0; font-size: .95rem; font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1; min-width: 0;
}
.module-category__count {
  background: var(--surface-2); color: var(--muted);
  font-size: .7rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}
.stub-title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.stub-desc { margin: 0 0 18px; color: var(--muted); font-size: .95rem; }
.stub-status { margin-bottom: 14px; }

/* ------- Train tickets ------- */
.train-segment {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.train-segment__head {
  padding: 16px 18px 14px;
  background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-600) 100%);
  color: #fff;
}
.train-route {
  display: flex; align-items: center; gap: 12px;
}
.train-route__code {
  font-size: 1.6rem; font-weight: 800; letter-spacing: 1px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.train-route__arrow {
  flex: 1; height: 28px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.train-route__line {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: rgba(255,255,255,.35);
  transform: translateY(-50%);
}
.train-route__icon {
  position: relative; z-index: 1;
  background: var(--blue-700); padding: 2px 8px;
  border-radius: var(--r-pill); font-size: 1rem;
  border: 2px solid rgba(255,255,255,.4);
}
.train-segment__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; gap: 10px; flex-wrap: wrap;
}
.train-segment__date { font-weight: 600; font-size: .9rem; opacity: .9; }
.train-segment__times { font-family: ui-monospace, monospace; font-size: 1rem; display: flex; gap: 6px; align-items: center; }
.train-segment__times .muted { color: rgba(255,255,255,.5); }
.train-segment__chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.train-segment__chips .badge {
  background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.25);
}
.train-segment__chips .badge--primary {
  background: rgba(255,255,255,.95); color: var(--blue-700); border-color: transparent;
}

.train-tix-list { display: flex; flex-direction: column; }
.train-tix {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.train-tix:last-child { border-bottom: 0; }
.train-tix:hover { background: var(--surface-2); }

.train-tix__seat {
  flex-shrink: 0; width: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  padding: 10px 6px;
}
.train-tix__seat-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700; font-size: 1rem; color: var(--primary-dark);
}
.train-tix__seat-num.muted { color: var(--muted); }
.train-tix__body { flex: 1; min-width: 0; }
.train-tix__name { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.train-tix__meta { display: flex; gap: 8px; margin-top: 4px; align-items: center; flex-wrap: wrap; }
.train-tix__action { flex-shrink: 0; }

/* ------- Hotel module ------- */
.hotel-city {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.hotel-city__head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  color: #fff;
}
.hotel-city__icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.18);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.hotel-city__info { flex: 1; min-width: 0; }
.hotel-city__name { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; }
.hotel-city__count { font-size: .78rem; opacity: .85; margin-top: 2px; }

.hotel-list { display: flex; flex-direction: column; }
.hotel-card {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.hotel-card:last-child { border-bottom: 0; }

.hotel-card__head { margin-bottom: 12px; }
.hotel-card__title {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.hotel-card__name {
  margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.3; flex: 1; min-width: 0;
}
.hotel-card__name.muted { font-weight: 500; font-style: italic; }
.hotel-card__rating { display: flex; gap: 1px; font-size: .85rem; flex-shrink: 0; }
.hotel-card__landmark {
  color: var(--muted); font-size: .82rem;
}

.hotel-card__dates {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
  background: var(--surface-2); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 10px;
  position: relative;
}
.hotel-date { display: flex; flex-direction: column; gap: 2px; }
.hotel-date__lbl {
  font-size: .65rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.hotel-date__val { font-size: .82rem; font-weight: 600; }
.hotel-date__sep { color: var(--muted); font-size: 1.2rem; }
.hotel-date__nights {
  position: absolute; top: -10px; right: 14px;
}

.hotel-card__notes {
  background: var(--primary-soft); color: var(--primary-dark);
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: .82rem; margin-bottom: 8px;
}
.hotel-card__desc {
  color: var(--muted); font-size: .82rem; line-height: 1.5;
  margin-bottom: 10px;
}
.hotel-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------- Roomlist sheet (referensi-style) ------- */
.roomlist-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0;
}
.roomlist-actions .btn { padding: 8px 14px; font-size: .85rem; }

/* ------- Roomlist notes (rombongan + request kamar) ------- */
.rl-notes {
  background: var(--surface); border:1px solid var(--border-soft);
  border-left: 3px solid #f59e0b; border-radius: 10px;
  margin: 0 0 14px; padding: 0; overflow: hidden;
}
.rl-notes__summary {
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 14px; cursor: pointer; gap: 8px;
  background: rgba(245,158,11,.06);
}
.rl-notes__summary::-webkit-details-marker { display:none; }
.rl-notes__summary::marker { content: ''; }
.rl-notes__summary-text { display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.rl-notes__title { font-weight: 700; font-size:.95rem; }
.rl-notes__chev { color: var(--muted); font-size:.9rem; transition: transform .15s; }
.rl-notes[open] .rl-notes__chev { transform: rotate(180deg); }
.rl-notes__hint { padding: 8px 14px 0; }
.rl-notes__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px; padding: 12px 14px 16px;
}

/* Card 1 rombongan = 1 order/pemesan. */
.rl-rb {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.rl-rb--request {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.10), 0 2px 6px rgba(245,158,11,.18);
}

/* Header: avatar + nama pemesan */
.rl-rb__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(99,102,241,.10) 0%, rgba(168,85,247,.06) 100%);
  border-bottom: 1px solid var(--border-soft);
}
.rl-rb--request .rl-rb__head {
  background: linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(245,158,11,.08) 100%);
}
.rl-rb__avatar {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  background: var(--surface-2);
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.rl-rb__avatar--fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; color: #6366f1;
  background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
}
.rl-rb__head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rl-rb__head-label {
  font-size: .65rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
}
.rl-rb__head-name {
  font-size: 1rem; font-weight: 800; color: var(--text);
  line-height: 1.2; word-break: break-word;
}
.rl-rb__head-meta { font-size: .75rem; color: var(--muted); }

/* Request kamar block */
.rl-rb__request {
  background: rgba(245,158,11,.10);
  border-bottom: 1px solid rgba(245,158,11,.25);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 4px;
}
.rl-rb__request-head { display: flex; gap: 6px; align-items: center; }
.rl-rb__request-lbl {
  font-size: .68rem; font-weight: 800; color: #b45309;
  text-transform: uppercase; letter-spacing: .05em;
}
.rl-rb__request-text {
  font-size: .87rem; line-height: 1.4; color: var(--text);
  white-space: pre-wrap; font-weight: 600;
}

/* Member list */
.rl-rb__members {
  list-style: none; margin: 0; padding: 6px 0;
  display: flex; flex-direction: column;
}
.rl-mb {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.rl-mb:last-child { border-bottom: 0; }
.rl-mb--pemesan { background: rgba(99,102,241,.04); }
.rl-mb__avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.rl-mb__avatar--fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: var(--muted);
  background: var(--surface-2);
}
.rl-mb__info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rl-mb__name {
  font-size: .88rem; font-weight: 700; color: var(--text);
  line-height: 1.25; word-break: break-word;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.rl-mb__pemesan-pill {
  background: rgba(99,102,241,.12); color: #4338ca;
  font-size: .65rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.rl-mb__hub {
  font-size: .73rem; color: #6d28d9; font-weight: 600;
  background: rgba(139,92,246,.10); padding: 1px 8px; border-radius: 999px;
  align-self: flex-start;
}
.rl-mb__hub--muted { color: var(--muted); background: var(--surface-2); }
.rl-mb__request {
  margin-top: 4px;
  background: rgba(245,158,11,.12); border-left: 3px solid #f59e0b;
  border-radius: 4px; padding: 5px 8px;
  display: flex; gap: 6px; align-items: flex-start;
  font-size: .8rem; line-height: 1.35;
}
.rl-mb__request-icon { flex-shrink: 0; }
.rl-mb__request-text { color: var(--text); font-weight: 600; word-break: break-word; white-space: pre-wrap; }
.rl-mb--has-request { background: rgba(245,158,11,.04); }

/* Footer notes */
.rl-rb__notes {
  border-top: 1px dashed var(--border-soft);
  padding: 8px 14px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: .82rem; color: var(--muted); background: var(--surface-2);
}
.rl-rb__notes-line { white-space: pre-wrap; line-height: 1.4; }

.roomlist-print-header {
  display: flex; align-items: stretch; gap: 16px;
  background: linear-gradient(135deg, #f97316 0%, #fb923c 60%, #fbbf24 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}
.roomlist-print-header__icon {
  width: 64px; height: 64px; flex-shrink: 0;
  background: rgba(255,255,255,.95);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.25);
}
.roomlist-print-header__body { flex: 1; min-width: 0; }
.roomlist-print-header__title {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
}
.roomlist-print-header__sub {
  font-size: .95rem; opacity: .95; margin-top: 4px; font-weight: 500;
}
.roomlist-print-header__hotel {
  font-size: .92rem; margin-top: 6px; opacity: .9; font-weight: 500;
}
.roomlist-print-header__stats {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
  font-size: .85rem; font-weight: 500;
}
.roomlist-print-header__updated {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: .82rem;
}
.updated-label { font-weight: 600; margin-bottom: 2px; }
.updated-row { opacity: .95; }

/* Tipe color cards */
.tipe-card {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 8px; border-radius: 10px;
  font-weight: 700; font-size: .78rem;
  text-align: center; letter-spacing: .3px; line-height: 1.2;
  color: #fff;
  height: 100%; min-height: 60px; width: 100%;
}
.tipe-double  { background: #e57373; }
.tipe-quad    { background: #66bb6a; }
.tipe-quint   { background: #ab47bc; }
.tipe-triple  { background: #ff9800; }
.tipe-petugas { background: #f57c00; }
.tipe-single  { background: #78909c; }
.tipe-default { background: var(--blue-500); }

/* Sheet structure (CSS Grid table) */
.roomlist-sheet {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.roomlist-sheet__head {
  display: grid;
  grid-template-columns: 180px 1fr 130px;
  background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
  color: #fff; font-weight: 700; font-size: .78rem;
  letter-spacing: .6px; text-transform: uppercase;
}
.roomlist-sheet__col { padding: 12px 14px; border-right: 1px solid rgba(255,255,255,.2); }
.roomlist-sheet__col:last-child { border-right: 0; }
.roomlist-sheet__col--seat { display: none; }
.roomlist-sheet__col--name { text-align: center; }
.roomlist-sheet__col--hotel { text-align: center; }

.roomlist-sheet__body { display: flex; flex-direction: column; }

.roomlist-room {
  display: grid;
  grid-template-columns: 180px 1fr 130px;
  border-top: 1px solid var(--border-soft);
}
.roomlist-room:first-child { border-top: 0; }
.roomlist-room__tipe { padding: 8px; display: flex; align-items: center; }
.roomlist-room__seats { display: flex; flex-direction: column; min-width: 0; }
.roomlist-room__hotel {
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--border-soft);
  padding: 8px;
}
.hotel-short {
  font-size: 1.5rem; font-weight: 900; letter-spacing: 1px;
  color: var(--text); text-align: center;
}

/* Inline edit no kamar (handling user) */
.roomlist-edit-hint {
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3);
  color: var(--text); padding: 8px 12px; border-radius: 8px;
  font-size: .85rem; margin: 0 0 10px;
}
.roomlist-edit-hint strong { color: #15803d; }

.roomlist-sheet--editable .roomlist-room__hotel {
  flex-direction: column; gap: 4px; padding: 8px 10px; min-width: 110px;
}
.rl-room-input {
  width: 100%; max-width: 110px;
  padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 6px;
  font-size: 1.1rem; font-weight: 800; text-align: center;
  background: var(--surface); color: var(--text);
  letter-spacing: 1px; outline: none;
}
.rl-room-input:focus {
  border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.rl-room-input::placeholder { font-weight: 500; letter-spacing: 0; color: var(--muted); opacity:.7; }
.rl-room-status {
  font-size: .72rem; min-height: 14px; text-align: center;
}
.rl-room-status.is-saving { color: var(--muted); }
.rl-room-status.is-saved  { color: #15803d; font-weight: 700; }
.rl-room-status.is-error  { color: #b91c1c; font-weight: 700; }
@media (max-width: 720px) {
  .rl-room-input { font-size: .95rem; max-width: 100%; }
}

.seat-row {
  display: grid; grid-template-columns: 36px 1fr;
  border-bottom: 1px solid var(--border-soft);
  min-height: 38px; align-items: center;
}
.seat-row:last-child { border-bottom: 0; }
.seat-row__num {
  text-align: center; font-weight: 700; font-size: .9rem;
  color: var(--muted);
  border-right: 1px solid var(--border-soft);
  height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--surface);
}
.seat-row__name {
  padding: 6px 14px; font-weight: 600; font-size: .88rem;
  text-align: center;
  letter-spacing: .2px; line-height: 1.3;
  word-break: break-word;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1; min-height: 38px;
}
.seat-row--empty { color: var(--muted); }
.seat-row--empty .seat-row__name { font-weight: 500; }

/* Row color palette (per family / pemesan) */
.row-c0  .seat-row__name { background: #fecaca; color: #7f1d1d; }
.row-c1  .seat-row__name { background: #fed7aa; color: #7c2d12; }
.row-c2  .seat-row__name { background: #fef08a; color: #713f12; }
.row-c3  .seat-row__name { background: #d9f99d; color: #365314; }
.row-c4  .seat-row__name { background: #a7f3d0; color: #064e3b; }
.row-c5  .seat-row__name { background: #99f6e4; color: #134e4a; }
.row-c6  .seat-row__name { background: #bae6fd; color: #0c4a6e; }
.row-c7  .seat-row__name { background: #c7d2fe; color: #1e1b4b; }
.row-c8  .seat-row__name { background: #ddd6fe; color: #4c1d95; }
.row-c9  .seat-row__name { background: #f5d0fe; color: #581c87; }
.row-c10 .seat-row__name { background: #fbcfe8; color: #831843; }
.row-c11 .seat-row__name { background: #fde68a; color: #78350f; }
.row-leader .seat-row__name { background: #fb7185; color: #fff; }
.row-leader .seat-row__num { background: #f43f5e; color: #fff; border-color: #f43f5e; }

:root[data-theme="dark"] .row-c0  .seat-row__name { background: #450a0a; color: #fecaca; }
:root[data-theme="dark"] .row-c1  .seat-row__name { background: #431407; color: #fed7aa; }
:root[data-theme="dark"] .row-c2  .seat-row__name { background: #422006; color: #fef08a; }
:root[data-theme="dark"] .row-c3  .seat-row__name { background: #1a2e05; color: #d9f99d; }
:root[data-theme="dark"] .row-c4  .seat-row__name { background: #022c22; color: #a7f3d0; }
:root[data-theme="dark"] .row-c5  .seat-row__name { background: #042f2e; color: #99f6e4; }
:root[data-theme="dark"] .row-c6  .seat-row__name { background: #0c2233; color: #bae6fd; }
:root[data-theme="dark"] .row-c7  .seat-row__name { background: #1e1b4b; color: #c7d2fe; }
:root[data-theme="dark"] .row-c8  .seat-row__name { background: #2e1065; color: #ddd6fe; }
:root[data-theme="dark"] .row-c9  .seat-row__name { background: #4a044e; color: #f5d0fe; }
:root[data-theme="dark"] .row-c10 .seat-row__name { background: #500724; color: #fbcfe8; }
:root[data-theme="dark"] .row-c11 .seat-row__name { background: #451a03; color: #fde68a; }

.leader-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.2); color: #fff;
  font-size: .65rem; font-weight: 700; padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: .3px;
}

/* Mobile shrink */
@media (max-width: 600px) {
  .roomlist-sheet__head { grid-template-columns: 110px 1fr 80px; font-size: .65rem; }
  .roomlist-sheet__col { padding: 8px 6px; }
  .roomlist-room { grid-template-columns: 110px 1fr 80px; }
  .tipe-card { font-size: .68rem; padding: 8px 4px; min-height: 50px; }
  .seat-row { grid-template-columns: 32px 1fr; }
  .seat-row__name { font-size: .78rem; padding: 6px 8px; }
  .hotel-short { font-size: 1rem; letter-spacing: 0; }
  .roomlist-print-header { flex-direction: column; gap: 12px; padding: 14px 16px; }
  .roomlist-print-header__title { font-size: 1.3rem; }
}

/* Print */
@media print {
  .no-print, .topbar, .bottomnav, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .container { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .roomlist-sheet { box-shadow: none; border: 1px solid #ccc; page-break-inside: auto; }
  .roomlist-room { page-break-inside: avoid; }
  .roomlist-print-header { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tipe-card, .seat-row__name, .row-leader .seat-row__name { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .roomlist-sheet__head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------- Notifications card ------- */
.notif-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px 14px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, color-mix(in srgb, var(--primary) 12%, var(--surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 14px;
}
.notif-card[hidden] { display: none; }
.notif-card__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--grad-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 12px -4px rgba(30, 58, 138, .4);
  grid-row: span 2;
}
.notif-card__body { min-width: 0; }
.notif-card__title {
  font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.notif-card__desc {
  color: var(--muted); font-size: .85rem; line-height: 1.45;
}
.notif-card__error {
  margin-top: 8px; padding: 8px 10px;
  background: var(--danger-soft); color: var(--danger);
  border-radius: var(--r-sm); font-size: .8rem;
}
.notif-card__actions {
  grid-column: 2;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.notif-card__actions .btn { padding: 9px 16px; font-size: .85rem; }

/* PWA install card — ajak user install ke Layar Utama. JS auto-hide kalau
   sudah running di standalone mode. */
.pwa-install-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(16,185,129,.04));
  border: 1px solid rgba(34,197,94,.25);
  margin-bottom: 16px;
}
.pwa-install-card[hidden] { display: none; }
.pwa-install-card__icon { font-size: 28px; flex-shrink: 0; }
.pwa-install-card__body { flex: 1; min-width: 0; }
.pwa-install-card__title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}
.pwa-install-card__desc {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.pwa-install-card__actions { flex-shrink: 0; }
@media (max-width: 500px) {
  .pwa-install-card {
    flex-wrap: wrap;
  }
  .pwa-install-card__body { flex-basis: calc(100% - 50px); }
  .pwa-install-card__actions {
    flex-basis: 100%;
    margin-top: 4px;
  }
  .pwa-install-card__actions .btn { width: 100%; }
}

/* Persistent banner variant — extra attention-grabbing dengan shimmer + bell shake.
   Diapply ke @NotificationsCard (selalu muncul kalau belum subscribe — no dismiss). */
.notif-card--banner {
  border: 2px solid var(--primary);
  box-shadow: 0 4px 18px -6px rgba(30, 58, 138, .25);
  position: relative;
  overflow: hidden;
}
.notif-card--banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  animation: notifShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes notifShimmer {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}
.notif-card--banner .notif-card__icon { animation: notifBell 2.4s ease-in-out infinite; }
@keyframes notifBell {
  0%, 70%, 100% { transform: rotate(0); }
  76%, 88%      { transform: rotate(-12deg); }
  82%, 94%      { transform: rotate(12deg); }
}
.notif-card__desc--denied {
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
  color: #92400e;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: .82rem;
}
.notif-card__desc--denied code {
  background: rgba(0,0,0,.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .9em;
}

/* ------- Notifications settings card (di /profile) ------- */
.notif-settings__status {
  padding: 12px 14px;
  background: var(--bg, var(--surface-2));
  border-radius: var(--r-md);
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: 12px;
}
.notif-settings__status code {
  background: rgba(0,0,0,.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .9em;
}
.notif-settings__error {
  margin-bottom: 12px;
  padding: 9px 12px;
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--r-sm);
  font-size: .85rem;
}
.notif-settings__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.notif-settings__actions .btn { font-size: .85rem; padding: 9px 14px; }
.notif-settings__hint {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
}

/* ------- Misc ------- */
.back-link { display: inline-block; margin-bottom: 14px; color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 500; }
.back-link:hover { color: var(--primary); }
.empty { text-align: center; color: var(--muted); padding: 36px 20px; }

/* ------- Tablet & up ------- */
@media (min-width: 768px) {
  .bottomnav {
    position: sticky; top: 64px; left: 0; right: 0; bottom: auto;
    grid-template-columns: repeat(3, auto); justify-content: center; gap: 4px;
    border-top: 0; border-bottom: 1px solid var(--border-soft);
    box-shadow: none; padding: 0;
  }
  .bottomnav__item { padding: 12px 22px; flex-direction: row; gap: 8px; min-height: 0; font-size: .82rem; }
  .bottomnav__item--active::after { top: auto; bottom: 0; }
  .bottomnav__icon { font-size: 1rem; }
  .container { padding-bottom: 32px; padding-top: 20px; max-width: 1100px; }
  .topbar { padding: 16px 28px; }
  .modules-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .modules-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* ------- Roomlist module ------- */
.roomlist-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  margin: 12px 0 14px;
}
.roomlist-tab {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 12px;
  border-radius: var(--r-sm);
  text-decoration: none; color: var(--muted);
  font-size: .92rem; font-weight: 600;
  transition: background .12s, color .12s, transform .08s;
}
.roomlist-tab:hover { color: var(--text); }
.roomlist-tab--active {
  background: var(--surface); color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
}
.roomlist-tab__icon { font-size: 1.1rem; line-height: 1; }
.roomlist-hotel {
  font-size: .92rem; font-weight: 600;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}

.roomlist-type { margin-bottom: 16px; }
.roomlist-type__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--border-soft); border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.roomlist-type__name {
  font-weight: 700; font-size: .92rem; letter-spacing: -0.01em;
  text-transform: uppercase;
}
.roomlist-type__meta { font-size: .76rem; color: var(--muted); font-weight: 500; }
.roomlist-rooms {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

.room-card {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 12px;
}
.room-card__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.room-card__name { font-weight: 700; font-size: .9rem; }
.room-card__count {
  font-size: .76rem; font-weight: 700; color: var(--primary-dark);
  background: var(--primary-soft); padding: 2px 8px;
  border-radius: var(--r-pill); font-variant-numeric: tabular-nums;
}
.room-card__empty { color: var(--muted); font-style: italic; font-size: .82rem; }
.room-card__occupants { list-style: none; padding: 0; margin: 0; }
.room-card__occupant {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: .84rem;
}
.room-card__role {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-sm);
  background: var(--plat-200); color: var(--plat-600);
  font-size: .66rem; font-weight: 700; letter-spacing: .3px;
  flex-shrink: 0;
}
.room-card__role--leader { background: var(--primary); color: #fff; }
.room-card__occupant-name { line-height: 1.3; word-break: break-word; }
:root[data-theme="dark"] .room-card__role { background: #1e293b; color: #94a3b8; }

/* ============ Personifikasi: stats collapse + filter chips + emergency contact + SVG icons ============ */
.stats-collapse { margin-bottom: 14px; }
.stats-collapse > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--surface-2); border-radius: var(--r-md);
  border: 1px solid var(--border-soft); font-size: .9rem; color: var(--text);
  transition: background .15s;
}
.stats-collapse > summary::-webkit-details-marker { display: none; }
.stats-collapse > summary:hover { background: var(--surface-3, var(--surface-2)); }
.stats-summary__chevron { font-size: .78rem; color: var(--muted); }
.stats-collapse[open] .stats-summary__chevron::before { content: "▴ Tutup"; }
.stats-collapse[open] .stats-summary__chevron { font-size: 0; }
.stats-collapse[open] .stats-summary__chevron::before { font-size: .78rem; }
.stats-collapse[open] > summary { margin-bottom: 12px; }

.filter-chips {
  display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.filter-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 6px 14px; border-radius: 999px;
  font-size: .82rem; font-weight: 500; text-decoration: none;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-soft); transition: all .12s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip--active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.chip--active:hover { color: #fff; opacity: .92; }

.emergency-actions {
  display: inline-flex; gap: 4px; margin-left: 6px;
  vertical-align: middle;
}
.contact-btn--xs {
  padding: 4px 7px; min-height: 0; font-size: .75rem;
  border-radius: var(--r-sm); line-height: 1;
}
.contact-btn--xs .icon { width: 12px; height: 12px; }

.icon {
  display: inline-block; vertical-align: -2px; flex-shrink: 0;
}
.contact-btn .icon, .tag .icon, .jamaah-alert .icon, .jamaah-note .icon {
  margin-right: 4px;
}

/* ------- Tukar Kurs ------- */
.kurs-cta { margin: 10px 0 14px; }
.kurs-cta__btn { width: 100%; padding: 14px; font-size: 1rem; font-weight: 700; }

.kurs-form { display: flex; flex-direction: column; gap: 14px; }
.kurs-form__field { display: flex; flex-direction: column; gap: 6px; }
.kurs-form__lbl {
  font-size: .78rem; color: var(--muted);
  font-weight: 600; letter-spacing: .3px;
}
.kurs-form__row2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.kurs-form__preview {
  background: var(--surface-2); padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: .9rem; color: var(--muted);
  text-align: center;
}
.kurs-form__preview strong {
  font-size: 1.15rem; color: var(--primary-dark);
  font-variant-numeric: tabular-nums; margin-left: 4px;
}
.kurs-form__radios { display: flex; gap: 8px; }
.kurs-form__radio {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  font-size: .9rem; font-weight: 600;
  transition: background .12s, border-color .12s;
}
.kurs-form__radio:hover { border-color: var(--primary); }
.kurs-form__radio input { margin: 0; accent-color: var(--primary); }
.kurs-form__radio:has(input:checked) {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary-dark);
}
.kurs-form__note {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: .82rem; color: var(--text);
}
.kurs-form__actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 8px;
}

.alert {
  padding: 12px 14px; border-radius: var(--r-md);
  font-size: .9rem; margin-bottom: 12px;
}
.alert--success {
  background: var(--success-soft); color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}
.alert--error {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

.kurs-rate-card {
  background: var(--grad-hero); color: #fff; text-align: center;
  border: 0;
}
.kurs-rate-card__lbl {
  font-size: .72rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; opacity: .85;
}
.kurs-rate-card__main {
  display: flex; align-items: baseline; justify-content: center;
  gap: 10px; margin: 10px 0;
}
.kurs-rate-card__from {
  font-size: 1.2rem; font-weight: 700; opacity: .85;
}
.kurs-rate-card__arrow { opacity: .6; font-size: 1.2rem; }
.kurs-rate-card__to {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kurs-rate-card__meta { font-size: .72rem; opacity: .75; }

.kurs-calc__row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px;
  align-items: end;
}
.kurs-calc__field { display: flex; flex-direction: column; gap: 4px; }
.kurs-calc__lbl {
  font-size: .68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.kurs-calc__swap {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  cursor: pointer; font-size: 1.2rem; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .12s, color .12s;
  flex-shrink: 0;
}
.kurs-calc__swap:hover { background: var(--primary-soft); transform: rotate(180deg); }
.kurs-calc__rate-row {
  display: flex; gap: 8px; align-items: end; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.kurs-calc__rate { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 4px; }
.kurs-calc__presets { display: flex; gap: 5px; flex-wrap: wrap; align-items: end; padding-bottom: 4px; }

.kurs-list { display: flex; flex-direction: column; gap: 0; }
.kurs-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 0; gap: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.kurs-row:last-child { border-bottom: 0; }
.kurs-row__main { min-width: 0; flex: 1; }
.kurs-row__name { font-weight: 600; font-size: .92rem; }
.kurs-row__meta {
  font-size: .76rem; color: var(--muted);
  margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap;
}
.kurs-row__method { text-transform: uppercase; font-weight: 600; letter-spacing: .3px; font-size: .68rem; }
.kurs-row__nums { text-align: right; flex-shrink: 0; }
.kurs-row__sar {
  font-weight: 700; font-size: .9rem; color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}
.kurs-row__idr {
  font-size: .82rem; color: var(--muted);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.kurs-row__status { margin-top: 4px; }

.stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 540px) {
  .stats-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ------- Add On module ------- */
.addon-payment-warn {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(245, 158, 11, 0.08));
  border: 1.5px solid rgba(220, 38, 38, 0.3);
  border-left: 4px solid #dc2626;
  border-radius: 10px;
  font-size: .88rem; line-height: 1.5;
  color: #7f1d1d;
}
.addon-payment-warn__ico { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.addon-payment-warn__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.addon-payment-warn__body strong { font-size: .92rem; color: #991b1b; }
.addon-payment-warn__sub { font-size: .82rem; color: #7f1d1d; opacity: .92; }
:root[data-theme="dark"] .addon-payment-warn {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(245, 158, 11, 0.14));
  border-color: rgba(220, 38, 38, 0.45);
  color: #fecaca;
}
:root[data-theme="dark"] .addon-payment-warn__body strong { color: #fef2f2; }

.wakif-add-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.wakif-add-row .btn:disabled {
  opacity: .5; cursor: not-allowed;
}

.wakaf-jamaah-info {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wakaf-jamaah-info__row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .88rem;
}

.wakaf-section {
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Paste-mode card di wakaf form */
.wakaf-paste { margin-bottom: 14px; }
.wakaf-paste details {
  background: linear-gradient(180deg, #eef2ff, #f8fafc);
  border: 1px solid #c7d2fe; border-radius: 10px; padding: 10px 14px;
}
.wakaf-paste summary {
  list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: baseline;
  flex-wrap: wrap;
}
.wakaf-paste summary::-webkit-details-marker { display: none; }
.wakaf-paste summary::before {
  content: '▸'; color: #6366f1; font-size: 1rem; transition: transform .15s;
}
.wakaf-paste details[open] summary::before { transform: rotate(90deg); }
.wakaf-paste__title { font-weight: 700; color: #4338ca; }
.wakaf-paste__body { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.wakaf-paste__body textarea {
  font-family: 'SF Mono', Menlo, monospace; font-size: .82rem;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
}
.wakaf-paste__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wakaf-paste__hint { padding-top: 4px; }
.wakaf-section__title {
  font-weight: 700; font-size: .95rem;
  margin-bottom: 12px;
  color: var(--text);
}
.wakif-row {
  padding: 12px; margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wakif-row__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.wakif-row__title {
  font-weight: 600; font-size: .85rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.wakif-row__rm {
  background: none; border: 0; cursor: pointer;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--muted); font-size: 1.1rem; line-height: 1;
}
.wakif-row__rm:hover { background: rgba(220,38,38,.12); color: #b91c1c; }
.wakif-row__grid {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .wakif-row__grid { grid-template-columns: 1fr; }
}
.wakif-row__grid .field { margin-bottom: 0; }

.checkout-list { display: flex; flex-direction: column; gap: 10px; }
.checkout-row {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.checkout-row__hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.checkout-row__jamaah { font-weight: 700; font-size: .95rem; }
.checkout-row__items {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 8px;
  margin-bottom: 10px;
}
.checkout-row__item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  font-size: .88rem;
}
.checkout-row__item-name { color: var(--text); }
.checkout-row__item-price { color: var(--muted); font-weight: 600; }
.checkout-row__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.checkout-row__total { display: flex; align-items: baseline; gap: 6px; }
.checkout-row__total strong {
  color: var(--primary, #2563eb);
  font-size: 1rem;
}
.checkout-row__bukti {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .82rem;
  text-decoration: none;
  color: var(--text);
}
.checkout-row__bukti:hover { border-color: var(--primary, #2563eb); }

/* Inline upload bukti TF utk wakaf row tanpa bukti */
.wakaf-upload-bukti { margin: 0; }
.wakaf-upload-bukti__lbl {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 6px; cursor: pointer;
  background: #fef3c7; color: #92400e; border: 1px dashed #f59e0b;
  font-size: .82rem; font-weight: 700;
  transition: all .12s;
}
.wakaf-upload-bukti__lbl:hover { background: #fde68a; border-style: solid; }
.wakaf-upload-bukti__lbl input[type=file] { display: none; }

/* Section: Bukti TF Pending (wakaf yg dibuat via paste, belum ada bukti) */
.pending-bukti {
  background: linear-gradient(180deg, #fffbeb, #fff);
  border: 1px solid #fcd34d;
  padding: 16px; margin-bottom: 16px;
}
.pending-bukti__hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.pending-bukti__title { margin: 0 0 4px; font-size: 1.05rem; color: #92400e; }
.pending-bukti__badge {
  background: #b91c1c; color: #fff; font-size: .78rem; font-weight: 800;
  padding: 3px 11px; border-radius: 999px; flex: none;
}
.pending-bukti__list { display: flex; flex-direction: column; gap: 10px; }
.pending-bukti__row {
  background: #fff; border: 1px solid #fde68a; border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.pending-bukti__row-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  flex-wrap: wrap;
}
.pending-bukti__row-info { flex: 1; min-width: 0; }
.pending-bukti__name { font-size: 1rem; color: #0f172a; }
.pending-bukti__nominal {
  font-size: 1.1rem; font-weight: 800; color: #166534;
  background: #dcfce7; padding: 4px 10px; border-radius: 8px;
  white-space: nowrap;
}
.pending-bukti__row-controls {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 8px; border-top: 1px dashed #fde68a;
}
.pending-bukti__methods { display: flex; gap: 6px; flex-wrap: wrap; }
.pending-bukti__method {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 6px; font-size: .82rem; cursor: pointer;
}
.pending-bukti__method:has(input:checked) {
  background: #dbeafe; border-color: #93c5fd; color: #1e40af; font-weight: 700;
}
.pending-bukti__file {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; background: #fff; border: 1px dashed #94a3b8;
  border-radius: 6px; font-size: .82rem; cursor: pointer; color: #475569;
  flex: 1; min-width: 200px;
}
.pending-bukti__file:hover { border-color: #2563eb; color: #2563eb; }
.pending-bukti__file input[type=file] { display: none; }
.pending-bukti__file-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap; vertical-align: middle;
  background: var(--surface-2); color: var(--text);
}
.pill--blue { background: rgba(59,130,246,.12); color: #1d4ed8; }
.pill--green { background: rgba(16,185,129,.15); color: #047857; }
.pill--amber { background: rgba(245,158,11,.15); color: #92400e; }

.cart-picker {
  display: flex; gap: 8px; align-items: stretch;
}
@media (max-width: 600px) {
  .cart-picker { flex-wrap: wrap; }
  /* Combo (pilih layanan) full-width sendiri biar menu dropdown gak ke-squeeze
     sempit → opsi gak wrap berantakan. Price + tombol turun ke baris bawah. */
  .cart-picker .combo { flex: 1 0 100% !important; min-width: 0; }
  .cart-picker__price { flex: 1 1 auto !important; min-width: 0; }
  .cart-picker .btn { flex: 0 0 auto; }
}

.cart {
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.cart__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cart__title { font-weight: 700; font-size: .95rem; }
.cart__count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: var(--primary, #2563eb); color: #fff;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}
.cart__total strong {
  color: var(--primary, #2563eb);
  font-size: 1.05rem;
}
.cart__list { display: flex; flex-direction: column; gap: 6px; }
.cart__empty { padding: 12px 4px; text-align: center; }
.cart__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
}
.cart__item-name { flex: 1; min-width: 0; font-weight: 500; }
.cart__item-price { color: var(--text); font-weight: 600; }
.cart__item-rm {
  background: none; border: 0; cursor: pointer;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--muted); font-size: 1.1rem; line-height: 1;
}
.cart__item-rm:hover {
  background: rgba(220,38,38,.12);
  color: #b91c1c;
}

.combo { position: relative; }
.combo__input { padding-right: 36px; }
.combo__toggle {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: .9rem;
  padding: 4px 6px;
}
.combo.is-open .combo__toggle { color: var(--text); transform: translateY(-50%) rotate(180deg); }
.combo__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* di atas bottom nav (z-index 50) supaya opsi gak ketutup nav di mobile */
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.18);
  z-index: 60;
}
.combo__menu[hidden] { display: none; }
.combo__option {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: .9rem;
  border-bottom: 1px solid var(--border-soft, transparent);
  transition: background .12s;
}
.combo__option:last-of-type { border-bottom: 0; }
.combo__option[hidden] { display: none; }
.combo__option:hover { background: var(--surface-2); }
.combo__option-name { font-weight: 500; flex: 1; min-width: 0; }
.combo__option-price {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 600;
  color: var(--primary, #2563eb);
  font-size: .85rem;
  white-space: nowrap;
}
.combo__empty {
  padding: 14px 16px;
  text-align: center;
}

.addon-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.addon-method-card {
  position: relative;
  display: block;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.addon-method-card:hover { border-color: var(--primary, #2563eb); }
.addon-method-card.is-active {
  border-color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, .06);
}
.addon-method-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.addon-method-card__title { font-weight: 700; font-size: .95rem; }
.addon-method-card__sub { margin-top: 3px; line-height: 1.35; }
:root[data-theme="dark"] .addon-payment-warn__sub { color: #fecaca; }

.addon-group {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); margin-bottom: 10px;
  overflow: hidden;
}
.addon-group__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; cursor: pointer; gap: 12px;
  background: var(--surface-2);
  list-style: none;
}
.addon-group__head::-webkit-details-marker { display: none; }
.addon-group__name {
  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;
  text-transform: capitalize;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.addon-group__meta {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.addon-group__export {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(245,158,11,.12); color: #b45309;
  text-decoration: none; border: 1px solid rgba(245,158,11,.3);
  transition: background .12s, color .12s;
}
.addon-group__export:hover { background: #f59e0b; color: #fff; }

/* Copy List button (Wakaf Quran only) */
.addon-group__copy {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600; cursor: pointer;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(34,197,94,.12); color: #15803d;
  border: 1px solid rgba(34,197,94,.3);
  transition: background .12s, color .12s;
}
.addon-group__copy:hover { background: #22c55e; color: #fff; }
.addon-group__copy--ok { background: #16a34a; color: #fff; border-color: #15803d; }

/* Status pill per wakif (Lunas / Proses) */
.addon-row__status {
  display: inline-block; margin-left: 8px;
  font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  vertical-align: middle;
}
.addon-row__status--lunas { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.addon-row__status--proses { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.addon-group__count {
  background: var(--primary-soft); color: var(--primary-dark);
  font-size: .72rem; font-weight: 700; padding: 3px 8px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.addon-group__total {
  font-weight: 700; font-size: .85rem; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.addon-group__total--free { color: var(--muted); font-style: italic; font-weight: 500; }
.addon-group__chev {
  color: var(--muted); font-size: .9rem;
  transition: transform .15s;
}
.addon-group[open] .addon-group__chev { transform: rotate(180deg); }

.addon-list { padding: 4px 14px 12px; }
.addon-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; gap: 12px;
  border-bottom: 1px dashed var(--border-soft);
  font-size: .88rem;
}
.addon-row:last-child { border-bottom: 0; }
.addon-row__name { flex: 1; min-width: 0; word-break: break-word; }
.addon-row__price {
  flex-shrink: 0; font-weight: 600; font-size: .82rem;
  font-variant-numeric: tabular-nums; color: var(--text);
}

/* ============ Pemesan section header ============ */
.pemesan-section { margin-bottom: 28px; }
.pemesan-section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 80%, #6366f1) 100%);
  color: #fff;
  border-radius: 12px 12px 0 0;
  margin-bottom: 0;
}
.pemesan-section__name {
  font-size: 1.05rem; font-weight: 600; line-height: 1.2;
}
.pemesan-section__meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-size: .78rem; color: rgba(255,255,255,.88);
}
.pemesan-section__meta .dot { opacity: .5; }
.pemesan-section__head .contact-btn--wa {
  background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.3);
  font-size: .78rem; padding: 7px 14px;
}
.pemesan-section__head .contact-btn--wa:hover { background: rgba(255,255,255,.3); }
.pemesan-section__note {
  background: #fef9c3; color: #713f12; border: 1px solid #fde68a;
  border-top: none;
  padding: 8px 14px; font-size: .8rem;
}
:root[data-theme="dark"] .pemesan-section__note {
  background: #451a03; color: #fbbf24; border-color: #78350f;
}
.pemesan-section .jamaah-grid {
  padding: 14px; background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

/* ============ Jamaah card grid (foto-first, flat — no toggle) ============ */
.jamaah-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (min-width: 768px) {
  .jamaah-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

.jamaah-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.jamaah-card:hover {
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.22), 0 4px 8px -4px rgba(0,0,0,.08);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border-soft));
}

.jamaah-card__photo-wrap {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  overflow: hidden;
}
.jamaah-card__photo {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  display: block;
}
.jamaah-card__photo--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 700; color: rgba(255,255,255,.75);
}

.jamaah-card__status {
  position: absolute; top: 8px; left: 8px; z-index: 2;
}
.jamaah-card__status .badge {
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  border: none; box-shadow: 0 1px 4px rgba(0,0,0,.18);
  font-size: .65rem; padding: 3px 8px;
}

.jamaah-card__flags {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; flex-direction: column; gap: 5px;
}
.flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.flag .icon { width: 13px; height: 13px; color: #fff; margin: 0; }
.flag--medical { background: #dc2626; }
.flag--vip { background: #d97706; }

.jamaah-card__name-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 36px 12px 10px;
  background: linear-gradient(to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.7) 35%,
    rgba(0,0,0,.35) 70%,
    transparent 100%);
  color: #fff;
}
.jamaah-card__name {
  font-weight: 600; font-size: .92rem; line-height: 1.25;
  color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  letter-spacing: -0.005em;
}
.jamaah-card__title-prefix { opacity: .72; font-weight: 400; font-size: .78rem; }
.jamaah-card__meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
  font-size: .7rem; color: rgba(255,255,255,.92);
  font-weight: 500; letter-spacing: 0.01em;
}
.jamaah-card__meta .dot { opacity: .45; }

.jamaah-card__body {
  padding: 12px; display: flex; flex-direction: column; gap: 12px; flex: 1;
  background: var(--surface-2);
}

/* ── sectioned blocks ── */
.sect {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.sect__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.sect__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--surface-2);
}
.sect__icon .icon { width: 13px; height: 13px; margin: 0; }
.sect__icon--info       { background: #dbeafe; color: #2563eb; }
.sect__icon--priority   { background: #fee2e2; color: #dc2626; }
.sect__icon--experience { background: #fef3c7; color: #d97706; }
.sect__icon--medical    { background: #fee2e2; color: #dc2626; }
.sect__icon--note       { background: #e0e7ff; color: #4f46e5; }
.sect__icon--emergency  { background: #d1fae5; color: #059669; }
:root[data-theme="dark"] .sect__icon--info { background: #1e3a8a; color: #93c5fd; }
:root[data-theme="dark"] .sect__icon--priority,
:root[data-theme="dark"] .sect__icon--medical { background: #7f1d1d; color: #fca5a5; }
:root[data-theme="dark"] .sect__icon--experience { background: #78350f; color: #fcd34d; }
:root[data-theme="dark"] .sect__icon--note { background: #312e81; color: #c7d2fe; }
:root[data-theme="dark"] .sect__icon--emergency { background: #064e3b; color: #6ee7b7; }
.sect__title {
  font-size: .82rem; font-weight: 600; color: var(--text);
  letter-spacing: -0.005em;
}
.sect__body { display: flex; flex-direction: column; gap: 6px; }
.sect__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; font-size: .78rem;
}
.sect__row-lbl { color: var(--muted); font-weight: 400; flex-shrink: 0; }
.sect__row-val { color: var(--text); font-weight: 600; text-align: right; word-break: break-word; }
.sect__row-val.mono { font-family: 'Geist Mono', monospace; font-size: .74rem; }
.sect__row--block { flex-direction: column; align-items: flex-start; gap: 3px; }
.sect__row--block .sect__row-val { text-align: left; font-weight: 500; }

/* ── highlight boxes ── */
.highlight-box {
  border-radius: 8px; padding: 8px 10px;
  border: 1px solid; font-size: .8rem; line-height: 1.4;
}
.highlight-box__lbl {
  font-size: .68rem; font-weight: 500; opacity: .75; margin-bottom: 2px;
}
.highlight-box__val { font-size: .82rem; font-weight: 500; }
.highlight-box--yellow  { background: #fef9c3; border-color: #fde68a; color: #713f12; }
.highlight-box--blue    { background: #dbeafe; border-color: #bfdbfe; color: #1e3a8a; }
.highlight-box--red     { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.highlight-box--neutral { background: var(--surface-2); border-color: var(--border-soft); color: var(--text); }
:root[data-theme="dark"] .highlight-box--yellow { background: #451a03; border-color: #78350f; color: #fbbf24; }
:root[data-theme="dark"] .highlight-box--blue   { background: #1e3a8a; border-color: #1d4ed8; color: #93c5fd; }
:root[data-theme="dark"] .highlight-box--red    { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }

/* ── experience pills ── */
.exp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  font-size: .76rem; font-weight: 600;
  background: #ef4444; color: #fff;
}
.exp-pill--haji  { background: #059669; }
.exp-pill--umroh { background: #2563eb; }
.exp-pill--luar  { background: #7c3aed; }
.exp-pill--first { background: #dc2626; }
.exp-pill .icon { color: #fff; margin: 0; }

/* ── emergency info ── */
.emergency-info {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--text);
}

.jamaah-card__tags {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.jamaah-card__tags .tag {
  font-size: .68rem; padding: 3px 7px;
}

.card-alert {
  font-size: .72rem; padding: 6px 9px; border-radius: 6px;
  display: flex; gap: 5px; align-items: flex-start;
  line-height: 1.35;
}
.card-alert .icon { flex-shrink: 0; margin-top: 1px; }
.card-alert--medical {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
}
.card-alert--note {
  background: var(--surface-2); color: var(--text);
  border-left: 3px solid var(--primary);
}
:root[data-theme="dark"] .card-alert--medical {
  background: #450a0a; color: #fca5a5; border-color: #7f1d1d;
}

.jamaah-card__actions {
  display: flex; gap: 6px; margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.contact-btn--sm {
  padding: 6px 10px; font-size: .74rem; line-height: 1;
  flex: 1; justify-content: center;
  display: inline-flex; align-items: center; gap: 4px;
}
.contact-btn--sm .icon { width: 13px; height: 13px; margin: 0; }
.contact-btn--xs { padding: 3px 6px; font-size: .68rem; }
.contact-btn--xs .icon { width: 11px; height: 11px; margin: 0; }
.emergency-actions { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.text-xs { font-size: .72rem; }

/* ------- Bingkai Jamaah module ------- */
.bingkai-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  margin: 0 0 12px;
}
.bingkai-tab {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 14px;
  flex: 1; min-width: 0;
  border-radius: var(--r-sm);
  text-decoration: none; color: var(--muted);
  font-size: .88rem; font-weight: 600;
  transition: background .12s, color .12s;
}
.bingkai-tab:hover { color: var(--text); }
.bingkai-tab--active {
  background: var(--surface); color: var(--primary-dark);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft);
}
.bingkai-tab__count {
  background: var(--surface-2); color: var(--muted);
  padding: 1px 7px; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bingkai-tab--active .bingkai-tab__count { background: var(--primary-soft); color: var(--primary-dark); }

.bingkai-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.bingkai-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); overflow: hidden;
  text-decoration: none; color: var(--text);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.bingkai-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md); border-color: var(--primary);
}
.bingkai-card--empty:hover { transform: none; box-shadow: none; border-color: var(--border-soft); cursor: default; }
.bingkai-card__img {
  width: 100%; aspect-ratio: 3/4;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bingkai-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bingkai-card__img--empty { font-size: 2.5rem; opacity: .35; }
.bingkai-card__name {
  padding: 8px 10px 2px; font-size: .82rem; font-weight: 600;
  line-height: 1.3; word-break: break-word;
}
.bingkai-card__meta { padding: 0 10px 9px; font-size: .7rem; color: var(--muted); }
.bingkai-card__meta--warn { color: var(--danger); }

/* ------- Budget Operasional module ------- */
.budget-group {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); margin-bottom: 10px;
  overflow: hidden;
}
.budget-group__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; cursor: pointer; gap: 12px;
  background: var(--surface-2); list-style: none;
}
.budget-group__head::-webkit-details-marker { display: none; }
.budget-group__name {
  font-weight: 700; font-size: .92rem; letter-spacing: -0.01em;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.budget-group__totals {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  flex-wrap: wrap; justify-content: flex-end;
}
.budget-group__sar, .budget-group__idr {
  font-weight: 700; font-size: .82rem;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: var(--r-pill);
}
.budget-group__sar { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.budget-group__idr { background: var(--primary-soft); color: var(--primary-dark); }
.budget-group__count { font-size: .72rem; color: var(--muted); font-weight: 500; }
.budget-group__chev { color: var(--muted); transition: transform .15s; }
.budget-group[open] .budget-group__chev { transform: rotate(180deg); }

.budget-list { padding: 4px 14px 12px; }
.budget-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 0; gap: 12px;
  border-bottom: 1px dashed var(--border-soft);
}
.budget-row:last-child { border-bottom: 0; }
.budget-row__main { flex: 1; min-width: 0; }
.budget-row__coa { font-weight: 600; font-size: .88rem; }
.budget-row__alasan {
  font-size: .78rem; color: var(--muted);
  margin-top: 2px; font-style: italic;
  word-break: break-word;
}
.budget-row__meta {
  font-size: .72rem; color: var(--muted); margin-top: 3px;
  display: flex; align-items: center; gap: 6px;
}
.budget-row__amount {
  flex-shrink: 0; font-weight: 700; font-size: .9rem;
  font-variant-numeric: tabular-nums; color: var(--text);
  text-align: right;
}
.budget-row__del-form { margin: 0; flex-shrink: 0; }
.budget-row__del {
  width: 28px; height: 28px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border-soft);
  cursor: pointer; color: var(--muted);
  font-size: 1rem; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: .12s;
}
.budget-row__del:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
:root[data-theme="dark"] .budget-row__del:hover { background: #7f1d1d; color: #fecaca; border-color: #991b1b; }

/* ------- CTA Link Card (link ke sistem lama / form publik) ------- */
.cta-link {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--text);
  margin-bottom: 14px;
  border-left: 4px solid var(--primary);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta-link:hover, .cta-link:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.cta-link__body { flex: 1; min-width: 0; }
.cta-link__title { font-weight: 700; font-size: 1rem; color: var(--text); margin-bottom: 2px; }
.cta-link__sub { font-size: .8rem; color: var(--muted); }
.cta-link__arrow { font-size: 1.4rem; color: var(--primary); font-weight: 700; flex-shrink: 0; }

/* ------- Panduan SGO ------- */
.panduan-toc { margin-bottom: 14px; padding: 14px 16px; }
.panduan-toc__title {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.panduan-toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.panduan-toc__list a {
  font-size: .85rem; color: var(--text); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.panduan-toc__list a:hover { color: var(--primary); border-bottom-color: var(--primary); }
.panduan-section { margin-bottom: 14px; padding: 18px 20px; scroll-margin-top: 80px; }
.panduan-section__h {
  font-size: 1.15rem; font-weight: 700; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--primary);
}
.panduan-section h3 { font-size: 1rem; font-weight: 600; margin: 18px 0 6px; }
.panduan-section h3:first-of-type { margin-top: 6px; }
.panduan-section p { font-size: .92rem; line-height: 1.55; margin: 0 0 10px; }
.panduan-section code {
  background: var(--bg, #f1f5f9); padding: 1px 6px; border-radius: 4px;
  font-size: .85em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--primary);
}
.panduan-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.panduan-list li { font-size: .9rem; line-height: 1.5; padding-left: 22px; position: relative; }
.panduan-list li::before { content: '▸'; position: absolute; left: 6px; color: var(--primary); font-size: .8rem; }
.panduan-section ol.panduan-list { list-style: decimal; padding-left: 28px; }
.panduan-section ol.panduan-list li { padding-left: 4px; }
.panduan-section ol.panduan-list li::before { content: none; }
.panduan-callout { margin: 12px 0; padding: 12px 14px; border-radius: var(--r-md, 8px); font-size: .88rem; line-height: 1.5; border-left: 3px solid; }
.panduan-callout--tip { background: rgba(99,102,241,.08); border-color: var(--primary); }
.panduan-callout--warn { background: rgba(245,158,11,.1); border-color: #f59e0b; }

/* ------- Rekening Pembayaran (tukar-kurs) ------- */
.rek-card {
  background: linear-gradient(180deg, #fffbeb, #fff8dc 50%, #fff7d6);
  border: 1px solid #fde68a;
  margin-bottom: 14px;
}
:root[data-theme="dark"] .rek-card {
  background: linear-gradient(180deg, rgba(253,224,71,.08), rgba(253,224,71,.04));
  border-color: rgba(253,224,71,.22);
}
.rek-card__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 10px; }
.rek-card__title { font-weight: 700; font-size: .95rem; }
.rek-card__hint { font-size: .75rem; color: var(--muted); }
.rek-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.rek-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm, 8px); padding: 10px 12px;
  cursor: pointer; user-select: none;
  transition: border-color .12s, transform .08s;
  font-size: .85rem;
}
.rek-row:hover { border-color: var(--primary); }
.rek-row:active { transform: scale(.98); }
.rek-row__bank { font-weight: 700; color: var(--primary); flex-shrink: 0; }
.rek-row__sep { color: var(--muted); flex-shrink: 0; }
.rek-row__num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; flex: 1; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.rek-row__num--copied { color: var(--success); font-family: inherit; }
.rek-row__icon { opacity: .5; font-size: .8rem; flex-shrink: 0; }
.rek-row--owner {
  grid-column: 1/-1; justify-content: center; cursor: default;
  background: transparent; border: none; padding: 4px 0 0;
}
.rek-row--owner:hover { border: none; }
.rek-row__owner { font-size: .82rem; color: var(--muted); font-style: italic; }

/* ------- Manifest Table (read-only block-seat) ------- */
.manifest-card { padding: 0; overflow: hidden; margin-bottom: 14px; }
.manifest-card__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}
.manifest-card__title { font-weight: 700; font-size: 1rem; }
.manifest-card__count {
  font-size: .78rem; color: var(--muted);
  background: var(--bg); padding: 2px 10px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.manifest-table-wrap { overflow-x: auto; }
.manifest-table {
  width: 100%; border-collapse: collapse;
  font-size: .85rem; font-variant-numeric: tabular-nums;
}
.manifest-table thead th {
  text-align: left; font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  padding: 10px 12px; background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0;
}
.manifest-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.manifest-table tbody tr:last-child td { border-bottom: none; }
.manifest-table__num { color: var(--muted); font-size: .78rem; }
.manifest-table__nama { font-weight: 600; }
.manifest-table__title { font-size: .78rem; color: var(--muted); text-transform: uppercase; }
.manifest-table__paspor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.manifest-table__row--leader td { background: rgba(99,102,241,.05); }
.role-badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-pill);
  letter-spacing: .04em; text-transform: uppercase;
}
.role-badge--tl { background: rgba(99,102,241,.15); color: #4f46e5; }
.role-badge--mth { background: rgba(16,185,129,.15); color: #047857; }
.role-badge--jamaah { background: rgba(148,163,184,.15); color: var(--muted); }
.manifest-table__seat-req { text-align: center; }
.manifest-table__catatan { font-size: .82rem; color: var(--text); max-width: 280px; }

/* Manifest table responsive — card mode pas screen <640px supaya gak butuh
   horizontal scroll yang awkward di HP. Tiap row jadi 1 card stack. */
@media (max-width: 640px) {
  .manifest-table-wrap { overflow-x: visible; }
  .manifest-table thead { display: none; }
  .manifest-table, .manifest-table tbody, .manifest-table tr, .manifest-table td { display: block; width: 100%; }
  .manifest-table tr { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); position: relative; }
  .manifest-table tr:last-child { border-bottom: none; }
  .manifest-table td { padding: 2px 0 2px 96px; border: none; min-height: 22px; position: relative; }
  .manifest-table td::before {
    content: attr(data-label);
    position: absolute; left: 0; top: 2px; width: 88px;
    font-size: .65rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); font-weight: 700;
  }
  .manifest-table__num { padding-left: 0 !important; font-weight: 700; font-size: .9rem; color: var(--text); }
  .manifest-table__num::before { display: none; }
  .manifest-table__catatan { max-width: none; }
}
.seat-chip {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill);
}
.seat-chip--window { background: rgba(59,130,246,.12); color: #1d4ed8; }
.seat-chip--middle { background: rgba(245,158,11,.12); color: #b45309; }
.seat-chip--aisle  { background: rgba(20,184,166,.12); color: #0f766e; }

/* ------- Feedback Jamaah ------- */
.feedback-overview {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.feedback-overview__cell {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 16px 14px; text-align: center;
}
.feedback-overview__num {
  font-size: 2rem; font-weight: 800; color: var(--text); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.feedback-overview__small {
  font-size: 0.9rem; color: var(--muted); font-weight: 600;
}
.feedback-overview__lbl {
  margin-top: 6px; font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text);
}
.feedback-overview__sub { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.feedback-entry__komentar { white-space: pre-line; }
.feedback-summaries {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.feedback-summary { margin-bottom: 0; }
.feedback-summary__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.feedback-summary__icon { font-size: 1.8rem; line-height: 1; }
.feedback-summary__title { font-weight: 700; font-size: .95rem; }
.feedback-summary__count { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.feedback-summary__ratings { display: flex; flex-direction: column; gap: 8px; }
.feedback-summary__row {
  display: grid; grid-template-columns: 110px 1fr 40px;
  align-items: center; gap: 8px;
}
.feedback-summary__lbl { font-size: .78rem; color: var(--muted); }
.feedback-summary__bar { height: 6px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.feedback-summary__bar-fill { height: 100%; background: var(--grad-primary); border-radius: var(--r-pill); transition: width .3s ease-out; }
.feedback-summary__val { font-weight: 700; font-size: .82rem; text-align: right; color: var(--primary-dark); font-variant-numeric: tabular-nums; }

.feedback-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); margin: 0 0 12px;
}
.feedback-tab {
  flex: 1; text-align: center; padding: 9px 12px;
  border-radius: var(--r-sm);
  text-decoration: none; color: var(--muted);
  font-size: .88rem; font-weight: 600;
  transition: background .12s, color .12s;
}
.feedback-tab:hover { color: var(--text); }
.feedback-tab--active {
  background: var(--surface); color: var(--primary-dark);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft);
}

.feedback-list { display: flex; flex-direction: column; gap: 10px; }
.feedback-entry {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 14px;
}
.feedback-entry__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 12px;
}
.feedback-entry__profile { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.feedback-entry__avatar {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-soft);
}
.feedback-entry__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feedback-entry__avatar-fallback {
  font-weight: 700; font-size: .82rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.feedback-entry__meta { min-width: 0; }
.feedback-entry__name { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.feedback-entry__sub {
  font-size: .73rem; color: var(--muted); margin-top: 2px;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.feedback-entry__dot { opacity: 0.5; }
.feedback-entry__date { font-size: .72rem; color: var(--muted); flex-shrink: 0; padding-top: 4px; }
.feedback-entry__ratings { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.feedback-rating { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; gap: 8px; }
.feedback-rating__lbl { color: var(--muted); }
.feedback-rating__stars { color: #f59e0b; font-size: .85rem; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.feedback-entry__komentar {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.feedback-entry__komentar-block {
  display: flex; flex-direction: column; gap: 3px;
}
.feedback-entry__komentar-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.feedback-entry__komentar-text {
  font-size: .88rem; color: var(--text);
  line-height: 1.5; white-space: pre-line;
}

/* ------- Block Seat / PNR ------- */
.pnr-card { padding: 0; overflow: hidden; }
.pnr-card__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; background: var(--grad-hero); color: #fff;
}
.pnr-card__brand { font-weight: 700; font-size: 1rem; }
.pnr-card__code {
  background: rgba(255,255,255,.18); padding: 3px 12px;
  border-radius: var(--r-pill); font-weight: 800;
  letter-spacing: 1px; font-size: .85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pnr-card__primary {
  display: flex; align-items: center; justify-content: space-around;
  padding: 18px 14px; gap: 6px; background: var(--surface-2);
}
.pnr-card__pax { text-align: center; flex: 1; }
.pnr-card__pax-val {
  font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.pnr-card__pax-lbl {
  font-size: .68rem; color: var(--muted); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.pnr-card__divider { width: 1px; align-self: stretch; background: var(--border-soft); }
.pnr-card .kv { padding: 14px 18px; }
.pnr-card__timelimits { padding: 14px 16px; border-top: 1px solid var(--border-soft); }
.pnr-card__timelimits-head {
  font-size: .76rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 10px;
}
.pnr-card__timelimits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pnr-tl {
  background: var(--surface-2); padding: 8px 10px;
  border-radius: var(--r-sm); border: 1px solid var(--border-soft);
}
.pnr-tl__lbl { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.pnr-tl__date { font-weight: 700; font-size: .85rem; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ------- Page header ------- */
.page-header { margin: 8px 0 18px; }
.page-header__title {
  margin: 0; font-size: 1.6rem; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.15;
}
.page-header__sub { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }

/* ------- Profile page ------- */
.profile-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
}
.profile-card__avatar {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--grad-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.8rem; flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s;
}
.profile-card__avatar:hover { transform: scale(1.03); box-shadow: var(--shadow-md); }
.profile-card__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.profile-card__avatar-edit {
  position: absolute; bottom: 0; right: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.profile-card__avatar-form { margin: 0; }
.profile-card__hint { margin-top: 6px; font-size: .72rem; }
.profile-card__main { min-width: 0; }
.profile-card__name {
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: -0.015em;
}
.profile-card__role {
  font-size: .82rem; color: var(--muted); margin-top: 3px;
  font-weight: 600;
}
.profile-card__email {
  font-size: .8rem; color: var(--muted); margin-top: 4px;
  word-break: break-all;
}

.profile-actions { display: flex; flex-direction: column; gap: 6px; }
.profile-action {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
  transition: background .12s, border-color .12s;
}
.profile-action:hover { background: var(--primary-soft); border-color: var(--primary); }
.profile-action--theme:hover { background: var(--surface-2); border-color: var(--border-soft); cursor: default; }
.profile-action__icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.profile-action__main { flex: 1; min-width: 0; }
.profile-action__name { font-weight: 600; font-size: .92rem; }
.profile-action__sub { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.profile-action__chev {
  color: var(--muted); font-size: 1.4rem; line-height: 1;
  font-weight: 300;
}

/* ------- AI Quick Add (budget entry) ------- */
.ai-quick {
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 100%);
}
:root[data-theme="dark"] .ai-quick {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, var(--surface)) 0%, var(--surface) 100%);
}
.ai-quick__head {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 14px;
}
.ai-quick__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--grad-primary); color: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 6px 14px -6px rgba(30, 58, 138, .5);
  flex-shrink: 0;
}
.ai-quick__icon svg { width: 22px; height: 22px; }
.ai-quick__title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.ai-quick__sub { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }

.ai-quick__form { display: flex; flex-direction: column; gap: 8px; }
.ai-quick__input {
  width: 100%; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: inherit; font-size: .95rem; color: var(--text); line-height: 1.5;
  resize: none; min-height: 64px; overflow: hidden;
}
.ai-quick__input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.ai-quick__btn { align-self: flex-start; }
.ai-quick__status {
  margin-top: 12px; padding: 10px 14px; font-size: .88rem; line-height: 1.5;
  word-break: break-word; font-weight: 500;
  border-radius: var(--r-md); border: 1px solid var(--border-soft);
  background: var(--surface-2); color: var(--text);
}
.ai-quick__status:empty { display: none; }
.ai-quick__status--loading {
  background: var(--primary-soft); color: var(--primary-dark);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  animation: pulse-bg 1.5s ease-in-out infinite;
}
@keyframes pulse-bg {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}
.ai-quick__status--ok {
  background: var(--success-soft); color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.ai-quick__status--error {
  background: var(--danger-soft); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  font-weight: 600;
}

/* Tabs Ketik / Scan / Suara */
.ai-quick__tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.ai-quick__tab {
  flex: 1; padding: 8px 6px;
  border: 0; background: transparent;
  border-radius: var(--r-sm);
  font-family: inherit; font-size: .85rem; font-weight: 600;
  color: var(--muted); cursor: pointer;
  transition: background .12s, color .12s;
}
.ai-quick__tab:hover { color: var(--text); }
.ai-quick__tab--active {
  background: var(--surface); color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}

.ai-quick__panel { animation: fade-in .15s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Inline mic di Ketik textarea */
.ai-quick__input-wrap { position: relative; }
.ai-quick__mic-inline {
  position: absolute; right: 8px; bottom: 8px;
  width: 32px; height: 32px; padding: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  cursor: pointer; font-size: 1rem; line-height: 1;
  transition: background .12s, transform .08s;
}
.ai-quick__mic-inline:hover { background: var(--primary-soft); border-color: var(--primary); }
.ai-quick__mic-inline:active { transform: scale(.94); }

/* Scan struk panel */
.ai-quick__scan {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  padding: 18px 12px;
  background: var(--surface); border: 2px dashed var(--border);
  border-radius: var(--r-md);
}
.ai-quick__scan-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--success-soft); color: var(--success);
  border-radius: 16px;
}
.ai-quick__scan-icon svg { width: 30px; height: 30px; }
.ai-quick__scan-title { font-weight: 700; font-size: 1rem; }
.ai-quick__scan-sub { font-size: .82rem; color: var(--muted); max-width: 340px; line-height: 1.45; }
.ai-quick__scan-actions {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 320px; margin-top: 6px;
}
.ai-quick__scan-btn { justify-content: center; }
.ai-quick__scan-hint { font-size: .72rem; color: var(--muted); margin-top: 4px; }

/* Suara panel */
.ai-quick__voice {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px 16px;
}
.ai-quick__voice-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 18px; min-width: 220px;
  background: var(--primary-soft); color: var(--primary-dark);
  border: 2px solid var(--primary);
  border-radius: var(--r-lg);
  font-family: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer;
  transition: background .12s, transform .08s, box-shadow .12s;
}
.ai-quick__voice-btn:hover { background: color-mix(in srgb, var(--primary) 15%, var(--surface)); }
.ai-quick__voice-btn:active { transform: scale(.98); }
.ai-quick__voice-btn--active {
  background: var(--danger);
  color: #fff; border-color: var(--danger);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); }
  50% { box-shadow: 0 0 0 12px transparent; }
}
.ai-quick__voice-mic { font-size: 2.2rem; line-height: 1; }
.ai-quick__voice-hint {
  font-size: .78rem; color: var(--muted);
  text-align: center; max-width: 320px; line-height: 1.45;
}

/* ------- AI Draft preview (GrowWallet-style) ------- */
.ai-draft {
  margin-top: 14px; padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  animation: fade-in .18s ease-out;
}
.ai-draft__head {
  font-size: .68rem; font-weight: 800; color: var(--muted);
  letter-spacing: 1.2px; margin-bottom: 10px;
  text-transform: uppercase;
}
.ai-draft__card {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.ai-draft__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.ai-draft__main { flex: 1; min-width: 0; }
.ai-draft__title {
  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: capitalize;
}
.ai-draft__meta {
  font-size: .76rem; color: var(--muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-draft__amount { text-align: right; flex-shrink: 0; }
.ai-draft__nominal {
  font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ai-draft__nominal--out { color: var(--danger); }
.ai-draft__nominal--in { color: var(--success); }
.ai-draft__conf {
  font-size: .68rem; color: var(--muted); margin-top: 4px;
  font-weight: 600;
}
.ai-draft__conf--high { color: var(--success); }
.ai-draft__conf--low { color: var(--danger); }
.ai-draft__notes {
  margin-top: 8px; padding: 8px 12px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .78rem; color: var(--text); font-style: italic;
}

.ai-draft__actions {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  margin-top: 14px;
}
.ai-draft__btn-cancel {
  padding: 13px 22px; font-weight: 600; font-size: .92rem;
  border-radius: var(--r-md);
}
.ai-draft__btn-save {
  padding: 13px 22px;
  background: var(--success); color: #fff;
  border: 0; border-radius: var(--r-md);
  font-family: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .12s, transform .08s, box-shadow .12s;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--success) 65%, transparent);
}
.ai-draft__btn-save:hover { background: #047857; }
.ai-draft__btn-save:active { transform: scale(.98); }
.ai-draft__btn-save:disabled { opacity: .6; cursor: not-allowed; }

/* ------- Plan vs Realisasi per Item ------- */
.plan-group {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden;
}
.plan-group__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; cursor: pointer; gap: 12px;
  background: var(--surface-2); list-style: none;
}
.plan-group__head::-webkit-details-marker { display: none; }
.plan-group__name { font-weight: 700; font-size: .92rem; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-group__totals {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem;
}
.plan-group__realized { color: var(--text); }
.plan-group__sep { color: var(--muted); font-weight: 400; }
.plan-group__budget { color: var(--muted); }
.plan-group__chev { color: var(--muted); transition: transform .15s; margin-left: 4px; }
.plan-group[open] .plan-group__chev { transform: rotate(180deg); }

.plan-list { padding: 4px 14px 12px; }
.plan-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.plan-row:last-child { border-bottom: 0; }
.plan-row__main { flex: 1; min-width: 0; }
.plan-row__name {
  font-weight: 600; font-size: .88rem; margin-bottom: 6px;
  word-break: break-word;
}
.plan-row__formula {
  font-size: .72rem; color: var(--muted);
  margin: -3px 0 6px;
  font-variant-numeric: tabular-nums;
}
.plan-row__formula::before {
  content: '🧮 '; opacity: .7;
}
.plan-row__bar {
  height: 6px; background: var(--surface-2); border-radius: var(--r-pill);
  overflow: hidden; position: relative;
}
.plan-row__bar-fill {
  height: 100%; border-radius: var(--r-pill);
  transition: width .3s ease-out;
}
.plan-row--ok .plan-row__bar-fill { background: var(--success); }
.plan-row--warn .plan-row__bar-fill { background: #d97706; }
.plan-row--over .plan-row__bar-fill { background: var(--danger); width: 100%; }
.plan-row--empty .plan-row__bar-fill { width: 0; }
.plan-row__nums { text-align: right; flex-shrink: 0; min-width: 110px; }
.plan-row__amounts {
  font-size: .85rem; font-variant-numeric: tabular-nums;
}
.plan-row__realized { font-weight: 700; color: var(--text); }
.plan-row__sep { color: var(--muted); margin: 0 2px; }
.plan-row__budget { color: var(--muted); }
.plan-row__status { margin-top: 2px; font-size: .72rem; }
.plan-row--ok .plan-row__pct { color: var(--success); }
.plan-row--warn .plan-row__pct { color: #d97706; }
.plan-row--over .plan-row__pct { color: var(--danger); font-weight: 700; }
.plan-row--empty .plan-row__pct { color: var(--muted); font-style: italic; }

/* ============ Broadcast sub-nav + hotel filter ============ */
.broadcast-tabs {
  display: flex; gap: 6px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 0;
}
.broadcast-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: .88rem; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.broadcast-tab__icon {
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .85;
}
.broadcast-tab__icon svg { width: 16px; height: 16px; }
.broadcast-tab:hover { color: var(--text); }
.broadcast-tab--active {
  color: var(--primary); border-bottom-color: var(--primary);
  font-weight: 600;
}
.broadcast-tab--active .broadcast-tab__icon { opacity: 1; }

.city-pills {
  display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}

/* ============ Broadcast category sections ============ */
.broadcast-category { margin-bottom: 28px; }
.broadcast-category__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.broadcast-category__icon {
  font-size: 1.1rem; line-height: 1;
}
.broadcast-category__name {
  margin: 0; font-size: .92rem; font-weight: 600;
  letter-spacing: -0.005em; color: var(--text);
  flex: 1;
}
.broadcast-category__count {
  font-size: .68rem; font-weight: 600;
  background: var(--surface-2); color: var(--muted);
  padding: 3px 9px; border-radius: 999px;
  letter-spacing: 0.3px;
}

/* ------- Checklist Tugas TL (Todomoon-style) ------- */
.todo-filters {
  display: flex; gap: 6px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  margin: 14px 0; flex-wrap: wrap;
}
.todo-filter {
  flex: 1; min-width: 70px; text-align: center;
  padding: 8px 10px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--muted);
  font-size: .82rem; font-weight: 600;
  transition: background .12s, color .12s;
}
.todo-filter:hover { color: var(--text); }
.todo-filter--active {
  background: var(--surface); color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}

.todo-group { margin-bottom: 14px; }
.todo-group__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 4px 4px 8px;
}
.todo-group__label {
  margin: 0; font-size: .92rem; font-weight: 700;
  letter-spacing: -0.01em;
}
.todo-group--overdue .todo-group__label { color: var(--danger); }
.todo-group--today .todo-group__label { color: var(--primary-dark); }
.todo-group--done .todo-group__label { color: var(--success); }
.todo-group__count {
  background: var(--surface-2); color: var(--muted);
  font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-pill);
}

.todo-list { display: flex; flex-direction: column; gap: 6px; }

.todo-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  margin: 0; cursor: default;
  transition: background .12s, border-color .12s, opacity .12s;
}
.todo-row:hover { border-color: var(--primary); }
.todo-row--done { opacity: .55; }
.todo-row--done .todo-row__title { text-decoration: line-through; color: var(--muted); }
.todo-row--overdue { border-left: 3px solid var(--danger); }

.todo-row__check {
  flex-shrink: 0; width: 26px; height: 26px;
  border: 2px solid var(--border); background: var(--surface);
  border-radius: 8px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background .12s, border-color .12s, transform .08s;
}
.todo-row__check:hover { border-color: var(--primary); background: var(--primary-soft); }
.todo-row__check:active { transform: scale(.92); }
.todo-row--done .todo-row__check {
  background: var(--success); border-color: var(--success);
}
.todo-row--overdue .todo-row__check { border-color: var(--danger); }

.todo-row__main { flex: 1; min-width: 0; }
.todo-row__title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .95rem; line-height: 1.3;
}
.todo-row__icon { font-size: 1.05rem; line-height: 1; }
.todo-row__meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 5px; font-size: .76rem; color: var(--muted);
}
.todo-row__due {
  font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--surface-2);
}
.todo-row__due--overdue { background: var(--danger-soft); color: var(--danger); }
.todo-row__due--done { background: var(--success-soft); color: var(--success); }
.todo-row__due--ok { background: var(--primary-soft); color: var(--primary-dark); }
.todo-row__cat {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  padding: 1px 7px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .3px; font-size: .65rem; font-weight: 700;
}
.todo-row__req { color: var(--muted); font-style: italic; }
.todo-row__desc {
  margin-top: 5px; font-size: .82rem; color: var(--muted);
  line-height: 1.45;
}

/* ─── Video harian ─── */
.video-hero { background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 100%); }
.video-hero__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.video-hero__title { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.video-hero__sub { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.video-hero__progress { text-align: right; }
.video-hero__count { font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1; }
.video-hero__pct { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.video-hero__bar {
  margin-top: 12px; height: 6px; border-radius: 6px;
  background: var(--surface-2); overflow: hidden;
}
.video-hero__bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--primary), #60a5fa);
  transition: width .3s;
}
.video-hero__note { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: .85rem; line-height: 1.45; }
.video-hero__note--wajib { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.video-hero__note--ok    { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.video-hero__note--done  { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
:root[data-theme="dark"] .video-hero__note--wajib { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
:root[data-theme="dark"] .video-hero__note--ok    { background: #1e1b4b; color: #a5b4fc; border-color: #312e81; }
:root[data-theme="dark"] .video-hero__note--done  { background: #064e3b; color: #6ee7b7; border-color: #065f46; }

.video-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.video-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; background: var(--surface-2); border-radius: 10px;
  border: 1px solid var(--border-soft);
}
.video-row__date {
  flex-shrink: 0; font-size: .75rem; font-weight: 700; color: var(--muted);
  padding: 4px 8px; background: var(--surface); border-radius: 6px;
  border: 1px solid var(--border-soft); min-width: 56px; text-align: center;
}
.video-row__body { flex: 1; min-width: 0; }
.video-row__link {
  font-weight: 600; word-break: break-all;
  color: var(--primary); text-decoration: none;
}
.video-row__link:hover { text-decoration: underline; }
.video-row__caption { margin-top: 4px; font-size: .85rem; color: var(--text); }
.video-row__meta { margin-top: 4px; display: flex; gap: 6px; align-items: center; font-size: .75rem; }

/* Brief konten (Content TL dari sosmed) — list claimable di /paket/:id/video */
.video-briefs__hint { margin: 0 0 12px; font-size: .85rem; }
.brief-list { display: flex; flex-direction: column; gap: 10px; }
.brief-card {
  display: block; padding: 14px;
  background: var(--surface); border: 1.5px solid var(--border-soft);
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.brief-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.brief-card--open { border-left: 4px solid var(--primary); }
.brief-card--mine {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.brief-card__head {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.brief-card__title {
  margin: 0 0 6px; font-size: 1rem; font-weight: 700;
  line-height: 1.3;
}
.brief-card__desc {
  margin: 0 0 10px; font-size: .85rem; color: var(--text);
  line-height: 1.4;
}
.brief-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.brief-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .2px;
  background: var(--surface-2); color: var(--muted);
}
.brief-tag--role { background: var(--primary-soft); color: var(--primary-dark); }
.brief-tag--deadline { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.brief-tag--mine { background: var(--success); color: #fff; }
.brief-tag--ziarah, .brief-tag--fiqih, .brief-tag--sejarah,
.brief-tag--tips, .brief-tag--adab, .brief-tag--lain {
  background: var(--primary-soft); color: var(--primary-dark);
}
.btn--sm { padding: 6px 14px; font-size: .85rem; }

/* Teaser card — link ke halaman brief lengkap */
.brief-teaser {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin: 16px 0;
  background: var(--surface); border: 1.5px solid var(--border-soft);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s;
}
.brief-teaser:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.brief-teaser__main { flex: 1; min-width: 0; }
.brief-teaser__title { font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
.brief-teaser__sub { font-size: .85rem; color: var(--muted); }
.brief-teaser__cta { display: flex; align-items: center; gap: 8px; }
.brief-teaser__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 8px;
  background: var(--primary); color: #fff;
  border-radius: 999px; font-weight: 700; font-size: .85rem;
}
.brief-teaser__chev { font-size: 1.4rem; color: var(--muted); line-height: 1; }

/* Filters di halaman briefs */
.brief-filters {
  display: flex; gap: 8px; margin: 16px 0;
  flex-wrap: wrap;
}
.brief-filters__q { flex: 1; min-width: 180px; }
.brief-filters__select { max-width: 180px; }

/* Comment thread = chat bubble style (TL ↔ sosmed ↔ admin) */
.comment-thread { margin-top: 14px; }
.comment-empty {
  text-align: center; color: var(--muted);
  padding: 24px 0; font-style: italic;
}
.comment-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
  max-height: 520px; overflow-y: auto;
  padding: 6px 4px 6px 0;
}

/* Row = container 1 message, kontrol alignment kiri/kanan */
.chat-row {
  display: flex; width: 100%;
}
.chat-row--other { justify-content: flex-start; }
.chat-row--mine { justify-content: flex-end; }

/* Bubble: max 75% width, rounded, padded */
.chat-bubble {
  max-width: 75%;
  padding: 8px 12px 6px;
  border-radius: 16px;
  word-wrap: break-word;
  position: relative;
}
.chat-row--other .chat-bubble {
  background: var(--surface-2);
  border-top-left-radius: 4px;
  color: var(--text);
}
.chat-row--mine .chat-bubble {
  background: var(--primary);
  border-top-right-radius: 4px;
  color: #fff;
}

/* Author header — hanya muncul di pesan orang lain */
.chat-bubble__author {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 2px;
  font-size: .76rem;
}
.chat-bubble__name {
  font-weight: 700;
}
.chat-bubble__name--admin { color: #b45309; }
.chat-bubble__name--sosmed { color: #7c3aed; }
.chat-bubble__name--tl,
.chat-bubble__name--muthowwif { color: var(--primary-dark); }
.chat-bubble__name--default { color: var(--text); }
.chat-bubble__role {
  display: inline-block; padding: 0 6px;
  background: rgba(0,0,0,.06); border-radius: 999px;
  font-size: .64rem; font-weight: 600; letter-spacing: .2px;
  color: var(--muted);
}

.chat-bubble__body {
  font-size: .92rem; line-height: 1.4;
  white-space: pre-wrap; word-wrap: break-word;
}
.chat-bubble__time {
  font-size: .68rem;
  text-align: right;
  margin-top: 2px;
  opacity: .65;
}
.chat-row--mine .chat-bubble__time { color: rgba(255,255,255,.85); }
.chat-row--other .chat-bubble__time { color: var(--muted); }

.chat-bubble__image-link { display: inline-block; margin-top: 6px; }
.chat-bubble__image {
  max-width: 240px; max-height: 240px;
  border-radius: 10px; border: 1px solid rgba(0,0,0,.08);
  display: block;
}

/* Form input komentar */
.comment-form {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.comment-form__input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: 14px;
  font: inherit; resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.comment-form__input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.comment-form__bar {
  display: flex; align-items: center; gap: 12px;
}
.comment-form__hint { margin-left: auto; }

/* Banner "video sudah tayang" + tombol final URL */
.content-final {
  border-left: 4px solid var(--success);
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}
.content-final__head { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.content-final__btn { margin-top: 8px; }
.content-final__url {
  margin-top: 8px; font-family: ui-monospace, monospace;
  word-break: break-all;
}

/* Unclaim block */
.content-unclaim {
  border-left: 4px solid var(--border);
  background: var(--surface-2);
}
.content-unclaim p { margin: 0 0 8px; }

/* Alert danger (cancelled / rejected) */
.alert--danger {
  background: var(--danger-soft); color: var(--danger);
  border-radius: 10px; padding: 12px 14px;
  margin: 12px 0;
  border-left: 4px solid var(--danger);
}

.btn-icon {
  background: none; border: 0; padding: 6px 8px;
  cursor: pointer; font-size: 1rem; border-radius: 6px;
  color: var(--muted);
}
.btn-icon:hover { background: var(--surface); color: var(--danger); }

/* Admin muthowwif list — paket assignment disclosure */
.muth-paket-list { font-size: 0.85rem; }
.muth-paket-list summary {
  cursor: pointer; font-weight: 600; color: var(--primary);
  list-style: none; user-select: none;
}
.muth-paket-list summary::-webkit-details-marker { display: none; }
.muth-paket-list summary::before {
  content: '▸'; display: inline-block; margin-right: 4px;
  transition: transform 0.15s;
}
.muth-paket-list[open] summary::before { transform: rotate(90deg); }
.muth-paket-list ul {
  list-style: none; padding: 6px 0 0 16px; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.muth-paket-list li { line-height: 1.4; }
.muth-paket-list a { color: var(--text); text-decoration: none; }
.muth-paket-list a:hover { text-decoration: underline; color: var(--primary); }

/* ── Overdue summary in group header + expandable "lihat selengkapnya" ── */
.todo-group__summary {
  font-size: .7rem; color: var(--danger);
  font-weight: 500; margin-left: 8px;
}
.todo-group__more { margin-top: 8px; }
.todo-group__more-summary {
  cursor: pointer; user-select: none;
  padding: 10px 14px;
  background: var(--surface-2); border: 1px dashed var(--border-soft);
  border-radius: var(--r-sm);
  font-size: .78rem; color: var(--muted); font-weight: 500;
  text-align: center;
  list-style: none;
}
.todo-group__more-summary::-webkit-details-marker { display: none; }
.todo-group__more-summary:hover { color: var(--text); border-color: var(--border); }
.todo-group__more[open] .todo-group__more-summary {
  margin-bottom: 8px;
  background: transparent; border-style: solid;
}

/* ------- Budget manual: AI suggest COA ------- */
.kurs-form__hint {
  display: block; margin-top: 5px;
  font-size: .76rem; color: var(--muted); font-style: italic;
}
.bf-suggest__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px;
}
.bf-suggest__status {
  margin-top: 6px; font-size: .82rem;
  padding: 0;
}
.bf-suggest__status:not(:empty) {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
}
.bf-suggest__status--loading {
  background: var(--primary-soft); color: var(--primary-dark);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.bf-suggest__status--ok {
  background: var(--success-soft); color: var(--success);
  border-color: color-mix(in srgb, var(--success) 25%, transparent);
}
.bf-suggest__status--error {
  background: var(--danger-soft); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
}

.bf-suggest__list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.bf-suggest__card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.bf-suggest__card:hover { border-color: var(--primary); }
.bf-suggest__card:has(input:checked) {
  background: var(--primary-soft); border-color: var(--primary);
}
.bf-suggest__card input { margin-top: 3px; accent-color: var(--primary); }
.bf-suggest__card-main { flex: 1; min-width: 0; }
.bf-suggest__card-name {
  font-weight: 600; font-size: .9rem; line-height: 1.3;
}
.bf-suggest__card-reason {
  margin-top: 3px; font-size: .76rem; color: var(--muted);
  font-style: italic; line-height: 1.4;
}

.bf-suggest__show-all {
  margin-top: 10px; display: inline-block;
  font-size: .82rem; color: var(--primary);
  text-decoration: underline; cursor: pointer;
  background: none; border: 0; padding: 0;
  font-family: inherit;
}
.bf-suggest__show-all:hover { color: var(--primary-dark); }
.bf-suggest__fallback { margin-top: 8px; }

/* ─── Admin paket list assignee chips ─── */
.assignee-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-width: 0; /* allow chip overflow indicator without clipping */
}
.assignee-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  font-size: .75rem; font-weight: 600;
  border: 1px solid var(--border-soft);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .02em;
  /* Force background extend ke seluruh chip walau ada child overflow di parent narrow */
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 100%;
}
.assignee-chip > * { flex-shrink: 0; }
.assignee-bell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  line-height: 1;
}
.assignee-bell--on  { color: #16a34a; } /* green-600 — push aktif */
.assignee-bell--off { color: #dc2626; } /* red-600 — push belum aktif */

/* Quiz score nempel inline di chip assignee — plain text, klik → /admin/quiz/attempts */
.assignee-quiz {
  display: inline-flex; align-items: center;
  font-size: .7rem; font-weight: 700;
  text-decoration: none;
  border-left: 1px solid currentColor;
  padding-left: 5px;
  margin-left: 1px;
  opacity: .85;
}
.assignee-quiz:hover { text-decoration: none; opacity: 1; }
.assignee-quiz--none { color: var(--muted); opacity: .55; }
.assignee-quiz--pass { color: #047857; }
.assignee-quiz--fail { color: #b91c1c; }

/* Impersonate button di chip — kecil, ghost style, force size konsisten */
.assignee-imp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: transparent; border: 0;
  padding: 0; margin: 0 -2px 0 1px;
  font-size: 11px; line-height: 1; cursor: pointer;
  border-radius: 4px;
  opacity: .55; transition: opacity .12s, background .12s;
  color: var(--primary);
}
.assignee-imp:hover {
  opacity: 1;
  background: rgba(99,102,241,.15);
}

/* ─── Feedback category cards (mirip legacy SGO) ─── */
.feedback-cat-list { display: flex; flex-direction: column; gap: 14px; }

.feedback-cat {
  display: flex; gap: 12px; align-items: flex-start;
}
.feedback-cat__num {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; color: white;
  background: var(--primary);
  margin-top: 2px;
}
.feedback-cat__num--excellent { background: #16a34a; }
.feedback-cat__num--good      { background: #2563eb; }
.feedback-cat__num--average   { background: #f59e0b; }
.feedback-cat__num--poor      { background: #ea580c; }
.feedback-cat__num--bad       { background: #dc2626; }
.feedback-cat__num--empty     { background: var(--muted); opacity: .5; }

.feedback-cat__body { flex: 1; min-width: 0; }
.feedback-cat__title {
  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;
  margin-bottom: 8px; line-height: 1.3;
}
.feedback-cat__rating {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px 14px;
}
.feedback-cat__rating--excellent { background: #f0fdf4; border-color: #bbf7d0; }
.feedback-cat__rating--good      { background: #eff6ff; border-color: #bfdbfe; }
.feedback-cat__rating--average   { background: #fffbeb; border-color: #fde68a; }
.feedback-cat__rating--poor      { background: #fff7ed; border-color: #fed7aa; }
.feedback-cat__rating--bad       { background: #fef2f2; border-color: #fecaca; }
:root[data-theme="dark"] .feedback-cat__rating--excellent { background: #052e1b; border-color: #14532d; }
:root[data-theme="dark"] .feedback-cat__rating--good      { background: #0c1e3d; border-color: #1e3a8a; }
:root[data-theme="dark"] .feedback-cat__rating--average   { background: #2d1f06; border-color: #78350f; }
:root[data-theme="dark"] .feedback-cat__rating--poor      { background: #2c180a; border-color: #7c2d12; }
:root[data-theme="dark"] .feedback-cat__rating--bad       { background: #2b0d0d; border-color: #7f1d1d; }

.feedback-cat__rating-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.feedback-cat__rata {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-soft);
}
.feedback-cat__responden { font-size: .78rem; color: var(--muted); }
.feedback-cat__badge {
  margin-left: auto;
  padding: 4px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  color: white;
}
.feedback-cat__badge--excellent { background: linear-gradient(135deg, #16a34a, #65a30d); }
.feedback-cat__badge--good      { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.feedback-cat__badge--average   { background: linear-gradient(135deg, #f59e0b, #f97316); }
.feedback-cat__badge--poor      { background: linear-gradient(135deg, #ea580c, #dc2626); }
.feedback-cat__badge--bad       { background: linear-gradient(135deg, #dc2626, #991b1b); }

.feedback-cat__rating-body {
  display: flex; align-items: center; gap: 12px;
}
.feedback-cat__stars {
  display: inline-flex; align-items: center; gap: 2px;
  color: #f59e0b; /* gold */
}
.feedback-cat__value {
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
}

/* ─── Feedback percent variant (boolean aggregates) ─── */
.feedback-cat__bar {
  height: 12px; border-radius: 6px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
  margin-top: 4px;
}
:root[data-theme="dark"] .feedback-cat__bar { background: rgba(255,255,255,0.08); }
.feedback-cat__bar-fill {
  height: 100%; border-radius: 6px;
  transition: width .35s ease;
}
.feedback-cat__bar-fill--excellent { background: linear-gradient(90deg, #16a34a, #65a30d); }
.feedback-cat__bar-fill--good      { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.feedback-cat__bar-fill--average   { background: linear-gradient(90deg, #f59e0b, #f97316); }
.feedback-cat__bar-fill--poor      { background: linear-gradient(90deg, #ea580c, #dc2626); }
.feedback-cat__bar-fill--bad       { background: linear-gradient(90deg, #dc2626, #991b1b); }
.feedback-cat__percent {
  margin-top: 6px;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
  text-align: right;
}

/* ─── Feedback half-star (layered SVG via clip-path) ─── */
.fb-star {
  position: relative;
  display: inline-block;
  width: 18px; height: 18px;
  line-height: 0;
}
.fb-star svg { width: 18px; height: 18px; display: block; }
.fb-star--half svg { position: absolute; top: 0; left: 0; }
.fb-star--half .fb-star__half-fill {
  clip-path: inset(0 50% 0 0);
}

/* ─── Feedback aspect card sebagai link + drill-down detail ─── */
.feedback-cat--link {
  text-decoration: none; color: inherit;
  border-radius: 12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.feedback-cat--link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.feedback-cat__chev {
  display: inline-block; margin-left: 6px;
  color: var(--muted); font-weight: 400;
  opacity: 0; transition: opacity .15s, transform .15s;
}
.feedback-cat--link:hover .feedback-cat__chev {
  opacity: 1; transform: translateX(3px);
}

/* ─── Aspect detail page ─── */
.feedback-aspect-hero { display: flex; flex-direction: column; gap: 12px; }
.feedback-aspect-hero__kind {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.feedback-aspect-hero__label {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.015em;
}

.aspect-jamaah-list { list-style: none; padding: 0; margin: 0; }
.aspect-jamaah-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-soft);
}
.aspect-jamaah-row:last-child { border-bottom: 0; }
.aspect-jamaah-row__rating {
  display: flex; align-items: center; gap: 8px;
}
.aspect-jamaah-row__val {
  font-weight: 700; font-size: .9rem;
}
.aspect-jamaah-row__pct {
  display: flex; align-items: center; gap: 8px; width: 100%;
}
.aspect-jamaah-row__pct-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: rgba(0,0,0,0.06); overflow: hidden;
}
:root[data-theme="dark"] .aspect-jamaah-row__pct-bar { background: rgba(255,255,255,0.08); }
.aspect-jamaah-row__pct-fill {
  height: 100%; border-radius: 4px;
}
.aspect-jamaah-row__bool {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700;
}
.aspect-jamaah-row__bool--yes { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.aspect-jamaah-row__bool--no  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
:root[data-theme="dark"] .aspect-jamaah-row__bool--yes { background: #064e3b; color: #6ee7b7; border-color: #065f46; }
:root[data-theme="dark"] .aspect-jamaah-row__bool--no  { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }

.aspect-jamaah-row__avatar {
  width: 36px; height: 36px; border-radius: 999px;
  overflow: hidden;
  background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aspect-jamaah-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.aspect-jamaah-row__avatar-fallback {
  color: var(--primary); font-weight: 700; font-size: .75rem;
}
.aspect-jamaah-row__name {
  font-weight: 600; font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .aspect-jamaah-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name avatar" "rating rating";
    gap: 6px 10px;
  }
  .aspect-jamaah-row__name   { grid-area: name; }
  .aspect-jamaah-row__avatar { grid-area: avatar; }
  .aspect-jamaah-row__rating { grid-area: rating; }
}

/* ─── Muthowwif row avatar (foto profile + fallback initial) ─── */
.muth-cell-name {
  display: inline-flex; align-items: center; gap: 10px;
}
.muth-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 700; font-size: .85rem;
  border: 2px solid transparent;
}
.muth-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.muth-avatar__fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.muth-avatar--tl {
  background: var(--primary-soft); color: var(--primary);
  border-color: var(--primary);
}
.muth-avatar--muth {
  background: #ede9fe; color: #7c3aed;
  border-color: #7c3aed;
}
:root[data-theme="dark"] .muth-avatar--muth { background: #2e1065; color: #a78bfa; }

/* ─── Assignment chip: tag 'TA' untuk chip dari rgiapp.jamaah_leaders ─── */
.assign-chip__src {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(0,0,0,0.08);
  font-size: .6rem; font-weight: 800; letter-spacing: .05em;
  color: var(--muted);
}
:root[data-theme="dark"] .assign-chip__src { background: rgba(255,255,255,0.12); }

/* ───── Bottom sheet "Lainnya" (mobile only — desktop pakai sidenav) ───── */
.bn-sheet { position: fixed; inset: 0; z-index: 1000; }
.bn-sheet[hidden] { display: none; }
.bn-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0; transition: opacity .2s ease;
}
.bn-sheet--open .bn-sheet__backdrop { opacity: 1; }
.bn-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface); color: var(--text);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  padding: 8px 14px max(18px, env(safe-area-inset-bottom));
  max-height: 78vh; overflow-y: auto;
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
}
.bn-sheet--open .bn-sheet__panel { transform: translateY(0); }
.bn-sheet__grip {
  width: 40px; height: 4px; margin: 6px auto 12px;
  background: var(--border-soft); border-radius: 999px; cursor: pointer;
}
.bn-sheet__title {
  font-size: 0.75rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0 6px 8px; }
.bn-sheet__tiles {
  display: grid; grid-template-columns: 1fr; gap: 6px; padding: 0 4px;
}
.bn-sheet__tile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px; border-radius: 12px;
  text-decoration: none; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  transition: background .15s, border-color .15s;
}
.bn-sheet__tile:active { background: var(--border-soft); }
.bn-sheet__tile--active { border-color: var(--primary); }
.bn-sheet__tile-icon {
  flex-shrink: 0; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border-radius: 10px;
  color: var(--primary);
}
.bn-sheet__tile-icon svg { width: 22px; height: 22px; }
.bn-sheet__tile-text { flex: 1; min-width: 0; }
.bn-sheet__tile-label { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.bn-sheet__tile-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.bn-sheet__logout { margin-top: 14px; padding: 0 4px; }
.bn-sheet__logout-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px;
  background: transparent;
  border: 1px solid var(--border-soft); border-radius: 12px;
  color: #ef4444; font-weight: 600; font-size: 0.92rem;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.bn-sheet__logout-btn:hover { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.4); }
.bn-sheet__logout-icon { display: inline-flex; }
.bn-sheet__logout-icon svg { width: 18px; height: 18px; }

body.bn-sheet-locked { overflow: hidden; }

/* Desktop: sheet tidak relevan, sidenav handle Profil + Panduan */
@media (min-width: 900px) {
  .bn-sheet { display: none; }
}

/* ─── Quick actions shortcut row di paket detail ─── */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 8px;
}
@media (max-width: 480px) {
  .quick-actions { grid-template-columns: 1fr; }
}
.quick-action {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.quick-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border-color: var(--primary);
}
.quick-action__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border-radius: 12px;
  color: var(--primary);
  flex-shrink: 0;
}
.quick-action__icon svg { width: 22px; height: 22px; }
.quick-action--primary .quick-action__icon {
  background: linear-gradient(135deg, var(--primary), #60a5fa);
  color: white;
}
.quick-action__body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.quick-action__title {
  font-weight: 700; font-size: .92rem; letter-spacing: -0.01em;
}
.quick-action__sub {
  font-size: .76rem; color: var(--muted);
}
.quick-action__chev {
  color: var(--muted); font-size: 1.3rem; line-height: 1;
  margin-left: auto; flex-shrink: 0;
}
.quick-action--primary {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-soft), var(--surface));
}

/* ───── Content Brief (TL view) ───── */
.content-section { margin-top: 18px; }
.content-section__h { font-size: 0.95rem; font-weight: 700; color: var(--muted); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.content-list { display: flex; flex-direction: column; gap: 10px; }
.content-card { display: block; padding: 14px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .15s, transform .08s; }
.content-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.content-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.content-card__title { font-weight: 700; font-size: 1rem; flex: 1; min-width: 0; }
.content-card__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.content-card__desc { font-size: 0.85rem; color: var(--muted); margin: 8px 0 0; }
.content-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--surface-2); border-radius: 999px; font-size: 0.75rem; color: var(--muted); }
.content-tag--deadline { color: var(--primary); }
.content-tag--ok { background: rgba(16,185,129,0.12); color: #059669; }

.content-pill { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.content-pill--open { background: #fef3c7; color: #92400e; }
.content-pill--sub  { background: #dbeafe; color: #1e40af; }
.content-pill--rev  { background: #f3e8ff; color: #6b21a8; }
.content-pill--done { background: #d1fae5; color: #065f46; }
.content-pill--rej  { background: #fee2e2; color: #991b1b; }
.content-pill--claim { background: #e0e7ff; color: #3730a3; }
.content-pill--revisi { background: #fef3c7; color: #92400e; }

/* Video hero breakdown chips */
.video-hero__breakdown {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 4px;
}
.vh-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: var(--surface-2);
  border-radius: 999px;
  font-size: .76rem; font-weight: 600;
}
.vh-chip--claim { background: #e0e7ff; color: #3730a3; }
.vh-chip--sub   { background: #dbeafe; color: #1e40af; }
.vh-chip--rev   { background: #f3e8ff; color: #6b21a8; }
.vh-chip--done  { background: #d1fae5; color: #065f46; }

/* ----- /content/:id detail page v2 ----- */
.brief-hero {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.brief-hero__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.brief-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.brief-hero__title {
  margin: 4px 0 4px;
  font-size: 1.35rem; line-height: 1.25; font-weight: 800;
  letter-spacing: -0.01em;
}
.brief-hero__from { margin-bottom: 12px; }

.brief-tag--deadline-future  { background: var(--surface-2); color: var(--muted); }
.brief-tag--deadline-soon    { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.brief-tag--deadline-urgent  { background: var(--danger-soft); color: var(--danger); animation: pulse-soft 2s ease-in-out infinite; }
.brief-tag--deadline-today   { background: var(--danger); color: #fff; }
.brief-tag--deadline-past    { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}

/* Helper banner: 1 baris adaptif berdasarkan status */
.brief-helper {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .9rem; line-height: 1.4;
}
.brief-helper--primary { background: var(--primary-soft); color: var(--primary-dark); }
.brief-helper--info    { background: #dbeafe; color: #1e40af; }
.brief-helper--success { background: var(--success-soft); color: var(--success); }
.brief-helper--warn    { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.brief-helper--danger  { background: var(--danger-soft); color: var(--danger); }

/* Timeline stepper */
.brief-timeline {
  display: flex; align-items: center;
  margin: 14px 0 18px;
  padding: 0 6px;
}
.tl-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-soft);
  background: var(--surface);
  font-size: 1rem;
  flex-shrink: 0;
}
.tl-dot--done {
  background: var(--success-soft);
  border-color: var(--success);
}
.tl-dot--active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.tl-dot--todo { opacity: .55; }
.tl-line {
  flex: 1; height: 2px;
  background: var(--border-soft);
  margin: 0 2px;
}
.tl-line--done { background: var(--success); }

/* Brief content blocks */
.brief-blocks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.brief-block {
  display: flex; gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.brief-block--script { background: #fffbeb; border-color: #fcd34d; }
.brief-block--notes  { background: #eff6ff; border-color: #93c5fd; }
.brief-block__icon { font-size: 1.4rem; line-height: 1; }
.brief-block__main { flex: 1; min-width: 0; }
.brief-block__label {
  font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted);
  margin-bottom: 4px;
}
.brief-block__body {
  font-size: .95rem; line-height: 1.5;
  white-space: pre-line;
}
.brief-block__pre {
  margin: 0; font-family: inherit;
  font-size: .95rem; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
}

/* Final URL panel saat status=done */
.brief-final {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--success-soft), var(--surface));
  border-left: 4px solid var(--success);
}
.brief-final__icon { font-size: 2rem; }
.brief-final__body { flex: 1; min-width: 0; }
.brief-final__title { margin: 0 0 2px; font-size: 1.05rem; }
.brief-final__cta { flex-shrink: 0; }

/* Submit action card */
.brief-action {
  padding: 16px 18px;
  margin-bottom: 14px;
}
.brief-claim-cta {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--primary) 35%, var(--border));
}
.brief-claim-cta__icon {
  flex-shrink: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  border-radius: 12px; font-size: 22px;
}
.brief-claim-cta__body { flex: 1; min-width: 0; }
.brief-claim-cta__title { margin: 0 0 6px; font-size: 1.05rem; }
.brief-claim-cta__sub { margin: 0 0 12px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.brief-claim-cta__btn { font-size: .95rem; padding: 11px 22px; }
.brief-edit-toggle {
  margin-top: 8px; align-self: flex-start;
  background: transparent; border: 1px dashed var(--border); color: var(--muted);
  font-size: .82rem; padding: 6px 12px;
}
.brief-edit-toggle:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.brief-edit-form { padding: 18px 20px; margin-bottom: 14px; border: 2px solid var(--primary); }
.brief-edit-form__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.brief-edit-form__title { margin: 0; font-size: 1.05rem; }
.brief-edit-form__field { margin-bottom: 14px; }
.brief-edit-form__lbl { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: var(--text); }
.brief-edit-form__textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font: inherit; font-size: .9rem; line-height: 1.55;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  resize: vertical; min-height: 80px;
}
.brief-edit-form__textarea--script { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; font-size: .82rem; min-height: 280px; }
.brief-edit-form__textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.brief-edit-form__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.brief-card__actions { display: flex; gap: 6px; align-items: center; }
.brief-card__actions .btn--ghost {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  padding: 6px 12px; font-size: .82rem; font-weight: 600;
}
.brief-card__actions .btn--ghost:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
@media (max-width: 480px){ .brief-card__actions{ flex-direction: column; align-items: stretch; } .brief-card__actions .btn{ width: 100%; text-align: center; } }
.brief-action__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.brief-action__title { margin: 0; font-size: 1.05rem; }
.brief-mysub {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: .85rem;
}
.brief-mysub__label { font-weight: 600; color: var(--muted); }
.brief-mysub__url {
  color: var(--primary-dark); text-decoration: none;
  word-break: break-all;
  font-family: ui-monospace, monospace; font-size: .82rem;
}
.brief-mysub__url:hover { text-decoration: underline; }

.brief-submit-form {
  display: flex; gap: 8px;
}
.brief-submit-form__input { flex: 1; min-width: 0; }
.brief-submit-form__btn { flex-shrink: 0; }

.brief-action__foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
.brief-unclaim-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--danger-soft); border: 1.5px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  color: var(--danger); cursor: pointer; font-weight: 600;
  font-size: .88rem; padding: 9px 18px; border-radius: 8px;
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .05s;
}
.brief-unclaim-link:hover { background: color-mix(in srgb, var(--danger) 18%, var(--surface)); border-color: var(--danger); }
.brief-unclaim-link:active { transform: translateY(1px); }

@media (max-width: 600px) {
  .brief-submit-form { flex-direction: column; }
  .brief-submit-form__btn { width: 100%; }
}

.content-detail { padding: 18px; }
.content-detail__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.content-detail__title { margin: 0; font-size: 1.3rem; font-weight: 700; flex: 1; }
.content-detail__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); margin: 12px 0; }
.content-block { margin: 14px 0; padding: 14px; background: var(--surface-2); border-radius: 10px; }
.content-block--script { background: #fffbeb; border-left: 4px solid #f59e0b; }
.content-block--notes  { background: #eff6ff; border-left: 4px solid #3b82f6; }
.content-block__label { font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; }
.content-block__body { white-space: pre-line; }
.content-block__script { white-space: pre-wrap; margin: 0; font-family: inherit; font-size: 0.95rem; line-height: 1.6; }

.content-submit { padding: 18px; margin-top: 14px; }
.content-submit__h { margin: 0 0 6px; font-size: 1.05rem; }
.content-mysub { margin: 12px 0; padding: 12px; background: var(--surface-2); border-radius: 8px; }
.content-mysub__label { font-weight: 600; font-size: 0.82rem; color: var(--muted); }
.content-mysub__url { display: block; word-break: break-all; color: var(--primary); margin: 4px 0; }
.content-mysub__date { font-size: 0.75rem; color: var(--muted); }
.content-mysub__note { font-style: italic; font-size: 0.85rem; margin-top: 6px; color: var(--muted); }
.content-form { margin-top: 12px; }

/* ─── Assignment picker search input ─── */
.assign-add__search {
  padding: 10px 12px 0;
  position: relative;
}
.assign-add__search-input {
  width: 100%;
  padding: 9px 12px;
  font-size: .9rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.assign-add__search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.assign-add__search-empty {
  display: none;
  padding: 12px;
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  font-style: italic;
}

/* Sidenav RTB badge — sticky reminder of which paket is active */
.sidenav__rtb {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 0 0 12px;
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  border-radius: var(--r-md);
  text-decoration: none; color: #fff;
  box-shadow: 0 4px 14px -6px rgba(30, 58, 138, .55);
  transition: transform .12s, box-shadow .12s;
}
.sidenav__rtb:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(30, 58, 138, .70); }
.sidenav__rtb-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(255, 255, 255, .15);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidenav__rtb-icon svg { width: 18px; height: 18px; }
.sidenav__rtb-text { min-width: 0; line-height: 1.15; }
.sidenav__rtb-label {
  font-size: .62rem; opacity: .8;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.sidenav__rtb-batch { font-weight: 700; font-size: 1rem; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ============ SOP / Kurikulum ============ */

/* List grid */
.sop-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 14px;
}
.sop-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--primary);
  border-radius: 14px;
  color: inherit; text-decoration: none;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.sop-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.sop-card__icon {
  font-size: 1.8rem; line-height: 1;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft);
  border-radius: 12px; flex-shrink: 0;
}
.sop-card__body { flex: 1; min-width: 0; }
.sop-card__cat {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--primary-dark); margin-bottom: 4px;
}
.sop-card__title { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.sop-card__sub { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.4; }
.sop-card__chev {
  font-size: 1.6rem; color: var(--muted); line-height: 1;
  align-self: center; flex-shrink: 0;
}

/* Detail doc */
.sop-doc {
  max-width: 760px; margin: 0 auto;
}
.sop-doc__head {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--primary-soft), var(--surface));
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--primary);
  border-radius: 14px;
  margin-bottom: 18px;
}
.sop-doc__icon {
  font-size: 2.4rem; line-height: 1;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border-radius: 14px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sop-doc__head-text { flex: 1; min-width: 0; }
.sop-doc__cat {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--primary-dark); margin-bottom: 6px;
}
.sop-doc__title { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.sop-doc__sub { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.sop-doc__body { padding: 0 4px; }
.sop-doc__foot {
  margin-top: 24px; padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  text-align: right;
}

/* Markdown body — rendered HTML */
.markdown-body {
  font-size: 1rem; line-height: 1.7; color: var(--text);
}
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
  font-weight: 800; line-height: 1.25; letter-spacing: -0.01em;
}
.markdown-body h1 { font-size: 1.5rem; margin: 28px 0 12px; }
.markdown-body h2 {
  font-size: 1.25rem; margin: 30px 0 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--border-soft);
}
.markdown-body h3 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--primary-dark); }
.markdown-body h4 { font-size: .98rem; margin: 18px 0 6px; }
.markdown-body p { margin: 10px 0; }
.markdown-body ul, .markdown-body ol { margin: 8px 0 14px; padding-left: 24px; }
.markdown-body li { margin: 4px 0; }
.markdown-body li > p { margin: 4px 0; }
.markdown-body strong { font-weight: 700; }
.markdown-body em { font-style: italic; }
.markdown-body code {
  font-family: ui-monospace, monospace;
  background: var(--surface-2); padding: 2px 6px;
  border-radius: 5px; font-size: .9em;
}
.markdown-body pre {
  background: var(--surface-2);
  padding: 12px 14px; border-radius: 10px; overflow-x: auto;
  font-size: .88em; line-height: 1.5;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body blockquote {
  margin: 14px 0;
  padding: 12px 16px;
  background: var(--primary-soft);
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
  font-style: italic; color: var(--primary-dark);
}
.markdown-body blockquote p { margin: 4px 0; }
.markdown-body hr {
  border: 0; height: 1px;
  background: var(--border-soft);
  margin: 26px 0;
}
.markdown-body a {
  color: var(--primary);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.markdown-body a:hover { color: var(--primary-dark); }
.markdown-body table {
  border-collapse: collapse; width: 100%;
  margin: 14px 0; font-size: .92rem;
  background: var(--surface);
}
.markdown-body th, .markdown-body td {
  border: 1px solid var(--border-soft);
  padding: 8px 12px; text-align: left; vertical-align: top;
}
.markdown-body th {
  background: var(--surface-2);
  font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted);
}
.markdown-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* Admin SOP editor — split textarea + preview */
.sop-editor { padding: 18px 20px; }
.sop-editor__split {
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .sop-editor__split { grid-template-columns: 1fr; }
}
.sop-editor__source { margin-bottom: 0; }
.sop-editor__source textarea {
  font-family: ui-monospace, monospace; font-size: .88rem;
  line-height: 1.5;
}
.sop-editor__preview {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-2);
  display: flex; flex-direction: column;
  max-height: 700px; overflow-y: auto;
}
.sop-editor__preview-head {
  padding: 8px 14px;
  font-size: .82rem; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--surface); border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 1;
}
.sop-editor__preview #sop-preview { padding: 14px 18px; background: var(--surface); }

/* EasyMDE override — match SGO admin theme */
.EasyMDEContainer { margin-top: 4px; }
.EasyMDEContainer .CodeMirror {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-family: ui-monospace, "Menlo", monospace;
  font-size: .9rem;
  line-height: 1.6;
  background: var(--surface);
  color: var(--text);
  padding: 6px 4px;
}
.EasyMDEContainer .CodeMirror-focused {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.EasyMDEContainer .editor-toolbar {
  border: 1px solid var(--border-soft);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--surface-2);
  padding: 4px 6px;
  opacity: 1;
}
.EasyMDEContainer .editor-toolbar button {
  color: var(--text);
  border-radius: 6px;
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
  background: var(--primary-soft);
  border-color: transparent;
}
.EasyMDEContainer .editor-toolbar i.separator {
  border-left-color: var(--border-soft);
  border-right: 0;
}
.EasyMDEContainer .editor-toolbar.fullscreen { background: var(--surface); }
.EasyMDEContainer .CodeMirror + .editor-statusbar {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  color: var(--muted);
  padding: 4px 12px;
}
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
  background: var(--surface-2);
  border-color: var(--border-soft);
  padding: 18px 22px;
}
/* Dark mode compat */
:root[data-theme="dark"] .EasyMDEContainer .CodeMirror { background: var(--surface-2); }
:root[data-theme="dark"] .EasyMDEContainer .editor-toolbar { background: var(--surface); }
:root[data-theme="dark"] .EasyMDEContainer .editor-toolbar button { color: var(--text); }
:root[data-theme="dark"] .EasyMDEContainer .CodeMirror-cursor { border-color: var(--text); }

/* Toast UI Editor — ringan tweak supaya pas dengan SGO theme.
   Default toast theme udah cukup polished, jadi minor override aja. */
#sop-editor-container { margin-top: 4px; }
#sop-editor-container .toastui-editor-defaultUI {
  border-radius: 10px;
  border: 1px solid var(--border-soft);
}
#sop-editor-container .toastui-editor-defaultUI:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
#sop-editor-container .toastui-editor-toolbar { background: var(--surface-2); }
#sop-editor-container .toastui-editor-mode-switch { background: var(--surface-2); }
/* Dark mode: toast bundle udah punya class .toastui-editor-dark — bisa enable lewat editor option kalau perlu */

/* Admin SOP list — row-card style, gak pakai table */
.sop-admin-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.sop-admin-row {
  display: flex; gap: 16px; align-items: stretch;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.sop-admin-row:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.sop-admin-row__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.9rem; line-height: 1;
  background: var(--primary-soft);
  border-radius: 12px;
}
.sop-admin-row__main { flex: 1; min-width: 0; }
.sop-admin-row__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.sop-admin-row__cat {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
}
.sop-admin-row__cat--prinsip   { background: #e0e7ff; color: #3730a3; }
.sop-admin-row__cat--etika     { background: #fce7f3; color: #9d174d; }
.sop-admin-row__cat--komersial { background: #d1fae5; color: #065f46; }
.sop-admin-row__cat--role      { background: #fef3c7; color: #92400e; }
.sop-admin-row__cat--default   { background: var(--surface-2); color: var(--muted); }
.sop-admin-row__order {
  font-size: .72rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.sop-admin-row__title {
  margin: 0 0 4px;
  font-size: 1.05rem; font-weight: 700;
  line-height: 1.3;
}
.sop-admin-row__title a {
  color: var(--text); text-decoration: none;
}
.sop-admin-row__title a:hover { color: var(--primary); }
.sop-admin-row__sub {
  margin: 0 0 8px;
  font-size: .88rem; color: var(--muted);
  line-height: 1.4;
}
.sop-admin-row__meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: .76rem; color: var(--muted);
}
.sop-admin-row__slug code {
  background: var(--surface-2); padding: 2px 6px;
  border-radius: 5px; font-size: .78rem;
}
.sop-admin-row__dot { color: var(--border); }

/* Action buttons di kanan — icon-only, hover halus */
.sop-admin-row__actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.sop-admin-row__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1.05rem;
  color: var(--text); text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sop-admin-row__icon-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-soft);
}
.sop-admin-row__icon-btn--danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

@media (max-width: 700px) {
  .sop-admin-row { flex-wrap: wrap; }
  .sop-admin-row__actions { width: 100%; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border-soft); margin-top: 8px; }
}

/* Batch payslip table */
.batch-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin: 12px 0;
}
.batch-toolbar__stats { display: flex; gap: 8px; flex-wrap: wrap; }
.batch-stat {
  display: inline-flex; padding: 4px 12px;
  border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  background: var(--surface-2); color: var(--muted);
}
.batch-stat--ok { background: var(--success-soft); color: var(--success); }
.batch-stat--warn { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }

.batch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.batch-table th, .batch-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.batch-table th {
  background: var(--surface-2);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
}
.batch-row--blocked { background: color-mix(in srgb, var(--danger) 4%, transparent); }
.batch-row--done { opacity: .7; }
.batch-row:hover { background: var(--surface-2); }

.batch-pakets { display: flex; flex-direction: column; gap: 8px; }
.batch-paket {
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 8px;
}
.batch-paket__head { font-size: .88rem; margin-bottom: 2px; }
.batch-paket__meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

.batch-eval {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 600;
  text-decoration: none;
  letter-spacing: .2px;
}
.batch-eval--done    { background: var(--success-soft); color: var(--success); }
.batch-eval--draft   { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.batch-eval--missing { background: var(--danger-soft); color: var(--danger); }
.batch-eval:hover { text-decoration: underline; }

.cell-warn { color: #b45309; }

/* ===== /admin/keuangan-batch — futuristic redesign ===== */
.keu-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 16px 0 18px;
}
.keu-stat {
  position: relative; overflow: hidden;
  padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
              var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.keu-stat::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.12), transparent 50%);
}
.keu-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); }
.keu-stat__lbl {
  position: relative; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.keu-stat__val {
  position: relative; font-size: 1.45rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.keu-stat--blue {
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(99,102,241,.08));
  border-color: rgba(59,130,246,.3);
}
.keu-stat--blue .keu-stat__val { color: #1d4ed8; }
.keu-stat--amber {
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(251,146,60,.08));
  border-color: rgba(245,158,11,.3);
}
.keu-stat--amber .keu-stat__val { color: #92400e; }
.keu-stat--purple {
  background: linear-gradient(135deg, rgba(168,85,247,.16), rgba(217,70,239,.08));
  border-color: rgba(168,85,247,.3);
}
.keu-stat--purple .keu-stat__val { color: #6b21a8; }
.keu-stat--red {
  background: linear-gradient(135deg, rgba(220,38,38,.16), rgba(244,63,94,.08));
  border-color: rgba(220,38,38,.3);
}
.keu-stat--red .keu-stat__val { color: #b91c1c; }
.keu-stat--green {
  background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(34,197,94,.08));
  border-color: rgba(16,185,129,.3);
}
.keu-stat--green .keu-stat__val { color: #047857; }

.keu-search {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface-2), transparent);
}
.keu-search .field__input {
  width: 100%; padding: 11px 14px 11px 38px;
  font-size: .92rem; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 13px center;
  transition: border-color .15s, box-shadow .15s;
}
.keu-search .field__input:focus {
  outline: 0; border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99,102,241,.14);
}

.keu-tbl-wrap { overflow-x: auto; }
.keu-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .88rem; min-width: 1040px;
}
.keu-tbl thead {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  position: sticky; top: 0; z-index: 2;
}
.keu-tbl th {
  padding: 12px 14px; text-align: left;
  font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: inherit;
}
.keu-tbl th.num { text-align: right; }
.keu-tbl td {
  padding: 14px; vertical-align: middle;
  border-bottom: 1px solid var(--border-soft);
}
.keu-tbl td.num { text-align: right; white-space: nowrap; }
.keu-tbl tr:last-child td { border-bottom: none; }
.keu-tbl__row {
  cursor: pointer;
  transition: background .15s, transform .12s;
  position: relative;
}
.keu-tbl__row:hover {
  background: linear-gradient(90deg, rgba(99,102,241,.04), rgba(16,185,129,.03));
}
.keu-tbl__row:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--primary, #6366f1);
}
.keu-tbl__row:focus-visible {
  outline: 2px solid var(--primary, #2563eb); outline-offset: -2px;
}

/* Batch / RTB chip — gradient pill */
.keu-tbl__batch { min-width: 130px; }
.keu-tbl__rtb {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  color: #fff; font-weight: 800; font-size: .8rem;
  letter-spacing: .03em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 3px 8px rgba(99,102,241,.28);
  text-transform: uppercase;
}
.keu-tbl__batch-meta {
  font-size: .68rem; color: var(--muted);
  margin-top: 5px; letter-spacing: .03em; text-transform: uppercase; font-weight: 600;
}

/* Paket name + branch */
.keu-tbl__nama { max-width: 220px; }
.keu-tbl__nama-title { font-weight: 600; line-height: 1.35; font-size: .9rem; }
.keu-tbl__nama-branch {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 2px 8px;
  background: var(--surface-2); border-radius: 999px;
  font-size: .68rem; color: var(--muted); font-weight: 600;
}

/* Tanggal berangkat */
.keu-tbl__date {
  white-space: nowrap; color: var(--muted); font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

/* Pax */
.keu-tbl__pax {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(99,102,241,.1); color: #3730a3;
  font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums;
}

/* People (TL/Muth) — refined */
.keu-tbl__people { font-size: .82rem; min-width: 200px; }
.keu-people-grp { display: flex; flex-direction: column; gap: 8px; }
.keu-people-row { display: flex; align-items: flex-start; gap: 8px; }
.keu-people-tag {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; border-radius: 6px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
}
.keu-people-tag--tl {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(99,102,241,.1));
  color: #3730a3; border: 1px solid rgba(99,102,241,.25);
}
.keu-people-tag--muth {
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(16,185,129,.1));
  color: #047857; border: 1px solid rgba(16,185,129,.25);
}
.keu-people-names {
  display: flex; flex-direction: column; gap: 2px;
  font-size: .82rem; line-height: 1.35; flex: 1; min-width: 0;
}

/* Uang Diterima — futuristic ledger pill */
.keu-diterima {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.keu-diterima__total {
  font-weight: 800; font-size: .92rem; color: #065f46;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.keu-diterima__breakdown { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.keu-diterima__src {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid transparent;
}
.keu-diterima__src--kantor {
  background: rgba(99,102,241,.12); color: #3730a3;
  border-color: rgba(99,102,241,.2);
}
.keu-diterima__src--handling {
  background: rgba(245,158,11,.14); color: #92400e;
  border-color: rgba(245,158,11,.2);
}

/* Money columns — emphasized */
.keu-tbl__money {
  font-weight: 700; font-size: .9rem;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.keu-tbl__money-unit {
  font-size: .68rem; color: var(--muted);
  font-weight: 600; margin-right: 3px;
}

/* Realisasi with progress bar inline */
.keu-tbl__realisasi {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.keu-realisasi-bar {
  width: 100px; height: 4px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
}
.keu-realisasi-bar__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width .3s ease;
}
.keu-realisasi-bar__fill--over {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}
.keu-realisasi-bar__fill--warn {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* Selisih dengan arrow indicator */
.keu-tbl__selisih {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 8px;
  font-weight: 800; font-size: .85rem;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid transparent;
}
.keu-tbl__selisih--over {
  background: rgba(220,38,38,.1); color: #b91c1c;
  border-color: rgba(220,38,38,.2);
}
.keu-tbl__selisih--ok {
  background: rgba(16,185,129,.1); color: #047857;
  border-color: rgba(16,185,129,.2);
}
.keu-tbl__selisih--neutral {
  background: var(--surface-2); color: var(--muted);
}

@media (max-width: 700px) {
  .keu-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .keu-stat { padding: 13px 14px; }
  .keu-stat__val { font-size: 1.15rem; }
}
@media (max-width: 440px) {
  .keu-stats { grid-template-columns: 1fr; }
}

/* Worksheet evaluation form */
.ws-layout {
  display: flex; flex-direction: column; gap: 0;
}
/* Sticky horizontal pill tabs — match style briefing */
.ws-nav {
  position: sticky; top: 68px; z-index: 50;
  display: flex; gap: 6px;
  padding: 10px 0; margin: 0 0 16px;
  overflow-x: auto; scrollbar-width: thin;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-overflow-scrolling: touch;
}
.ws-nav__title { display: none; }
.ws-section { scroll-margin-top: 130px; }

/* User layout variant — no admin topbar above ws-nav, so stick at top: 0
   (desktop) or below mobile-topbar (mobile breakpoints already correct). */
.ws-nav--user { top: 0; }
@media (max-width: 900px) { .ws-nav--user { top: 60px; } }
@media (max-width: 600px) { .ws-nav--user { top: 54px; } }
@media (max-width: 420px) { .ws-nav--user { top: 50px; } }
.ws-layout--user .ws-section { scroll-margin-top: 80px; }
@media (max-width: 900px) { .ws-layout--user .ws-section { scroll-margin-top: 130px; } }
@media (max-width: 600px) { .ws-layout--user .ws-section { scroll-margin-top: 115px; } }
@media (max-width: 420px) { .ws-layout--user .ws-section { scroll-margin-top: 105px; } }

/* Worksheet Kas Petugas section */
.ws-kas-empty {
  padding: 18px; text-align: center;
  background: var(--surface-2); border-radius: 8px;
}
.ws-kas-tbl-wrap { overflow-x: auto; }
.ws-kas-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 720px; }
.ws-kas-tbl th { text-align: left; padding: 8px 10px; background: var(--surface-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ws-kas-tbl td { padding: 10px; border-bottom: 1px solid var(--border-soft, var(--border)); vertical-align: middle; }
.ws-kas-tbl td.num { text-align: right; white-space: nowrap; }
.ws-kas-row--settled { background: rgba(34,197,94,.04); }
.ws-kas-row--settled .ws-kas-input,
.ws-kas-row--settled .ws-kas-note { background: var(--surface-2); }
.ws-kas-form { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.ws-kas-input, .ws-kas-note {
  padding: 7px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  background: var(--surface, #fff); color: var(--text, #0f172a); font-size: .85rem;
  font-family: inherit; line-height: 1.2; transition: border-color .15s, box-shadow .15s;
}
.ws-kas-input:focus, .ws-kas-note:focus {
  outline: 0; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.ws-kas-input { width: 130px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ws-kas-note { width: 100%; min-width: 160px; }
.ws-kas-savebtn {
  padding: 7px 12px !important; min-height: 36px; border-radius: 8px !important;
  background: #eef2ff !important; color: #3730a3 !important;
  border: 1px solid #c7d2fe !important; font-size: .9rem; cursor: pointer;
}
.ws-kas-savebtn:hover { background: #e0e7ff !important; }
.ws-kas-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.ws-kas-pill--pending { background: rgba(245,158,11,.15); color: #92400e; border-color: rgba(245,158,11,.3); }
.ws-kas-pill--pending:hover { background: rgba(245,158,11,.25); }
.ws-kas-pill--settled { background: rgba(16,185,129,.15); color: #047857; border-color: rgba(16,185,129,.3); }
.ws-kas-pill--settled:hover { background: rgba(220,38,38,.12); color: #b91c1c; border-color: rgba(220,38,38,.3); }

/* Setor balik action buttons + state pill */
.ws-kas-actions { white-space: nowrap; }
.ws-kas-setor-group { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ws-kas-btn-handling, .ws-kas-btn-kantor {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; font-size: .8rem;
}
.ws-kas-btn-handling { background: linear-gradient(135deg,#06b6d4,#10b981); color:#fff; box-shadow:0 4px 10px rgba(6,182,212,.25); }
.ws-kas-btn-handling:hover { box-shadow:0 6px 14px rgba(6,182,212,.36); }
.ws-kas-btn-kantor { background: linear-gradient(135deg,#6366f1,#3b82f6); color:#fff; box-shadow:0 4px 10px rgba(99,102,241,.25); }
.ws-kas-btn-kantor:hover { box-shadow:0 6px 14px rgba(99,102,241,.36); }

.ws-kas-pushed { display:inline-flex; align-items:center; gap:4px;
  padding:5px 10px; border-radius:999px; font-size:.75rem; font-weight:700;
  background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.ws-kas-pushed--pending { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.ws-kas-pushed em { font-weight:500; opacity:.85; margin-left:3px; font-style:italic; }

/* Modal */
.ws-kas-modal-backdrop {
  position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:9000;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ws-kas-modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(440px, calc(100% - 24px)); max-height:90vh; overflow-y:auto;
  z-index:9001; background:var(--surface, #fff); border-radius:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.30); padding:0;
}
.ws-kas-modal-head {
  padding:14px 18px; border-bottom:1px solid var(--border, #e5e7eb);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(135deg, rgba(99,102,241,.06), rgba(16,185,129,.04));
  border-radius:16px 16px 0 0;
}
.ws-kas-modal-title { font-size:1rem; font-weight:800; color:var(--text); }
.ws-kas-modal-close {
  background:transparent; border:0; cursor:pointer; font-size:18px;
  color:var(--muted); padding:4px 8px; border-radius:8px;
}
.ws-kas-modal-close:hover { background:var(--surface-2); }
.ws-kas-modal-body { padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.ws-kas-field { display:flex; flex-direction:column; gap:4px; }
.ws-kas-field label { font-size:.78rem; font-weight:700; color:var(--muted); }
.ws-kas-field input, .ws-kas-field select, .ws-kas-field textarea {
  padding:8px 12px; border:1px solid var(--border, #e5e7eb); border-radius:8px;
  font-size:.9rem; font-family:inherit; background:var(--surface, #fff); outline:none;
}
.ws-kas-field input:focus, .ws-kas-field select:focus, .ws-kas-field textarea:focus {
  border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.15);
}
.ws-kas-field input:disabled { background:var(--surface-2); color:var(--muted); }
.ws-kas-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; padding-top:10px; border-top:1px solid var(--border, #e5e7eb); }

.ws-nav__title {
  padding: 0 10px 8px;
  font-size: .82rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.ws-nav__item {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  text-decoration: none; color: var(--muted);
  font-size: .85rem; font-weight: 600;
  background: var(--surface-2);
  border: 1px solid transparent;
  white-space: nowrap; transition: .15s;
}
.ws-nav__item:hover {
  color: var(--text);
  background: var(--surface-3, var(--surface-2));
}
.ws-nav__item.is-active {
  color: #fff;
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
}
:root[data-theme="dark"] .ws-nav__item.is-active {
  background: var(--primary, #3b82f6);
  border-color: var(--primary, #3b82f6);
  color: #fff;
}
.ws-nav__ico { font-size: 1rem; flex-shrink: 0; }
.ws-nav__lbl { min-width: 0; }
.ws-nav__badge {
  flex-shrink: 0; padding: 2px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; line-height: 1.3;
}
.ws-nav__badge--neutral { background: var(--surface-2); color: var(--muted); }
.ws-nav__badge--zero { background: var(--surface-2); color: var(--muted); }
.ws-nav__badge--done { background: #16a34a; color: #fff; }
.ws-nav__badge--count { background: var(--primary-soft); color: var(--primary-dark); }
.ws-nav__badge--warn { background: #fef3c7; color: #92400e; }
:root[data-theme="dark"] .ws-nav__badge--warn { background: #78350f; color: #fcd34d; }
.ws-content { min-width: 0; }

.ws-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.ws-stat {
  padding: 12px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.ws-stat__lbl { font-size: .78rem; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.ws-stat__val { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.ws-stat--blue { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); }
.ws-stat--blue .ws-stat__val { color: #1d4ed8; }
.ws-stat--amber { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); }
.ws-stat--amber .ws-stat__val { color: #92400e; }
.ws-stat--red { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.2); }
.ws-stat--red .ws-stat__val { color: #b91c1c; }
.ws-stat--green { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2); }
.ws-stat--green .ws-stat__val { color: #047857; }
.ws-stat--yellow { background: rgba(234,179,8,.1); border-color: rgba(234,179,8,.25); }
.ws-stat--yellow .ws-stat__val { color: #854d0e; }

@media (max-width: 900px) {
  .ws-nav { top: 60px; padding: 8px 0; gap: 5px; margin-bottom: 12px; }
  .ws-nav__item { padding: 6px 11px; font-size: .8rem; gap: 6px; }
  .ws-section { scroll-margin-top: 120px; padding: 16px 16px; margin-bottom: 14px; }
  .ws-section__head h2 { font-size: 1rem; }
  .ws-stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .ws-stat { padding: 10px 12px; }
  .ws-stat__val { font-size: .95rem; }
  .ws-fin-group__hd { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ws-fin-group__totals { gap: 14px; }
}

@media (max-width: 600px) {
  .ws-nav { top: 54px; padding: 6px 0; gap: 4px; }
  .ws-nav__item { padding: 5px 10px; font-size: .75rem; gap: 5px; }
  .ws-section { scroll-margin-top: 110px; padding: 14px 12px; }
  .ws-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-stat__lbl { font-size: .7rem; }
  .ws-stat__val { font-size: .88rem; }
  /* Stats di stl + tools — adjust */
  .ws-stl-stats { grid-template-columns: 1fr; gap: 8px; }
  .ws-stl-stat { padding: 12px 14px; }
  .ws-stl-stat__val { font-size: 1.2rem; }
  .ws-stl-info { padding: 10px 12px; font-size: .82rem; }
  /* Tables shrink */
  .ws-fin-tbl, .ws-stl-tbl, .ws-kas-tbl { font-size: .8rem; }
  .ws-fin-tbl th, .ws-fin-tbl td { padding: 7px 8px; }
  .ws-stl-tbl th, .ws-stl-tbl td { padding: 7px 8px; }
  .ws-fin-tbl__date { font-size: .72rem; }
  .ws-stl-tbl__desc { max-width: 180px; font-size: .76rem; }
  .ws-stl-tbl__pill { padding: 3px 8px; font-size: .68rem; }
  /* Detail unreturned list */
  .ws-stl-detail { padding: 10px 12px; }
  .ws-stl-detail__row { flex-direction: column; gap: 2px; align-items: flex-start; }
  /* Group header */
  .ws-fin-group__title { font-size: .9rem; }
  .ws-fin-group__totals { gap: 10px; font-size: .8rem; }
  /* Blacklist rows */
  .ws-bl__head { display: none; }
}

@media (max-width: 420px) {
  .ws-nav { top: 50px; }
  .ws-nav__item { padding: 4px 9px; font-size: .72rem; }
  .ws-section { padding: 12px 10px; }
  .ws-stat-grid { grid-template-columns: 1fr; }
  .ws-fin-tbl, .ws-stl-tbl { font-size: .74rem; }
  .ws-stl-tbl th, .ws-stl-tbl td, .ws-fin-tbl th, .ws-fin-tbl td { padding: 6px 6px; }
}

.ws-section { margin-bottom: 16px; padding: 18px 20px; }
.ws-section__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ws-section__head h2 { margin: 0; font-size: 1.1rem; }
.ws-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ws-row {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 38px 10px 10px;
}
.ws-row--cla {
  display: grid;
  grid-template-columns: 1.4fr 1.5fr 110px 1.3fr;
  gap: 8px; align-items: center;
}
.ws-row--fin {
  display: grid;
  grid-template-columns: 1.4fr 110px 110px 110px 1.4fr;
  gap: 8px; align-items: center;
  transition: background .12s, border-color .12s;
}
.ws-row--fin.is-over-budget {
  background: rgba(220, 38, 38, .06);
  border-color: rgba(220, 38, 38, .3) !important;
  border-left: 3px solid #dc2626;
  padding-left: 10px;
}
:root[data-theme="dark"] .ws-row--fin.is-over-budget {
  background: rgba(220, 38, 38, .12);
}
.ws-fin-catatan {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.ws-fin-catatan .field__input { width: 100%; }
.ws-fin-status {
  font-size: .68rem; font-weight: 700; line-height: 1.3;
  padding: 0 4px;
}
.ws-fin-status--warn {
  color: #92400e;
  background: #fef3c7;
  border-radius: 4px;
  padding: 1px 6px;
  width: max-content;
}
:root[data-theme="dark"] .ws-fin-status--warn { background: #78350f; color: #fcd34d; }
.ws-row--fin.is-over-budget .ws-fin-catatan .field__input {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, .04);
}
.ws-row--fin.is-over-budget .ws-fin-catatan .field__input:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

.ws-fin-warn {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin: 10px 0 14px;
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .25);
  border-left: 4px solid #dc2626;
  border-radius: 8px;
  font-size: .85rem; line-height: 1.5;
  color: #7f1d1d;
}
.ws-fin-warn__ico { font-size: 1.1rem; flex-shrink: 0; line-height: 1.2; }
:root[data-theme="dark"] .ws-fin-warn { color: #fecaca; background: rgba(220, 38, 38, .15); }

.ws-fin-allgood {
  display: flex; gap: 14px; align-items: center;
  padding: 18px 20px; margin-bottom: 14px;
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .25);
  border-left: 4px solid #10b981;
  border-radius: 10px;
  color: #065f46;
}
:root[data-theme="dark"] .ws-fin-allgood { color: #a7f3d0; background: rgba(16, 185, 129, .15); }

/* PNG export overrides — paksa layout desktop pas capture via html2canvas,
   tanpa peduli viewport sekarang mobile/desktop. WHY: html2canvas-pro
   `windowWidth: 1280` cuma resize canvas, gak re-evaluate @media queries.
   Jadi konten yang di-clone tetap pakai mobile rules (kalo viewport <600px).
   Solusi: kelas .png-export-mode dengan !important override semua rule
   mobile yg affect roomlist + print-header. Wrap offscreen pakai class ini. */
.png-export-mode {
  width: 1280px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background: #ffffff !important;
}
.png-export-mode .roomlist-sheet { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
.png-export-mode .roomlist-sheet__head { grid-template-columns: 180px 1fr 130px !important; font-size: .82rem !important; }
.png-export-mode .roomlist-sheet__col { padding: 12px 14px !important; }
.png-export-mode .roomlist-room { grid-template-columns: 180px 1fr 130px !important; }
.png-export-mode .tipe-card { font-size: .88rem !important; padding: 12px 8px !important; min-height: 60px !important; }
.png-export-mode .seat-row { grid-template-columns: 40px 1fr !important; min-height: 42px !important; }
.png-export-mode .seat-row__num { font-size: .95rem !important; }
.png-export-mode .seat-row__name { font-size: .92rem !important; padding: 10px 12px !important; }
.png-export-mode .hotel-short { font-size: 1.6rem !important; letter-spacing: 1px !important; }
.png-export-mode .roomlist-print-header { flex-direction: row !important; gap: 16px !important; padding: 18px 22px !important; }
.png-export-mode .roomlist-print-header__icon { width: 72px !important; height: 72px !important; font-size: 2.4rem !important; }
.png-export-mode .roomlist-print-header__title { font-size: 1.7rem !important; }
.png-export-mode .roomlist-print-header__sub { font-size: 1rem !important; }

/* Export PNG SELALU light mode — walau user lagi di dark theme. Override theme
   vars + warna sel occupant ke versi terang (kalahkan rule :root[data-theme=dark]
   pakai !important). Scoped ke .png-export-mode → gak nyentuh tampilan in-app. */
.png-export-mode {
  --bg: #f4f6fb !important; --surface: #ffffff !important; --surface-2: #f4f6fb !important;
  --border: #d8dde6 !important; --border-soft: #e7ebf3 !important;
  --text: #0f1729 !important; --muted: #64748b !important;
  background: #ffffff !important; color: #0f1729 !important;
}
.png-export-mode .roomlist-sheet,
.png-export-mode .roomlist-sheet__head,
.png-export-mode .roomlist-room,
.png-export-mode .seat-row__num { background: #ffffff !important; color: #0f1729 !important; }
.png-export-mode .row-c0  .seat-row__name { background: #fecaca !important; color: #7f1d1d !important; }
.png-export-mode .row-c1  .seat-row__name { background: #fed7aa !important; color: #7c2d12 !important; }
.png-export-mode .row-c2  .seat-row__name { background: #fef08a !important; color: #713f12 !important; }
.png-export-mode .row-c3  .seat-row__name { background: #d9f99d !important; color: #365314 !important; }
.png-export-mode .row-c4  .seat-row__name { background: #a7f3d0 !important; color: #064e3b !important; }
.png-export-mode .row-c5  .seat-row__name { background: #99f6e4 !important; color: #134e4a !important; }
.png-export-mode .row-c6  .seat-row__name { background: #bae6fd !important; color: #0c4a6e !important; }
.png-export-mode .row-c7  .seat-row__name { background: #c7d2fe !important; color: #1e1b4b !important; }
.png-export-mode .row-c8  .seat-row__name { background: #ddd6fe !important; color: #4c1d95 !important; }
.png-export-mode .row-c9  .seat-row__name { background: #f5d0fe !important; color: #581c87 !important; }
.png-export-mode .row-c10 .seat-row__name { background: #fbcfe8 !important; color: #831843 !important; }
.png-export-mode .row-c11 .seat-row__name { background: #fde68a !important; color: #78350f !important; }
.png-export-mode .row-leader .seat-row__name { background: #fb7185 !important; color: #fff !important; }

/* Tools TL — warn banner kalau ada penalty pending */
.ws-stl-warn {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; margin-bottom: 14px;
  background: rgba(220, 38, 38, .06);
  border: 1px solid rgba(220, 38, 38, .25);
  border-left: 4px solid #dc2626;
  border-radius: 10px;
  color: #991b1b;
}
.ws-stl-warn__ico { font-size: 1.6rem; line-height: 1; }
:root[data-theme="dark"] .ws-stl-warn { color: #fecaca; background: rgba(220, 38, 38, .14); }

/* Per-kategori block layout for budget realizations table */
.ws-fin-groups { display: flex; flex-direction: column; gap: 18px; }
.ws-fin-group {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 10px; border-left: 4px solid #f59e0b; overflow: hidden;
}
.ws-fin-group__hd { padding: 14px 16px; background: rgba(245, 158, 11, .04); }
.ws-fin-group__title { margin: 0 0 8px; font-size: 1rem; font-weight: 700; }
.ws-fin-group__totals { display: flex; gap: 24px; flex-wrap: wrap; font-size: .9rem; }
.ws-fin-group__totals > div { display: flex; flex-direction: column; gap: 2px; }
.ws-fin-tbl-wrap { overflow-x: auto; }
.ws-fin-tbl {
  width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 720px;
}
.ws-fin-tbl thead { background: var(--surface-2); }
.ws-fin-tbl th {
  padding: 8px 10px; text-align: left;
  font-size: .7rem; letter-spacing: .04em;
  color: var(--muted); font-weight: 700; text-transform: uppercase;
  border-bottom: 1px solid var(--border-soft);
}
.ws-fin-tbl th.num { text-align: right; }
.ws-fin-tbl td {
  padding: 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top;
}
.ws-fin-tbl td.num { text-align: right; white-space: nowrap; }
.ws-fin-tbl tr:last-child td { border-bottom: none; }
.ws-fin-tbl__row--over { background: rgba(220, 38, 38, .04); }
:root[data-theme="dark"] .ws-fin-tbl__row--over { background: rgba(220, 38, 38, .1); }
.ws-fin-tbl__date { color: var(--muted); white-space: nowrap; font-size: .8rem; }
.ws-fin-tbl__date-ico { margin-right: 4px; }
.ws-fin-tbl__item { font-weight: 500; }
.ws-fin-tbl__cat { min-width: 220px; }
.ws-fin-tbl__cat .field__input { width: 100%; padding: 6px 10px; font-size: .85rem; }
.ws-fin-tbl__row--over .ws-fin-tbl__cat .field__input {
  border-color: #f59e0b; background: rgba(245, 158, 11, .04);
}
.ws-fin-chip {
  display: inline-block; padding: 3px 10px;
  background: var(--surface-2); color: var(--muted);
  border-radius: 6px; font-weight: 600; font-size: .82rem;
}
.ws-fin-chip--over { background: #fecaca; color: #991b1b; }
.ws-fin-chip--save { background: #d1fae5; color: #065f46; }
:root[data-theme="dark"] .ws-fin-chip--over { background: #7f1d1d; color: #fecaca; }
:root[data-theme="dark"] .ws-fin-chip--save { background: #064e3b; color: #a7f3d0; }
.ws-fin-status-pill {
  display: inline-block; padding: 4px 10px;
  border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap;
}
.ws-fin-status-pill--warn { background: #fef3c7; color: #92400e; }
.ws-fin-status-pill--ok { background: #d1fae5; color: #065f46; }
:root[data-theme="dark"] .ws-fin-status-pill--warn { background: #78350f; color: #fcd34d; }
:root[data-theme="dark"] .ws-fin-status-pill--ok { background: #064e3b; color: #a7f3d0; }
.ws-fin-head {
  display: grid;
  grid-template-columns: 1.4fr 110px 110px 110px 1.4fr 32px;
  gap: 8px; align-items: center;
  padding: 0 38px 0 10px;
  margin-top: 12px;
  font-size: .72rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.ws-fin-num { text-align: right; }
.ws-fin-total {
  display: grid;
  grid-template-columns: 1.4fr 110px 110px 110px 1.4fr 32px;
  gap: 8px; align-items: center;
  padding: 10px 38px 10px 10px;
  margin-top: 6px;
  background: var(--surface-2);
  border: 1px dashed var(--border-soft);
  border-radius: 10px;
  font-weight: 600;
}
.ws-fin-total__label { font-size: .85rem; color: var(--muted); }

.ws-row--ven {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 38px 14px 14px;
}
/* Vendor head pakai auto-fit supaya wrap kalau viewport sempit — gak truncate.
   Min 180px supaya semua dropdown ke-show full (label "Tidak rekomen", dst). */
.ws-ven__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; align-items: end;
}
.ws-ven__head > * { min-width: 0; }
.ws-ven__head .field { margin: 0; min-width: 0; }
.ws-ven__head .field__label {
  font-size: .7rem; margin-bottom: 4px;
  font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ws-ven__head .field__input { width: 100%; }
/* Notes 3-textarea — wrap 2 atau 1 kolom kalau sempit. Min 240px supaya
   placeholder "Ketepatan waktu / sesuai jadwal" ke-show full. */
.ws-ven__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.ws-ven__notes .field { margin: 0; min-width: 0; }
.ws-ven__notes .field__label {
  font-size: .7rem; margin-bottom: 4px;
  font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ws-ven__notes .field__input { width: 100%; resize: vertical; }

.ws-row--pj {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 38px 14px 14px;
}
.ws-pj__main { display: block; }
/* Pengembangan meta — 6 control. Auto-fit min 160px supaya gak truncate label.
   Pakai align-items:end supaya label di atas + input di bawah konsisten. */
.ws-pj__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; align-items: end;
}
.ws-pj__meta .field { margin: 0; min-width: 0; }
.ws-pj__meta .field__label {
  font-size: .7rem; margin-bottom: 4px;
  font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ws-pj__meta .field__input { width: 100%; }

.ws-stl__head {
  display: grid;
  grid-template-columns: 2fr 200px 140px;
  gap: 8px; padding: 8px 4px;
  font-size: .72rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border-soft);
  margin-top: 8px;
}
.ws-stl__rows { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.ws-stl__row {
  display: grid;
  grid-template-columns: 2fr 200px 140px;
  gap: 8px; align-items: center;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--border-soft);
}
.ws-stl__row:last-child { border-bottom: none; }
.ws-stl__name { font-weight: 500; }

/* ===== Tools TL — versi baru (TA-style) ===== */
.ws-stl-info {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px 0 14px;
  padding: 12px 14px;
  background: rgba(59, 130, 246, .06);
  border: 1px solid rgba(59, 130, 246, .25);
  border-radius: 10px;
  font-size: .88rem; line-height: 1.45;
  color: var(--text);
}
.ws-stl-info__ico { font-size: 1.1rem; flex-shrink: 0; }
.ws-stl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.ws-stl-stat {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.ws-stl-stat--danger {
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .35);
}
.ws-stl-stat--warn {
  background: rgba(245, 158, 11, .08);
  border-color: rgba(245, 158, 11, .35);
}
.ws-stl-stat--ok {
  background: rgba(16, 185, 129, .08);
  border-color: rgba(16, 185, 129, .35);
}
.ws-stl-stat__lbl {
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 6px;
}
.ws-stl-stat--danger .ws-stl-stat__lbl,
.ws-stl-stat--warn .ws-stl-stat__lbl,
.ws-stl-stat--ok .ws-stl-stat__lbl { color: var(--text); }
.ws-stl-stat__val {
  font-size: 1.5rem; font-weight: 700;
  color: var(--text);
}
.ws-stl-detail {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: rgba(220, 38, 38, .04);
  border: 1px dashed rgba(220, 38, 38, .35);
  border-radius: 10px;
}
.ws-stl-detail__hd {
  font-size: .85rem; font-weight: 600;
  margin-bottom: 8px;
}
.ws-stl-detail__list {
  margin: 0; padding-left: 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.ws-stl-detail__row {
  font-size: .88rem;
  display: flex; justify-content: space-between; gap: 12px;
  align-items: baseline;
}
.ws-stl-detail__price { color: rgba(220, 38, 38, .85); font-weight: 600; }
.ws-stl-search { margin-bottom: 10px; }
.ws-stl-search .field__input {
  width: 100%; padding: 10px 14px;
  font-size: .9rem;
}
.ws-stl-tbl-wrap { overflow-x: auto; }
.ws-stl-tbl {
  width: 100%; border-collapse: collapse;
  font-size: .88rem;
}
.ws-stl-tbl thead { background: var(--surface-2); }
.ws-stl-tbl th {
  padding: 10px 12px;
  text-align: left; font-weight: 600;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-bottom: 1px solid var(--border-soft);
}
.ws-stl-tbl th.num { text-align: right; }
.ws-stl-tbl th.ws-stl-tbl__check-col { text-align: center; }
.ws-stl-tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.ws-stl-tbl td.num { text-align: right; white-space: nowrap; }
.ws-stl-tbl tr:last-child td { border-bottom: none; }
.ws-stl-tbl__no { color: var(--muted); width: 40px; }
.ws-stl-tbl__name { min-width: 140px; }
.ws-stl-tbl__desc {
  max-width: 280px; font-size: .82rem;
  color: var(--muted); line-height: 1.4;
}
.ws-stl-tbl__desc .muted { color: var(--muted); opacity: .5; }
.ws-stl-tbl__penalty { font-weight: 500; }
.ws-stl-tbl__pill {
  display: inline-block;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  white-space: nowrap;
}
.ws-stl-tbl__pill--ok {
  background: rgba(16, 185, 129, .15);
  color: rgba(5, 105, 75, .95);
  border: 1px solid rgba(16, 185, 129, .3);
}
.ws-stl-tbl__pill--warn {
  background: rgba(245, 158, 11, .15);
  color: rgba(146, 64, 14, .95);
  border: 1px solid rgba(245, 158, 11, .35);
}
:root[data-theme="dark"] .ws-stl-tbl__pill--ok { color: rgb(110, 231, 183); }
:root[data-theme="dark"] .ws-stl-tbl__pill--warn { color: rgb(252, 211, 77); }
.ws-stl-tbl__check { text-align: center; }
.ws-stl-tbl__cb {
  width: 22px; height: 22px;
  cursor: pointer;
  accent-color: rgb(16, 185, 129);
}
.ws-stl-tbl__row--returned {
  background: rgba(16, 185, 129, .04);
}
:root[data-theme="dark"] .ws-stl-tbl__row--returned { background: rgba(16, 185, 129, .08); }

.ws-bl { margin-top: 10px; }
.ws-bl__summary {
  cursor: pointer; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 8px; font-size: .9rem; user-select: none;
}
.ws-bl__summary:hover { background: var(--surface); }
.ws-bl__head {
  display: grid;
  grid-template-columns: 40px 56px 1.4fr 1.4fr 1.6fr;
  gap: 10px; padding: 8px 4px;
  font-size: .72rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border-soft);
  margin-top: 8px;
}
.ws-bl__rows { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.ws-bl__row {
  display: grid;
  grid-template-columns: 40px 56px 1.4fr 1.4fr 1.6fr;
  gap: 10px; align-items: center;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--border-soft);
}
.ws-bl__row:last-child { border-bottom: none; }
.ws-bl__flag { display: flex; justify-content: center; }
.ws-bl__flag input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.ws-bl__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-bl__name .small { font-size: .7rem; }

/* Blacklist foto thumbnail + click-to-enlarge */
.ws-bl__foto { display: flex; justify-content: center; }
.ws-bl__foto-btn {
  width: 48px; height: 48px; border-radius: 8px;
  padding: 0; border: 1px solid var(--border-soft); background: var(--surface-2);
  cursor: pointer; overflow: hidden;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  display: block;
}
.ws-bl__foto-btn:hover {
  transform: scale(1.06); border-color: var(--primary, #2563eb);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.ws-bl__foto-btn img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.ws-bl__foto-placeholder {
  width: 48px; height: 48px; border-radius: 8px;
  background: var(--grad-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
}

/* Foto modal (popup) */
.ws-foto-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: ws-foto-fade .15s ease-out;
}
.ws-foto-modal[hidden] { display: none !important; }
@keyframes ws-foto-fade { from { opacity: 0; } to { opacity: 1; } }
.ws-foto-modal__box {
  position: relative;
  max-width: min(640px, 95vw); max-height: 90vh;
  background: var(--surface); border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ws-foto-modal__box img {
  display: block; max-width: 100%; max-height: 80vh;
  object-fit: contain; background: #000;
}
.ws-foto-modal__cap {
  padding: 10px 16px;
  font-weight: 600; font-size: .92rem;
  background: var(--surface);
  text-align: center;
}
.ws-foto-modal__close {
  position: absolute; top: 8px; right: 8px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none; cursor: pointer;
  color: #1f2937; font-size: 1.4rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  z-index: 1;
}
.ws-foto-modal__close:hover { background: #fff; transform: scale(1.05); }

@media (max-width: 700px) {
  .ws-bl__head, .ws-bl__row {
    grid-template-columns: 36px 44px 1fr;
    gap: 8px;
  }
  .ws-bl__head > span:nth-child(4),
  .ws-bl__head > span:nth-child(5),
  .ws-bl__row > select,
  .ws-bl__row > input[name="bl_catatan"] {
    grid-column: 1 / -1;
  }
  /* Problem & Solusi grid jadi single col di mobile */
  .ws-row--prob .ws-row__grid { grid-template-columns: 1fr; }
  /* Pengembangan meta jadi 1 col */
  .ws-pj__meta { grid-template-columns: 1fr 1fr !important; }
  /* Actions buttons stacking */
  .ws-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .ws-actions__btns { flex-direction: column; gap: 8px; }
  .ws-actions__btns .btn { width: 100%; }
  /* Page header stacking pada worksheet */
  .ws-fin-warn, .ws-fin-allgood { padding: 10px 12px; font-size: .82rem; }
}

.ws-row--prob { display: flex; flex-direction: column; gap: 10px; }
.ws-row--prob .ws-row__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.ws-row--prob .ws-row__meta {
  display: flex; gap: 8px; align-items: center;
}
.ws-row--prob .ws-row__meta select { max-width: 220px; }
.ws-row__del {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  background: transparent; border: 1px solid var(--border-soft);
  border-radius: 50%;
  cursor: pointer; font-size: 1rem; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.ws-row--prob .ws-row__del { position: static; transform: none; margin-left: auto; }
.ws-row__del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.ws-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 800px) {
  .ws-grid-2 { grid-template-columns: 1fr; }
  .ws-row--cla, .ws-row--fin, .ws-row--prob .ws-row__grid { grid-template-columns: 1fr; }
  .ws-ven__head, .ws-ven__notes { grid-template-columns: 1fr; }
  .ws-pj__meta { grid-template-columns: 1fr 1fr; }
  .ws-stl__head, .ws-stl__row { grid-template-columns: 1fr; }
  .ws-stl__head { display: none; }
  .ws-fin-head, .ws-fin-total { display: none; }
  .ws-fin-num { text-align: left; }
}

.ws-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 12px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.ws-actions__btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* Auto-fill dropdown di /admin/assignment header */
.autofill { position: relative; display: inline-block; }
.autofill__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px;
  background: var(--primary-soft); color: var(--primary-dark);
  border: 1px solid var(--primary);
  border-radius: 8px;
  font-size: .82rem; font-weight: 600;
  cursor: pointer; list-style: none;
}
.autofill__btn::-webkit-details-marker { display: none; }
.autofill__btn:hover { background: var(--primary); color: #fff; }
.autofill__panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 360px; max-width: calc(100vw - 28px);
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 60; /* di atas bottom nav (50) biar gak ketutup di mobile */
}
.autofill__field { margin-bottom: 12px; }
.autofill__label {
  display: block;
  font-size: .72rem; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: 4px;
}
.autofill__hint { margin: 6px 0 10px; font-size: .76rem; line-height: 1.4; }

/* SOP import drag-drop zone */
.sop-import { padding: 14px 16px; margin-bottom: 14px; }
.sop-import__zone {
  position: relative; display: block;
  padding: 28px 18px;
  border: 2px dashed var(--border); border-radius: 12px;
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sop-import__zone:hover,
.sop-import__zone:focus,
.sop-import__zone--drag {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-2));
  outline: none;
}
.sop-import__icon { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.sop-import__title { font-size: 1rem; font-weight: 600; color: var(--primary-dark); margin-bottom: 6px; }
.sop-import__hint { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.sop-import__spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: sop-spin 0.8s linear infinite;
}
@keyframes sop-spin { to { transform: rotate(360deg); } }
.sop-import__result {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .88rem;
}
.sop-import__result--success { background: var(--success-soft); color: var(--success); border: 1px solid var(--success); }
.sop-import__result--error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }

.sop-import__result--warn {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #92400e;
  border: 1px solid #f59e0b;
}

/* Drive shortcut di /paket/:id/checklist — link ke folder Google Drive upload konten */
.drive-shortcut {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin: 14px 0 18px;
  background: linear-gradient(135deg, color-mix(in srgb, #4285f4 8%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, #4285f4 40%, var(--border-soft));
  border-left: 4px solid #4285f4;
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s;
}
.drive-shortcut:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(66,133,244,.18); }
.drive-shortcut__icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: #fff;
  border-radius: 10px; border: 1px solid var(--border-soft);
}
.drive-shortcut__main { flex: 1; min-width: 0; }
.drive-shortcut__title { font-weight: 700; font-size: 1rem; color: #1967d2; margin-bottom: 2px; }
.drive-shortcut__sub { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.drive-shortcut__chev { font-size: 1.2rem; color: #1967d2; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
 * Phone-specific overrides untuk semua user pages (≤600px)
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Preserve bottom clearance untuk bottomnav (56px) + FAB pop-up (22px) +
     buffer (32px) + iOS safe area. Tanpa shorthand 4-value supaya gak reset
     bottom ke 14px. */
  .container { padding: 14px 12px calc(110px + var(--safe-bottom)) 12px; }
  /* Stats grid — 4 col jadi 2 col di phone */
  .stats-grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
  .stat__val { font-size: 1.3rem; }
  .stat__lbl { font-size: .72rem; }

  /* Feedback overview cards 4-col → 2-col */
  .feedback-overview { grid-template-columns: repeat(2, 1fr) !important; }
  .feedback-overview__num { font-size: 1.5rem; }

  /* Rekening pembayaran grid */
  .rek-card__grid { grid-template-columns: 1fr !important; }

  /* Kurs calc row — stack vertical biar input lebih lebar */
  .kurs-calc__row { flex-direction: column; gap: 8px; }
  .kurs-calc__swap { transform: rotate(90deg); align-self: center; }
  .kurs-calc__rate-row { flex-direction: column; gap: 8px; }
  .kurs-calc__presets { display: flex; flex-wrap: wrap; gap: 4px; }

  /* Bingkai grid — 2 col → 1 col */
  .bingkai-grid { grid-template-columns: 1fr !important; }

  /* Page header collapse */
  .page-header { padding: 14px 0; }
  .page-header__title { font-size: 1.3rem; }
  .page-header__sub { font-size: .82rem; }

  /* Panduan TOC — wrap properly */
  .panduan-toc { position: static; }
  .panduan-toc__list { gap: 4px 10px; }
  .panduan-toc__list a { font-size: .8rem; }

  /* Telegram setting code card padding */
  .feedback-summaries { grid-template-columns: 1fr !important; }
  .feedback-list { gap: 10px; }
}

/* ===== /performance page (TL/Muthowwif personal rekap) ===== */
.perf-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 16px;
}
.perf-stat {
  padding: 16px 18px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.perf-stat__lbl {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.perf-stat__big {
  font-size: 2.4rem; font-weight: 800; line-height: 1; margin: 6px 0 4px;
}
.perf-stat__sub { font-size: .8rem; color: var(--muted); }
.perf-stat__dist {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px;
}
.perf-stat--a { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); }
.perf-stat--a .perf-stat__big { color: #047857; }
.perf-stat--b { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); }
.perf-stat--b .perf-stat__big { color: #1d4ed8; }
.perf-stat--c { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }
.perf-stat--c .perf-stat__big { color: #92400e; }
.perf-stat--d { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); }
.perf-stat--d .perf-stat__big { color: #991b1b; }

.perf-dist {
  display: inline-block; padding: 3px 8px; border-radius: 5px;
  font-size: .72rem; font-weight: 700;
}
.perf-dist--a { background: rgba(16,185,129,.15); color: #047857; }
.perf-dist--b { background: rgba(59,130,246,.15); color: #1d4ed8; }
.perf-dist--c { background: rgba(245,158,11,.15); color: #92400e; }
.perf-dist--d { background: rgba(220,38,38,.15); color: #991b1b; }

.perf-aspects-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: 14px;
}
.perf-aspect-card { padding: 16px 18px; }
.perf-aspect-card--top { border-top: 3px solid #10b981; }
.perf-aspect-card--weak { border-top: 3px solid #f59e0b; }
.perf-aspect-card__hd { margin-bottom: 10px; }
.perf-aspect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.perf-aspect-list li {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; background: var(--surface-2); border-radius: 8px;
}
.perf-aspect-rank {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
}
.perf-aspect-label { flex: 1; min-width: 0; font-size: .85rem; }
.perf-aspect-score {
  flex-shrink: 0; padding: 3px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.perf-aspect-score--ok { background: rgba(16,185,129,.15); color: #047857; }
.perf-aspect-score--warn { background: rgba(245,158,11,.15); color: #92400e; }

.perf-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 760px; }
.perf-tbl thead { background: var(--surface-2); }
.perf-tbl th {
  padding: 10px 12px; text-align: left;
  font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
}
.perf-tbl th.num { text-align: right; }
.perf-tbl td {
  padding: 12px; border-bottom: 1px solid var(--border-soft);
}
.perf-tbl td.num { text-align: right; white-space: nowrap; }
.perf-tbl tr:last-child td { border-bottom: none; }

.perf-grade-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-weight: 700; font-size: .78rem;
}
.perf-grade-pill.perf-stat--a { background: rgba(16,185,129,.15); color: #047857; border: 1px solid rgba(16,185,129,.3); }
.perf-grade-pill.perf-stat--b { background: rgba(59,130,246,.15); color: #1d4ed8; border: 1px solid rgba(59,130,246,.3); }
.perf-grade-pill.perf-stat--c { background: rgba(245,158,11,.15); color: #92400e; border: 1px solid rgba(245,158,11,.3); }
.perf-grade-pill.perf-stat--d { background: rgba(220,38,38,.15); color: #991b1b; border: 1px solid rgba(220,38,38,.3); }

/* ===== /performance — Tier 1 + Tier 2 sections ===== */
.perf-row-2 {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: 14px;
}

/* Trend chart */
.perf-trend { width: 100%; overflow-x: auto; }
.perf-trend__svg { width: 100%; max-width: 100%; height: auto; min-width: 600px; }

/* Rank vs peer */
.perf-rank { padding: 18px; text-align: center; }
.perf-rank__body { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.perf-rank__big {
  font-size: 3rem; font-weight: 800; line-height: 1;
  color: var(--primary, #2563eb);
}
.perf-rank__sub { font-size: .85rem; line-height: 1.4; margin-top: 4px; }
.perf-rank__pill {
  display: inline-block; margin-top: 6px; padding: 5px 14px;
  background: rgba(16,185,129,.15); color: #047857;
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 999px; font-size: .85rem; font-weight: 700;
}

/* Compliance Tugas */
.perf-compl { padding: 18px; }
.perf-compl__big {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--text); text-align: center; margin: 8px 0 12px;
}
.perf-compl__bar {
  display: flex; height: 12px; border-radius: 6px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  margin-bottom: 10px;
}
.perf-compl__seg { height: 100%; }
.perf-compl__seg--ok { background: #10b981; }
.perf-compl__seg--late { background: #f59e0b; }
.perf-compl__seg--pending { background: rgba(107,114,128,.3); }
.perf-compl__legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; }
.perf-compl__dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.perf-compl__dot--ok { background: #10b981; }
.perf-compl__dot--late { background: #f59e0b; }
.perf-compl__dot--pending { background: rgba(107,114,128,.5); }

/* Komplain Serius */
.perf-complaint {
  padding: 18px;
  background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.3);
  border-left: 4px solid #dc2626;
  margin-bottom: 14px;
}
.perf-complaint__hd { color: #991b1b; }
.perf-complaint__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.perf-complaint__list li {
  padding: 10px 14px; background: var(--surface); border-radius: 8px;
  border-left: 3px solid #dc2626;
}
.perf-complaint__meta { font-size: .88rem; margin-bottom: 4px; }
.perf-complaint__detail { font-size: .9rem; font-style: italic; line-height: 1.5; color: var(--text); }

/* Quote Feedback */
.perf-quote { padding: 18px; }
.perf-quote--positive { border-top: 3px solid #10b981; }
.perf-quote--improve { border-top: 3px solid #f59e0b; }
.perf-quote__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.perf-quote__list li {
  padding: 12px 14px; background: var(--surface-2); border-radius: 8px;
}
.perf-quote__text { font-size: .92rem; line-height: 1.55; font-style: italic; }
.perf-quote__meta { margin-top: 6px; }

/* Income */
.perf-income { padding: 18px; }
.perf-income__big {
  font-size: 1.8rem; font-weight: 800; line-height: 1;
  color: #047857; margin: 6px 0 14px;
  font-family: ui-monospace, monospace;
}
.perf-income__bars { display: flex; flex-direction: column; gap: 8px; }
.perf-income__bar { display: flex; flex-direction: column; gap: 4px; }
.perf-income__bar-lbl { display: flex; justify-content: space-between; font-size: .82rem; }
.perf-income__bar-track {
  height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden;
}
.perf-income__bar-fill {
  height: 100%; background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 4px;
}

/* Video Output */
.perf-video { padding: 18px; }
.perf-video__big {
  text-align: center; margin: 10px 0 4px;
  font-family: ui-monospace, monospace;
}
.perf-video__delivered {
  font-size: 2.4rem; font-weight: 800; color: var(--primary, #2563eb);
}
.perf-video__sep { font-size: 1.6rem; color: var(--muted); margin: 0 6px; }
.perf-video__target { font-size: 1.6rem; color: var(--muted); }
.perf-video__sub { text-align: center; margin-bottom: 14px; }
.perf-video__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.perf-video__list li { display: flex; flex-direction: column; gap: 4px; }
.perf-video__row-lbl { display: flex; justify-content: space-between; font-size: .82rem; }
.perf-video__row-track {
  height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden;
}
.perf-video__row-fill { height: 100%; border-radius: 4px; transition: width .25s; }
.perf-video__row-fill--ok { background: #10b981; }
.perf-video__row-fill--warn { background: #f59e0b; }
.perf-video__row-fill--danger { background: #dc2626; }

/* Penalty Tools TL */
.perf-penalty {
  padding: 18px;
  background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.3);
  border-left: 4px solid #f59e0b;
  margin-bottom: 14px;
}
.perf-penalty__hd {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.perf-penalty__total {
  font-family: ui-monospace, monospace; font-weight: 700;
  color: #991b1b; font-size: 1rem;
}
.perf-penalty__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.perf-penalty__list li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 14px; align-items: center;
  padding: 10px 14px; background: var(--surface); border-radius: 8px;
}
.perf-penalty__row-lbl { display: flex; align-items: center; gap: 8px; }
.perf-penalty__status {
  padding: 2px 8px; border-radius: 4px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
}
.perf-penalty__status--LOST { background: rgba(220,38,38,.15); color: #991b1b; }
.perf-penalty__status--DAMAGED { background: rgba(245,158,11,.15); color: #92400e; }
.perf-penalty__row-meta { grid-column: 1; }
.perf-penalty__row-charge {
  grid-column: 2; grid-row: 1 / 3;
  font-family: ui-monospace, monospace; font-weight: 600;
  color: #991b1b; white-space: nowrap;
}

/* Upcoming */
.perf-upcoming-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.perf-upcoming {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: .15s;
}
.perf-upcoming:hover {
  border-color: var(--primary, #2563eb);
  background: var(--surface);
}
.perf-upcoming__countdown {
  flex-shrink: 0; width: 60px; text-align: center;
  padding: 8px 6px; background: var(--primary, #2563eb); color: #fff;
  border-radius: 8px;
}
.perf-upcoming__days { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1; }
.perf-upcoming__days-unit { font-size: .65rem; opacity: .85; }
.perf-upcoming__body { flex: 1; min-width: 0; }
.perf-upcoming__batch { font-size: .72rem; color: var(--muted); font-weight: 600; }
.perf-upcoming__name { font-weight: 600; font-size: .88rem; line-height: 1.3; margin: 2px 0; }

/* Briefing header batch badge */
.briefing-batch-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em;
  background: linear-gradient(135deg, #6366f1, #3b82f6); color: #fff;
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.25);
}

/* Briefing cash SAR section (di dalam sec-tools) */
.briefing-cash-sar {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(6,182,212,.04));
  border: 1px solid rgba(16,185,129,.25);
}
.briefing-cash-sar__hd { display: flex; align-items: flex-start; gap: 10px; }
.briefing-cash-sar__icon { font-size: 22px; }
.briefing-cash-sar__title { font-weight: 800; font-size: .98rem; color: #065f46; }
.briefing-cash-sar__sub { font-size: 12px; margin-top: 2px; }
.briefing-cash-sar__amt {
  margin-left: auto; padding: 5px 12px; border-radius: 999px;
  background: #10b981; color: #fff; font-weight: 800; font-size: .92rem;
  white-space: nowrap;
}
.briefing-cash-sar__current {
  margin-top: 10px; padding: 10px 12px; background: rgba(16,185,129,.08);
  border-radius: 8px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.briefing-cash-sar__meta { font-size: 12px; color: #047857; flex: 1; min-width: 200px; }
.briefing-cash-sar__notes { font-size: 12px; color: #475569; font-style: italic; }
.briefing-cash-sar__bukti {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; background: #fff; border: 1px solid #bbf7d0;
  border-radius: 999px; color: #047857; font-weight: 700; font-size: 12px;
  text-decoration: none;
}
.briefing-cash-sar__bukti:hover { background: #d1fae5; }
.briefing-cash-sar__form {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed rgba(16,185,129,.3);
  display: flex; flex-direction: column; gap: 10px;
}
.briefing-cash-sar__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 560px) { .briefing-cash-sar__row { grid-template-columns: 1fr; } }
.briefing-cash-sar__label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 700; color: #1e293b;
}
.briefing-cash-sar__input {
  padding: 8px 11px; border: 1px solid #bbf7d0; border-radius: 8px;
  font-size: 13px; font-family: inherit; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.briefing-cash-sar__input:focus {
  border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.briefing-cash-sar__file {
  padding: 7px; border: 1px dashed #bbf7d0; border-radius: 8px;
  background: #fff; font-size: 12px;
}
.briefing-cash-sar__btn {
  align-self: flex-start;
  padding: 8px 18px; border-radius: 8px; border: 0;
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: 0 4px 10px rgba(16,185,129,.25);
}
.briefing-cash-sar__btn:hover { box-shadow: 0 6px 14px rgba(16,185,129,.36); }

/* Keuangan Batch — petugas grouped (TL atas, Muthowwif bawah) */
.keu-people-grp { display: flex; flex-direction: column; gap: 6px; }
.keu-people-row { display: flex; align-items: flex-start; gap: 7px; }
.keu-people-tag {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--muted);
}
.keu-people-tag--tl { background: rgba(99,102,241,.14); color: #3730a3; }
.keu-people-tag--muth { background: rgba(16,185,129,.14); color: #047857; }
.keu-people-names { display: flex; flex-direction: column; gap: 1px; font-size: .82rem; line-height: 1.3; }

/* Keuangan Batch — uang diterima column (total + breakdown) */
.keu-diterima { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.keu-diterima__total { font-weight: 700; font-size: .88rem; color: #065f46; }
.keu-diterima__breakdown { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.keu-diterima__src {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; font-family: ui-monospace, monospace;
}
.keu-diterima__src--kantor { background: rgba(99,102,241,.12); color: #3730a3; }
.keu-diterima__src--handling { background: rgba(245,158,11,.14); color: #92400e; }

/* Keuangan Batch — selisih + status combined */
.keu-tbl__selisih-cell {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.keu-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.keu-status__ico { font-size: 0.78rem; line-height: 1; }
.keu-status__lbl { line-height: 1; }
.keu-status--excellent {
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(34,197,94,.1));
  color: #047857; border-color: rgba(16,185,129,.32);
}
.keu-status--ontrack {
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(99,102,241,.08));
  color: #1d4ed8; border-color: rgba(59,130,246,.3);
}
.keu-status--critical {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(251,146,60,.1));
  color: #92400e; border-color: rgba(245,158,11,.32);
}
.keu-status--over {
  background: linear-gradient(135deg, rgba(220,38,38,.18), rgba(244,63,94,.1));
  color: #b91c1c; border-color: rgba(220,38,38,.32);
  animation: keuStatusPulse 2.4s ease-in-out infinite;
}
.keu-status--idle {
  background: var(--surface-2);
  color: var(--muted); border-color: var(--border-soft);
}
@keyframes keuStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.18); }
  50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* Worksheet eval — Tandai Wajar button (over-budget exception flag) */
.ws-fin-wajar-form { display: inline-block; }
.ws-fin-wajar-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
  background: var(--surface-2); color: var(--muted);
  border: 1px dashed var(--border, #cbd5e1);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ws-fin-wajar-btn:hover { background: rgba(99,102,241,.12); color: #3730a3; border-color: rgba(99,102,241,.35); border-style: solid; }
.ws-fin-wajar-btn--on {
  background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(99,102,241,.12));
  color: #6b21a8; border: 1px solid rgba(168,85,247,.4); border-style: solid;
}
.ws-fin-wajar-btn--on:hover { background: rgba(220,38,38,.12); color: #b91c1c; border-color: rgba(220,38,38,.3); }
.ws-fin-tbl__row--wajar { background: linear-gradient(90deg, rgba(168,85,247,.05), transparent); }

/* Worksheet eval action — locked indicator when status=completed */
.ws-actions__locked {
  display: inline-flex; align-items: center; padding: 6px 14px;
  border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: rgba(16,185,129,.14); color: #047857;
  border: 1px solid rgba(16,185,129,.3);
}

/* Admin dashboard — To-Do Inbox */
.adm-inbox { margin: 14px 0 18px; }
.adm-inbox__hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 10px;
}
.adm-inbox__hd h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.adm-inbox__legend { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-action-pill {
  font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
}
.adm-action-pill--urgent { background: rgba(220,38,38,.14); color: #b91c1c; }
.adm-action-pill--warn   { background: rgba(245,158,11,.14); color: #92400e; }
.adm-action-pill--info   { background: rgba(59,130,246,.14); color: #1d4ed8; }

.adm-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.adm-action {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .15s;
}
.adm-action::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--surface-2);
}
.adm-action:hover {
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08);
  border-color: var(--border);
}
.adm-action--urgent::before { background: linear-gradient(180deg, #dc2626, #ef4444); }
.adm-action--urgent { background: linear-gradient(135deg, rgba(220,38,38,.06), rgba(244,63,94,.02)); }
.adm-action--urgent:hover { border-color: rgba(220,38,38,.4); }
.adm-action--warning::before { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.adm-action--warning { background: linear-gradient(135deg, rgba(245,158,11,.06), rgba(251,146,60,.02)); }
.adm-action--warning:hover { border-color: rgba(245,158,11,.4); }
.adm-action--info::before { background: linear-gradient(180deg, #3b82f6, #6366f1); }
.adm-action--info { background: linear-gradient(135deg, rgba(59,130,246,.05), rgba(99,102,241,.02)); }
.adm-action--info:hover { border-color: rgba(59,130,246,.4); }

.adm-action__hd { display: flex; align-items: center; justify-content: space-between; }
.adm-action__icon { font-size: 1.5rem; line-height: 1; }
.adm-action__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 28px; padding: 0 10px; border-radius: 999px;
  font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--text);
}
.adm-action--urgent .adm-action__count { background: #dc2626; color: #fff; }
.adm-action--warning .adm-action__count { background: #f59e0b; color: #fff; }
.adm-action--info .adm-action__count { background: #3b82f6; color: #fff; }

.adm-action__title { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.adm-action__hint { font-size: 0.78rem; color: var(--muted); line-height: 1.4; flex: 1; }
.adm-action__cta {
  font-size: 0.78rem; font-weight: 700;
  color: var(--primary, #3730a3);
  padding-top: 6px; margin-top: auto;
  border-top: 1px dashed var(--border-soft);
}

/* Collapsible KPI section */
.adm-kpi-fold { margin: 14px 0; }
.adm-kpi-fold__summary {
  list-style: none; cursor: pointer; padding: 10px 14px;
  background: var(--surface-2); border-radius: 10px;
  font-weight: 700; font-size: 0.88rem;
}
.adm-kpi-fold__summary::-webkit-details-marker { display: none; }
.adm-kpi-fold[open] .adm-kpi-fold__summary { background: var(--surface); border: 1px solid var(--border-soft); border-bottom: 0; border-radius: 10px 10px 0 0; }

/* === User homepage — Post-Batch Reminder === */
.post-batch {
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(99,102,241,.05));
  border: 1px solid rgba(245,158,11,.25);
}
.post-batch__hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.post-batch__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: #92400e; }
.post-batch__sub { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.post-batch__badge {
  display: inline-flex; align-items: center; padding: 4px 12px;
  background: #dc2626; color: #fff; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(220,38,38,.3);
}
.post-batch-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.post-batch-card:last-child { margin-bottom: 0; }
.post-batch-card__hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px dashed var(--border-soft);
}
.post-batch-card__paket { font-weight: 700; font-size: 0.92rem; line-height: 1.3; }
.post-batch-card__pulang { font-size: 0.72rem; color: var(--muted); margin-top: 3px; }
.post-batch-card__count {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(245,158,11,.14); color: #92400e;
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.post-batch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.post-batch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2);
  border-left: 3px solid var(--muted);
}
.post-batch-item--done {
  background: rgba(16,185,129,.06);
  border-left-color: #10b981;
  opacity: 0.7;
}
.post-batch-item--warning:not(.post-batch-item--done) {
  background: rgba(245,158,11,.08);
  border-left-color: #f59e0b;
}
.post-batch-item--urgent:not(.post-batch-item--done) {
  background: rgba(220,38,38,.08);
  border-left-color: #dc2626;
}
.post-batch-item__check {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-soft);
  font-weight: 800; font-size: 0.85rem; color: var(--muted);
}
.post-batch-item--done .post-batch-item__check {
  background: #10b981; color: #fff; border-color: #10b981;
}
.post-batch-item--urgent:not(.post-batch-item--done) .post-batch-item__check {
  color: #dc2626; border-color: rgba(220,38,38,.3);
}
.post-batch-item__body { flex: 1; min-width: 0; }
.post-batch-item__title {
  font-weight: 700; font-size: 0.85rem; line-height: 1.3;
  text-decoration: none;
}
.post-batch-item--done .post-batch-item__title { text-decoration: line-through; color: var(--muted); }
.post-batch-item__hint { font-size: 0.72rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.post-batch-item__cta {
  flex: none; padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  color: var(--primary, #3730a3); font-size: 0.72rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.post-batch-item--urgent .post-batch-item__cta {
  background: #dc2626; color: #fff; border-color: #dc2626;
}
.post-batch-item--urgent .post-batch-item__cta:hover { background: #b91c1c; }
.post-batch-item__cta:hover { background: var(--surface-2); }

@media (max-width: 480px) {
  .post-batch-item { padding: 9px 10px; gap: 8px; }
  .post-batch-item__cta { padding: 5px 9px; font-size: 0.68rem; }
}

/* Pill purple (untuk badge Owner di vibe user list) */
.pill--purple { background: rgba(168,85,247,.14); color: #6b21a8; }

/* Vibe user import banner */
.vibe-user-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(99,102,241,.04));
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 12px;
  font-size: 0.85rem; line-height: 1.45;
}
.vibe-user-banner__ico { font-size: 1.2rem; line-height: 1; }

/* Admin impersonate-vibe banner */
.adm-impersonate-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #c2410c, #ea580c);
  color: #fff; font-size: 0.85rem;
  border-bottom: 2px solid #9a3412;
  position: sticky; top: 0; z-index: 100;
}
.adm-impersonate-banner__msg { flex: 1; min-width: 0; line-height: 1.35; }
.adm-impersonate-banner__stop {
  flex: none; padding: 6px 14px; border-radius: 999px;
  background: #fff; color: #c2410c; border: 0;
  font-weight: 700; font-size: 0.78rem; cursor: pointer;
  white-space: nowrap;
}
.adm-impersonate-banner__stop:hover { background: #fef2f2; }

/* Login page — alternate login link (cross-link antara /login dan /admin/login) */
.login-alt { margin-top: 18px; }
.login-alt__divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 12px;
  font-size: 0.72rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.login-alt__divider::before, .login-alt__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-soft);
}
.login-alt__btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  text-decoration: none; color: var(--text);
  transition: background .15s, border-color .15s, transform .12s;
}
.login-alt__btn:hover { background: var(--surface); border-color: var(--primary, #3730a3); transform: translateY(-1px); }
.login-alt__icon { font-size: 1.4rem; line-height: 1; }
.login-alt__text { flex: 1; min-width: 0; }
.login-alt__title { font-weight: 700; font-size: 0.88rem; line-height: 1.3; }
.login-alt__sub { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.login-alt__arrow { font-size: 1.15rem; color: var(--muted); }
.login-alt__btn:hover .login-alt__arrow { color: var(--primary, #3730a3); }

/* Visa edit form (di kartu Visa detail) — 2-col grid, label di atas input */
.tdoc-visa-edit {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
  margin-top: 10px; padding: 12px;
  background: var(--surface-2, #f8fafc); border-radius: 8px;
  border: 1px solid var(--border-soft, #e5e7eb);
}
.tdoc-visa-edit__fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tdoc-visa-edit__fld--full { grid-column: 1 / -1; }
.tdoc-visa-edit__lbl { font-size: .72rem; font-weight: 600; color: var(--muted, #64748b); }
.tdoc-visa-edit__fld input { padding: 7px 9px; font-size: .86rem; min-width: 0; }
.tdoc-visa-edit__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 4px; }

/* === Block Seat manifest (TA-style) === */
.bs-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 720px) { .bs-stats { grid-template-columns: repeat(2, 1fr); } }
.bs-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #e5e7eb); border-radius: 10px;
}
.bs-stat__lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted, #64748b); }
.bs-stat__val { font-size: 1.4rem; font-weight: 800; color: #0f172a; }
.bs-stat__val--ok { color: #059669; }
.bs-stat__val--warn { color: #d97706; }

.bs-pnr-settings {
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border-soft, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 14px;
}
.bs-pnr-settings summary {
  padding: 14px 16px; cursor: pointer;
  font-weight: 700; color: #0f172a;
  border-radius: 10px;
}
.bs-pnr-settings summary:hover { background: rgba(99,102,241,.04); }
.bs-pnr-settings[open] summary { border-bottom: 1px solid var(--border-soft); }

.bs-manifest { padding: 0; overflow: hidden; }
.bs-manifest__hd {
  padding: 18px 20px;
  background: linear-gradient(135deg, #b45309, #d97706);
  color: #fff;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.bs-manifest__title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.bs-manifest__hd .muted { color: rgba(255,255,255,.85) !important; }

.bs-export { position: relative; }
.bs-export__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  background: #fff; color: #b45309; font-weight: 700; font-size: .85rem;
  border: 0; list-style: none;
}
.bs-export__btn::-webkit-details-marker { display: none; }
.bs-export__btn:hover { background: #fef3c7; }
.bs-export__list {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 280px; background: #fff;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: 6px; z-index: 100;
  max-height: 380px; overflow-y: auto;
}
.bs-export__opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 6px;
  color: #0f172a; text-decoration: none; font-size: .85rem;
}
.bs-export__opt:hover { background: var(--surface-2, #f8fafc); }
.bs-export__opt strong { color: #0f172a; font-weight: 700; }

.bs-singlepnr-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0; padding: 14px 20px;
  background: linear-gradient(90deg, #ecfdf5, #d1fae5);
  border-bottom: 1px solid #6ee7b7;
  flex-wrap: wrap;
}
.bs-singlepnr-banner__txt { display: flex; flex-direction: column; gap: 2px; }
.bs-singlepnr-banner strong { color: #065f46; font-size: .9rem; }
.bs-singlepnr-banner span { color: #047857; font-size: .82rem; }
.bs-singlepnr-btn { background: #059669 !important; border-color: #059669 !important; color: #fff !important; }
.bs-singlepnr-btn:hover { background: #047857 !important; }
.bs-singlepnr-btn:disabled { opacity: .65; cursor: wait; }

.bs-pnr-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px 20px; background: #fff;
  border-bottom: 1px solid var(--border-soft);
}
.bs-pnr-tab {
  padding: 7px 14px; border: 0; border-radius: 8px;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  background: var(--surface-2); color: #475569;
  transition: background .12s, color .12s, transform .08s;
}
.bs-pnr-tab:hover { transform: translateY(-1px); }
.bs-pnr-tab.is-active { background: #1e40af; color: #fff; }
.bs-pnr-tab--emerald.is-active { background: #059669; }
.bs-pnr-tab--purple.is-active  { background: #7c3aed; }
.bs-pnr-tab--orange.is-active  { background: #ea580c; }
.bs-pnr-tab--pink.is-active    { background: #db2777; }
.bs-pnr-tab--cyan.is-active    { background: #0891b2; }
.bs-pnr-tab--indigo.is-active  { background: #4338ca; }
.bs-pnr-tab--rose.is-active    { background: #e11d48; }
.bs-pnr-tab--amber.is-active   { background: #b45309; }

.bs-bulkbar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 20px; background: #1e40af; color: #fff;
  flex-wrap: wrap;
}
.bs-bulkbar[hidden] { display: none !important; }
.bs-bulkbar__info { font-weight: 700; }
.bs-bulkbar__count {
  display: inline-block; min-width: 28px; padding: 2px 8px;
  background: rgba(255,255,255,.22); border-radius: 999px; margin-right: 6px;
}
.bs-bulkbar__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bs-bulkbar__actions .field__input {
  background: #fff; color: #0f172a; min-width: 240px;
}

.bs-mtable-wrap { overflow-x: auto; }
.bs-mtable { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bs-mtable thead th {
  text-align: left; padding: 10px 14px;
  background: var(--surface-2); border-bottom: 2px solid var(--border);
  font-size: .68rem; text-transform: uppercase; font-weight: 700;
  letter-spacing: .04em; color: var(--muted);
}
.bs-mtable tbody td {
  padding: 8px 14px; border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.bs-mrow:hover { background: rgba(99,102,241,.04); }
.bs-mrow--tl { background: linear-gradient(90deg, #fffbeb 0%, #fff 60%); border-left: 4px solid #f59e0b; }
.bs-mrow--unassigned { background: rgba(245,158,11,.04); }
.bs-mrow--tl.bs-mrow--unassigned { background: linear-gradient(90deg, #fffbeb 0%, #fff 60%); }
.bs-col-chk { width: 36px; text-align: center; }
.bs-col-no { width: 40px; color: var(--muted); font-weight: 600; }
.bs-col-pnr { width: 200px; }
.bs-col-seat { width: 116px; }
.bs-col-catatan { min-width: 180px; }
.bs-tl-icon { color: #f59e0b; font-size: 1rem; }

.bs-nama { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bs-nama__txt { font-weight: 600; color: #0f172a; }
.bs-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-size: .65rem; font-weight: 700; letter-spacing: .02em;
}
.bs-badge--tl { background: #fef3c7; color: #92400e; }
.bs-badge--pnr-emerald { background: #d1fae5; color: #065f46; }
.bs-badge--pnr-purple  { background: #ede9fe; color: #5b21b6; }
.bs-badge--pnr-orange  { background: #fed7aa; color: #9a3412; }
.bs-badge--pnr-pink    { background: #fce7f3; color: #9d174d; }
.bs-badge--pnr-cyan    { background: #cffafe; color: #155e75; }
.bs-badge--pnr-indigo  { background: #e0e7ff; color: #312e81; }
.bs-badge--pnr-rose    { background: #ffe4e6; color: #9f1239; }
.bs-badge--pnr-amber   { background: #fef3c7; color: #92400e; }

.bs-pnr-sel, .bs-seat-sel, .bs-catatan { font-size: .85rem; padding: 6px 8px; }
.bs-catatan { resize: vertical; min-height: 34px; }

.bs-seat-sel--window { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.bs-seat-sel--aisle  { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.bs-seat-sel--middle { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

.bs-flash-ok    { outline: 2px solid #22c55e !important; outline-offset: -1px; transition: outline .15s; }
.bs-flash-err   { outline: 2px solid #ef4444 !important; outline-offset: -1px; }

.bs-empty { padding: 28px; text-align: center; background: var(--surface-2); }

/* === Hotel Booking page === */
.hotel-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 980px) { .hotel-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .hotel-stats { grid-template-columns: repeat(2, 1fr); } }
.hotel-stat {
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--border-soft); border-radius: 10px;
}
.hotel-stat__lbl { font-size: .65rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hotel-stat__val { font-size: 1.4rem; font-weight: 800; color: #0f172a; line-height: 1.1; margin: 4px 0; }

.hotel-table thead th { background: #1e3a8a; color: #fff; font-weight: 700; }
.hotel-table thead th.num { text-align: right; }
.hotel-table tbody td.num { text-align: right; font-weight: 600; }
.hotel-table tbody tr:hover { background: rgba(99,102,241,.04); }
.hotel-resv {
  font-family: ui-monospace, monospace; font-size: .82rem; font-weight: 700;
  background: #e0e7ff; color: #1e40af; padding: 2px 8px; border-radius: 6px;
}
.hotel-status {
  display: inline-block; font-size: .68rem; font-weight: 800;
  padding: 2px 8px; border-radius: 4px;
}
.hotel-status--ok      { background: #d1fae5; color: #065f46; }
.hotel-status--bad     { background: #fee2e2; color: #b91c1c; }
.hotel-status--warn    { background: #fef3c7; color: #92400e; }
.hotel-status--neutral { background: #f1f5f9; color: #475569; }
.hotel-cl-active { background: rgba(16,185,129,.05); border-left: 4px solid #10b981; }

/* Hotel table column widths + clamp + density tweaks */
.hotel-table { table-layout: fixed; font-size: .85rem; }
.hotel-table tbody td { vertical-align: top; padding: 10px 10px; }
/* Legacy (per-leg) columns — kept for backward compat */
.ht-col-hotel  { width: 14%; min-width: 160px; }
.ht-col-period { width: 12%; min-width: 140px; }
.ht-col-vendor { width: 12%; min-width: 120px; }
.ht-col-resv   { width: 12%; min-width: 140px; }
.ht-col-status { width: 11%; min-width: 110px; }
/* RTB layout (1 row = 1 paket): RTB | Pax | Makkah leg | Madinah leg | Aksi */
.hotel-table--rtb .ht-col-rtb { width: 16%; min-width: 180px; }
.hotel-table--rtb .ht-col-pax { width: 6%;  min-width: 70px; text-align: center; }
.hotel-table--rtb .ht-col-leg { width: 30%; min-width: 230px; }
.hotel-table--rtb .ht-col-aksi { width: 12%; min-width: 130px; }
.hotel-table--rtb tbody td.ht-col-pax,
.hotel-table--rtb tbody td:nth-child(2) { text-align: center; }
/* Fallback (non-rtb usage) */
.ht-col-rtb    { width: 14%; min-width: 150px; }
.ht-col-pax    { width: 13%; min-width: 150px; }
.ht-col-aksi   { width: 12%; min-width: 150px; }

/* Per-leg cell (inside Makkah/Madinah column) */
.ht-leg-cell { padding: 8px 10px !important; }
.ht-leg { display: flex; flex-direction: column; gap: 3px; }
.ht-leg-empty {
  color: #94a3b8; font-style: italic; font-size: .82rem;
  text-align: center; padding: 14px 0;
  background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f4f4f5 6px, #f4f4f5 12px);
  border-radius: 6px;
}
.ht-leg-divider { height: 1px; background: #e5e7eb; margin: 6px 0; }
.ht-leg__hotel { font-size: .92rem; line-height: 1.3; color: #0f172a; }
.ht-leg__period { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .82rem; color: #1e293b; }
.ht-leg__rooms { line-height: 1.3; }
.ht-leg__vendor {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}
.ht-leg__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }

.ht-rtb { font-weight: 800; color: #0f172a; }
.ht-paket {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35; margin-top: 2px;
}
.ht-hotel {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}
.ht-stars { color: #f59e0b; font-size: .76rem; }

.ht-period__dates { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.ht-period__arrow { color: #94a3b8; }

.ht-pax { font-size: .92rem; }
.ht-rooms { line-height: 1.3; margin-top: 2px; }

.ht-vendor {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}

.ht-resv-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ht-status-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ht-aksi { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.ht-mini-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 6px;
  font-size: .72rem; font-weight: 600; color: #475569;
  background: #f1f5f9; border: 1px solid var(--border-soft, #e5e7eb);
  text-decoration: none; white-space: nowrap;
  transition: background .12s;
}
.ht-mini-btn:hover { background: #e2e8f0; }
.ht-mini-btn--primary { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.ht-mini-btn--primary:hover { background: #dbeafe; }
.ht-mini-btn--add { background: #fef3c7; color: #92400e; border-color: #fcd34d; font-weight: 700; }
.ht-mini-btn--add:hover { background: #fde68a; }
.hotel-sync-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #ecfdf5; color: #065f46;
  border: 1px solid #6ee7b7;
  cursor: default;
}
.hotel-miss-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #fef2f2; color: #991b1b;
  border: 1px solid #fca5a5;
  cursor: help;
}
.hotel-diff-note {
  font-size: .76rem; line-height: 1.4; color: #0f172a;
  background: #fef3c7; padding: 6px 8px; border-radius: 6px;
  border-left: 3px solid #f59e0b;
}

/* CL history catatan perubahan — full-width row below main */
.cl-note-row > .cl-note-cell { padding: 4px 14px 12px; background: transparent; }
.cl-note-row.hotel-cl-active > .cl-note-cell { background: rgba(16, 185, 129, .04); }
.cl-note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .85rem; line-height: 1.55; color: #0f172a;
  background: #fef3c7; padding: 8px 12px; border-radius: 6px;
  border-left: 3px solid #f59e0b;
}
.cl-note__lbl { font-weight: 700; white-space: nowrap; color: #92400e; }
.cl-note__txt { flex: 1; }

/* === CL History page === */
.cl-hd {
  background: #fff; border: 1px solid var(--border-soft, #e5e7eb);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 14px;
}
.cl-hd__back { margin-bottom: 10px; }
.cl-hd__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cl-hd__icon { font-size: 1.6rem; }
.cl-hd__title { margin: 0; font-size: 1.4rem; font-weight: 800; color: #0f172a; }
.cl-hd__resv { font-size: 1rem !important; }
.cl-hd__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: #475569; }
.cl-hd__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: #f1f5f9; color: #475569; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.cl-hd__chip--rtb { background: #ecfdf5; color: #065f46; }
.cl-hd__chip--ver { background: #eff6ff; color: #1e40af; }

.cl-upload {
  background: linear-gradient(180deg, #eff6ff, #fff);
  border: 1px solid #bfdbfe; border-radius: 12px;
  padding: 18px; margin-bottom: 18px;
}
.cl-upload__hd { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.cl-upload__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: linear-gradient(135deg, #1e40af, #3b82f6); color: #fff;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; box-shadow: 0 6px 14px rgba(30,64,175,.25);
}
.cl-upload__title { margin: 0 0 2px; font-size: 1.05rem; font-weight: 800; color: #1e3a8a; }
.cl-upload__sub { margin: 0; font-size: .82rem; color: #475569; line-height: 1.5; }

.cl-upload__form { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch; }
@media (max-width: 720px) { .cl-upload__form { grid-template-columns: 1fr; } }

.cl-dropzone {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 130px; padding: 18px;
  background: #fff; border: 2px dashed #93c5fd; border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s, transform .08s;
}
.cl-dropzone:hover { border-color: #3b82f6; background: #f0f9ff; }
.cl-dropzone.is-drag { border-color: #1e40af; background: #dbeafe; transform: scale(1.01); }
.cl-dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cl-dropzone__inner,
.cl-dropzone__file {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; pointer-events: none;
}
.cl-dropzone__file { pointer-events: auto; }
.cl-dropzone__icon { font-size: 2rem; opacity: .85; }
.cl-dropzone__title { font-size: .92rem; font-weight: 700; color: #0f172a; }
.cl-dropzone__filename { font-size: .9rem; font-weight: 700; color: #1e40af; word-break: break-all; max-width: 320px; }
.cl-dropzone__clear {
  margin-top: 4px; background: transparent; border: 1px solid #dc2626;
  color: #dc2626; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 6px;
  cursor: pointer;
}
.cl-dropzone__clear:hover { background: #fee2e2; }

.cl-upload__submit {
  align-self: stretch; min-width: 200px;
  font-size: .92rem; padding: 0 22px;
}
.cl-upload__submit:disabled { opacity: .7; cursor: wait; }

/* === AR Aging (Penagihan) — mirror fin.rahmahgrup.id/ar/aging === */
.ar-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 980px) { .ar-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ar-kpis { grid-template-columns: 1fr; } }
.ar-kpi {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #e5e7eb); border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s;
}
.ar-kpi--clickable { cursor: pointer; }
.ar-kpi--clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.ar-kpi.is-active { border-color: #1e3a8a; box-shadow: 0 0 0 2px rgba(30,58,138,.18); }
.ar-kpi__lbl { font-size: .7rem; font-weight: 800; color: var(--muted, #64748b); text-transform: uppercase; letter-spacing: .04em; }
.ar-kpi__val { font-size: 1.6rem; font-weight: 800; color: #0f172a; line-height: 1.1; }
.ar-rumus {
  font-size: .65rem; color: var(--muted, #64748b);
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border-soft, #e5e7eb);
  line-height: 1.4; font-weight: 500;
}

.ar-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ar-group { padding: 0; overflow: hidden; }
.ar-group__hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #f8fafc, #fff); flex-wrap: wrap;
}
.ar-group__hd-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ar-group__rtb {
  font-weight: 800; font-size: .9rem;
  background: #059669; color: #fff;
  padding: 4px 12px; border-radius: 8px; white-space: nowrap;
}
.ar-group__name { font-size: .9rem; font-weight: 600; color: #0f172a; }
.ar-group__hd-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-group__chips { display: flex; gap: 4px; }
.ar-chip {
  display: inline-flex; padding: 2px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 700;
}
.ar-chip--red { background: #fee2e2; color: #b91c1c; }
.ar-chip--amber { background: #fef3c7; color: #92400e; }
.ar-chip--green { background: #d1fae5; color: #065f46; }
.ar-group__total { text-align: right; }

.ar-days {
  display: inline-flex; padding: 3px 10px; border-radius: 6px;
  font-size: .78rem; font-weight: 800;
}
.ar-days--red    { background: #fee2e2; color: #b91c1c; }
.ar-days--amber  { background: #fef3c7; color: #92400e; }
.ar-days--green  { background: #d1fae5; color: #065f46; }
.ar-days--past   { background: #e5e7eb; color: #6b7280; }

.ar-jamaah-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; }
.ar-jamaah {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px;
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-soft);
}
@media (max-width: 780px) { .ar-jamaah { grid-template-columns: 1fr; } }
.ar-jamaah--RED   { border-left: 4px solid #dc2626; background: rgba(220,38,38,.03); }
.ar-jamaah--AMBER { border-left: 4px solid #d97706; background: rgba(217,119,6,.03); }
.ar-jamaah--GREEN { border-left: 4px solid #059669; background: rgba(5,150,105,.02); }
.ar-jamaah__name-row { display: flex; align-items: center; gap: 6px; }
.ar-jamaah__name-row strong { color: #0f172a; }
.ar-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ar-dot--RED   { background: #dc2626; }
.ar-dot--AMBER { background: #d97706; }
.ar-dot--GREEN { background: #059669; }
.ar-risk-mini {
  font-size: .62rem; font-weight: 800;
  padding: 1px 6px; border-radius: 4px;
}
.ar-risk-mini--RED   { background: #fee2e2; color: #b91c1c; }
.ar-risk-mini--AMBER { background: #fef3c7; color: #92400e; }
.ar-risk-mini--GREEN { background: #d1fae5; color: #065f46; }

.ar-jamaah__progress-row { display: flex; justify-content: space-between; align-items: center; }
.ar-bar {
  width: 100%; height: 8px; background: #e5e7eb; border-radius: 99px;
  overflow: hidden; margin-top: 4px;
}
.ar-bar__fill { height: 100%; }
.ar-bar__fill--red   { background: #dc2626; }
.ar-bar__fill--amber { background: #d97706; }
.ar-bar__fill--green { background: #059669; }

.ar-next-action {
  margin-top: 6px; font-size: .72rem; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  display: flex; align-items: center; gap: 6px;
}
.ar-next-action--RED   { background: #fee2e2; color: #b91c1c; }
.ar-next-action--AMBER { background: #fef3c7; color: #92400e; }
.ar-next-action--GREEN { background: #d1fae5; color: #065f46; }

/* === Bus Add-on Export (visa-progress page) === */
.vp-export-chk {
  position: absolute; top: 10px; right: 10px; z-index: 2; cursor: pointer;
  padding: 4px; border-radius: 6px; background: rgba(255,255,255,.9);
  display: inline-flex; align-items: center;
}
.vp-export-chk input { width: 18px; height: 18px; cursor: pointer; margin: 0; accent-color: #1e3a8a; }
.vp-export-chk:hover { background: #e0e7ff; }

.vp-export-bar {
  position: sticky; bottom: 14px; z-index: 50;
  margin: 14px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px;
  background: #1e3a8a; color: #fff;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(30,58,138,.35);
  flex-wrap: wrap;
}
.vp-export-bar[hidden] { display: none !important; }
.vp-export-bar__info strong { background: rgba(255,255,255,.22); padding: 2px 10px; border-radius: 999px; margin-right: 6px; font-weight: 800; }
.vp-export-bar__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* === Itinerary Generator === */
.itin-pill {
  display: inline-block; padding: 3px 10px;
  background: #f1f5f9; color: #475569; border-radius: 999px;
  font-size: .76rem; font-weight: 700;
}
.itin-pill--full { background: #d1fae5; color: #065f46; }

.itin-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.itin-h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: #0f172a; }

.itin-slots {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (max-width: 880px) { .itin-slots { grid-template-columns: 1fr; } }

.itin-slot {
  padding: 12px; border: 1px solid var(--border-soft);
  background: var(--surface-2, #f8fafc); border-radius: 10px;
  border-left: 4px solid #f59e0b;
}
.itin-slot__hd {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: .9rem; color: #b45309;
}
.itin-slot__icon { font-size: 1.1rem; }
.itin-slot__grid {
  display: grid; grid-template-columns: 80px 90px 1fr; gap: 8px;
}
.itin-slot__grid label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.itin-slot__grid label > span { font-size: .66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.itin-slot__grid input { font-size: .82rem; padding: 5px 8px; }
.itin-slot__notes { grid-column: 1 / -1; }
@media (max-width: 540px) { .itin-slot__grid { grid-template-columns: 1fr 1fr; } .itin-slot__notes { grid-column: 1 / -1; } }

.itin-days { display: flex; flex-direction: column; gap: 10px; }
.itin-day {
  padding: 12px 14px; background: #fffbeb;
  border-left: 4px solid #f59e0b; border-radius: 8px;
}
.itin-day__hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.itin-day__num { font-weight: 800; color: #b45309; font-size: .9rem; }
.itin-day__name { color: #64748b; font-size: .82rem; }
.itin-day__txt { margin: 0; font-size: .88rem; line-height: 1.55; color: #0f172a; }
.itin-day__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.itin-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; background: #fff; border: 1px solid #fcd34d;
  border-radius: 999px; font-size: .74rem; color: #92400e;
}

.itin-bus-table thead th { background: #1e40af; color: #fff; }

@media print {
  .admin-shell__sidebar, .page-header > a, .btn { display: none !important; }
  .itin-card { box-shadow: none; border: 1px solid #e5e7eb; page-break-inside: avoid; }
}

/* === Pesawat tab (PNR + Schedule legs) === */
.pswt { display: flex; flex-direction: column; gap: 14px; }
.pswt-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; background: linear-gradient(135deg,#1e40af,#3730a3);
  color: #fff; border-radius: 12px;
}
.pswt-hd__title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.pswt-hd .muted { color: rgba(255,255,255,.85) !important; }
.pswt-hd .btn { background: #fff !important; color: #1e40af !important; border-color: #fff !important; }
.pswt-hd .btn:hover { background: #eef2ff !important; }
.pswt-empty { padding: 32px; background: var(--surface-2); border-radius: 12px; text-align: center; border: 1px dashed var(--border); }
.pswt-list { display: flex; flex-direction: column; gap: 14px; }

.pswt-pnr {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pswt-pnr__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
}
.pswt-pnr__hd-left { display: flex; align-items: center; gap: 12px; }
.pswt-pnr__icon { font-size: 1.6rem; }
.pswt-pnr__code { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.pswt-pnr__sub { font-size: .78rem; }

.pswt-pnr__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 12px;
  margin-bottom: 14px;
}
.pswt-pnr__grid-full { grid-column: 1 / -1; }
.pswt-pnr__grid label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pswt-pnr__grid label > span { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pswt-pnr__grid input, .pswt-pnr__grid select, .pswt-pnr__grid textarea { font-size: .85rem; padding: 6px 9px; }
@media (max-width: 980px) { .pswt-pnr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .pswt-pnr__grid { grid-template-columns: 1fr; } }

.pswt-legs-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 6px 0 8px; padding: 8px 0; color: #1e40af;
}
.pswt-legs-empty { padding: 14px; background: var(--surface-2); border-radius: 8px; }

.pswt-legs { display: flex; flex-direction: column; gap: 10px; }
.pswt-leg {
  padding: 12px; border: 1px solid var(--border-soft);
  background: var(--surface-2); border-radius: 10px;
  border-left: 4px solid #3b82f6;
}
.pswt-leg__head {
  display: grid; grid-template-columns: 80px 130px 1fr 40px;
  gap: 8px; align-items: center; margin-bottom: 10px;
}
.pswt-leg__order { font-size: .72rem; font-weight: 700; color: #1e40af; }
.pswt-leg__fn { font-weight: 700; }
.pswt-leg__ac { font-size: .82rem; }
.pswt-leg__del { color: #dc2626 !important; padding: 4px 8px !important; }

.pswt-leg__route {
  display: grid; grid-template-columns: 1fr 30px 1fr; gap: 10px; align-items: stretch;
  margin-bottom: 10px;
}
.pswt-leg__side {
  display: grid; grid-template-columns: 80px 1fr 80px; gap: 8px;
}
.pswt-leg__side label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pswt-leg__side label > span { font-size: .66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.pswt-leg__side label:last-child { grid-column: 1 / -1; }
.pswt-leg__side input { font-size: .82rem; padding: 5px 8px; }
.pswt-leg__arrow { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #3b82f6; font-weight: 700; }
@media (max-width: 780px) {
  .pswt-leg__route { grid-template-columns: 1fr; }
  .pswt-leg__arrow { transform: rotate(90deg); }
  .pswt-leg__side { grid-template-columns: 1fr 1fr; }
}

.pswt-leg__meta {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.pswt-leg__meta label { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 120px; }
.pswt-leg__meta label > span { font-size: .66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.pswt-leg__meta input { font-size: .82rem; padding: 5px 8px; }

.pswt-ok  { outline: 2px solid #22c55e !important; outline-offset: -1px; transition: outline .15s; }
.pswt-err { outline: 2px solid #ef4444 !important; outline-offset: -1px; }

/* Tdoc petugas row highlight (TL/Muthowwif) */
.tdoc-row-petugas { background: rgba(99,102,241,.045); }
.tdoc-row-petugas:hover { background: rgba(99,102,241,.08); }
.tdoc-visa-card--petugas { border-left: 4px solid #6366f1; }

/* Visa Export modal — 3 colored option cards (All/Male/Female) */
.tdoc-vexp-modal {
  width: min(960px, 96vw); max-height: 92vh;
  padding: 0; border: 0; border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.tdoc-vexp-modal::backdrop { background: rgba(15,23,42,.65); backdrop-filter: blur(2px); }
.tdoc-vexp-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
}
.tdoc-vexp-hd__title { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.tdoc-vexp-hd__sub { margin-top: 2px; }
.tdoc-vexp-x {
  background: transparent; border: 0; font-size: 1.2rem; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px; color: #64748b;
}
.tdoc-vexp-x:hover { background: rgba(15,23,42,.06); color: #0f172a; }
.tdoc-vexp-fmt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 0;
}
.tdoc-vexp-fmt__lbl { font-size: .82rem; font-weight: 700; color: #0f172a; }
.tdoc-vexp-fmt__seg {
  display: inline-flex; gap: 6px; padding: 4px;
  background: var(--surface-2, #f1f5f9); border-radius: 10px;
}
.tdoc-vexp-fmt__opt {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 0; text-align: left;
  font-size: .82rem; font-weight: 600; color: #475569;
  transition: background .12s, color .12s;
}
.tdoc-vexp-fmt__opt:hover { background: rgba(99,102,241,.08); color: #1e293b; }
.tdoc-vexp-fmt__opt.is-active {
  background: #fff; color: #0f172a;
  box-shadow: 0 2px 6px rgba(15,23,42,.10);
}
.tdoc-vexp-fmt__icon { font-size: 1rem; margin-right: 6px; }
.tdoc-vexp-fmt__opt .muted { font-weight: 400; font-size: .68rem; line-height: 1.1; margin-top: 2px; }
@media (max-width: 540px) {
  .tdoc-vexp-fmt { flex-direction: column; align-items: stretch; }
  .tdoc-vexp-fmt__seg { width: 100%; }
  .tdoc-vexp-fmt__opt { flex: 1; align-items: center; text-align: center; }
}

.tdoc-vexp-body {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 18px 20px;
}
@media (max-width: 760px) { .tdoc-vexp-body { grid-template-columns: 1fr; } }
.tdoc-vexp-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 16px 50px; border-radius: 12px; color: #fff;
  text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: transform .12s, box-shadow .12s;
  min-height: 220px;
}
.tdoc-vexp-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.tdoc-vexp-card--all { background: linear-gradient(135deg,#8b5cf6,#a855f7); }
.tdoc-vexp-card--m   { background: linear-gradient(135deg,#10b981,#059669); }
.tdoc-vexp-card--f   { background: linear-gradient(135deg,#ec4899,#db2777); }
.tdoc-vexp-card__icon { font-size: 1.6rem; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); border-radius: 10px; margin-bottom: 4px;
}
.tdoc-vexp-card__title { font-size: 1.1rem; font-weight: 800; }
.tdoc-vexp-card__sub { font-size: .8rem; opacity: .85; }
.tdoc-vexp-card__bullets { list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; font-size: .82rem;
}
.tdoc-vexp-card__bullets li { opacity: .95; }
.tdoc-vexp-card__count {
  position: absolute; right: 12px; bottom: 12px;
  font-size: .72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.tdoc-vexp-ft {
  padding: 12px 20px 16px; border-top: 1px solid var(--border-soft);
  display: flex; justify-content: flex-start;
}

/* Approval vaksin sub-group headers */
.appr-vaksin-group { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-2); }
.appr-vaksin-title { margin: 0 0 8px; font-size: .9rem; font-weight: 700; color: #0f172a; }

/* Approval reject section — always visible (no hide-show toggle) */
.appr-reject-section {
  margin-top: 14px; padding: 12px 14px;
  background: rgba(220,38,38,.05); border: 1px solid rgba(220,38,38,.25);
  border-radius: 8px;
}
.appr-reject-section__hd { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.appr-reject-section__hd strong { color: #b91c1c; }
.appr-reject__form { display: flex; flex-direction: column; gap: 8px; }

/* === Travel Dokumen Detail — 6-tab progress per paket === */
.tdoc-list-hd {
  display: grid; grid-template-columns: 1fr 140px 280px 100px;
  gap: 14px; padding: 12px 18px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.tdoc-row {
  display: grid; grid-template-columns: 1fr 140px 280px 100px;
  gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft); align-items: center;
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.tdoc-row:hover { background: rgba(99,102,241,.04); }
.tdoc-row:last-child { border-bottom: 0; }
.tdoc-row__paket { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tdoc-row__paket .nusuk-rtb-badge { align-self: flex-start; }
.tdoc-row__nama { font-weight: 600; font-size: .9rem; color: #0f172a; }
.tdoc-row__date { font-size: .82rem; color: #475569; }
.tdoc-row__progress { display: flex; flex-direction: column; gap: 6px; }
.tdoc-row__cta { font-weight: 600; font-size: .85rem; color: var(--primary, #4338ca); text-align: right; }

.tdoc-progress-bar {
  height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden;
}
.tdoc-progress-fill { height: 100%; transition: width .25s; background: #94a3b8; }
.tdoc-progress-fill--ok   { background: linear-gradient(90deg, #10b981, #059669); }
.tdoc-progress-fill--warn { background: linear-gradient(90deg, #f59e0b, #d97706); }
.tdoc-progress-fill--low  { background: linear-gradient(90deg, #ef4444, #dc2626); }
.tdoc-progress-text { font-size: .8rem; color: #475569; }
.tdoc-progress-text strong { color: #0f172a; }

/* 2-bar Siskopatuh progress: input + qc */
.tdoc-prog2 { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tdoc-prog2:last-child { margin-bottom: 0; }
.tdoc-prog2__lbl { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 600; color: #475569; }
.tdoc-prog2__pct { color: #1d4ed8; }
.tdoc-prog2__sub { display: flex; gap: 12px; font-size: .72rem; color: #64748b; flex-wrap: wrap; }
.muted-ok { color: #047857; }
.muted-warn { color: #d97706; }
@media (max-width: 800px) {
  .tdoc-list-hd { display: none; }
  .tdoc-row { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
}

/* Detail tables */
.tdoc-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tdoc-table th, .tdoc-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.tdoc-table th { background: var(--surface-2); color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.tdoc-table tr:hover { background: rgba(99,102,241,.03); }
.tdoc-table code { font-family: ui-monospace, "SF Mono", monospace; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: .85em; }
.tdoc-table .small { font-size: .78rem; }

.tag { display: inline-flex; padding: 2px 7px; border-radius: 5px; font-size: .72rem; font-weight: 600; }
.tag--ok    { background: rgba(16,185,129,.14); color: #047857; border: 1px solid rgba(16,185,129,.3); }
.tag--warn  { background: rgba(245,158,11,.14); color: #92400e; border: 1px solid rgba(245,158,11,.3); }
.tag--info  { background: rgba(59,130,246,.14); color: #1d4ed8; border: 1px solid rgba(59,130,246,.3); }
.tag--muted { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }

/* Preparation checklist */
.tdoc-prep-group { margin-bottom: 20px; }
.tdoc-prep-cat { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.tdoc-skinput { width: 100%; max-width: 160px; padding: 7px 10px; font-size: .88rem; border: 1px solid var(--border, #d8dae3); border-radius: 8px; background: var(--card, #fff); color: var(--ink, #1f2937); outline: none; transition: border-color .12s, box-shadow .12s; box-sizing: border-box; }
.tdoc-skinput:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
select.tdoc-skinput { cursor: pointer; }
.sisko-expand { width: 26px; height: 26px; border: 1px solid var(--border, #d8dae3); border-radius: 7px; background: #fff; cursor: pointer; font-size: .8rem; color: #475569; line-height: 1; transition: background .12s; }
.sisko-expand:hover, .sisko-expand.is-open { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.sisko-detailrow > td { background: #f8fafc; }
.sisko-bigcards { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 18px; }
.sisko-bigcards img { width: 46%; max-width: 440px; min-width: 280px; height: auto; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.sisko-status { display: inline-flex; gap: 6px; }
.sisko-stbtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border, #d8dae3); background: #fff; cursor: pointer; font-size: .95rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; color: #94a3b8; }
.sisko-stbtn--ok:hover { border-color: #16a34a; color: #16a34a; }
.sisko-stbtn--no:hover { border-color: #dc2626; color: #dc2626; }
.sisko-stbtn--ok.is-active { background: #16a34a; border-color: #16a34a; color: #fff; }
.sisko-stbtn--no.is-active { background: #dc2626; border-color: #dc2626; color: #fff; }
.tdoc-prep-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; }
@media (max-width: 640px) { .tdoc-prep-list { grid-template-columns: 1fr; } }
.tdoc-prep-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; margin: 0; }
.tdoc-prep-check {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #cbd5e1; background: #fff;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.tdoc-prep-check:hover { border-color: var(--primary, #6366f1); }
.tdoc-prep-check--ok { background: linear-gradient(135deg, #10b981, #059669); border-color: #059669; color: #fff; }
.tdoc-prep-check--sm { width: 26px; height: 26px; font-size: .82rem; }
.tdoc-prepm-table th, .tdoc-prepm-table td { white-space: nowrap; }
.tdoc-prepm-table tr:hover { background: rgba(99,102,241,.04); }
.tdoc-prep-text { flex: 1; min-width: 0; }
.tdoc-prep-name { font-weight: 500; color: #0f172a; }
.tdoc-prep-name--done { text-decoration: line-through; color: #64748b; }

/* === Bus Add-On — booking tracker per paket × tipe bus === */
.bus-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bus-stat-card { padding: 14px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.bus-stat-card__num { font-size: 1.6rem; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.bus-stat-card__lbl { font-size: .76rem; color: var(--muted); font-weight: 600; }
.bus-stat-card--total   { border-color: rgba(99,102,241,.4); background: rgba(99,102,241,.06); }
.bus-stat-card--total   .bus-stat-card__num { color: #4338ca; }
.bus-stat-card--booked  { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.06); }
.bus-stat-card--booked  .bus-stat-card__num { color: #047857; }
.bus-stat-card--pending { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.06); }
.bus-stat-card--pending .bus-stat-card__num { color: #92400e; }
.bus-stat-card--combo   { border-color: rgba(217,70,239,.4); background: rgba(217,70,239,.06); }
.bus-stat-card--combo   .bus-stat-card__num { color: #a21caf; }

.bus-list-hd {
  display: grid; grid-template-columns: 260px 200px 130px 1fr 280px;
  gap: 14px; padding: 12px 18px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.bus-row {
  display: grid; grid-template-columns: 260px 200px 130px 1fr 280px;
  gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft); align-items: flex-start;
}
.bus-row--booked { background: rgba(16,185,129,.04); }
.bus-row:last-child { border-bottom: 0; }
.bus-row__rtb { margin-bottom: 4px; }
.bus-row__nama { font-weight: 600; font-size: .9rem; margin-bottom: 2px; }
.bus-row__type { font-weight: 600; font-size: .9rem; color: #4338ca; }
.bus-row__pax { text-align: center; }
.bus-pax-num { font-size: 1.6rem; font-weight: 800; line-height: 1; color: #0f172a; }
.bus-combine-hint {
  margin-top: 8px; padding: 6px 8px;
  background: rgba(217,70,239,.08); border: 1px solid rgba(217,70,239,.3);
  border-radius: 6px; font-size: .72rem; color: #86198f;
  text-align: left;
}
.bus-status { display: inline-flex; padding: 6px 10px; border-radius: 7px; font-weight: 700; font-size: .8rem; }
.bus-status--ok { background: rgba(16,185,129,.14); color: #047857; border: 1px solid rgba(16,185,129,.3); }
.bus-status--pending { background: rgba(245,158,11,.14); color: #92400e; border: 1px solid rgba(245,158,11,.3); }
.bus-notes { font-size: .76rem; color: #475569; background: #fff; padding: 5px 7px; border-radius: 5px; margin-top: 6px; line-height: 1.4; }
.bus-book-form { display: flex; flex-direction: column; gap: 5px; }
.field__input--sm { padding: 5px 8px; font-size: .8rem; }
@media (max-width: 900px) {
  .bus-list-hd { display: none; }
  .bus-row { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
}

/* === Nusuk Mutamer (QC Paspor) — card-row layout mirror TA === */
.nusuk-list-hd {
  display: grid; grid-template-columns: 48px minmax(360px, 420px) minmax(0, 1fr) 240px;
  gap: 14px; padding: 12px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.nusuk-list-hd > div { padding: 0; }

.nusuk-row {
  display: grid; grid-template-columns: 48px minmax(360px, 420px) minmax(0, 1fr) 240px;
  gap: 14px; padding: 18px;
  border-bottom: 1px solid var(--border-soft);
  align-items: flex-start;
}
.nusuk-row:last-child { border-bottom: 0; }
.nusuk-row:hover { background: rgba(99,102,241,.025); }
.nusuk-row__no { font-size: .9rem; font-weight: 700; color: var(--muted); }
.nusuk-row__nama { min-width: 0; }
.nusuk-row__name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.nusuk-row__meta { font-size: .76rem; color: var(--muted); margin-top: 1px; }
.nusuk-row__paket { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.nusuk-rtb-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 6px;
  background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap;
}
.nusuk-asing-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 5px; margin-left: 6px;
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  vertical-align: middle; white-space: nowrap;
}

/* Visa Issued badge (col aksi) */
.nusuk-visa-badge {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(99,102,241,.1); color: #4338ca;
  border: 1px solid rgba(99,102,241,.3);
  font-size: .78rem; font-weight: 700;
}
.nusuk-visa-badge__exp { font-size: .68rem; font-weight: 500; color: #6366f1; }

/* "Paspor sudah sesuai" success panel + Reset Status */
.nusuk-done {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 10px;
  background: linear-gradient(180deg, #ecfdf5, #d1fae5);
  border: 1px solid #6ee7b7; border-radius: 10px;
}
.nusuk-done__circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: #10b981; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700;
  box-shadow: 0 0 0 4px rgba(16,185,129,.18);
}
.nusuk-done__lbl { font-size: .85rem; font-weight: 700; color: #047857; }
.nusuk-done__sub { font-size: .7rem; color: #047857; opacity: .75; }
.nusuk-done__form { width: 100%; margin-top: 4px; }
.nusuk-done__reset {
  width: 100%; padding: 7px 10px; border-radius: 7px; border: 0;
  background: #64748b; color: #fff; cursor: pointer;
  font-size: .78rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.nusuk-done__reset:hover { background: #475569; }

.nusuk-file-box {
  margin-top: 12px; padding: 10px;
  border: 1px dashed var(--border, #cbd5e1); border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-2);
}
.nusuk-file-box__lbl { font-size: .68rem; font-weight: 600; color: var(--muted); text-align: center; letter-spacing: .05em; }
.nusuk-file-box__img { width: 100%; max-height: 200px; object-fit: contain; border-radius: 6px; background: #fff; display: block; }
.nusuk-file-box__pdf { width: 100%; height: 200px; border: 0; border-radius: 6px; background: #fff; }
.nusuk-file-box__pdfbadge { font-size: .68rem; font-weight: 600; color: #b91c1c; text-align: center; padding: 4px 6px; background: #fef2f2; border-radius: 4px; margin-top: 4px; }
.nusuk-file-box__empty { padding: 30px 10px; text-align: center; color: var(--muted); font-size: .85rem; background: #fff; border-radius: 6px; }
.nusuk-dl-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 12px; border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff;
  font-weight: 700; font-size: .82rem; text-decoration: none;
  box-shadow: 0 3px 8px rgba(59,130,246,.25);
}
.nusuk-dl-btn:hover { box-shadow: 0 5px 14px rgba(59,130,246,.35); }
.nusuk-upload-note { padding: 6px 9px; border-radius: 6px; background: rgba(59,130,246,.08); color: #1d4ed8; font-size: .72rem; text-align: center; }

.nusuk-row__detail { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nusuk-data-row { display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: baseline; font-size: .88rem; line-height: 1.4; }
.nusuk-data-row__lbl { color: var(--muted); font-size: .82rem; font-weight: 600; }
.nusuk-data-row__lbl::after { content: ' :'; }
.nusuk-data-row__val { color: var(--text); font-weight: 600; }
.nusuk-masa { font-variant-numeric: tabular-nums; }
.nusuk-masa--bad { color: #b91c1c; font-weight: 700; }
.nusuk-masa-warn { font-size: .72rem; color: #b91c1c; margin-top: 3px; font-weight: 600; }
.nusuk-history { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-soft); }
.nusuk-history__title { font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.nusuk-history__item { display: flex; gap: 7px; font-size: .82rem; color: var(--text); }
.nusuk-history__num { color: var(--muted); flex: none; }

.nusuk-row__aksi { display: flex; flex-direction: column; gap: 10px; }
.nusuk-status { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 8px; font-weight: 700; font-size: .82rem; justify-content: center; }
.nusuk-status--pending { background: rgba(245,158,11,.14); color: #92400e; border: 1px solid rgba(245,158,11,.3); }
.nusuk-status--ok { background: rgba(16,185,129,.14); color: #047857; border: 1px solid rgba(16,185,129,.3); }
.nusuk-status--warn { background: rgba(220,38,38,.14); color: #b91c1c; border: 1px solid rgba(220,38,38,.3); }
.nusuk-status--info { background: rgba(59,130,246,.14); color: #1d4ed8; border: 1px solid rgba(59,130,246,.3); }
.nusuk-resubmit-flag { padding: 6px 10px; border-radius: 6px; background: rgba(168,85,247,.12); color: #6b21a8; font-size: .72rem; text-align: center; font-weight: 600; }

/* Arabic name chip grid — per-token latin+arabic, click to copy */
.nusuk-arab-section { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e5e7eb; }
.nusuk-arab-section--top { margin-top: 0; padding-top: 0; padding-bottom: 10px; margin-bottom: 6px; border-top: 0; border-bottom: 1px dashed #e5e7eb; }
.nusuk-arab-section__lbl { font-size: .76rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.nusuk-arab-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.nusuk-arab-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 10px;
  border: 1px solid #d1fae5; background: #fff; border-radius: 8px;
  cursor: pointer; transition: all .15s ease;
  font-family: inherit; min-width: 0;
}
.nusuk-arab-chip:hover { border-color: #059669; box-shadow: 0 2px 6px rgba(5,150,105,.15); }
.nusuk-arab-chip:active { transform: scale(.97); }
.nusuk-arab-chip.is-copied { background: #d1fae5; border-color: #059669; }
.nusuk-arab-chip__latin {
  font-size: .72rem; font-weight: 700; color: #0f172a;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.nusuk-arab-chip__arab {
  font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Segoe UI", serif;
  font-size: 1.15rem; color: #059669; font-weight: 600; line-height: 1.2;
}

/* Wrap FILE PASPOR + FILE TAMBAHAN. Default: stacked. Dual = side-by-side. */
.nusuk-files-wrap { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.nusuk-files-wrap--dual { flex-direction: row; align-items: flex-start; }
.nusuk-files-wrap--dual > * { flex: 1 1 0; min-width: 0; margin-top: 0 !important; }
@media (max-width: 720px) {
  .nusuk-files-wrap--dual { flex-direction: column; }
}

/* Live-scroll preview untuk FILE PASPOR (gak crop, scroll naturally) */
.nusuk-file-scroll {
  display: block; max-height: 260px; overflow: auto;
  border-radius: 6px; background: #fff; -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
}
.nusuk-file-img-full { width: 100%; display: block; }

/* FILE TAMBAHAN card — pull dari customer_manual_document_uploads.web1_file_url_additional */
.nusuk-extra-box {
  margin-top: 8px; padding: 10px;
  border: 1px dashed #93c5fd; border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(219,234,254,.4);
}
.nusuk-extra-box__lbl { font-size: .68rem; font-weight: 700; color: #1d4ed8; text-align: center; letter-spacing: .05em; white-space: nowrap; }
.nusuk-file-box__lbl { white-space: nowrap; }
.nusuk-extra-preview { max-height: 260px; overflow: auto; border-radius: 6px; background: #fff; border: 1px solid #dbeafe; -webkit-overflow-scrolling: touch; }
.nusuk-extra-preview a { display: block; }
.nusuk-extra-img { width: 100%; display: block; }
.nusuk-extra-name {
  font-size: .72rem; color: #475569; padding: 2px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nusuk-extra-actions { display: flex; gap: 6px; }
.nusuk-extra-btn {
  flex: 1; padding: 6px 8px; border-radius: 6px; font-size: .76rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.nusuk-extra-btn--open { background: #fff; color: #1d4ed8; border-color: #bfdbfe; }
.nusuk-extra-btn--dl   { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; }

/* Reschedule keterangan card di col aksi */
.nusuk-resched {
  padding: 8px 10px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(249,115,22,.08), rgba(234,88,12,.05));
  border: 1px solid rgba(249,115,22,.25);
  display: flex; flex-direction: column; gap: 4px;
}
.nusuk-resched__hd { font-size: .76rem; font-weight: 700; color: #c2410c; }
.nusuk-resched__row { display: flex; gap: 6px; font-size: .72rem; }
.nusuk-resched__lbl { color: var(--muted); flex: none; min-width: 50px; }
.nusuk-resched__val { color: #0f172a; word-break: break-word; }
.nusuk-resched__val--strong { font-weight: 700; color: #c2410c; }
.nusuk-resched__ket { font-size: .72rem; color: #0f172a; background: #fff; padding: 5px 7px; border-radius: 5px; margin-top: 4px; line-height: 1.4; }
.nusuk-action-form { display: flex; flex-direction: column; gap: 7px; }
.nusuk-action-notes { font-size: .78rem; padding: 6px 9px; resize: vertical; min-height: 50px; }
.nusuk-action-btn { padding: 10px 12px; border-radius: 8px; border: 0; font-weight: 700; font-size: .82rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; }
.nusuk-action-btn--warn { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; box-shadow: 0 3px 8px rgba(220,38,38,.25); }
.nusuk-action-btn--warn:hover { box-shadow: 0 5px 14px rgba(220,38,38,.35); }
.nusuk-action-btn--ok { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 3px 8px rgba(16,185,129,.25); }
.nusuk-action-btn--ok:hover { box-shadow: 0 5px 14px rgba(16,185,129,.35); }
.nusuk-action-btn--ai { width: 100%; margin-top: 6px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 3px 8px rgba(99,102,241,.25); }
.nusuk-action-btn--ai:hover { box-shadow: 0 5px 14px rgba(99,102,241,.35); }
.nusuk-action-btn--ai:disabled { opacity: .6; cursor: progress; }
.nusuk-ai-loading { display: none; margin-top: 6px; font-size: .8rem; color: #6366f1; font-weight: 600; }
.nusuk-ai-loading.htmx-request { display: block; opacity: 1; }
.nusuk-ai-box { margin-top: 6px; padding: 9px 11px; border-radius: 8px; font-size: .82rem; line-height: 1.4; }
.nusuk-ai-box--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.nusuk-ai-box--warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.nusuk-ai-box--err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.nusuk-ai-box--info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; margin-top: 6px; }
.nusuk-ai-diff { padding: 6px 0; border-top: 1px dashed rgba(146,64,14,.25); }
.nusuk-ai-diff:first-of-type { border-top: 0; }
.nusuk-ai-diff__lbl { font-weight: 700; }
.nusuk-ai-diff__rows { margin-top: 2px; padding-left: 4px; font-size: .8rem; }
.appr-aimatch { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.btn--ai { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border: 0; }
.btn--ai:hover { box-shadow: 0 4px 12px rgba(99,102,241,.35); }
.btn--ai:disabled { opacity: .6; cursor: progress; }
.appr-aimatch__btn { width: 100%; }

@media (max-width: 900px) {
  .nusuk-list-hd { display: none; }
  .nusuk-row { grid-template-columns: 1fr; gap: 14px; }
  .nusuk-row__no { display: inline-block; padding: 3px 9px; background: var(--surface-2); border-radius: 999px; font-size: .72rem; }
  .nusuk-data-row { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Stats card (di atas list) --- */
.nusuk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.nusuk-stat {
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.nusuk-stat--link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.06); }
.nusuk-stat__lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
.nusuk-stat__val { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.nusuk-stat--blue   { background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(99,102,241,.05)); }
.nusuk-stat--blue .nusuk-stat__val { color: #1d4ed8; }
.nusuk-stat--amber  { background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(251,146,60,.05)); }
.nusuk-stat--amber .nusuk-stat__val { color: #92400e; }
.nusuk-stat--green  { background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(34,197,94,.05)); }
.nusuk-stat--green .nusuk-stat__val { color: #047857; }
.nusuk-stat--red    { background: linear-gradient(135deg, rgba(220,38,38,.1), rgba(244,63,94,.05)); }
.nusuk-stat--red .nusuk-stat__val { color: #b91c1c; }

.nusuk-tbl-wrap { overflow-x: auto; }
.nusuk-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 820px; }
.nusuk-tbl thead { background: var(--surface-2); }
.nusuk-tbl th { text-align: left; padding: 11px 14px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--border); }
.nusuk-tbl td { padding: 13px 14px; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.nusuk-tbl tr:last-child td { border-bottom: 0; }
.nusuk-expired { font-variant-numeric: tabular-nums; }
.nusuk-expired--bad { color: #b91c1c; font-weight: 700; }
.nusuk-expired-warn { font-size: .68rem; color: #b91c1c; margin-top: 3px; font-weight: 600; }

/* Modal */
.nusuk-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px); z-index: 200;
}
.nusuk-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(900px, 95vw); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border-radius: 16px; z-index: 201;
  box-shadow: 0 20px 60px rgba(15,23,42,.25);
}
.nusuk-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--surface); border-radius: 16px 16px 0 0; z-index: 2;
}
.nusuk-modal-title { font-weight: 800; font-size: 1.05rem; }
.nusuk-modal-close { padding: 5px 11px; border: 0; background: var(--surface-2); border-radius: 999px; cursor: pointer; font-size: 1rem; }
.nusuk-modal-body { padding: 20px; }
.nusuk-modal-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-bottom: 16px; }
@media (max-width: 720px) { .nusuk-modal-grid { grid-template-columns: 1fr; } }
.nusuk-modal-preview {
  border-radius: 12px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  min-height: 280px; display: flex; align-items: center; justify-content: center;
}
.nusuk-preview-img { max-width: 100%; max-height: 420px; object-fit: contain; display: block; cursor: zoom-in; }
.nusuk-preview-pdf { width: 100%; height: 420px; border: 0; }
.nusuk-modal-info { display: flex; flex-direction: column; gap: 12px; }
.nusuk-info-row { display: flex; flex-direction: column; gap: 4px; }
.nusuk-modal-form { padding-top: 14px; border-top: 1px dashed var(--border-soft); }
.nusuk-label { font-size: .82rem; font-weight: 700; display: block; margin-bottom: 5px; }
.nusuk-modal-actions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-soft);
}
.nusuk-btn-ok, .nusuk-btn-warn {
  padding: 9px 16px; border-radius: 10px; border: 0;
  font-weight: 700; cursor: pointer; font-size: .88rem;
}
.nusuk-btn-ok {
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  box-shadow: 0 4px 12px rgba(16,185,129,.3);
}
.nusuk-btn-ok:hover { box-shadow: 0 6px 18px rgba(16,185,129,.4); }
.nusuk-btn-warn {
  background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff;
  box-shadow: 0 4px 12px rgba(220,38,38,.3);
}
.nusuk-btn-warn:hover { box-shadow: 0 6px 18px rgba(220,38,38,.4); }

/* Nusuk Mutamer — navtab + edit modal */
.nusuk-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 0 0 8px; border-bottom: 1px solid var(--border-soft);
}
.nusuk-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  font-size: .85rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; transition: .15s;
}
.nusuk-tab:hover { background: var(--surface-3, var(--surface-2)); color: var(--text); }
.nusuk-tab--active {
  background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff;
  box-shadow: 0 3px 8px rgba(99,102,241,.25);
}
.nusuk-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: rgba(255,255,255,.2); font-size: .72rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.nusuk-tab:not(.nusuk-tab--active) .nusuk-tab__count {
  background: var(--surface); color: var(--text);
}

/* Edit Data Paspor button */
.nusuk-edit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 8px;
  background: rgba(245,158,11,.12); color: #92400e;
  border: 1px solid rgba(245,158,11,.32);
  font-weight: 700; font-size: .82rem; cursor: pointer;
}
.nusuk-edit-btn:hover { background: rgba(245,158,11,.22); }

/* Edit Data Paspor modal */
.nusuk-em-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); z-index: 200; }
.nusuk-em-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(680px, 95vw); max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: 16px; z-index: 201;
  box-shadow: 0 20px 60px rgba(15,23,42,.3);
}
.nusuk-em-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; color: #fff; font-weight: 700; font-size: 1.05rem;
  background: linear-gradient(135deg, #ea580c, #c2410c);
  border-radius: 16px 16px 0 0;
  position: sticky; top: 0; z-index: 2;
}
.nusuk-em-close { background: transparent; border: 0; color: #fff; font-size: 1.1rem; cursor: pointer; opacity: .85; }
.nusuk-em-close:hover { opacity: 1; }
.nusuk-em-body { padding: 18px 22px; }
.nusuk-em-note {
  padding: 11px 14px; margin-bottom: 14px;
  background: rgba(245,158,11,.08); color: #92400e;
  border: 1px solid rgba(245,158,11,.22); border-radius: 8px;
  font-size: .82rem; line-height: 1.45;
}
.nusuk-em-label { display: block; font-size: .8rem; font-weight: 700; margin: 12px 0 4px; }
.nusuk-em-label:first-child { margin-top: 0; }
.nusuk-em-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 540px) { .nusuk-em-row { grid-template-columns: 1fr; } }
.nusuk-em-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-soft);
}
.nusuk-em-save {
  padding: 9px 16px; border-radius: 8px; border: 0;
  background: linear-gradient(135deg, #ea580c, #c2410c); color: #fff;
  font-weight: 700; font-size: .88rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 4px 10px rgba(234,88,12,.3);
}
.nusuk-em-save:hover { box-shadow: 0 6px 16px rgba(234,88,12,.4); }

/* Nusuk Mutamer — combobox searchable paket dropdown */
.nusuk-combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 50; max-height: 380px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.12);
}
.nusuk-combo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; font-size: .85rem;
  border-bottom: 1px solid var(--border-soft);
}
.nusuk-combo-item:last-child { border-bottom: 0; }
.nusuk-combo-item:hover { background: rgba(99,102,241,.08); }
.nusuk-combo-rtb {
  flex: none; padding: 2px 8px; border-radius: 6px;
  background: rgba(99,102,241,.15); color: #3730a3;
  font-weight: 700; font-size: .72rem; font-family: ui-monospace, monospace;
}
.nusuk-combo-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nusuk-combo-date { flex: none; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.nusuk-combo-empty { padding: 16px; text-align: center; color: var(--muted); font-size: .82rem; }