/* SGO Admin shell — royal blue + platinum */

.admin-body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.01em;
}

.admin-plain {
  min-height: 100dvh;
  padding: 28px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.admin-body { display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh; }
/* Public / no-sidebar mode (mis. /share/briefing/{token}, login pages) —
   buang grid 248px supaya content stretch full + center responsive. */
.admin-body--no-sidebar { display: block; }
@media (max-width: 900px) { .admin-plain { padding: 18px; } }
@media (max-width: 600px) { .admin-plain { padding: 14px 12px; } }

/* --- Sidebar (theme-aware: pakai var --surface/text/muted/border-soft) --- */
.admin-sidebar {
  background: var(--surface);
  color: var(--text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh;
  padding: 16px 0;
  border-right: 1px solid var(--border-soft);
  width: 248px; flex-shrink: 0;
  box-shadow: 0 0 32px -16px rgba(15, 23, 42, .08);
}
:root[data-theme="dark"] .admin-sidebar { box-shadow: 0 0 32px -16px rgba(0, 0, 0, .5); }

.admin-sidebar__brand {
  padding: 4px 18px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 8px;
  text-decoration: none; color: inherit;
}
.admin-sidebar__logo-img {
  width: 40px; height: 40px; object-fit: cover; border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .25);
}
.admin-sidebar__brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.admin-sidebar__logo {
  font-weight: 800; font-size: 1.1rem; letter-spacing: 1px;
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.admin-sidebar__sub {
  color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
  margin-top: 2px;
}

.admin-nav { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; min-height: 0; }
.admin-nav__section {
  font-size: .62rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px;
  padding: 14px 14px 6px;
}
.admin-nav__section:first-child { padding-top: 4px; }
.admin-nav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; color: var(--text); text-decoration: none;
  border-radius: 10px;
  font-size: .9rem; font-weight: 500; letter-spacing: .1px;
  transition: background .12s, color .12s, transform .08s;
  position: relative;
}
.admin-nav__item:hover { background: var(--surface-2); color: var(--text); }
.admin-nav__item:hover .admin-nav__icon { color: var(--blue-700); opacity: 1; }
:root[data-theme="dark"] .admin-nav__item:hover .admin-nav__icon { color: var(--blue-500); }
.admin-nav__item:active { transform: scale(.98); }
.admin-nav__item--active {
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(30, 58, 138, .55);
  font-weight: 600;
}
.admin-nav__item--active::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--blue-500);
}
.admin-nav__icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  opacity: .85;
}
.admin-nav__item--active .admin-nav__icon { opacity: 1; color: #fff; }
.admin-nav__icon svg { width: 20px; height: 20px; }
.admin-nav__label { flex: 1; min-width: 0; }

/* User footer */
.admin-sidebar__user {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border-soft);
  margin: 0 6px;
}
.admin-sidebar__user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  background: var(--surface-2);
  border-radius: 10px;
  margin-bottom: 10px;
}
.admin-sidebar__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
  color: #fff; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.admin-sidebar__user-text { min-width: 0; flex: 1; }
.admin-sidebar__name {
  font-weight: 600; font-size: .85rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-sidebar__role {
  color: var(--muted); font-size: .65rem; margin-top: 1px;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.admin-sidebar__logout {
  background: transparent; color: #dc2626;
  border: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
  padding: 8px 12px; font-size: .82rem; font-weight: 600;
  border-radius: 10px; cursor: pointer; width: 100%;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.admin-sidebar__logout:hover {
  background: color-mix(in srgb, #dc2626 8%, transparent);
  border-color: #dc2626;
}
:root[data-theme="dark"] .admin-sidebar__logout { color: #fca5a5; border-color: rgba(252, 165, 165, .3); }
:root[data-theme="dark"] .admin-sidebar__logout:hover {
  background: rgba(252, 165, 165, .12); color: #fff; border-color: #fca5a5;
}
.admin-sidebar__logout-icon { display: flex; align-items: center; }
.admin-sidebar__logout-icon svg { width: 16px; height: 16px; }

.admin-theme-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-bottom: 8px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-soft);
  padding: 8px 12px; font-size: .82rem; font-weight: 600;
  border-radius: 10px; cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.admin-theme-toggle:hover { background: var(--surface); border-color: var(--blue-500); color: var(--blue-700); }
:root[data-theme="dark"] .admin-theme-toggle:hover { color: var(--blue-500); }
.admin-theme-toggle .theme-toggle__icon { display: flex; align-items: center; gap: 6px; }
.admin-theme-toggle svg { width: 16px; height: 16px; }
:root[data-theme="light"] .admin-theme-toggle .theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .admin-theme-toggle .theme-toggle__icon--moon { display: none; }

/* --- Main --- */
.admin-main { display: flex; flex-direction: column; min-width: 0; }
.admin-topbar {
  padding: 20px 28px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
}
.admin-topbar__title { flex: 1 1 auto; }
:root[data-theme="dark"] .admin-topbar { background: rgba(13, 20, 40, .85); }
.admin-topbar__title { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.admin-content { padding: 28px; max-width: 1280px; width: 100%; }
.hero--admin { padding: 0 0 16px; }

/* --- KPI grid --- */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 18px;
  position: relative; overflow: hidden;
  transition: box-shadow .15s, transform .12s;
}
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-primary);
}
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi__val {
  font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.025em;
  color: var(--primary);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kpi__val {
    background: var(--grad-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
:root[data-theme="dark"] .kpi__val {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #93c5fd;
}
.kpi__lbl { color: var(--text); font-size: .9rem; margin-top: 8px; font-weight: 600; }
.kpi__sub { color: var(--muted); font-size: .75rem; margin-top: 2px; }

.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.page-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }

/* --- Tables --- */
.card--table { padding: 0; overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  background: var(--surface-2); padding: 12px 16px;
  text-align: left; font-size: .7rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .6px;
  border-bottom: 1px solid var(--border-soft);
}
.data-table tbody td {
  padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
  font-size: .9rem; vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }
.cell-primary { font-weight: 600; }
.cell-muted { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.cell-actions { text-align: right; white-space: nowrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85rem; }

.btn-sm {
  display: inline-block; padding: 5px 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); font-size: .8rem; font-weight: 500;
  text-decoration: none; color: var(--text); margin-left: 4px;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-sm:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); }

.status { font-size: .7rem; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .4px; }
.status--ok { background: var(--success-soft); color: var(--success); }
.status--off { background: #fee4e7; color: #9b1c2a; }
:root[data-theme="dark"] .status--ok { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .status--off { background: #450a0a; color: #fca5a5; }

/* --- Forms --- */
.form-card { max-width: 680px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.field--check { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.field--check input { width: 18px; height: 18px; accent-color: var(--primary); }

.reset-form { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.reset-form .form-row { grid-template-columns: 1fr auto; align-items: end; }
.delete-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(220, 38, 38, .25); }

.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.empty .btn { margin-top: 12px; }

.data-table--assign tbody td:first-child { width: 40px; text-align: center; }
.data-table--assign input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); }

/* --- Mobile collapse --- */
@media (max-width: 900px) {
  .admin-body { grid-template-columns: 1fr; }
  /* Mobile: sidebar disembunyikan total, ganti bottom nav PWA (lihat di bawah). */
  .admin-sidebar { display: none; }
  .admin-sidebar__brand { border-bottom: 0; padding: 0 8px 0 4px; flex-shrink: 0; margin-bottom: 0; }
  .admin-sidebar__brand-text { display: none; }
  .admin-sidebar__logo-img { width: 32px; height: 32px; border-radius: 8px; }
  .admin-nav { flex-direction: row; padding: 0; overflow-y: visible; }
  .admin-nav__section { display: none; }
  .admin-nav__item { padding: 8px 12px; }
  .admin-nav__item--active { box-shadow: none; }
  .admin-nav__item--active::before { display: none; }
  .admin-nav__label { font-size: .82rem; }
  /* Tombol logout tetap kebawa di mobile — pin di kanan top-bar (sticky),
     name/avatar disembunyikan. Tanpa ini admin kejebak gak bisa logout di HP. */
  .admin-sidebar__user {
    display: flex; align-items: center; flex-shrink: 0;
    margin: 0 0 0 auto; padding: 0 4px 0 10px; border: 0;
    position: sticky; right: 0; background: var(--surface);
  }
  .admin-sidebar__user-row { display: none; }
  .admin-sidebar__user form { margin: 0; }
  .admin-sidebar__logout { padding: 8px 12px; white-space: nowrap; }
  .admin-content { padding: 18px 18px 88px; }
  .admin-topbar { padding: 16px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table tr { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
  .data-table td { padding: 4px 16px; border-bottom: 0; }
  .data-table td.cell-actions { text-align: left; padding-top: 8px; }
  /* Tabel tanpa .data-table (checklist/keuangan/payslip/worksheet/dll) → bikin
     bisa scroll horizontal biar gak jebol layout di HP. */
  .admin-content table:not(.data-table) {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* Phone-specific overrides — tighter spacing + force-collapse inline grids. */
@media (max-width: 600px) {
  .admin-content { padding: 14px 12px; }
  .admin-topbar { padding: 12px 14px; }
  .admin-topbar__title { font-size: 1.1rem; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 12px; }
  .kpi__val { font-size: 1.5rem; }
  /* Inline 3-col grid (payroll-settings pct fields) → stack vertikal */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Form input dengan min-width hardcoded → relax di phone */
  input[style*="min-width:240px"],
  input[style*="min-width: 240px"],
  select[style*="min-width:120px"],
  select[style*="min-width: 120px"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Inline fixed-width th — relax */
  th[style*="width:180px"], th[style*="width:150px"] { width: auto !important; }
  /* Card padding terlalu padat */
  .card[style*="padding:24px"], .card[style*="padding: 24px"] { padding: 14px 12px !important; }
  .form-card, .chklist-form { padding: 16px 14px !important; }
  /* Page header — stack vertically */
  .page-header, header.page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }
  .page-actions { flex-wrap: wrap; gap: 6px; }
  .btn { font-size: .85rem; padding: 8px 12px; }

  /* Checklist table — card mode */
  .chklist-table thead { display: none; }
  .chklist-table, .chklist-table tbody, .chklist-table tr, .chklist-table td { display: block; }
  .chklist-table tr { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
  .chklist-table tr:last-child { border-bottom: none; }
  .chklist-table td { padding: 3px 0; border: none; }

  /* Loan card table fallback (kalau ada di sgo) */
  .loan-user-card__row { grid-template-columns: 1fr !important; gap: 8px; padding: 12px; }
  .loan-user-card__nums { flex-wrap: wrap; gap: 10px 16px; }
  .loan-user-card__actions { justify-content: flex-start; }

  /* Payslip list table card mode */
  .payslip-table thead { display: none; }
  .payslip-table, .payslip-table tbody, .payslip-table tr, .payslip-table td { display: block; }
  .payslip-table tr { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
  .payslip-table tr:last-child { border-bottom: none; }
  .payslip-table td { padding: 3px 0; border: none; }
  .payslip-table__th-amount, .payslip-cell-amount { text-align: left !important; }
  .payslip-actions { flex-wrap: wrap; justify-content: flex-start !important; padding-top: 6px; }
}

/* ------- Paket status tabs (akan / sedang / sudah) ------- */
.paket-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.paket-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: .88rem; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.paket-tab:hover { color: var(--text); }
.paket-tab--active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.paket-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; padding: 1px 8px;
  font-size: .72rem; font-weight: 700;
  border-radius: 999px;
  background: var(--bg, #f3f4f6); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.paket-tab--active .paket-tab__count { background: rgba(99,102,241,.15); color: var(--primary); }

/* ------- Admin Assignment ------- */
.assign-page__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px; gap: 16px; flex-wrap: wrap;
}
.assign-page__stats { display: flex; gap: 8px; flex-wrap: wrap; }

.assign-list { display: flex; flex-direction: column; gap: 10px; }

.assign-row {
  display: flex; gap: 14px;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-left: 4px solid var(--border);
  border-radius: 12px;
  transition: border-color .15s;
}
.assign-row:hover { border-color: var(--primary); }
.assign-row--soon { border-left-color: var(--danger); background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 4%, var(--surface)), var(--surface)); }
.assign-row--upcoming { border-left-color: #d97706; }
.assign-row--future { border-left-color: var(--primary); }
.assign-row--past { border-left-color: var(--plat-300); opacity: .7; }

.assign-row__date {
  flex-shrink: 0; width: 72px; text-align: center;
  padding: 8px 4px;
  background: var(--surface-2);
  border-radius: 10px;
}
.assign-row__date-day { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.assign-row__date-mo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-top: 2px; }
.assign-row__date-yr { font-size: .7rem; color: var(--muted); margin-top: 2px; }
.assign-row__date-dur { font-size: .65rem; color: var(--primary-dark); margin-top: 6px; font-weight: 600; }

.assign-row__main { flex: 1; min-width: 0; }
.assign-row__title {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: .92rem; line-height: 1.3; margin-bottom: 10px;
}
.assign-row__batch {
  background: var(--primary-soft); color: var(--primary-dark);
  font-weight: 700; font-size: .7rem; padding: 2px 8px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .3px;
}
.assign-row__name { font-weight: 700; }
.assign-row__pax { color: var(--muted); font-size: .82rem; }

.assign-row__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.assign-row__empty { font-size: .82rem; color: var(--muted); font-style: italic; }
.assign-row__full {
  font-size: .75rem; font-weight: 600; color: #16a34a;
  background: #dcfce7; border: 1px solid #86efac;
  padding: 4px 10px; border-radius: 999px;
  cursor: help;
}
.assign-add__hint {
  font-size: .75rem; color: var(--muted); font-weight: 400; margin-left: 4px;
}

.assign-chip-form { margin: 0; display: inline; }
.assign-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 10px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 999px; font-size: .82rem; font-weight: 500;
}
.assign-chip--sm { font-size: .72rem; padding: 2px 3px 2px 7px; gap: 3px; }
.assign-chip--sm .assign-chip__x { width: 17px; height: 17px; }
.assign-chip__nm { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.assign-rangkap-pill { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--success) 14%, var(--surface-2)); border: 1px dashed var(--success, #16a34a); color: var(--success, #16a34a); white-space: nowrap; }
.assign-line { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; }
.assign-line__tag { flex: none; font-size: .6rem; font-weight: 800; letter-spacing: .03em; color: var(--muted, #94a3b8); min-width: 24px; }
.assign-line__tag--tl { color: var(--primary, #4338ca); }
.assign-line__tag--mtf { color: var(--success, #16a34a); }
.assign-chip--tour_leader { background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); border-color: var(--primary); color: var(--primary-dark); }
.assign-chip--muthowwif { background: color-mix(in srgb, var(--success) 12%, var(--surface-2)); border-color: var(--success); color: var(--success); }
.assign-chip__x {
  margin-left: 4px; width: 20px; height: 20px; padding: 0;
  border: 0; background: rgba(0,0,0,.06); border-radius: 50%;
  cursor: pointer; font-size: .9rem; color: var(--text); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.assign-chip__x:hover { background: var(--danger); color: #fff; }

/* Rangkap TL — extension untuk muthowwif yang merangkap TL di batch ini */
.assign-chip-wrap { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.assign-rangkap-x { border: 0; background: color-mix(in srgb, var(--success) 12%, var(--surface-2)); color: var(--success, #16a34a); border-radius: 999px; width: 22px; height: 22px; line-height: 1; cursor: pointer; font-size: .85rem; font-weight: 800; }
.assign-rangkap-x:hover { background: #fee2e2; color: #b91c1c; }
.assign-chip-merangkap { margin: 0; display: inline; }
.assign-chip--rangkap {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--success) 18%, var(--surface-2)),
    color-mix(in srgb, var(--primary) 14%, var(--surface-2)));
  border-color: var(--success);
}
.assign-chip__rangkap-tag {
  display: inline-block;
  padding: 1px 6px;
  background: var(--primary, #2563eb); color: #fff;
  border-radius: 4px; font-size: .65rem; font-weight: 700;
  letter-spacing: .04em;
}
.assign-rangkap-btn {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 9px; margin: 0;
  background: transparent; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 999px;
  font-size: .7rem; font-weight: 600;
  cursor: pointer; line-height: 1;
  transition: .12s;
}
.assign-rangkap-btn:hover {
  border-color: var(--primary, #2563eb);
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.assign-rangkap-btn--on {
  background: var(--primary, #2563eb);
  color: #fff; border-color: var(--primary, #2563eb);
  border-style: solid;
}
.assign-rangkap-btn--on:hover {
  background: var(--danger);
  border-color: var(--danger); color: #fff;
}

.assign-add { display: inline-block; }
.assign-add__btn {
  display: inline-block; padding: 4px 12px;
  background: transparent; border: 1px dashed var(--primary);
  border-radius: 999px; color: var(--primary-dark);
  cursor: pointer; font-size: .82rem; font-weight: 600;
  list-style: none;
}
.assign-add__btn::-webkit-details-marker { display: none; }
.assign-add__btn:hover { background: var(--primary-soft); }

.assign-add__panel {
  margin-top: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 10px;
  max-width: 540px;
}
.assign-add__panel-head {
  font-size: .76rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
  padding: 4px 8px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px;
}
.assign-add__list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }

.assign-pick-form { margin: 0; display: block; }
.assign-pick {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 8px; cursor: pointer; text-align: left;
  font-family: inherit; font-size: .85rem;
  transition: background .12s, border-color .12s;
}
.assign-pick--ok:hover { background: var(--success-soft); border-color: var(--success); }
.assign-pick--warn { background: #fefce8; border-color: #fde68a; cursor: pointer; }
.assign-pick--warn:hover { background: #fef3c7; border-color: #f59e0b; }
.assign-pick--busy { opacity: .55; cursor: not-allowed; }
.assign-pick__status--warn { color: #b45309; background: #fef3c7; }

.assign-pick__role {
  flex-shrink: 0; width: 32px; padding: 2px 0;
  border-radius: 4px; text-align: center;
  font-size: .65rem; font-weight: 800; letter-spacing: .3px;
  color: #fff;
}
.assign-pick__role--tour_leader { background: var(--primary); }
.assign-pick__role--muthowwif { background: var(--success); }

.assign-pick__name { flex: 1; min-width: 0; font-weight: 600; }
.assign-pick__perf { font-size: .7rem; color: #d97706; font-weight: 600; }
.assign-pick__status {
  flex-shrink: 0; font-size: .72rem; font-weight: 700;
  color: var(--success); padding: 2px 7px;
  background: var(--success-soft); border-radius: 999px;
}
.assign-pick__status--busy { color: var(--danger); background: var(--danger-soft); }

/* ===== Bottom nav admin (PWA mobile) — ganti top-bar scroll horizontal ===== */
.admin-bn, .admin-bn-sheet { display: none; }

@media (max-width: 900px) {
  .admin-bn {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--border-soft);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .admin-bn__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 0 10px; text-decoration: none; border: 0; background: none;
    color: var(--muted); font-size: 10.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0;
  }
  .admin-bn__icon { display: flex; }
  .admin-bn__icon svg { width: 21px; height: 21px; }
  .admin-bn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .admin-bn__item--active { color: var(--blue-500); }

  .admin-bn-sheet { display: block; position: fixed; inset: 0; z-index: 60; }
  .admin-bn-sheet[hidden] { display: none; }
  .admin-bn-sheet__backdrop {
    position: absolute; inset: 0; background: rgba(15, 23, 42, .5);
    opacity: 0; transition: opacity .25s;
  }
  .admin-bn-sheet--open .admin-bn-sheet__backdrop { opacity: 1; }
  .admin-bn-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-radius: 22px 22px 0 0;
    padding: 6px 16px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .26s cubic-bezier(.16, .84, .44, 1);
    box-shadow: 0 -12px 44px rgba(0, 0, 0, .22); max-height: 82vh; overflow-y: auto;
  }
  .admin-bn-sheet--open .admin-bn-sheet__panel { transform: translateY(0); }
  .admin-bn-sheet__grip { width: 42px; height: 4px; border-radius: 99px; background: var(--border-soft); margin: 8px auto 12px; }
  .admin-bn-sheet__title { font-weight: 700; font-size: .95rem; color: var(--text); margin: 0 4px 12px; }
  .admin-bn-sheet__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-bn-sheet__tile {
    display: flex; align-items: center; gap: 10px; padding: 13px 12px;
    text-decoration: none; color: var(--text); border: 1px solid var(--border-soft);
    border-radius: 14px; font-size: .86rem; font-weight: 600;
  }
  .admin-bn-sheet__tile:active { background: var(--surface-2); }
  .admin-bn-sheet__tile-ico { display: flex; color: var(--muted); flex-shrink: 0; }
  .admin-bn-sheet__tile-ico svg { width: 19px; height: 19px; }
  .admin-bn-sheet__footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  }
  .admin-bn-sheet__footer .admin-theme-toggle { width: auto; margin: 0; flex: 0 0 auto; }
  .admin-bn-sheet__logout {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    border: 1px solid var(--danger-soft); background: var(--danger-soft); color: var(--danger);
    border-radius: 12px; font-weight: 700; font-size: .9rem; cursor: pointer; font-family: inherit;
  }
  .admin-bn-sheet__logout svg { width: 18px; height: 18px; }
}

/* ===================================================================
   Ops · Upload Dokumen Jamaah (/ops|/admin/upload-documents)
   =================================================================== */

/* Summary cards */
.opsdoc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .opsdoc-cards { grid-template-columns: 1fr; } }
.opsdoc-card { display: flex; align-items: center; gap: 14px; }
.opsdoc-card__ic {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.opsdoc-card__lbl { font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.opsdoc-card__val { font-size: 1.7rem; font-weight: 800; line-height: 1.15; color: var(--text); margin: 1px 0; }

/* Order group header */
.opsdoc-grouphd {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  flex-wrap: wrap; padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary-soft), var(--surface));
  border-bottom: 1px solid var(--border);
}
.opsdoc-grouphd__code { font-weight: 800; font-size: 1.05rem; color: var(--text); letter-spacing: .01em; }
.opsdoc-grouphd__meta { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.opsdoc-grouphd__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.opsdoc-badge { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.opsdoc-badge--blue  { background: #dbeafe; color: #1d4ed8; }
.opsdoc-badge--green { background: #dcfce7; color: #15803d; }
.opsdoc-badge--rose  { background: #ffe4e6; color: #be123c; }

/* Table tweaks */
.opsdoc-tbl td { vertical-align: top; }
.opsdoc-tbl .small, .opsdoc-tbl td.small { font-size: .8rem; line-height: 1.5; }

/* Progress bar */
.opsdoc-prog { height: 7px; background: var(--border-soft); border-radius: var(--r-pill); overflow: hidden; }
.opsdoc-prog__bar { height: 100%; background: linear-gradient(90deg, #34d399, #059669); border-radius: var(--r-pill); transition: width .3s ease; }

/* Document status chips */
.opsdoc-chips { display: flex; flex-wrap: wrap; gap: 5px; max-width: 360px; }
.opsdoc-chip { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; }
.opsdoc-chip--on  { background: var(--success-soft); color: var(--success); border-color: #a7f3d0; }
.opsdoc-chip--off { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }

/* Detail modal */
.opsdoc-overlay {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px;
}
.opsdoc-modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: 100%; max-width: 640px; box-shadow: var(--shadow-lg); overflow: hidden;
  animation: opsdocIn .18s ease;
}
@keyframes opsdocIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.opsdoc-modal__hd {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-soft), var(--surface));
}
.opsdoc-modal__x {
  flex: 0 0 auto; border: none; background: var(--border-soft); color: var(--text);
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 1rem; line-height: 1;
}
.opsdoc-modal__x:hover { background: var(--danger-soft); color: var(--danger); }
.opsdoc-modal__body { padding: 18px; max-height: 72vh; overflow-y: auto; }

.opsdoc-identity {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
  padding: 12px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-bottom: 16px; font-size: .9rem;
}
.opsdoc-identity > div > div { font-weight: 600; color: var(--text); margin-top: 1px; }

.opsdoc-doclist { display: flex; flex-direction: column; gap: 10px; }
.opsdoc-docrow { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); }
.opsdoc-docrow__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; }
.opsdoc-docrow__lbl { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.opsdoc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.opsdoc-dot--on  { background: var(--success); }
.opsdoc-dot--off { background: #f59e0b; }
.opsdoc-ocrbadge {
  font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: #ede9fe; color: #7c3aed; padding: 2px 7px; border-radius: var(--r-pill);
}
.opsdoc-upform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.opsdoc-upform__file { flex: 1; min-width: 170px; font-size: .82rem; color: var(--muted); }
.opsdoc-upform__file::file-selector-button {
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  padding: 6px 12px; border-radius: 8px; margin-right: 10px; cursor: pointer; font-family: inherit; font-size: .82rem;
}
.opsdoc-upform__file::file-selector-button:hover { border-color: var(--primary); color: var(--primary); }

/* Empty / guidance state */
.opsdoc-empty { text-align: center; padding: 48px 24px; }
.opsdoc-empty__ic { font-size: 2.8rem; line-height: 1; margin-bottom: 12px; }
.opsdoc-empty__title { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; color: var(--text); }
.opsdoc-empty__desc { margin: 0 auto 18px; max-width: 540px; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.opsdoc-empty__hints { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.opsdoc-hint { background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: .82rem; padding: 7px 14px; border-radius: var(--r-pill); }

/* Live-search spinner */
.opsdoc-spin { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: .95rem; pointer-events: none; }
.opsdoc-spin.htmx-indicator { opacity: 0; transition: opacity .15s ease; }
.opsdoc-spin.htmx-request, .htmx-request .opsdoc-spin { opacity: 1; }

/* Dark mode for the few literal-colour chips/badges */
:root[data-theme="dark"] .opsdoc-badge--blue  { background: #172554; color: #93c5fd; }
:root[data-theme="dark"] .opsdoc-badge--green { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .opsdoc-badge--rose  { background: #4c0519; color: #fda4af; }
:root[data-theme="dark"] .opsdoc-chip--off    { background: #3a2410; color: #fdba74; border-color: #7c2d12; }
:root[data-theme="dark"] .opsdoc-ocrbadge     { background: #2e1065; color: #c4b5fd; }

/* ===================================================================
   Ops · Approval Dokumen (/ops|/admin/approval-dokumen)
   =================================================================== */
.appr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.appr-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; font-weight: 700; font-size: .9rem;
  color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.appr-tab:hover { color: var(--text); }
.appr-tab--active { color: var(--primary); border-bottom-color: var(--primary); }
.appr-tab__badge {
  background: var(--danger-soft); color: var(--danger); font-size: .7rem; font-weight: 800;
  padding: 1px 8px; border-radius: var(--r-pill); min-width: 18px; text-align: center;
}
.appr-tab--active .appr-tab__badge { background: var(--primary-soft); color: var(--primary); }

.appr-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.appr-pills { display: flex; gap: 6px; }
.appr-pill {
  padding: 6px 14px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border);
}
.appr-pill:hover { color: var(--text); }
.appr-pill--active { background: var(--primary); color: #fff; border-color: var(--primary); }
.appr-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; justify-content: flex-end; }

.appr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.appr-card {
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
}
.appr-card__preview { display: block; position: relative; height: 180px; background: var(--bg); overflow: hidden; }
.appr-card__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.appr-card__pdf {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; font-size: 2rem; color: var(--muted);
}
.appr-card__pdf span { font-size: .8rem; font-weight: 600; }
.appr-card__doctag {
  position: absolute; top: 8px; left: 8px; background: rgba(15,23,42,.78); color: #fff;
  font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); letter-spacing: .03em;
}
.appr-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.appr-card__name { font-weight: 700; color: var(--text); }
.appr-card__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: flex-start; }
.appr-reject { position: relative; }
.appr-reject > summary { list-style: none; cursor: pointer; }
.appr-reject > summary::-webkit-details-marker { display: none; }
.appr-reject__form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.appr-reject__form textarea { resize: vertical; font-family: inherit; }
.appr-card__status { margin-top: 8px; font-weight: 700; font-size: .9rem; }
.appr-card__status--ok { color: var(--success); }
.appr-card__status--bad { color: var(--danger); }

@media (max-width: 640px) { .appr-filter { justify-content: stretch; } }

/* Approval — detail modal 2-panel */
.appr-modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: 100%; max-width: 1040px; max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); overflow: hidden; animation: opsdocIn .18s ease;
}
.appr-modal__hd {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-soft), var(--surface));
}
.appr-modal__body { display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 0; flex: 1; }
.appr-modal__left { display: flex; flex-direction: column; padding: 14px; border-right: 1px solid var(--border); min-height: 0; background: var(--bg); }
.appr-modal__right { padding: 16px 18px; overflow-y: auto; min-height: 0; }
.appr-prev-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.appr-prev-stage {
  flex: 1; min-height: 360px; max-height: 60vh; overflow: auto; border-radius: var(--r-md);
  background: #1f2937; display: flex; align-items: center; justify-content: center; padding: 10px;
}
.appr-prev-stage.is-cropping {
  display: block; overflow: hidden; padding: 0; height: 60vh; max-height: 60vh;
}
.appr-prev-stage.is-cropping .appr-prev-img { max-width: none; max-height: none; }
.appr-prev-img { max-width: 100%; max-height: 100%; transition: transform .15s ease; transform-origin: center; display: block; }
.appr-prev-pdf { width: 100%; height: 58vh; border: 0; border-radius: var(--r-md); background: #fff; }
.appr-note { font-size: .82rem; margin-bottom: 14px; }
.appr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.appr-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.appr-fld--full { grid-column: 1 / -1; }
.appr-fld__lbl { font-size: .76rem; font-weight: 600; color: var(--muted); }
.appr-fld .field__input:disabled { background: var(--bg); color: var(--text); opacity: 1; cursor: default; }
#appr-preg-row, #appr-preg-notes { margin-top: 12px; }
.appr-save-row { display: flex; gap: 8px; margin-top: 14px; }
.appr-modal__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.appr-modal__actions form { margin: 0; }
.appr-reject__form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 820px) {
  .appr-modal__body { grid-template-columns: 1fr; }
  .appr-modal__left { border-right: 0; border-bottom: 1px solid var(--border); }
  .appr-grid2 { grid-template-columns: 1fr; }
}

/* ===================================================================
   Travel Dokumen Detail · Visa cards (mirror ta upload-visa)
   =================================================================== */
.tdoc-visa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.tdoc-visa-card {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.tdoc-visa-card--done { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); }
.tdoc-visa-card__info { padding: 14px; min-width: 0; }
.tdoc-visa-card__name { font-weight: 700; color: var(--text); }
.tdoc-visa-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.tdoc-visa-fld__lbl { font-size: .72rem; font-weight: 600; color: var(--muted); }
.tdoc-visa-fld__val { font-weight: 600; color: var(--text); font-size: .9rem; word-break: break-word; }
.tdoc-visa-card__file { padding: 14px; background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tdoc-visa-stage { width: 100%; height: 180px; border-radius: var(--r-md); background: #1f2937; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tdoc-visa-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tdoc-visa-pdf, .tdoc-visa-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 1.9rem; text-decoration: none; color: #cbd5e1; }
.tdoc-visa-pdf { color: #93c5fd; }
.tdoc-visa-pdf span, .tdoc-visa-empty span { font-size: .8rem; font-weight: 600; }
.badge-uploaded { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; background: #d1fae5; color: #065f46; }
.badge-not-uploaded { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; background: #fee2e2; color: #991b1b; }
@media (max-width: 560px) {
  .tdoc-visa-grid { grid-template-columns: 1fr; }
  .tdoc-visa-card { grid-template-columns: 1fr; }
  .tdoc-visa-card__file { border-left: 0; border-top: 1px solid var(--border); }
}

/* ===================================================================
   Monitoring Jamaah · Detail manifest form
   =================================================================== */
.mj-edit-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.mj-form { display: flex; flex-direction: column; gap: 14px; }
.mj-section__title { margin: 0 0 12px; font-size: 1rem; font-weight: 800; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Section yang belum diisi → soft red biar ke-trigger */
.mj-section--empty { background: #fef2f2; border-color: #fecaca; box-shadow: inset 3px 0 0 #f87171; }
:root[data-theme="dark"] .mj-section--empty { background: rgba(248,113,113,.07); border-color: rgba(248,113,113,.35); }
.mj-section--empty .mj-section__title { border-bottom-color: #fecaca; }
.mj-section__empty-chip { font-size: .68rem; font-weight: 700; color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca; padding: 2px 8px; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.mj-section__body { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 18px; align-items: start; }
.mj-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.mj-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mj-fld--full { grid-column: 1 / -1; }
.mj-fld__lbl { font-size: .74rem; font-weight: 600; color: var(--muted); }
.mj-file { display: flex; flex-direction: column; gap: 8px; border: 1px dashed var(--border); border-radius: var(--r-md); padding: 12px; background: var(--bg); }
.mj-file__prev { min-height: 120px; display: flex; align-items: center; justify-content: center; background: #1f2937; border-radius: var(--r-sm); overflow: hidden; }
.mj-file__img { max-width: 100%; max-height: 220px; object-fit: contain; }
.mj-file__pdf { color: #93c5fd; font-weight: 600; text-decoration: none; }
.mj-file__none { color: #94a3b8; font-size: .85rem; }
.mj-file__input { font-size: .82rem; }
.mj-savebar { display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: var(--surface); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
@media (max-width: 820px) {
  .mj-section__body { grid-template-columns: 1fr; }
  .mj-fields { grid-template-columns: 1fr; }
}

/* Monitoring Jamaah — file widget: PDF embed + tambahan */
.mj-file-stack { display: flex; flex-direction: column; gap: 12px; }
.mj-file__pdfframe { width: 100%; height: 240px; border: 0; border-radius: var(--r-sm); background: #fff; }
.mj-file__prev:has(.mj-file__pdfframe) { padding: 0; background: #fff; min-height: 240px; }
.mj-file__open { font-size: .78rem; color: var(--primary); text-decoration: none; align-self: flex-start; margin-top: 2px; }
.mj-file__open:hover { text-decoration: underline; }

/* Monitoring Jamaah — dropzone (drag-drop + paste) */
.mj-drop { position: relative; }
.mj-file__prev { position: relative; }
.mj-drop--over { outline: 2px dashed var(--primary); outline-offset: 3px; border-radius: var(--r-md); }
.mj-drop__overlay { display: none; }
.mj-drop--over .mj-drop__overlay {
  display: flex; position: absolute; inset: 0; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--primary);
  font-weight: 800; border-radius: var(--r-sm); pointer-events: none; z-index: 2;
}
.mj-file__hint { font-size: .72rem; color: var(--muted); line-height: 1.4; }
.mj-file__newbadge { position: absolute; top: 6px; right: 6px; background: var(--success); color: #fff; font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); z-index: 3; }

/* Monitoring Jamaah — dropzone eksplisit (kotak dashed) */
.mj-dz { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 16px 12px; border: 2px dashed var(--border); border-radius: var(--r-md);
  background: var(--bg); cursor: pointer; transition: border-color .12s, background .12s; }
.mj-dz:hover { border-color: var(--primary); background: var(--primary-soft); }
.mj-dz__input { display: none; }
.mj-dz__ic { font-size: 1.7rem; line-height: 1; }
.mj-dz__t { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.mj-dz__link { color: var(--primary); font-weight: 700; text-decoration: underline; }
.mj-dz__file { font-size: .74rem; font-weight: 700; color: var(--success); margin-top: 2px; }
.mj-drop--over .mj-dz { border-color: var(--primary); background: var(--primary-soft); }

/* Upload Dokumen — modal scan (klik chip) */
.ops-scan-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 12px; }
.ops-scan-status { margin-top: 10px; }
.ops-scan-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
#ops-scan-form.mj-drop--over { outline: 2px dashed var(--primary); outline-offset: 4px; border-radius: var(--r-md); }
.opsdoc-chip { cursor: pointer; border: 1px solid transparent; font-family: inherit; }
.opsdoc-chip:hover { filter: brightness(.97); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
@media (max-width: 520px) { .ops-scan-fields { grid-template-columns: 1fr; } }

/* Satgas Bandara — tabel + section tone + read-only (dipakai page admin & publik) */
.bd-months { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.bd-month { padding:6px 12px; border-radius:999px; font-size:.82rem; font-weight:600; text-decoration:none; color:var(--muted,#64748b); background:var(--surface,#fff); border:1px solid var(--border,#e3e3e8); }
.bd-month--active { background:var(--primary,#2563eb); color:#fff; border-color:var(--primary,#2563eb); }
.bd-sechd { padding:12px 16px; font-weight:800; font-size:1.05rem; border-bottom:1px solid var(--border,#e3e3e8); display:flex; align-items:center; gap:8px; }
.bd-sechd--berangkat { background:linear-gradient(135deg,#dbeafe,#eff6ff); color:#1d4ed8; border-left:5px solid #2563eb; }
.bd-sechd--pulang { background:linear-gradient(135deg,#fef3c7,#fffbeb); color:#b45309; border-left:5px solid #f59e0b; }
.bd-tbl th, .bd-tbl td { white-space:nowrap; vertical-align:middle; }
.bd-tbl .bd-ro { background:var(--surface-2,#f8fafc); font-weight:600; }
.bd-cell { width:130px; padding:5px 7px; border:1px solid var(--border-soft,#e5e7eb); border-radius:6px; font-size:.82rem; font-family:inherit; background:var(--surface,#fff); color:var(--text,#0f172a); }
.bd-cell:focus { outline:2px solid var(--primary,#2563eb); outline-offset:-1px; }
.bd-cell--saving { background:#fef9c3; }
.bd-cell--ok { background:#dcfce7; }
.bd-cell--err { background:#fee2e2; }
.bd-cell--auto { background:#f0f9ff; color:#0369a1; border-color:#bae6fd; }
:root[data-theme="dark"] .bd-cell--auto { background:#0c2a3f; color:#7dd3fc; border-color:#075985; }
/* Auto field (code flight / T-O-Land) sering panjang → lebih lebar + ikut isi
   (field-sizing didukung Chrome; browser lain pakai width fallback). */
.bd-cell--mini.bd-cell--auto { width:165px; min-width:130px; max-width:260px; field-sizing:content; }
.bd-auto { display:inline-block; margin-left:4px; padding:0 5px; border-radius:999px; background:#e0f2fe; color:#0369a1; font-size:.58rem; font-weight:700; letter-spacing:.3px; text-transform:none; vertical-align:middle; }
:root[data-theme="dark"] .bd-auto { background:#075985; color:#bae6fd; }
.bd-roview { font-size:.84rem; }
.bd-sharebar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--primary-soft,#eff6ff); border:1px solid var(--primary,#2563eb); border-radius:10px; padding:10px 14px; margin-bottom:14px; }
.bd-sharebar code { background:var(--surface,#fff); border:1px solid var(--border,#e3e3e8); padding:4px 8px; border-radius:6px; font-size:.78rem; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Add On Hub — kartu ringkasan + header kategori */
.addon-cards { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.addon-card { flex:1; min-width:160px; background:var(--surface,#fff); border:1px solid var(--border,#e3e3e8); border-radius:12px; padding:14px 16px; }
.addon-card__lbl { font-size:.78rem; color:var(--muted,#64748b); margin-bottom:4px; }
.addon-card__val { font-size:1.35rem; font-weight:800; color:var(--text,#0f172a); }
.addon-cathd td { background:var(--surface-2,#f1f5f9); font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted,#475569); padding:8px 14px !important; }

/* Searchable combobox (filter batch Add On) */
.combo { position:relative; display:inline-block; }
.combo__input { width:220px; padding-right:30px; }
.combo__caret { position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--muted,#94a3b8); pointer-events:none; }
.combo__menu { position:absolute; z-index:30; top:calc(100% + 4px); left:0; min-width:100%; max-height:280px; overflow-y:auto; background:var(--surface,#fff); border:1px solid var(--border,#e3e3e8); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:4px; }
.combo__opt { padding:8px 12px; border-radius:7px; font-size:.86rem; cursor:pointer; white-space:nowrap; }
.combo__opt:hover { background:var(--primary-soft,#eff6ff); color:var(--primary,#2563eb); }

/* Satgas Bandara — badge jenis (keberangkatan/kepulangan) di tabel gabungan */
.bd-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:700; white-space:nowrap; }
.bd-badge--berangkat { background:#dbeafe; color:#1d4ed8; }
.bd-badge--pulang { background:#fef3c7; color:#b45309; }
:root[data-theme="dark"] .bd-badge--berangkat { background:#1e3a8a; color:#bfdbfe; }
:root[data-theme="dark"] .bd-badge--pulang { background:#78350f; color:#fde68a; }

/* Itinerary Mirror (read-only dari rgiapp) */
.itm-wrap { display:flex; flex-direction:column; gap:14px; }
.itm-day { padding:16px 18px; }
.itm-day__hd { display:flex; gap:14px; align-items:flex-start; margin-bottom:8px; }
.itm-day__num { flex:none; background:var(--primary,#2563eb); color:#fff; font-weight:800; font-size:.8rem; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.itm-day__title { font-weight:700; font-size:1.02rem; }
.itm-day__meta { display:flex; gap:14px; flex-wrap:wrap; color:var(--muted,#64748b); font-size:.84rem; margin-top:2px; }
.itm-day__desc { color:var(--muted,#475569); font-size:.9rem; margin:0 0 10px; }
.itm-blk { border-left:3px solid var(--border,#e3e3e8); padding:4px 0 4px 14px; margin:10px 0 0; }
.itm-blk--point { border-left-color:#2563eb; }
.itm-blk--kegiatan { border-left-color:#f59e0b; }
.itm-blk__title { font-weight:700; font-size:.92rem; margin-bottom:4px; }
.itm-acts { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.itm-act { display:flex; gap:10px; align-items:baseline; font-size:.88rem; }
.itm-act__time { flex:none; font-variant-numeric:tabular-nums; font-weight:700; color:var(--primary,#2563eb); min-width:88px; }
.itm-act__name { color:var(--text,#0f172a); }
.itm-act__ket { display:block; color:var(--muted,#64748b); font-size:.82rem; margin-top:1px; }

/* Itinerary: kartu peringatan "belum ada itinerary" */
.itin-card-warn { border-color:var(--danger,#dc2626); background:var(--danger-soft,#fef2f2); }

/* Itinerary Mirror — edit mode inline */
.itm-edit { font:inherit; color:inherit; border:1px solid transparent; background:transparent; border-radius:6px; padding:2px 5px; width:100%; box-sizing:border-box; }
.itm-edit--inline { width:auto; display:inline-block; }
.itm-edit--area { resize:vertical; min-height:1.6em; line-height:1.4; }
.itm-mode-edit .itm-edit { border-color:var(--border,#e3e3e8); background:var(--surface,#fff); }
.itm-mode-edit .itm-edit:focus { outline:2px solid var(--primary,#2563eb); outline-offset:-1px; }
.itm-mode-edit .itm-day { box-shadow:0 0 0 1px var(--primary,#2563eb) inset; }
/* sembunyikan field kosong saat view mode (biar tetap rapi seperti read-only) */
.itm-detail:not(.itm-mode-edit) .itm-edit:placeholder-shown { display:none; }
.itm-detail:not(.itm-mode-edit) .itm-blk__type { display:none; }
.itm-blk__title { display:flex; align-items:center; gap:6px; }
.itm-blk__ic { flex:none; }
.itm-blk__titlein { font-weight:700; }
.itm-act__time { max-width:88px; font-variant-numeric:tabular-nums; font-weight:700; color:var(--primary,#2563eb); }
.itm-act__namein { font-weight:500; }
.itm-act__ket { font-size:.82rem; color:var(--muted,#64748b); }
.itm-saving { opacity:.5; }
.itm-toast { position:fixed; bottom:20px; right:20px; z-index:50; padding:10px 16px; border-radius:8px; font-weight:700; font-size:.85rem; box-shadow:0 4px 16px rgba(0,0,0,.18); }
.itm-toast--ok { background:#dcfce7; color:#166534; }
.itm-toast--err { background:#fee2e2; color:#991b1b; }

/* Itinerary — filter checkbox "belum ada itinerary" */
.itin-chk { display:flex; align-items:center; gap:7px; font-size:.85rem; font-weight:600; cursor:pointer; padding:8px 12px; border:1px solid var(--border,#e3e3e8); border-radius:8px; background:var(--surface,#fff); white-space:nowrap; user-select:none; }
.itin-chk:has(input:checked) { border-color:var(--danger,#dc2626); background:var(--danger-soft,#fef2f2); color:var(--danger,#dc2626); }
.itin-chk input { width:16px; height:16px; cursor:pointer; }

/* Itinerary edit mode — refinement UX (v2) */
.itm-act__col { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.itm-act__namein { font-weight:500; font-size:.92rem; }
.itm-act__ket { font-size:.86rem; color:var(--muted,#475569); width:100%; }
/* dual render deskripsi (HTML) */
.itm-editonly { display:none; }
.itm-mode-edit .itm-editonly { display:block; }
.itm-mode-edit .itm-view-only { display:none; }
.itm-day__desc.itm-view-only { font-size:.9rem; }

/* Itinerary edit mode — tambah/hapus kegiatan (cuma muncul saat edit mode) */
.itm-act__del { display:none; flex:none; align-self:center; border:none; background:transparent; color:var(--muted,#94a3b8); cursor:pointer; font-size:.9rem; line-height:1; padding:3px 7px; border-radius:6px; }
.itm-mode-edit .itm-act__del { display:inline-flex; }
.itm-act__del:hover { background:var(--danger-soft,#fef2f2); color:var(--danger,#dc2626); }
.itm-act-add { display:none; margin:8px 0 0; align-items:center; gap:6px; border:1px dashed var(--primary,#2563eb); background:transparent; color:var(--primary,#2563eb); cursor:pointer; font-weight:700; font-size:.82rem; padding:6px 12px; border-radius:8px; }
.itm-mode-edit .itm-act-add { display:inline-flex; }
.itm-act-add:hover { background:#eff6ff; }
.itm-act-add:disabled { opacity:.5; cursor:default; }
.itm-day__desc.itm-view-only ul { margin:4px 0; padding-left:20px; }
.itm-day__desc.itm-view-only li { margin:2px 0; }
.itm-editonly.itm-edit--area { min-height:4.5em; font-family:inherit; }
/* edit mode: bedakan kosong vs terisi — kosong = putus-putus + abu, terisi = solid */
.itm-mode-edit .itm-edit:placeholder-shown { border-style:dashed; border-color:#cbd5e1; background:var(--surface-2,#f8fafc); }
.itm-mode-edit .itm-edit:not(:placeholder-shown) { border-color:var(--border,#cbd5e1); background:var(--surface,#fff); }
.itm-mode-edit .itm-act { padding:5px 0; border-bottom:1px dashed var(--border,#eef2f7); }

/* Satgas Bandara — kolom Tim (tag multi "Peran - Nama") */
.bd-team-cell { vertical-align:top; }
.bd-team { min-width:250px; display:flex; flex-direction:column; gap:7px; }
.bd-team__tags { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.bd-team__tag { display:inline-flex; align-items:center; gap:6px; background:var(--primary-soft,#eff6ff); color:var(--primary,#1d4ed8); border:1px solid #bfdbfe; border-radius:999px; padding:3px 6px 3px 11px; font-size:.8rem; font-weight:600; white-space:nowrap; }
.bd-team__tag--ro { background:var(--surface-2,#f1f5f9); color:var(--text,#334155); border-color:var(--border,#e3e3e8); padding:3px 11px; }
:root[data-theme="dark"] .bd-team__tag { background:#1e3a8a; color:#bfdbfe; border-color:#1e40af; }
.bd-team__x { border:0; background:transparent; color:inherit; cursor:pointer; font-size:1.05rem; line-height:1; padding:0 2px; opacity:.55; }
.bd-team__x:hover { opacity:1; }
.bd-team__add { display:flex; gap:5px; align-items:center; }
.bd-team__role { padding:5px 6px; border:1px solid var(--border,#e3e3e8); border-radius:7px; font-size:.78rem; background:var(--surface,#fff); color:var(--text,#0f172a); }
.bd-team__name { width:190px; padding:5px 8px; border:1px solid var(--border,#e3e3e8); border-radius:7px; font-size:.8rem; font-family:inherit; background:var(--surface,#fff); color:var(--text,#0f172a); }
.bd-team__addbtn { padding:5px 10px; border:1px solid var(--primary,#2563eb); background:var(--primary,#2563eb); color:#fff; border-radius:7px; font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.bd-team__addbtn:hover { filter:brightness(1.08); }
.bd-team--saving { opacity:.55; }

/* Satgas Bandara — tabel kompak (kolom digabung) */
.bd-tbl--compact td { vertical-align:top; }
.bd-jadwal .bd-tgl { font-weight:700; font-size:.82rem; margin-bottom:5px; white-space:nowrap; }
.bd-meta { font-size:.75rem; color:var(--muted,#64748b); margin-top:4px; white-space:nowrap; }
.bd-lf { display:flex; align-items:center; gap:6px; margin:3px 0; }
.bd-lf__l { font-size:.66rem; color:var(--muted,#94a3b8); min-width:58px; text-align:right; flex:none; text-transform:uppercase; letter-spacing:.3px; font-weight:600; }
.bd-cell--mini { width:108px; padding:4px 6px; font-size:.8rem; }
.bd-tbl--compact .bd-team { min-width:230px; }

/* Roomlist (area admin) — grid kartu kamar */
.rlx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.rlx-room { background:var(--surface,#fff); border:1px solid var(--border,#e3e3e8); border-left:5px solid #94a3b8; border-radius:10px; padding:10px 12px; }
.rlx-tipe-quad { border-left-color:#2563eb; }
.rlx-tipe-triple { border-left-color:#16a34a; }
.rlx-tipe-double { border-left-color:#f59e0b; }
.rlx-tipe-quint { border-left-color:#9333ea; }
.rlx-tipe-single { border-left-color:#dc2626; }
.rlx-tipe-petugas { border-left-color:#0891b2; }
.rlx-room__hd { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rlx-tipe { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.3px; color:var(--muted,#64748b); flex:none; }
.rlx-room-input { flex:1; min-width:0; padding:5px 8px; border:1px solid var(--border,#e3e3e8); border-radius:7px; font-size:.85rem; font-weight:700; background:var(--surface,#fff); color:var(--text,#0f172a); font-family:inherit; }
.rlx-room-input:focus { outline:2px solid var(--primary,#2563eb); outline-offset:-1px; }
.rlx-room-status { flex:none; font-size:.85rem; min-width:14px; color:var(--success,#16a34a); }
.rlx-seats { display:flex; flex-direction:column; gap:2px; }
.rlx-seat { display:flex; gap:8px; align-items:baseline; font-size:.86rem; padding:1px 0; }
.rlx-seat__n { flex:none; width:18px; text-align:right; color:var(--muted,#94a3b8); font-variant-numeric:tabular-nums; font-size:.76rem; }
.rlx-leader { font-size:.72rem; }

/* Roomlist — Atur Kamar (room assignment manage) */
.rlm-pool { padding:12px 16px; margin-bottom:14px; }
.rlm-pool__hd { font-weight:800; font-size:.95rem; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.rlm-pool__count { background:#dc2626; color:#fff; font-size:.74rem; font-weight:800; padding:2px 9px; border-radius:999px; }
.rlm-pool__count--zero { background:#16a34a; }
.rlm-pool__list { display:flex; flex-wrap:wrap; gap:6px; }
.rlm-chip { background:var(--surface-2,#f1f5f9); border:1px solid var(--border,#e3e3e8); border-radius:999px; padding:3px 11px; font-size:.82rem; }
.rlm-rooms { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.rlm-room { background:var(--surface,#fff); border:1px solid var(--border,#e3e3e8); border-radius:11px; padding:11px 13px; }
.rlm-room__hd { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.rlm-cap { font-size:.76rem; font-weight:800; background:var(--surface-2,#f1f5f9); color:var(--muted,#475569); padding:2px 9px; border-radius:999px; }
.rlm-cap--full { background:#dcfce7; color:#166534; }
.rlm-occ { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.rlm-occ-row { display:flex; align-items:center; gap:8px; font-size:.86rem; }
.rlm-occ-row__n { flex:none; width:18px; text-align:right; color:var(--muted,#94a3b8); font-size:.76rem; }
.rlm-occ-row__nm { flex:1; min-width:0; }
.rlm-x { flex:none; border:0; background:#fee2e2; color:#991b1b; border-radius:6px; width:22px; height:22px; cursor:pointer; font-size:1rem; line-height:1; }
.rlm-x:hover { background:#fecaca; }
.rlm-add { display:flex; gap:6px; border-top:1px dashed var(--border,#e3e3e8); padding-top:8px; }
.rlm-select { flex:1; min-width:0; padding:5px 7px; border:1px solid var(--border,#e3e3e8); border-radius:7px; font-size:.82rem; background:var(--surface,#fff); color:var(--text,#0f172a); }

/* Roomlist Atur Kamar — Stage 2: add by type panel + delete room */
.rlm-types { padding:12px 16px; margin-bottom:14px; }
.rlm-types__hd { font-weight:800; font-size:.95rem; margin-bottom:10px; }
.rlm-types__btns { display:flex; flex-wrap:wrap; gap:8px; }
.rlm-typebtn { display:flex; flex-direction:column; align-items:center; gap:1px; border:0; border-radius:10px; padding:8px 16px; cursor:pointer; color:#fff; min-width:120px; }
.rlm-typebtn:hover { filter:brightness(1.06); }
.rlm-typebtn__plus { font-size:1.1rem; font-weight:800; line-height:1; }
.rlm-typebtn__name { font-weight:800; font-size:.9rem; }
.rlm-typebtn__meta { font-size:.68rem; opacity:.92; }
.rlm-type-quad { background:#7c3aed; } .rlm-type-triple { background:#2563eb; }
.rlm-type-double { background:#16a34a; } .rlm-type-single { background:#ea580c; }
.rlm-type-quint { background:#dc2626; } .rlm-type-default { background:#64748b; }
.rlm-del { border:0; background:transparent; cursor:pointer; font-size:.95rem; opacity:.6; padding:0 2px; }
.rlm-del:hover { opacity:1; }

/* Roomlist Atur Kamar — Stage 3: rename inline + drag & drop */
.rlm-name { flex:1; min-width:0; border:1px solid transparent; background:transparent; font-weight:700; font-size:.92rem; padding:3px 6px; border-radius:6px; color:var(--text,#0f172a); font-family:inherit; }
.rlm-name:hover { border-color:var(--border,#e3e3e8); }
.rlm-name:focus { outline:2px solid var(--primary,#2563eb); outline-offset:-1px; background:var(--surface,#fff); }
.rlm-drag { cursor:grab; }
.rlm-drag:active { cursor:grabbing; }
.rlm-dragging { opacity:.45; }
.rlm-droproom.rlm-over { outline:2px dashed var(--primary,#2563eb); outline-offset:2px; background:var(--primary-soft,#eff6ff); }
.rlm-droppool.rlm-over { outline:2px dashed #dc2626; outline-offset:2px; background:#fef2f2; }
.rlm-occ-row.rlm-drag { padding:2px 4px; border-radius:6px; }
.rlm-occ-row.rlm-drag:hover { background:var(--surface-2,#f8fafc); }

/* Roomlist Atur Kamar — Stage 4: info mahram/reschedule */
.rlm-info { display:flex; gap:14px; flex-wrap:wrap; background:var(--surface-2,#f1f5f9); border-radius:9px; padding:8px 14px; margin-bottom:12px; font-size:.84rem; color:var(--muted,#475569); }
.rlm-info__rs { color:#b45309; font-weight:600; }

/* === Roomlist view page header & toolbar (revamp 2026-06-20) === */
.rlx-back { margin-bottom: 8px; }
.rlx-back__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .85rem; color: var(--muted, #64748b);
  text-decoration: none; padding: 4px 0;
}
.rlx-back__link:hover { color: var(--primary, #1e3a8a); }

.rlx-hd {
  background: var(--surface, #fff); border: 1px solid var(--border, #e3e3e8);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 12px;
}
.rlx-hd__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rlx-hd__rtb {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .3px;
  background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe;
}
.rlx-hd__title { margin: 0; font-size: 1.4rem; line-height: 1.25; flex: 1; min-width: 0; color: var(--text, #0f172a); }
.rlx-hd__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rlx-hd__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: #334155;
  background: #f1f5f9; border: 1px solid #e2e8f0;
}
.rlx-hd__chip--occ { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.rlx-hd__progress {
  height: 6px; background: #e2e8f0; border-radius: 4px; overflow: hidden;
}
.rlx-hd__progress-fill {
  height: 100%; background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 4px; transition: width .3s ease;
}

.rlx-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; margin-bottom: 14px;
}
.rlx-toolbar__group {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px; border-left: 1px solid #cbd5e1;
}
.rlx-toolbar__group:first-of-type { border-left: none; padding-left: 0; }
.rlx-toolbar__lbl {
  font-size: .78rem; font-weight: 700; color: #475569;
  margin-right: 2px;
}
.rlx-export-btn {
  font-size: .78rem !important; padding: 4px 10px !important;
}

/* Hotel — badge over/understay (CL nights vs stay) */
.hotel-over-chip { display:inline-flex; align-items:center; gap:3px; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.hotel-under-chip { display:inline-flex; align-items:center; gap:3px; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; background:#fef3c7; color:#92400e; border:1px solid #fde68a; }

/* === Roomlist Atur Kamar — chip TA-style (2026-06-20) === */
/* Chip structure: grip + name + badges + pemesan */
.rlm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border, #e3e3e8);
  background: var(--surface-2, #f1f5f9); font-size: .82rem;
  line-height: 1.4; color: var(--text, #0f172a);
}
.rlm-chip__grip { color: #94a3b8; cursor: grab; flex: none; font-size: .85rem; }
.rlm-chip__nm { font-weight: 600; }
.rlm-chip__pem { font-size: .76rem; }
.rlm-chip__pesanan { display: inline-block; font-size: .72rem; color: var(--muted, #64748b); font-weight: 500; margin-top: 2px; line-height: 1.3; padding: 0; background: none; border: none; }
.rlm-chip--readonly .rlm-chip__pesanan { margin-top: 0; margin-left: 4px; }
.rlm-occ-row__pesanan { color: var(--muted, #64748b); font-weight: 500; }
.rlm-chip--readonly { opacity: .92; cursor: default; }
.rlm-chip--readonly .rlm-chip__nm { font-weight: 700; }

/* Badge mini (mirror TA: #ID L 53 TAHUN 💬) */
.rlm-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding: 0 6px; border-radius: 9px;
  font-size: .65rem; font-weight: 800; letter-spacing: .2px;
  background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe;
}
.rlm-badge--id { background: #f1f5f9; color: #475569; border-color: #e2e8f0; font-weight: 700; }
.rlm-badge--g { width: 18px; padding: 0; border-radius: 50%; }
.rlm-badge--g-l { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.rlm-badge--g-p { background: #fce7f3; color: #9f1239; border-color: #f9a8d4; }
.rlm-badge--age { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.rlm-badge--wa {
  background: #dbeafe; color: #1e40af; border-color: #93c5fd;
  text-decoration: none; cursor: pointer; padding: 0 5px;
}
.rlm-badge--wa:hover { background: #bfdbfe; }

/* Catatan Roomlist button — clean SVG icon, no emoji.
   Kosong: bulat abu pucat dgn "+" tipis. Ada catatan: bulat amber solid dgn note icon putih. */
.rlm-note-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  border: 1px solid #e2e8f0; border-radius: 50%;
  background: #fff; color: #94a3b8;
  cursor: pointer; transition: all .12s ease;
  flex: none;
}
.rlm-note-btn:hover { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.rlm-note-btn--has {
  background: #f59e0b; color: #fff; border-color: #d97706;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .2);
}
.rlm-note-btn--has:hover { background: #d97706; border-color: #b45309; }
.rlm-note-btn svg { display: block; }

/* Note modal */
.rlm-note-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.rlm-note-modal[hidden] { display: none; }
.rlm-note-modal__bd {
  background: var(--surface, #fff);
  border-radius: 14px; padding: 22px 24px;
  width: 100%; max-width: 440px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.rlm-note-modal__title { margin: 0 0 4px; font-size: 1.15rem; text-align: center; color: var(--text, #0f172a); }
.rlm-note-modal__sub { text-align: center; color: var(--muted, #64748b); font-size: .88rem; margin-bottom: 14px; }
.rlm-note-modal__ta {
  width: 100%; box-sizing: border-box; min-height: 100px; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  font-family: inherit; font-size: .92rem; line-height: 1.5; color: var(--text, #0f172a);
  background: var(--surface, #fff);
}
.rlm-note-modal__ta:focus { outline: 2px solid var(--primary, #2563eb); outline-offset: -1px; }
.rlm-note-modal__act { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.rlm-note-modal__hint { font-size: .78rem; color: var(--muted, #94a3b8); text-align: center; margin-top: 12px; }
.rlm-note-modal__status { font-size: .8rem; color: var(--muted, #64748b); text-align: center; margin-top: 6px; min-height: 18px; }

.rlm-mahram { font-size: .72rem; color: #b45309; font-weight: 600; }

/* Occupant row dgn struktur baru: n + main (nm + meta) + x */
.rlm-occ-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rlm-occ-row__meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .72rem; }

/* Pemesan color tag — 12-color palette via class rlm-pem-c0..11.
 * Apply border-left tint biar grup serombongan kelihatan jelas. */
.rlm-pem-c0  { border-left: 4px solid #ef4444; }
.rlm-pem-c1  { border-left: 4px solid #f59e0b; }
.rlm-pem-c2  { border-left: 4px solid #eab308; }
.rlm-pem-c3  { border-left: 4px solid #84cc16; }
.rlm-pem-c4  { border-left: 4px solid #10b981; }
.rlm-pem-c5  { border-left: 4px solid #06b6d4; }
.rlm-pem-c6  { border-left: 4px solid #3b82f6; }
.rlm-pem-c7  { border-left: 4px solid #6366f1; }
.rlm-pem-c8  { border-left: 4px solid #8b5cf6; }
.rlm-pem-c9  { border-left: 4px solid #d946ef; }
.rlm-pem-c10 { border-left: 4px solid #ec4899; }
.rlm-pem-c11 { border-left: 4px solid #f43f5e; }
/* Occupant row dpt pemesan color juga */
.rlm-occ-row.rlm-pem-c0,
.rlm-occ-row.rlm-pem-c1,
.rlm-occ-row.rlm-pem-c2,
.rlm-occ-row.rlm-pem-c3,
.rlm-occ-row.rlm-pem-c4,
.rlm-occ-row.rlm-pem-c5,
.rlm-occ-row.rlm-pem-c6,
.rlm-occ-row.rlm-pem-c7,
.rlm-occ-row.rlm-pem-c8,
.rlm-occ-row.rlm-pem-c9,
.rlm-occ-row.rlm-pem-c10,
.rlm-occ-row.rlm-pem-c11 { padding-left: 8px; }

.rlm-pool--petugas .rlm-pool__hd { color: #0891b2; }
.rlm-pool--petugas { background: #f0f9ff; border-color: #bae6fd; }

.rlm-petugas-auto-note { font-size: .72rem; color: #0891b2; font-weight: 600; margin: 0 0 6px; padding: 3px 6px; background: #f0f9ff; border-radius: 5px; border-left: 3px solid #0891b2; }
.rlm-occ-row--readonly { padding: 2px 6px; border-radius: 6px; opacity: .92; cursor: default; border-left: 4px solid #0891b2; }

/* Monitoring Jamaah — status approval dokumen di bawah section */
.mj-approval { margin:10px 4px 2px; padding:7px 12px; border-radius:8px; font-size:.84rem; font-weight:600; }
.mj-approval--ok { background:#dcfce7; color:#166534; }
.mj-approval--no { background:#fee2e2; color:#991b1b; }
.mj-approval--pending { background:#fef3c7; color:#92400e; }
.mj-approval__at { font-weight:400; opacity:.8; margin-left:4px; }
.mj-approval__reason { display:block; font-weight:400; margin-top:2px; }

/* Nusuk Mutamer — nama yg QC di panel sukses */
.nusuk-done__by { font-size:.78rem; color:#166534; margin-top:3px; }

/* ===== Command palette (Cari menu) ===== */
.admin-cmdk-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 200px; max-width: 320px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--surface, #f8fafc); color: var(--muted, #64748b);
  font-size: .85rem; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.admin-cmdk-trigger:hover { border-color: #c7d2fe; box-shadow: 0 2px 8px rgba(99,102,241,.12); }
.admin-cmdk-trigger__ico { display: inline-flex; opacity: .7; }
.admin-cmdk-trigger__txt { flex: 1 1 auto; text-align: left; }
.admin-cmdk-trigger__kbd {
  font-size: .7rem; padding: 2px 6px; border-radius: 5px;
  background: rgba(99,102,241,.1); color: #6366f1; border: 1px solid rgba(99,102,241,.2);
}
:root[data-theme="dark"] .admin-cmdk-trigger { background: rgba(255,255,255,.04); }

.cmdk { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; }
.cmdk[hidden] { display: none; }
.cmdk__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
.cmdk__panel {
  position: relative; margin-top: 12vh; width: min(560px, 92vw);
  background: var(--card, #fff); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(15,23,42,.35); border: 1px solid var(--border-soft);
  display: flex; flex-direction: column; max-height: 70vh;
}
:root[data-theme="dark"] .cmdk__panel { background: #0f1729; }
.cmdk__searchbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.cmdk__searchico { display: inline-flex; opacity: .6; }
.cmdk__input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font-size: 1rem; color: inherit; }
.cmdk__esc { font-size: .68rem; padding: 2px 6px; border-radius: 5px; background: rgba(100,116,139,.12); color: var(--muted); }
.cmdk__results { overflow-y: auto; flex: 1 1 auto; padding: 6px; }
.cmdk__list { list-style: none; margin: 0; padding: 0; }
.cmdk__group { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 12px 4px; }
.cmdk__group[hidden] { display: none; }
.cmdk__loading { padding: 14px 16px; text-align: center; color: var(--muted); font-size: .85rem; }
.cmdk__item-sub { display: block; font-weight: 400; font-size: .76rem; color: var(--muted); margin-top: 1px; }
.cmdk__item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px;
  cursor: pointer; color: inherit;
}
.cmdk__item-ico { display: inline-flex; width: 22px; justify-content: center; opacity: .75; flex: 0 0 auto; }
.cmdk__item-label { flex: 1 1 auto; font-weight: 600; font-size: .92rem; }
.cmdk__item-go { opacity: 0; font-size: .85rem; color: #6366f1; }
.cmdk__item--active { background: rgba(99,102,241,.12); }
.cmdk__item--active .cmdk__item-go { opacity: 1; }
.cmdk__item:hover { background: rgba(99,102,241,.08); }
.cmdk__empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: .9rem; }
.cmdk__foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border-soft); font-size: .72rem; color: var(--muted); }
.cmdk__foot kbd { padding: 1px 5px; border-radius: 4px; background: rgba(100,116,139,.12); margin-right: 2px; }
body.cmdk-open { overflow: hidden; }
@media (max-width: 640px) {
  .admin-cmdk-trigger__txt, .admin-cmdk-trigger__kbd { display: none; }
  .admin-cmdk-trigger { min-width: 0; padding: 8px; }
}

/* ===== Stock Perlengkapan ===== */
.sp-tabs { display:flex; gap:6px; margin:20px 0 12px; flex-wrap:wrap; }
.sp-tab { padding:7px 14px; border-radius:999px; border:1px solid var(--border-soft); background:var(--card,#fff); color:var(--muted); font-weight:600; font-size:.85rem; text-decoration:none; }
.sp-tab--active { background:#6366f1; color:#fff; border-color:#6366f1; }
.sp-loccards { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin-bottom:14px; }
.sp-loccard { padding:12px 14px; border:1px solid var(--border-soft); border-radius:12px; background:var(--card,#fff); }
.sp-loccard--hq { border-color:#6366f1; box-shadow:inset 3px 0 0 #6366f1; background:rgba(99,102,241,.04); }
.sp-loccard__name { font-weight:700; font-size:.9rem; }
.sp-loccard__total { font-size:1.6rem; font-weight:800; line-height:1.1; margin-top:2px; }
.sp-loccard__total span { font-size:.7rem; font-weight:600; color:var(--muted); }
.sp-loccard__meta { margin-top:4px; }
.sp-fresh { font-size:.72rem; font-weight:600; padding:1px 7px; border-radius:999px; }
.sp-fresh--ok { background:#ecfdf5; color:#047857; }
.sp-fresh--warn { background:#fffbeb; color:#b45309; }
.sp-fresh--old { background:#fef2f2; color:#b91c1c; }
.sp-fresh--none { background:#f1f5f9; color:#64748b; }
.sp-loccard__pmax { margin-top:6px; font-size:.76rem; font-weight:700; color:#4f46e5; }
.sp-loccard__btl { font-weight:500; color:var(--muted); }
.sp-alerts { margin-bottom:14px; padding:12px 14px; border:1px solid #fed7aa; background:#fff7ed; border-radius:12px; }
.sp-alerts__hd { font-weight:700; color:#9a3412; font-size:.86rem; margin-bottom:8px; }
.sp-alerts__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px; }
.sp-alert { display:flex; align-items:center; gap:6px; padding:5px 9px; background:#fff; border:1px solid #fed7aa; border-radius:8px; font-size:.8rem; }
.sp-alert--crit { border-color:#fecaca; background:#fef2f2; }
.sp-alert__item { font-weight:600; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-alert__loc { color:var(--muted); font-size:.72rem; }
.sp-alert__qty { font-weight:800; color:#b45309; }
.sp-alert--crit .sp-alert__qty { color:#b91c1c; }
.sp-tablewrap { padding:0; overflow-x:auto; }
.sp-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.sp-table th, .sp-table td { padding:8px 10px; text-align:center; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
.sp-th-item { text-align:left !important; position:sticky; left:0; background:var(--card,#fff); z-index:2; }
.sp-th-loc--hq, .sp-cell--hq { background:rgba(99,102,241,.06); }
.sp-td-item { text-align:left !important; font-weight:600; position:sticky; left:0; background:var(--card,#fff); }
.sp-grouprow td { text-align:left !important; font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:var(--surface-2,#f8fafc); padding:6px 10px; }
.sp-cell { font-weight:700; }
.sp-cell--low { color:#b45309; background:#fffbeb; }
.sp-cell--crit { color:#fff; background:#ef4444; }
.sp-cell__none { color:#cbd5e1; font-weight:400; }
.sp-req { color:#f59e0b; margin-left:3px; }
.sp-badge-ind { margin-left:6px; font-size:.66rem; padding:1px 6px; border-radius:999px; background:#eef2ff; color:#4f46e5; font-weight:600; }
.sp-empty { text-align:center; color:var(--muted); padding:24px; }

/* Stock Perlengkapan — PO (Phase 2) */
.sp-alert { text-decoration:none; color:inherit; transition:transform .1s; }
.sp-alert:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.sp-alert__po { font-size:.66rem; font-weight:700; color:#6366f1; background:#eef2ff; padding:1px 6px; border-radius:999px; }
.sp-po { margin-top:18px; padding:16px; border:1px solid var(--border-soft); border-radius:14px; background:var(--card,#fff); }
.sp-po__title { margin:0 0 12px; font-size:1.05rem; font-weight:800; }
.sp-po__form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.sp-po__fld { display:flex; flex-direction:column; gap:3px; flex:1 1 150px; min-width:120px; }
.sp-po__fld--sm { flex:0 0 130px; }
.sp-po__fld span { font-size:.74rem; font-weight:600; color:var(--muted); }
.sp-po__submit { flex:0 0 auto; }
.sp-po__listwrap { margin-top:14px; overflow-x:auto; }
.sp-po__list { width:100%; border-collapse:collapse; font-size:.84rem; }
.sp-po__list th, .sp-po__list td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
.sp-po__list th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.sp-po__item { font-weight:600; }
.sp-po__date { color:var(--muted); }
.sp-po__row--done { opacity:.55; }
.sp-po__eta { font-size:.7rem; font-weight:700; color:#047857; background:#ecfdf5; padding:1px 6px; border-radius:999px; margin-left:5px; }
.sp-po__eta--late { color:#b91c1c; background:#fef2f2; }
.sp-po__act { text-align:right; }

/* Stock Perlengkapan — Timeline SOP (Phase 3) */
.sp-sop { margin-top:18px; padding:16px; border:1px solid var(--border-soft); border-radius:14px; background:var(--card,#fff); }
.sp-sop__title { margin:0 0 4px; font-size:1.05rem; font-weight:800; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sp-sop__concern { font-size:.74rem; font-weight:700; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; padding:2px 9px; border-radius:999px; }
.sp-sop__list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.sp-sopcard { display:flex; flex-direction:column; padding:11px 13px; border:1px solid var(--border-soft); border-radius:11px; background:var(--surface,#fafafa); border-left:4px solid #cbd5e1; color: var(--text, #0f172a); text-decoration: none; transition: transform .12s, box-shadow .12s; cursor: pointer; }
.sp-sopcard:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); border-left-width: 5px; }
.sp-sopcard--pendataan { border-left-color:#3b82f6; }
.sp-sopcard--pengiriman { border-left-color:#10b981; }
.sp-sopcard--mepet { border-left-color:#ef4444; background:#fef2f2; }
.sp-sopcard--belum { border-left-color:#cbd5e1; }
.sp-sopcard__hd { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
/* Name: 2 lines max, ellipsis — semua card rata tingginya. */
.sp-sopcard__name { font-weight:700; font-size:.82rem; line-height:1.3; flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.sp-sopcard__batch { font-size:.7rem; font-weight:600; color:var(--muted); }
.sp-sopcard__hm { font-size:.8rem; font-weight:800; color:#475569; background:#f1f5f9; padding:1px 8px; border-radius:999px; }
.sp-sopcard__hm--crit { color:#fff; background:#ef4444; }
.sp-sopcard__meta { font-size:.74rem; color:var(--muted); margin:3px 0 7px; }
.sp-sopcard__bar { height:7px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.sp-sopcard__fill { height:100%; background:#10b981; border-radius:999px; transition:width .3s; }
.sp-sopcard__fill--crit { background:#ef4444; }
.sp-sopcard__stat { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; font-size:.78rem; }
.sp-sopcard__belum { font-weight:700; color:#b45309; }
.sp-sopcard__belum--crit { color:#b91c1c; }
.sp-sopcard__belum--ok { color:#047857; }

/* Stock Perlengkapan — atur stok manual */
.sp-set { margin-top:12px; }
.sp-set__form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 12px; background:rgba(99,102,241,.05); border:1px dashed rgba(99,102,241,.3); border-radius:10px; }
.sp-set__lbl { font-weight:700; font-size:.82rem; color:#4f46e5; }
.sp-set__qty { max-width:100px; }

/* Stock Perlengkapan — distribusi HQ→cabang */
.sp-set__form--move { margin-top:8px; background:rgba(16,185,129,.05); border-color:rgba(16,185,129,.3); }
.sp-set__form--move .sp-set__lbl { color:#047857; }
.sp-mov { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.78rem; align-items:baseline; }
.sp-mov__hd { font-weight:700; color:var(--muted); }
.sp-mov__item { background:#f1f5f9; padding:2px 8px; border-radius:999px; }

/* === Roomlist /atur Split layout (2026-06-20) === */
/* Kiri = pool jamaah (sticky), kanan = grid kamar. */
.rlm-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: flex-start; }
@media (max-width: 900px) {
  .rlm-split { grid-template-columns: 1fr; }
}
.rlm-split__left {
  position: sticky; top: 14px;
  max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.rlm-split__left .rlm-pool { width: 100%; box-sizing: border-box; }
.rlm-split__right { min-width: 0; }
.rlm-pool__search {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
  font-size: .82rem; margin-bottom: 8px;
}
.rlm-pool__search:focus { outline: 2px solid var(--primary, #2563eb); outline-offset: -1px; }

/* CL composition banner — alert kalau roomlist > pesanan ke hotel */
.rlm-cl-banner {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px;
}
.rlm-cl-banner--alert { background: #fef2f2; border-color: #fca5a5; }
.rlm-cl-banner__hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rlm-cl-banner__icon { font-size: 1.15rem; }
.rlm-cl-banner--alert .rlm-cl-banner__hd strong { color: #b91c1c; }
.rlm-cl-banner__table { display: grid; gap: 1px; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.rlm-cl-row { display: grid; grid-template-columns: 90px 80px 80px 70px 90px 1fr; gap: 0; background: #fff; padding: 6px 10px; font-size: .82rem; align-items: center; }
.rlm-cl-row--hd { background: #f8fafc; font-weight: 700; color: var(--muted, #64748b); font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; }
.rlm-cl-row--alert { background: #fef2f2; }
.rlm-cl-row--alert .rlm-cl-row__status { color: #b91c1c; font-weight: 700; }
.rlm-cl-row--ok .rlm-cl-row__status { color: #15803d; font-weight: 600; }
.rlm-cl-row--warn { background: #fef3c7; }
.rlm-cl-row--warn .rlm-cl-row__status { color: #92400e; font-weight: 600; }
.rlm-cl-row--empty { color: #94a3b8; }
@media (max-width: 700px) {
  .rlm-cl-row { grid-template-columns: 1fr 1fr; }
  .rlm-cl-row--hd { display: none; }
}

/* Pool chip: grid grip + foto + body (3 rows: nama+ID | gender+age+note | pemesan) */
.rlm-pool .rlm-pool__list { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.rlm-pool .rlm-chip--rows {
  display: grid; grid-template-columns: 12px 36px minmax(0, 1fr); gap: 8px;
  align-items: start;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  padding: 7px 10px; border-radius: 8px;
  background: var(--surface, #fff); border: 1px solid var(--border, #e3e3e8);
  font-size: .82rem; line-height: 1.35;
  overflow: hidden;
}
.rlm-pool .rlm-chip__grip { color: #94a3b8; font-size: .85rem; padding-top: 4px; }
.rlm-pool .rlm-chip__foto {
  width: 36px; height: 48px; border-radius: 4px;
  object-fit: cover; object-position: top;
  background: #f1f5f9; border: 1px solid #cbd5e1;
  display: inline-flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 18px;
}
.rlm-pool .rlm-chip__foto--ph { background: #f8fafc; }
.rlm-pool .rlm-chip__body {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.rlm-pool .rlm-chip__r1, .rlm-pool .rlm-chip__r2, .rlm-pool .rlm-chip__r3 {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  justify-content: flex-start; min-width: 0;
}
.rlm-pool .rlm-chip__nm {
  font-weight: 700; flex: 1 1 auto; min-width: 0; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlm-pool .rlm-badge--id { flex: none; }
.rlm-pool .rlm-chip__r3 { font-size: .72rem; }
.rlm-pool .rlm-chip__pem {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlm-pool .rlm-mahram { color: #b45309; font-weight: 600; }
.rlm-pool .rlm-badge { font-size: .68rem; height: 18px; padding: 0 6px; }
.rlm-pool .rlm-badge--g { width: 18px; padding: 0; }
.rlm-pool .rlm-badge--fix { font-size: .65rem; padding: 0 6px; height: 18px; }
.rlm-pool .rlm-note-btn { width: 18px; height: 18px; }
/* Color tag border-left lebih kecil (gantiin full-round) */
.rlm-pool .rlm-chip--rows[class*="rlm-pem-c"] { border-left-width: 4px; }

/* Searchable combo (replacement utk select "+ pilih jamaah") */
.rlm-combo { position: relative; flex: 1; min-width: 0; }
.rlm-combo__input {
  width: 100%; box-sizing: border-box;
  padding: 5px 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 7px;
  font-size: .82rem; background: var(--surface, #fff); color: var(--text, #0f172a);
}
.rlm-combo__input:focus { outline: 2px solid var(--primary, #2563eb); outline-offset: -1px; }
.rlm-combo__menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  margin-top: 2px; max-height: 280px; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.rlm-combo__opt {
  padding: 6px 10px; cursor: pointer; font-size: .82rem;
  display: flex; align-items: baseline; gap: 6px;
}
.rlm-combo__opt:hover, .rlm-combo__opt.is-focus { background: #eff6ff; }
.rlm-combo__opt-nm { font-weight: 600; }
.rlm-combo__empty { padding: 10px; text-align: center; }

/* Badge fix DOB (kalau umur kosong) */
.rlm-badge--fix {
  background: #fef3c7; color: #92400e; border-color: #fcd34d;
  text-decoration: none; cursor: pointer; font-weight: 700;
}
.rlm-badge--fix:hover { background: #fde68a; }

/* Stock Perlengkapan — baris paket (computed) */
.sp-row--paket { background:rgba(99,102,241,.05); }
.sp-td-item--paket { font-weight:800; color:#4338ca; }
.sp-cell--paket { font-size:1rem; }
.sp-cell--paket strong { color:#4338ca; }
.sp-row--paket .sp-cell--crit strong, .sp-row--paket .sp-cell--crit { color:#fff; }

/* Stock Perlengkapan — modal kelola stok */
.sp-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 14px; }
.sp-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center; }
.sp-modal[hidden] { display:none; }
.sp-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.5); }
.sp-modal__panel { position:relative; margin-top:7vh; width:min(640px,94vw); max-height:84vh; overflow-y:auto; background:var(--card,#fff); border-radius:14px; padding:18px; box-shadow:0 24px 64px rgba(0,0,0,.3); }
.sp-modal__x { position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:1.1rem; cursor:pointer; color:var(--muted); }
.sp-modal__tabs { display:flex; gap:6px; margin-bottom:14px; border-bottom:1px solid var(--border-soft); }
.sp-modal__tab { padding:8px 14px; border:0; background:transparent; font-weight:700; font-size:.9rem; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
.sp-modal__tab--active { color:#4338ca; border-bottom-color:#6366f1; }
.sp-modal__or { text-align:center; color:var(--muted); font-size:.78rem; margin:12px 0; position:relative; }
.sp-bulk { padding:12px; background:rgba(16,185,129,.05); border:1px solid rgba(16,185,129,.25); border-radius:10px; }
.sp-bulk__row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sp-bulk__form { display:flex; gap:6px; align-items:center; }
.sp-fld { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.sp-fld span { font-size:.76rem; font-weight:600; color:var(--muted); }
.sp-lines { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.sp-line { display:flex; gap:8px; align-items:center; }
.sp-line select { flex:1 1 auto; }
.sp-line__del { border:1px solid var(--border-soft); background:#fff; color:#b91c1c; border-radius:8px; width:34px; height:34px; cursor:pointer; flex:0 0 auto; }
.sp-pane .sp-set__form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Stock Perlengkapan — master item */
.sp-mi__add { display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--border-soft); margin-bottom:10px; }
.sp-mi__add input[type=text] { flex:1 1 140px; }
.sp-mi__chk { font-size:.78rem; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.sp-mi__list { display:flex; flex-direction:column; gap:8px; }
.sp-mi__row { display:flex; gap:6px; align-items:center; }
.sp-mi__edit { display:flex; gap:6px; align-items:center; flex:1 1 auto; flex-wrap:wrap; }
.sp-mi__edit input[type=text] { flex:1 1 120px; }

/* Stock Perlengkapan — PO cards (lifecycle) */
.sp-po__cards { display:flex; flex-direction:column; gap:10px; }
.sp-pocard { padding:12px 14px; border:1px solid var(--border-soft); border-radius:11px; background:var(--card,#fff); border-left:4px solid #cbd5e1; }
.sp-pocard--invoiced { border-left-color:#3b82f6; }
.sp-pocard--shipped { border-left-color:#8b5cf6; }
.sp-pocard--received { border-left-color:#10b981; opacity:.75; }
.sp-pocard--cancelled { opacity:.5; }
.sp-pocard__hd { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.sp-pocard__title { font-weight:700; font-size:.92rem; }
.sp-pocard__vendor { font-weight:500; color:var(--muted); font-size:.82rem; }
.sp-pocard__badge { font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:999px; background:#f1f5f9; color:#475569; white-space:nowrap; }
.sp-pocard__badge--invoiced { background:#eff6ff; color:#1d4ed8; }
.sp-pocard__badge--shipped { background:#f5f3ff; color:#6d28d9; }
.sp-pocard__badge--received { background:#ecfdf5; color:#047857; }
.sp-pocard__meta { font-size:.78rem; color:var(--muted); margin-top:5px; }
.sp-pocard__match { margin-top:6px; font-size:.8rem; padding:5px 9px; border-radius:8px; background:#ecfdf5; color:#065f46; }
.sp-pocard__match--bad { background:#fffbeb; color:#92400e; }
.sp-pocard__fin { margin-top:6px; font-size:.8rem; color:#4338ca; }
.sp-pocard__fu { margin-top:6px; font-size:.78rem; font-weight:600; color:#b45309; }
.sp-pocard__actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:9px; }
.sp-act { display:inline-block; }
.sp-act summary { cursor:pointer; font-size:.8rem; font-weight:600; padding:5px 10px; border:1px solid var(--border-soft); border-radius:7px; list-style:none; }
.sp-act summary::-webkit-details-marker { display:none; }
.sp-act__form { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:6px; padding:8px; background:var(--surface,#f8fafc); border-radius:8px; }

/* Stock Perlengkapan — searchable vendor combobox (strict) */
.sp-combo { position:relative; }
.sp-combo__list { position:absolute; z-index:30; top:100%; left:0; right:0; margin-top:2px; background:var(--card,#fff); border:1px solid var(--border-soft); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:220px; overflow-y:auto; }
.sp-combo__list[hidden] { display:none; }
.sp-combo__opt { padding:8px 12px; font-size:.86rem; cursor:pointer; }
.sp-combo__opt[hidden] { display:none; }
.sp-combo__opt:hover { background:rgba(99,102,241,.1); }
.sp-combo__empty { padding:10px 12px; font-size:.8rem; color:var(--muted); }

/* PO detail page — progress + riwayat */
.sp-podetail__sec { margin-top:14px; padding-top:12px; border-top:1px solid var(--border-soft); }
.sp-podetail__sec h3 { margin:0 0 8px; font-size:.95rem; }
.sp-podetail__prog { margin-top:14px; display:grid; gap:12px; }
.sp-pp__lbl { font-size:.84rem; margin-bottom:5px; }
.sp-hist { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.sp-hist__row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:7px 10px; background:var(--surface,#f8fafc); border-radius:8px; font-size:.82rem; }
.sp-hist__qty { font-weight:800; color:#0f172a; }
.sp-hist__when { color:var(--muted); font-size:.76rem; }
.sp-hist__note { color:var(--muted); }
.sp-hist__bukti { margin-left:auto; font-weight:600; color:#4338ca; }

/* ===== PO Detail page (redesign) ===== */
.pod-hero { background:linear-gradient(135deg,#eef2ff,#f8fafc); border:1px solid var(--border-soft); border-radius:16px; padding:18px; }
.pod-hero__top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.pod-hero__item { font-size:1.3rem; font-weight:800; letter-spacing:-.01em; }
.pod-hero__sub { font-size:.84rem; color:var(--muted); margin-top:3px; }
.pod-badge { font-size:.74rem; font-weight:700; padding:4px 12px; border-radius:999px; background:#e2e8f0; color:#475569; white-space:nowrap; }
.pod-badge--invoiced { background:#dbeafe; color:#1d4ed8; }
.pod-badge--received { background:#d1fae5; color:#047857; }
.pod-badge--cancelled { background:#fee2e2; color:#b91c1c; }
.pod-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
@media (max-width:560px){ .pod-stats { grid-template-columns:1fr; } }
.pod-stat { background:#fff; border:1px solid var(--border-soft); border-radius:12px; padding:12px 14px; }
.pod-stat__hd { display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; font-weight:600; }
.pod-stat__pct { font-size:1.5rem; font-weight:800; }
.pod-bar { height:10px; border-radius:999px; background:#e5e7eb; overflow:hidden; margin:8px 0 6px; }
.pod-bar__fill { height:100%; border-radius:999px; background:#6366f1; transition:width .4s ease; }
.pod-bar__fill--green { background:#10b981; }
.pod-bar__fill--amber { background:#f59e0b; }
.pod-stat__cap { font-size:.78rem; color:var(--muted); }
.pod-card { background:var(--card,#fff); border:1px solid var(--border-soft); border-radius:14px; padding:16px; margin-top:14px; }
.pod-card__hd { font-size:1rem; font-weight:800; margin-bottom:10px; }
.pod-card__sub { font-size:.74rem; font-weight:500; color:var(--muted); margin-left:6px; }
.pod-match { padding:10px 12px; border-radius:10px; background:#ecfdf5; color:#065f46; font-size:.86rem; }
.pod-match--bad { background:#fffbeb; color:#92400e; }
.pod-match__row { margin-top:5px; font-size:.82rem; }
.pod-form { display:flex; flex-direction:column; gap:10px; }
.pod-form__row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pod-form__row .field__input { flex:1 1 160px; }
.pod-qty { max-width:200px; }
.pod-done { color:#047857; font-weight:600; font-size:.9rem; }
.pod-muted { color:var(--muted); font-size:.86rem; }
/* timeline */
.pod-timeline { margin-top:14px; display:flex; flex-direction:column; gap:0; }
.pod-tl { display:flex; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--border-soft); position:relative; }
.pod-tl:last-child { border-bottom:0; }
.pod-tl__dot { width:11px; height:11px; border-radius:50%; flex:0 0 auto; background:#94a3b8; }
.pod-tl__dot--green { background:#10b981; } .pod-tl__dot--indigo { background:#6366f1; }
.pod-tl__body { flex:1 1 auto; min-width:0; }
.pod-tl__main { font-size:.9rem; } .pod-tl__note { color:var(--muted); font-weight:400; }
.pod-tl__meta { font-size:.74rem; color:var(--muted); margin-top:1px; }
.pod-tl__thumb, .pod-tl__pr { flex:0 0 auto; font-weight:600; color:#4338ca; text-decoration:none; font-size:.82rem; }
.pod-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px; }
/* dropzone */
.dz__input { display:none; }
.dz__zone { border:2px dashed #c7d2fe; border-radius:12px; padding:18px; text-align:center; cursor:pointer; background:#f5f7ff; transition:.15s; display:flex; flex-direction:column; gap:8px; align-items:center; outline:none; }
.dz__zone:hover, .dz__zone:focus { border-color:#6366f1; background:#eef2ff; }
.dz__zone--over { border-color:#6366f1; background:#e0e7ff; }
.dz__zone--filled { border-style:solid; border-color:#10b981; background:#ecfdf5; }
.dz__hint { font-size:.84rem; color:#4f46e5; }
.dz__name { font-size:.8rem; font-weight:600; color:#047857; }
.dz__preview { max-height:160px; max-width:100%; border-radius:8px; border:1px solid var(--border-soft); }

/* PO detail — active dropzone + bukti dropdown */
.dz--active .dz__zone { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.18); }
.pod-tl--det { border-bottom:1px solid var(--border-soft); }
.pod-tl__sum { display:flex; gap:12px; align-items:center; padding:9px 0; cursor:pointer; list-style:none; }
.pod-tl__sum::-webkit-details-marker { display:none; }
.pod-tl__exp { padding:6px 0 12px 23px; display:flex; flex-direction:column; gap:6px; }
.pod-tl__img { max-width:340px; max-height:320px; border-radius:10px; border:1px solid var(--border-soft); }
.pod-tl--det .pod-tl__thumb { color:#4338ca; font-weight:600; font-size:.8rem; }

.sp-modal__title { margin:0 0 14px; font-size:1.1rem; font-weight:800; padding-right:30px; }

.dz__zone { position:relative; }
.dz__clear { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(15,23,42,.7); color:#fff; cursor:pointer; font-size:.8rem; line-height:1; z-index:2; }
.dz__clear:hover { background:#ef4444; }

/* PO detail — bukti chip kanan + jelas dropdown */
.pod-tl__sum .pod-tl__thumb { margin-left:auto; display:inline-flex; align-items:center; gap:4px; padding:4px 11px; border:1px solid #c7d2fe; border-radius:999px; background:#eef2ff; color:#4338ca; font-weight:700; font-size:.76rem; white-space:nowrap; }
.pod-tl--det[open] .pod-tl__sum .pod-tl__thumb { background:#6366f1; color:#fff; border-color:#6366f1; }
.pod-tl--det .pod-tl__sum:hover .pod-tl__thumb { border-color:#6366f1; }

/* dropzone aktif — penanda jelas tujuan paste */
.dz--active .dz__zone { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.2); }
.dz--active .dz__zone::after { content:"📌 paste masuk ke sini"; position:absolute; top:8px; left:10px; font-size:.66rem; font-weight:700; color:#fff; background:#6366f1; padding:2px 8px; border-radius:999px; }

/* PO detail — vendor edit + bukti button */
.pod-vedit { margin-top:10px; }
.pod-vedit summary { cursor:pointer; font-size:.8rem; font-weight:600; color:#4338ca; list-style:none; display:inline-block; }
.pod-vedit summary::-webkit-details-marker { display:none; }
.pod-vedit__form { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.pod-vedit__form .sp-combo { flex:1 1 220px; }
button.pod-tl__thumb { margin-left:auto; cursor:pointer; }

/* PO detail — invoice history */
.pod-inv-up summary { cursor:pointer; font-size:.84rem; font-weight:600; color:#4338ca; list-style:none; padding:8px 0; }
.pod-inv-up summary::-webkit-details-marker { display:none; }
.pod-inv-hd { margin-top:14px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.pod-tl__dot--blue { background:#3b82f6; }
.pod-inv-latest { font-size:.66rem; font-weight:700; background:#dbeafe; color:#1d4ed8; padding:1px 7px; border-radius:999px; margin-left:4px; }
.pod-inv-ok { color:#10b981; } .pod-inv-warn { color:#f59e0b; }

/* PO detail — vendor line + edit button */
.pod-vendor { display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; background:#fff; border:1px solid var(--border-soft); border-radius:10px; padding:9px 12px; }
.pod-vendor__lbl { font-size:.74rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.pod-vendor__name { font-weight:700; font-size:.92rem; }
.pod-vbtn { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:4px; padding:4px 11px; border:1px solid #c7d2fe; border-radius:8px; background:#eef2ff; color:#4338ca; font-weight:700; font-size:.78rem; margin-left:auto; }
.pod-vbtn::-webkit-details-marker { display:none; }
.pod-vbtn:hover { background:#6366f1; color:#fff; border-color:#6366f1; }
.pod-vedit[open] .pod-vbtn { background:#6366f1; color:#fff; border-color:#6366f1; }
.pod-vedit { margin-left:auto; }
.pod-vedit[open] { width:100%; margin-left:0; }

/* PO detail — vendor inline auto-save combo */
.pod-vendor__form { flex:1 1 auto; min-width:200px; display:flex; gap:8px; align-items:center; }
.pod-vendor__form .sp-combo { flex:1 1 auto; }

/* PO detail — tombol lihat bukti/invoice (chip rapi) */
button.pod-tl__thumb {
  margin-left:auto; flex:0 0 auto; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border:1px solid #c7d2fe; border-radius:999px;
  background:#eef2ff; color:#4338ca; font-weight:700; font-size:.76rem; white-space:nowrap;
  transition:.12s;
}
button.pod-tl__thumb:hover { background:#6366f1; color:#fff; border-color:#6366f1; }
.pod-inv-proc { color:#6366f1; }

/* PO list — KPI stats */
.pod-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:16px; }
.pod-kpi { background:var(--card,#fff); border:1px solid var(--border-soft); border-radius:12px; padding:14px 16px; }
.pod-kpi--debt { background:linear-gradient(135deg,#fff7ed,#fff); border-color:#fed7aa; grid-column:span 2; }
.pod-kpi--alert { background:#fef2f2; border-color:#fecaca; }
.pod-kpi__lbl { font-size:.78rem; font-weight:600; color:var(--muted); }
.pod-kpi__val { font-size:1.7rem; font-weight:800; line-height:1.1; margin-top:3px; }
.pod-kpi--debt .pod-kpi__val { color:#c2410c; }
.pod-kpi__unit { font-size:.8rem; font-weight:600; color:var(--muted); }
.pod-kpi__sub { font-size:.74rem; color:var(--muted); margin-top:3px; }
@media (max-width:560px){ .pod-kpi--debt { grid-column:span 1; } }

.pod-inv-ver { font-size:.68rem; font-weight:800; background:#e2e8f0; color:#475569; padding:1px 7px; border-radius:6px; margin-right:6px; }

/* PO list — detail stats */
.pod-stats-more { margin-bottom:16px; }
.pod-stats-more summary { cursor:pointer; font-weight:700; font-size:.86rem; color:#4338ca; padding:8px 0; list-style:none; }
.pod-stats-more summary::-webkit-details-marker { display:none; }
.pod-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:8px; }
.pod-sbox { background:var(--card,#fff); border:1px solid var(--border-soft); border-radius:12px; padding:14px; }
.pod-sbox__hd { font-weight:800; font-size:.86rem; margin-bottom:8px; }
.pod-sbox__row { font-size:.8rem; color:var(--muted); }
.pod-aging { font-size:.82rem; display:flex; align-items:center; gap:7px; padding:3px 0; }
.pod-aging strong { margin-left:auto; }
.pod-aging__dot { width:9px; height:9px; border-radius:50%; }
.pod-aging__dot--red { background:#ef4444; } .pod-aging__dot--amber { background:#f59e0b; } .pod-aging__dot--gray { background:#94a3b8; }
.pod-vrow { display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:.82rem; border-bottom:1px solid var(--border-soft); }
.pod-vrow:last-child { border-bottom:0; }
.pod-vrow__name { font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod-vrow__amt { font-weight:700; white-space:nowrap; color:#c2410c; }

/* PO list — filter pills per item */
.po-pills { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:14px 0 6px; }
.po-pills__lbl { font-size:.78rem; font-weight:700; color:var(--muted); }
.po-pill { padding:5px 13px; border-radius:999px; border:1px solid var(--border-soft); background:var(--card,#fff); color:var(--text); font-weight:600; font-size:.8rem; text-decoration:none; }
.po-pill:hover { border-color:#c7d2fe; }
.po-pill--active { background:#6366f1; color:#fff; border-color:#6366f1; }

/* PO detail — payment status + bukti TF */
.pod-tl--pay { align-items:flex-start; }
.pod-paystat { font-size:.68rem; font-weight:800; padding:1px 8px; border-radius:999px; margin-left:6px; background:#e2e8f0; color:#475569; }
.pod-paystat--SUBMITTED { background:#fef9c3; color:#854d0e; }
.pod-paystat--AUTHORIZED { background:#dbeafe; color:#1d4ed8; }
.pod-paystat--READY_EXECUTE { background:#e0e7ff; color:#4338ca; }
.pod-paystat--PAID { background:#d1fae5; color:#047857; }
.pod-paystat--REJECTED { background:#fee2e2; color:#b91c1c; }
.pod-proof { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.pod-proof__btn { cursor:pointer; border:1px solid #c7d2fe; background:#eef2ff; color:#4338ca; font-weight:700; font-size:.74rem; padding:4px 11px; border-radius:999px; }
.pod-proof__btn:hover { background:#6366f1; color:#fff; }
.pod-proof__wa { border:1px solid #bbf7d0; background:#f0fdf4; color:#15803d; font-weight:700; font-size:.74rem; padding:4px 11px; border-radius:999px; text-decoration:none; }
.pod-proof__wa:hover { background:#22c55e; color:#fff; }

/* Stock Perlengkapan — Saran PO panel */
.sg-panel { margin:14px 0; padding:16px; border:1px solid #fde68a; background:linear-gradient(135deg,#fffbeb,#fff); border-radius:14px; }
.sg-panel__hd { font-size:1.05rem; font-weight:800; }
.sg-panel__count { font-size:.78rem; font-weight:700; color:#b45309; background:#fef3c7; padding:2px 9px; border-radius:999px; margin-left:6px; }
.sg-tablewrap { overflow-x:auto; }
.sg-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.sg-table th, .sg-table td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
.sg-table th { font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.sg-item { font-weight:700; }
.sg-muted { color:var(--muted); font-size:.74rem; }
.sg-incoming { color:#2563eb; font-size:.74rem; margin-left:4px; }
.sg-short { color:#b45309; font-weight:700; }
.sg-suggest strong { font-size:1.05rem; color:#c2410c; }
.sg-near { font-size:.8rem; }
.sg-hm { color:var(--muted); font-size:.74rem; }
.sg-urgent-badge { font-size:.68rem; font-weight:800; color:#b91c1c; margin-left:5px; }
.sg-row--urgent { background:#fef2f2; }

/* Saran PO — dropdown + cards + reason */
.sg-panel { margin:14px 0; padding:14px 16px; border:1px solid #fde68a; background:linear-gradient(135deg,#fffbeb,#fff); border-radius:14px; }
.sg-panel__summary { cursor:pointer; font-size:1rem; font-weight:800; list-style:none; }
.sg-panel__summary::-webkit-details-marker { display:none; }
.sg-panel__hint { font-size:.72rem; font-weight:600; color:var(--muted); margin-left:6px; }
.sg-card { border:1px solid var(--border-soft); border-radius:11px; padding:12px 14px; margin-bottom:10px; background:#fff; border-left:4px solid #f59e0b; }
.sg-card--urgent { border-left-color:#ef4444; background:#fef2f2; }
.sg-card__top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.sg-card__name { font-weight:800; font-size:.95rem; }
.sg-card__nums { display:flex; gap:16px; flex-wrap:wrap; margin-top:7px; font-size:.84rem; color:var(--muted); }
.sg-card__nums strong { color:#0f172a; }
.sg-incoming { color:#2563eb; font-size:.78rem; margin-left:3px; }
.sg-card__sug strong { color:#c2410c; font-size:1rem; }
.sg-card__reason { margin-top:8px; font-size:.8rem; color:#475569; background:var(--surface,#f8fafc); border-radius:8px; padding:8px 10px; line-height:1.5; }

/* Master Item — compact grid layout */
.mi-form { display:grid; grid-template-columns:1fr 105px 105px 64px 44px auto; gap:7px; align-items:center; }
.mi-form .field__input { min-width:0; }
.mi-form--add { padding-bottom:10px; margin-bottom:6px; border-bottom:2px solid var(--border-soft); }
.mi-del-spacer { width:34px; }
.mi-head { display:grid; grid-template-columns:1fr 105px 105px 64px 44px auto 34px; gap:7px; padding:6px 2px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.mi-head span:last-child { width:34px; }
.mi-list { display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; }
.mi-row { display:flex; gap:7px; align-items:center; }
.mi-row .mi-form { flex:1 1 auto; }
.mi-chk { display:flex; justify-content:center; align-items:center; }
.mi-del { flex:0 0 auto; }
@media (max-width:640px){ .mi-form, .mi-head { grid-template-columns:1fr 1fr; } .mi-head { display:none; } }

/* Master Item — auto-save indicator */
.mi-saved { font-size:.66rem; font-weight:600; color:var(--muted); text-align:center; opacity:.65; letter-spacing:.02em; }
.mi-saved--busy { color:var(--accent,#2563eb); opacity:1; }
.mi-form--auto .field__input:focus { box-shadow:0 0 0 2px rgba(37,99,235,.25); }

/* PO timeline — pickup actions (lihat bukti + hapus) */
.pod-tl__actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.pod-tl__delform { display:inline; }
.pod-tl__del { border:1px solid var(--border-soft); background:#fff; color:#b91c1c; border-radius:8px; padding:5px 9px; font-size:.82rem; cursor:pointer; line-height:1; }
.pod-tl__del:hover { background:#fef2f2; border-color:#fecaca; }

/* ===== Rahmah Miles ===== */
.rm-kpis { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.rm-kpi { background:#fff; border:1px solid var(--border-soft); border-radius:12px; padding:12px 16px; min-width:150px; }
.rm-kpi__val { font-size:1.3rem; font-weight:800; }
.rm-kpi__cap { font-size:.74rem; color:var(--muted); margin-top:2px; }
.rm-search { display:flex; gap:8px; margin-bottom:10px; }
.rm-search .field__input { flex:1; }
.rm-pills { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.rm-pill { padding:5px 14px; border-radius:999px; border:1px solid var(--border-soft); background:#fff; font-size:.8rem; color:var(--muted); text-decoration:none; }
.rm-pill--on { background:#1e3a8a; border-color:#1e3a8a; color:#fff; font-weight:600; }
.rm-table-wrap { overflow-x:auto; background:#fff; border:1px solid var(--border-soft); border-radius:12px; }
.rm-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.rm-table th { text-align:left; padding:10px 12px; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); border-bottom:1px solid var(--border-soft); background:#fafafa; white-space:nowrap; }
.rm-table td { padding:10px 12px; border-bottom:1px solid #f2f2f2; vertical-align:top; }
.rm-table tr:last-child td { border-bottom:none; }
.rm-num { text-align:right; white-space:nowrap; }
.rm-name { font-weight:600; }
.rm-sub { font-size:.74rem; color:var(--muted); margin-top:2px; }
.rm-code { background:#f1f5f9; padding:2px 7px; border-radius:6px; font-size:.8rem; }
.rm-empty { text-align:center; color:var(--muted); padding:24px; }
.rm-pending { color:#b45309; font-weight:600; }
.rm-muted { color:var(--muted); }
.rm-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.72rem; font-weight:700; }
.rm-badge--on { background:#dcfce7; color:#15803d; }
.rm-badge--off { background:#fee2e2; color:#b91c1c; }
.rm-ost { display:inline-block; padding:2px 9px; border-radius:6px; font-size:.72rem; font-weight:600; background:#f1f5f9; color:#475569; }
.rm-ost--lunas { background:#dcfce7; color:#15803d; }
.rm-ost--dp { background:#fef9c3; color:#854d0e; }
.rm-ost--wl { background:#fee2e2; color:#b91c1c; }
/* detail */
.rm-detail-hd { position:relative; }
.rm-back { font-size:.82rem; color:var(--muted); text-decoration:none; display:inline-block; margin-bottom:4px; }
.rm-detail-hd h1 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rm-actions { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; }
.rm-act { background:#fff; border:1px solid var(--border-soft); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:180px; }
.rm-act__hd { font-size:.82rem; font-weight:700; }
.rm-act--pw { min-width:280px; }
.rm-bypass { background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; padding:14px; margin-bottom:14px; }
.rm-bypass__hd { font-weight:700; font-size:.9rem; margin-bottom:8px; }
.rm-bypass__exp { font-weight:500; font-size:.74rem; color:#1d4ed8; margin-left:6px; }
.rm-bypass__row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.rm-bypass__row .field__input { flex:1; min-width:240px; font-family:monospace; font-size:.78rem; }
.rm-stats { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
.rm-stat { background:#fff; border:1px solid var(--border-soft); border-radius:12px; padding:12px 16px; min-width:140px; flex:1; }
.rm-stat__val { font-size:1.2rem; font-weight:800; }
.rm-stat__val--warn { color:#b45309; }
.rm-stat__val--ok { color:#15803d; }
.rm-stat__cap { font-size:.72rem; color:var(--muted); margin-top:2px; }
.rm-card { background:#fff; border:1px solid var(--border-soft); border-radius:12px; padding:14px; margin-top:14px; }
.rm-card__hd { font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.rm-card__sub { font-weight:500; font-size:.76rem; color:var(--muted); }
.rm-card .rm-table-wrap { border:none; }
.rm-wd { display:inline-block; padding:2px 9px; border-radius:6px; font-size:.72rem; font-weight:600; background:#f1f5f9; color:#475569; }
.rm-wd--approved { background:#dcfce7; color:#15803d; }
.rm-wd--pending { background:#fef9c3; color:#854d0e; }
.rm-wd--rejected { background:#fee2e2; color:#b91c1c; }

/* Rahmah Miles — modal kelola */
.rm-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center; }
.rm-modal[hidden] { display:none; }
.rm-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.5); }
.rm-modal__panel { position:relative; background:#f8fafc; border-radius:16px; width:min(960px,95vw); max-height:92vh; overflow-y:auto; margin:4vh 0; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.rm-modal__close { position:absolute; top:12px; right:14px; border:none; background:#fff; border:1px solid var(--border-soft); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1rem; line-height:1; }
.rm-modal__close:hover { background:#fee2e2; color:#b91c1c; }
.rm-loading { padding:40px; text-align:center; color:var(--muted); }
.rm-card-hd h2 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 2px; font-size:1.25rem; }
.rm-act__row { display:flex; gap:8px; }
.rm-act__row .field__input { flex:1; }
.rm-back { font-size:.84rem; color:var(--muted); text-decoration:none; display:inline-block; margin-bottom:8px; }
.rm-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:#0f172a; color:#fff; padding:11px 20px; border-radius:10px; font-size:.86rem; z-index:1100; opacity:0; transition:opacity .2s, transform .2s; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.rm-toast[hidden] { display:none; }
.rm-toast--show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Rahmah Miles — tabs, statbar, sort, monitoring */
.rm-tabs { display:flex; gap:4px; border-bottom:2px solid var(--border-soft); margin-bottom:14px; }
.rm-tab { padding:9px 16px; font-size:.88rem; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px; }
.rm-tab--on { color:#1e3a8a; border-bottom-color:#1e3a8a; }
.rm-tab:hover { color:#1e3a8a; }
.rm-statbar { display:flex; flex-wrap:wrap; background:#fff; border:1px solid var(--border-soft); border-radius:12px; padding:4px 0; margin-bottom:14px; }
.rm-statbar__item { flex:1 1 140px; padding:12px 18px; display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--border-soft); }
.rm-statbar__item:last-child { border-right:none; }
.rm-statbar__v { font-size:1.18rem; font-weight:800; line-height:1.1; }
.rm-statbar__v--warn { color:#b45309; }
.rm-statbar__v--ok { color:#15803d; }
.rm-statbar__k { font-size:.72rem; color:var(--muted); }
.rm-statbar__sub { font-size:.68rem; color:#15803d; font-weight:600; }
.rm-sortsel { flex:0 0 auto; max-width:230px; }
.rm-pills__sep { width:1px; background:var(--border-soft); margin:0 4px; align-self:stretch; }
.rm-req { display:inline-block; padding:3px 11px; border-radius:999px; font-size:.74rem; font-weight:600; background:#e2e8f0; color:#475569; }
.rm-req--req { background:#fef9c3; color:#854d0e; }
.rm-req--ok { background:#dcfce7; color:#15803d; }
.rm-req--rej { background:#fee2e2; color:#b91c1c; }
.rm-pager { display:flex; align-items:center; gap:14px; justify-content:center; margin-top:16px; }
.rm-pager__info { font-size:.82rem; color:var(--muted); }

/* Rahmah Miles — merged alumni cell, clickable code, live search, action cards */
.rm-alumni-cell { vertical-align:top; background:#fafbff; border-right:1px solid var(--border-soft); }
.rm-alumni-cell__btn { margin-top:8px; }
.rm-code--copy { cursor:pointer; user-select:none; transition:background .15s; }
.rm-code--copy:hover { background:#dbeafe; }
.rm-code--copied { background:#bbf7d0 !important; color:#15803d; }
.rm-search { position:relative; align-items:center; }
.rm-search__spin { font-size:1rem; }
.rm-act__hint { font-size:.72rem; color:var(--muted); margin-top:6px; display:block; }
.rm-act__hint .rm-code { font-size:.72rem; padding:1px 5px; }
.rm-actions { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:12px; align-items:stretch; }
.rm-act { min-width:0; justify-content:flex-start; }
.rm-act--pw { min-width:0; }
@media (max-width:720px){ .rm-actions { grid-template-columns:1fr; } }

/* Rahmah Miles — row number, review thumb, image modal */
.rm-no { width:34px; text-align:center; color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }
.rm-review-thumb { width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--border-soft); cursor:zoom-in; display:block; transition:transform .12s; }
.rm-review-thumb:hover { transform:scale(1.08); border-color:#1e3a8a; }
.rm-img-modal { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; }
.rm-img-modal[hidden] { display:none; }
.rm-img-modal__bd { position:absolute; inset:0; background:rgba(15,23,42,.78); }
.rm-img-modal__box { position:relative; background:#fff; border-radius:14px; max-width:min(720px,94vw); max-height:92vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.rm-img-modal__hd { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border-soft); font-weight:600; font-size:.9rem; }
.rm-img-modal__body { overflow:auto; padding:10px; background:#0f172a; }
.rm-img-modal__body img { display:block; max-width:100%; height:auto; margin:0 auto; border-radius:6px; }

/* Rahmah Miles — kolom dicairkan */
.rm-disbursed { color:#0f766e; font-weight:600; }

/* ===================================================================== */
/* DARK MODE OVERRIDES — defensive patch (added 2026-06-21)              */
/* Banyak komponen hardcode background:#fff / #fafafa / #f8fafc tanpa    */
/* override dark, akibatnya muncul white box di shell gelap dgn text     */
/* invisible. Block ini cuma fire saat data-theme=dark, light mode utuh. */
/* ===================================================================== */

/* Rahmah Miles */
:root[data-theme="dark"] .rm-kpi,
:root[data-theme="dark"] .rm-table-wrap,
:root[data-theme="dark"] .rm-act,
:root[data-theme="dark"] .rm-stat,
:root[data-theme="dark"] .rm-statbar { background: var(--surface); border-color: var(--border-soft); color: var(--text); }
:root[data-theme="dark"] .rm-pill { background: var(--surface); border-color: var(--border-soft); color: var(--muted); }
:root[data-theme="dark"] .rm-pill--on { background: var(--primary); border-color: var(--primary); color: #fff; }
:root[data-theme="dark"] .rm-table th { background: var(--surface-2); color: var(--muted); border-color: var(--border-soft); }
:root[data-theme="dark"] .rm-table td { border-bottom-color: var(--border-soft); color: var(--text); }
:root[data-theme="dark"] .rm-table tr:hover td { background: rgba(99,102,241,.08); }
:root[data-theme="dark"] .rm-code { background: rgba(255,255,255,.08); color: var(--text); }
:root[data-theme="dark"] .rm-ost { background: rgba(255,255,255,.06); color: var(--muted); }
:root[data-theme="dark"] .rm-ost--lunas { background: rgba(34,197,94,.18); color: #86efac; }
:root[data-theme="dark"] .rm-ost--dp { background: rgba(245,158,11,.18); color: #fcd34d; }
:root[data-theme="dark"] .rm-ost--wl { background: rgba(239,68,68,.18); color: #fca5a5; }
:root[data-theme="dark"] .rm-badge--on { background: rgba(34,197,94,.20); color: #86efac; }
:root[data-theme="dark"] .rm-badge--off { background: rgba(239,68,68,.20); color: #fca5a5; }
:root[data-theme="dark"] .rm-statbar__item { background: transparent; color: var(--text); }
:root[data-theme="dark"] .rm-search input,
:root[data-theme="dark"] .rm-search .field__input { background: var(--surface); border-color: var(--border-soft); color: var(--text); }
:root[data-theme="dark"] .rm-img-modal__box { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] .rm-name { color: var(--text); }

/* Stock Perlengkapan */
:root[data-theme="dark"] .sp-tab,
:root[data-theme="dark"] .sp-loccard,
:root[data-theme="dark"] .sp-line__del { background: var(--surface); border-color: var(--border-soft); color: var(--text); }
:root[data-theme="dark"] .sp-loccard--hq { background: rgba(99,102,241,.12); }
:root[data-theme="dark"] .sp-alert { background: var(--surface-2); border-color: rgba(245,158,11,.35); color: var(--text); }
:root[data-theme="dark"] .sp-pocard__badge,
:root[data-theme="dark"] .sp-sopcard__hm,
:root[data-theme="dark"] .sp-mov__item,
:root[data-theme="dark"] .sp-fresh--none { background: rgba(255,255,255,.06); color: var(--muted); }

/* Roomlist (rlm-*) */
:root[data-theme="dark"] .rlm-note-btn { background: var(--surface); border-color: var(--border-soft); color: var(--muted); }
:root[data-theme="dark"] .rlm-note-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] .rlm-cl-row { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] .rlm-cl-row--hd { background: var(--surface-2); color: var(--muted); }
:root[data-theme="dark"] .rlm-pool .rlm-chip__foto--ph { background: var(--surface-2); }
:root[data-theme="dark"] .rlm-badge--id { background: rgba(255,255,255,.06); color: var(--muted); border-color: var(--border-soft); }

/* Paket Order Detail (pod-*) */
:root[data-theme="dark"] .pod-stat,
:root[data-theme="dark"] .pod-vendor,
:root[data-theme="dark"] .pod-tl__del { background: var(--surface); border-color: var(--border-soft); color: var(--text); }

/* Single Group cards (sg-*) */
:root[data-theme="dark"] .sg-card { background: var(--surface); border-color: var(--border-soft); color: var(--text); }

/* Catch-all utk inline style="background:#fff" yg paling sering di templ.
   Exclude komponen yg memang butuh putih (PDF preview, modal image bg). */
:root[data-theme="dark"] [style*="background:#fff"]:not(.appr-prev-pdf):not(.mj-file__pdfframe):not(.mj-file__prev):not(.rm-img-modal__box),
:root[data-theme="dark"] [style*="background: #fff"]:not(.appr-prev-pdf):not(.mj-file__pdfframe):not(.mj-file__prev):not(.rm-img-modal__box) {
	background: var(--surface) !important;
	color: var(--text);
}
:root[data-theme="dark"] [style*="background:#fafafa"],
:root[data-theme="dark"] [style*="background: #fafafa"],
:root[data-theme="dark"] [style*="background:#f8fafc"],
:root[data-theme="dark"] [style*="background: #f8fafc"] {
	background: var(--surface-2) !important;
	color: var(--text);
}
:root[data-theme="dark"] [style*="border:1px solid #e4ebee"],
:root[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
:root[data-theme="dark"] [style*="border: 1px solid #e2e8f0"] {
	border-color: var(--border-soft) !important;
}

/* Monitoring Jamaah (mj-*, mjm-*, mjg-*, mjk-*) — banyak gradient/light bg hardcoded.
   Specificity tinggi karena class-class ini didefine di <style> dlm templ (page-scoped),
   jadi override kita perlu !important utk menang. */
:root[data-theme="dark"] .mj-card,
:root[data-theme="dark"] .mj-order,
:root[data-theme="dark"] .mj-row { background: var(--surface) !important; color: var(--text); border-color: var(--border-soft); }
:root[data-theme="dark"] .mj-order .muted { color: var(--muted); }

/* mjk-* — combo list (filter paket search) */
:root[data-theme="dark"] .mjk-list { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text); }
:root[data-theme="dark"] .mjk-opt:hover { background: rgba(99,102,241,.18) !important; color: #c4b5fd !important; }

/* mjm-* — chips, marks, buttons */
:root[data-theme="dark"] .mjm-chip { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text); }
:root[data-theme="dark"] .mjm-chip:hover { background: rgba(99,102,241,.10) !important; border-color: var(--primary) !important; }
:root[data-theme="dark"] .mjm-chip:has(input:checked) { background: rgba(99,102,241,.22) !important; border-color: var(--primary) !important; color: #c4b5fd !important; }
:root[data-theme="dark"] .mjm-ongkir-pill--bad { background: rgba(245,158,11,.20) !important; color: #fcd34d !important; border-color: rgba(245,158,11,.40) !important; }
:root[data-theme="dark"] .mjm-ongkir-pill--ok { background: rgba(34,197,94,.20) !important; color: #86efac !important; border-color: rgba(34,197,94,.40) !important; }
:root[data-theme="dark"] .mjm-edit-order { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .mjm-edit-order:hover { background: var(--surface-2) !important; border-color: var(--border) !important; }
:root[data-theme="dark"] .mjm-mark--on { background: rgba(34,197,94,.20) !important; color: #86efac !important; }
:root[data-theme="dark"] .mjm-mark--off { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; }
:root[data-theme="dark"] .mjm-cnt--full { background: rgba(34,197,94,.20) !important; color: #86efac !important; }
:root[data-theme="dark"] .mjm-cnt--part { background: rgba(245,158,11,.20) !important; color: #fcd34d !important; }
:root[data-theme="dark"] .mjm-cnt--zero { background: rgba(255,255,255,.06) !important; color: var(--muted) !important; }
:root[data-theme="dark"] .mjm-edu.mjm-mark--off:hover { background: rgba(59,130,246,.20) !important; border-color: rgba(59,130,246,.40) !important; color: #93c5fd !important; }

/* mjg-* — gender badges */
:root[data-theme="dark"] .mjg--m { background: rgba(59,130,246,.22) !important; color: #93c5fd !important; }
:root[data-theme="dark"] .mjg--f { background: rgba(236,72,153,.22) !important; color: #f9a8d4 !important; }
:root[data-theme="dark"] .mjg--n { background: rgba(255,255,255,.06) !important; color: var(--muted) !important; }

/* mj-wa__btn (WA chat buttons) */
:root[data-theme="dark"] .mj-wa__btn--j { background: rgba(34,197,94,.20) !important; color: #86efac !important; }
:root[data-theme="dark"] .mj-wa__btn--j:hover { background: rgba(34,197,94,.30) !important; }
:root[data-theme="dark"] .mj-wa__btn--p { background: rgba(99,102,241,.22) !important; color: #c4b5fd !important; }
:root[data-theme="dark"] .mj-wa__btn--p:hover { background: rgba(99,102,241,.30) !important; }

/* CSPR / Perlengkapan / Invoice / Portal mini-buttons */
:root[data-theme="dark"] .mjm-cspr-btn { background: rgba(245,158,11,.15) !important; border-color: rgba(245,158,11,.35) !important; color: #fcd34d !important; }
:root[data-theme="dark"] .mjm-cspr-btn:hover { background: rgba(245,158,11,.25) !important; }
:root[data-theme="dark"] .mjm-cspr-btn.mjm-fb-btn--done { background: rgba(34,197,94,.15) !important; border-color: rgba(34,197,94,.40) !important; color: #86efac !important; }
:root[data-theme="dark"] .mjm-pl-btn { background: rgba(34,197,94,.15) !important; border-color: rgba(34,197,94,.40) !important; color: #86efac !important; }
:root[data-theme="dark"] .mjm-pl-btn:hover { background: rgba(34,197,94,.25) !important; }
:root[data-theme="dark"] .mjm-inv { background: rgba(139,92,246,.18) !important; border-color: rgba(139,92,246,.40) !important; color: #c4b5fd !important; }
:root[data-theme="dark"] .mjm-inv:hover { background: rgba(139,92,246,.28) !important; }
:root[data-theme="dark"] .mjm-portal { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.20) !important; color: #86efac !important; }

/* Group divider (purple/green banner di tiap order row) — semakin gelap di dark mode */
:root[data-theme="dark"] .mjm-grp-divider td {
	background: linear-gradient(90deg, var(--grp-color, #6366f1) 0%, color-mix(in srgb, var(--grp-color, #6366f1) 35%, var(--surface)) 100%) !important;
	border-top-color: var(--surface) !important;
	color: #fff !important;
}

/* ===================================================================== */
/* DARK MODE — comprehensive page-scoped overrides (Reminder, Penagihan,  */
/* Hotel, Travel Docs, Stock Perlengkapan, Order create/edit, Approval,   */
/* Briefing, CSPR, Add-on, Muthowwif, dll). Semua pakai !important krn   */
/* page-scoped <style> di templ menang specificity-wise.                 */
/* ===================================================================== */

/* === OPS REMINDER (ops_reminder.templ) === */
:root[data-theme="dark"] .ops-chip { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .ops-chip--overdue { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.40) !important; }
:root[data-theme="dark"] .ops-chip--overdue .ops-chip__n { color: #fca5a5 !important; }
:root[data-theme="dark"] .ops-chip--today { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.40) !important; }
:root[data-theme="dark"] .ops-chip--today .ops-chip__n { color: #fdba74 !important; }
:root[data-theme="dark"] .ops-chip--soon { background: rgba(234,179,8,.12) !important; border-color: rgba(234,179,8,.40) !important; }
:root[data-theme="dark"] .ops-chip--soon .ops-chip__n { color: #fde047 !important; }
:root[data-theme="dark"] .ops-tab--active { background: var(--surface) !important; color: var(--text) !important; }
:root[data-theme="dark"] .ops-task { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .ops-check { background: var(--surface) !important; border-color: var(--border-soft) !important; color: #86efac !important; }
:root[data-theme="dark"] .ops-due--overdue { background: rgba(239,68,68,.20) !important; color: #fca5a5 !important; }
:root[data-theme="dark"] .ops-due--today { background: rgba(249,115,22,.20) !important; color: #fdba74 !important; }
:root[data-theme="dark"] .ops-due--soon { background: rgba(234,179,8,.18) !important; color: #fde047 !important; }
:root[data-theme="dark"] .ops-due--later { background: rgba(255,255,255,.06) !important; color: var(--muted) !important; }
:root[data-theme="dark"] .ops-doneblock { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .ops-scan-preview { background: var(--surface) !important; border-color: var(--border-soft) !important; }
:root[data-theme="dark"] .opss-del,
:root[data-theme="dark"] .opss-rule { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }

/* === PENAGIHAN AGING (penagihan_aging.templ) === */
:root[data-theme="dark"] .fu-modal__box { background: var(--surface) !important; color: var(--text) !important; }
:root[data-theme="dark"] .fu-info { background: var(--surface-2) !important; color: var(--text) !important; }
:root[data-theme="dark"] .fu-item { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .fu-item__next { background: rgba(245,158,11,.18) !important; color: #fcd34d !important; }
:root[data-theme="dark"] .fu-item__hasil { color: var(--text) !important; }
:root[data-theme="dark"] .ar-act--fu { background: rgba(234,179,8,.18) !important; color: #fde047 !important; }
:root[data-theme="dark"] .ar-act--fu:hover { background: rgba(234,179,8,.28) !important; }
:root[data-theme="dark"] .ar-act--detail { background: rgba(99,102,241,.18) !important; color: #c4b5fd !important; }
:root[data-theme="dark"] .ar-act--detail:hover { background: rgba(99,102,241,.28) !important; }
:root[data-theme="dark"] .ar-act--pay { background: rgba(34,197,94,.20) !important; color: #86efac !important; }
:root[data-theme="dark"] .ar-act--pay:hover { background: rgba(34,197,94,.30) !important; }
:root[data-theme="dark"] .ar-act--copy { background: rgba(255,255,255,.06) !important; color: var(--muted) !important; }
:root[data-theme="dark"] .ar-act--copy:hover { background: rgba(255,255,255,.10) !important; }
:root[data-theme="dark"] .ar-kpi { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .ar-kpi__lbl { color: var(--muted) !important; }
:root[data-theme="dark"] .ar-kpi__val { color: var(--text) !important; }
:root[data-theme="dark"] .agenda-when--overdue { background: rgba(239,68,68,.20) !important; color: #fca5a5 !important; }
:root[data-theme="dark"] .agenda-when--today { background: rgba(245,158,11,.20) !important; color: #fcd34d !important; }
:root[data-theme="dark"] .agenda-when--upcoming { background: rgba(255,255,255,.06) !important; color: var(--muted) !important; }

/* === MONITORING OPS (ops_monitor.templ) === */
:root[data-theme="dark"] .mo-card,
:root[data-theme="dark"] .mo-row,
:root[data-theme="dark"] .mo-cell { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }

/* === HOTEL / ROOMLIST (hotel.templ) === */
:root[data-theme="dark"] .gds-modal { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .mw-foto-thumb,
:root[data-theme="dark"] .mw-foto-empty { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--muted) !important; }
:root[data-theme="dark"] .kc-card,
:root[data-theme="dark"] .kc-row,
:root[data-theme="dark"] .kc-modal { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }

/* === STOCK PERLENGKAPAN (perlengkapan.templ) === */
:root[data-theme="dark"] .pl-bukti,
:root[data-theme="dark"] .pl-chk,
:root[data-theme="dark"] .pl-prog,
:root[data-theme="dark"] .pl-resi-empty,
:root[data-theme="dark"] .pl-resi-row { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .pl-resi-empty { color: var(--muted) !important; }

/* === TRAVEL DOCS (travel_dokumen.templ) === */
:root[data-theme="dark"] .tdoc-card,
:root[data-theme="dark"] .tdoc-row,
:root[data-theme="dark"] .tdoc-efld,
:root[data-theme="dark"] .tdoc-pdfframe { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .tdoc-pdfframe { background: #fff !important; /* PDF tetap putih utk readability */ }

/* === ORDER CREATE (oc-*) === */
:root[data-theme="dark"] .oc-grid,
:root[data-theme="dark"] .oc-jcard,
:root[data-theme="dark"] .oc-jrow,
:root[data-theme="dark"] .oc-rcap,
:root[data-theme="dark"] .oc-rh-card,
:root[data-theme="dark"] .oc-room,
:root[data-theme="dark"] .oc-varcard { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .oc-btn-ghost { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--muted) !important; }
:root[data-theme="dark"] .oc-btn-ghost:hover { background: var(--surface-2) !important; color: var(--text) !important; }
:root[data-theme="dark"] .oc-pmtag { background: rgba(99,102,241,.15) !important; color: #c4b5fd !important; }
:root[data-theme="dark"] .oc-rm-alumni { background: rgba(34,197,94,.18) !important; color: #86efac !important; }

/* === ORDER EDIT (oe-*) === */
:root[data-theme="dark"] .oe-card,
:root[data-theme="dark"] .oe-jtable,
:root[data-theme="dark"] .oe-savebar { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
:root[data-theme="dark"] .oe-jtable th { background: var(--surface-2) !important; color: var(--muted) !important; }
:root[data-theme="dark"] .oe-jtable td { color: var(--text) !important; border-bottom-color: var(--border-soft) !important; }
:root[data-theme="dark"] .oe-jtable tr:nth-child(even) td { background: rgba(255,255,255,.02) !important; }
:root[data-theme="dark"] .oe-svc-chk,
:root[data-theme="dark"] .oe-svc-pay,
:root[data-theme="dark"] .oe-svc-pick { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }

/* === APPROVAL DOKUMEN (appr-*) === */
:root[data-theme="dark"] .appr-card,
:root[data-theme="dark"] .appr-row,
:root[data-theme="dark"] .appr-modal { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }
/* PDF preview tetap putih */

/* === BRIEFING (briefing-*, bc-*) === */
:root[data-theme="dark"] .briefing-jamaah-card,
:root[data-theme="dark"] .briefing-sop-row,
:root[data-theme="dark"] .bc-param,
:root[data-theme="dark"] .bc-preview,
:root[data-theme="dark"] .bc-tool,
:root[data-theme="dark"] .bc-visual { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }

/* === CSPR WORKSHEET (cspr-*) === */
:root[data-theme="dark"] .cspr-card,
:root[data-theme="dark"] .cspr-modal,
:root[data-theme="dark"] .cspr-tbl,
:root[data-theme="dark"] .cspr-tpl { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }

/* === ADD-ON HUB (abk-*) === */
:root[data-theme="dark"] .abk-menu,
:root[data-theme="dark"] .abk-modal { background: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; }

/* === Misc unclassified */
:root[data-theme="dark"] .ot-table { background: var(--surface) !important; color: var(--text) !important; }
:root[data-theme="dark"] .ot-table th { background: var(--surface-2) !important; color: var(--muted) !important; }
:root[data-theme="dark"] .ot-table td { border-bottom-color: var(--border-soft) !important; color: var(--text) !important; }

/* === Generic <input>/<textarea>/<select> di dark — fields white bg default → invisible text */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
	background-color: var(--surface) !important;
	color: var(--text) !important;
	border-color: var(--border-soft) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--muted) !important; opacity: .65; }

/* Generic page-content surfaces */
:root[data-theme="dark"] .page-header { color: var(--text); }
:root[data-theme="dark"] .page-header .cell-muted,
:root[data-theme="dark"] .cell-muted,
:root[data-theme="dark"] .muted { color: var(--muted); }