:root {
  --layout-page-x: clamp(12px, 2.5vw, 32px);
  --layout-section-gap: 16px;
  --layout-control-height: 44px;
  --layout-radius: 12px;
}

/* Transisi antarlaman sengaja hanya memakai opacity agar tetap ringan dan
   tidak mengubah posisi navbar fixed pada Safari/iOS. */
@keyframes nessroom-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  animation: nessroom-page-enter 150ms ease-out both;
  transition: opacity 120ms ease-in;
}

body.nessroom-page-exit {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
    transition: none !important;
  }
}

/* Disable expensive glass blur effects for a lighter interface. */
*, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Kontrol angka/tanggal selalu memakai tampilan aplikasi, bukan tombol bawaan browser. */
input[type="number"] { -moz-appearance: textfield !important; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { margin: 0 !important; -webkit-appearance: none !important; appearance: none !important; }
input[type="date"],
input[type="time"],
input[type="datetime-local"] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { display: none !important; opacity: 0 !important; pointer-events: none !important; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none !important; appearance: none !important; display: none !important; }
select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background:#0f172a !important; color:#e5e7eb !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .header-section,
html[data-theme="dark"] .page-head,
html[data-theme="dark"] .loading,
html[data-theme="dark"] .container,
html[data-theme="dark"] .jadwal-card,
html[data-theme="dark"] .cleaning-card,
html[data-theme="dark"] .cleaning-empty,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .expense-card,
html[data-theme="dark"] .expense,
html[data-theme="dark"] .edit-dialog,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .branch-item,
html[data-theme="dark"] .sewa-price-branch,
html[data-theme="dark"] #formRekapan,
html[data-theme="dark"] #formRekapan .input-box-time,
html[data-theme="dark"] #formRekapan .checkout { background:#172033 !important; border-color:#334155 !important; color:#e5e7eb !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .ios-select-button,
html[data-theme="dark"] .custom-date-button,
html[data-theme="dark"] .custom-date-menu,
html[data-theme="dark"] .custom-time-button,
html[data-theme="dark"] .custom-time-menu,
html[data-theme="dark"] .month-picker-trigger,
html[data-theme="dark"] .month-picker-menu { background:#111827 !important; border-color:#475569 !important; color:#f8fafc !important; }
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] tr { border-color:#334155 !important; color:#e5e7eb !important; }
html[data-theme="dark"] th,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .period-toggle,
html[data-theme="dark"] .comparison-item,
html[data-theme="dark"] .cleaning-meta span,
html[data-theme="dark"] .time-picker-trigger,
html[data-theme="dark"] .sewa-price-grid,
html[data-theme="dark"] .maintenance-control { background:#1e293b !important; color:#e5e7eb !important; border-color:#334155 !important; }
html[data-theme="dark"] .sewa-price-summary-row { background:#111827 !important; border-color:#334155 !important; }
html[data-theme="dark"] .sewa-price-chip { background:#243044 !important; color:#cbd5e1 !important; }
html[data-theme="dark"] .sewa-price-chip strong { color:#f8fafc !important; }
html[data-theme="dark"] .duration-item { background:#334155 !important; border-color:#64748b !important; color:#fff !important; -webkit-text-fill-color:#fff !important; font-weight:800 !important; opacity:1 !important; }
html[data-theme="dark"] .sub,
html[data-theme="dark"] small,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .sync,
html[data-theme="dark"] .sync-label,
html[data-theme="dark"] .checkout-label { color:#a8b3c4 !important; }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong,
html[data-theme="dark"] label,
html[data-theme="dark"] #checkout { color:#f8fafc !important; }
html[data-theme="dark"] .user-dropdown-menu,
html[data-theme="dark"] .nav-dropdown-menu { background:#172033 !important; border-color:#334155 !important; }
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .nav-dropdown-menu a { color:#e5e7eb !important; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .nav-dropdown-menu a:hover { background:#273449 !important; }
html[data-theme="dark"] .login-v2-panel { background:#111827 !important; color:#f8fafc !important; }
html[data-theme="dark"] :where(.login-v2, .login-v2-visual, .login-appearance-preview, .login-page-preview-frame) { background:#101827 !important; }

/* Dark theme coverage for components whose colors are defined inside each page. */
html[data-theme="dark"] :where(
  .filter-grid, .guest-modal-card, .card-menu, .room-status-board,
  .permission-option, .shift-setting-row, .rental-force-switch,
  .balance-panel, .total, .summary-static-title, .total-box,
  .period-popover, .comparison-diff, .month-picker-menu,
  .custom-date-menu, .custom-time-menu
) { background:#172033 !important; border-color:#334155 !important; color:#e5e7eb !important; }

html[data-theme="dark"] :where(
  .data-row, .shift-title, .branch-select-wrap label, .filter-group label,
  .card-header, .card-header *, .waktu-label, .catatan-label, .payment-label,
  .guest-modal-head, .room-status-head, .room-status-updated,
  .expense-meta, .expense-audit, .section-title, .shift-setting-name,
  .branch-list-toggle, .branch-list-toggle-meta, .sewa-list-name,
  .sewa-list-details, .summary-static-title, .summary-accordion-btn,
  .month-picker-head, .picker-header, .calendar-day, .month-option
) { color:#dbe4f0 !important; }

html[data-theme="dark"] :where(
  .shift-title, .waktu-label, .catatan-label, .payment-label,
  .room-status-updated, .expense-meta, .expense-audit,
  .branch-list-toggle-meta, .sewa-list-details
) { color:#aebbd0 !important; }

html[data-theme="dark"] :where(
  .tab:not(.active), .tab-btn:not(.active), .period-toggle button:not(.active),
  .branch-tabs button:not(.active), .row-actions button, .actions button,
  .modal-cancel, .modal-close, .picker-nav-btn, .picker-today-btn,
  .custom-time-option, .custom-time-actions button, .month-option,
  .sewa-branch-option, .login-file-label
) { background:#1e293b !important; border-color:#475569 !important; color:#e5e7eb !important; }

html[data-theme="dark"] :where(
  .primary, .save, .login-submit, .tab.active, .tab-btn.active,
  .period-toggle button.active, .custom-time-confirm
) { background:#05070a !important; color:#ffc800 !important; }

html[data-theme="dark"] :where(
  .total-box, .comparison-diff, .maintenance-announcement
) { background:#332a08 !important; border-color:#806a12 !important; color:#fff1a6 !important; }

html[data-theme="dark"] ::placeholder { color:#8793a7 !important; opacity:1; }
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] select:disabled { background:#243044 !important; color:#cbd5e1 !important; opacity:1; }
html[data-theme="dark"] hr,
html[data-theme="dark"] .dropdown-divider { border-color:#334155 !important; background:#334155 !important; }

/* Summary: date/month picker and calendar must not stay white in dark mode. */
html[data-theme="dark"] :where(.period-trigger, .period-popover, .picker-nav-btn, .picker-today-btn, .calendar-day, .month-option) {
  background:#111827 !important;
  border-color:#475569 !important;
  color:#e8eef8 !important;
}
html[data-theme="dark"] :where(.period-trigger:hover, .period-trigger[aria-expanded="true"], .calendar-day:hover, .month-option:hover) { background:#243044 !important; }
html[data-theme="dark"] :where(.calendar-day.is-selected, .month-option.selected) { background:#ffc800 !important; color:#111827 !important; }
html[data-theme="dark"] :where(.calendar-weekdays, .period-chevron) { color:#aebbd0 !important; }

/* Accounting: metric and balance cards have page-local white backgrounds. */
html[data-theme="dark"] :where(.metric, .balance-value) { background:#1e293b !important; border-color:#3b4a60 !important; color:#eef4fc !important; }
html[data-theme="dark"] .metric small,
html[data-theme="dark"] .balance-value small { color:#b8c5d8 !important; }
html[data-theme="dark"] .metric.transfer strong { color:#7db6ff !important; }
html[data-theme="dark"] .metric.income strong { color:#6ee7a0 !important; }
html[data-theme="dark"] .balance-audit { color:#aebbd0 !important; }

/* Jadwal: cards, time blocks, notes, room board, and edit modal. */
html[data-theme="dark"] :where(.jadwal-card, .status-info, .room-status-branch, .unit-status-item, .catatan-entry, .edit-datetime-group, .move-fixed-branch) {
  background:#172033 !important;
  border-color:#3b4a60 !important;
  color:#e8eef8 !important;
}
html[data-theme="dark"] :where(.waktu-box, .move-current-room) { background:#332a08 !important; border-color:#806a12 !important; color:#fff1a6 !important; }
html[data-theme="dark"] :where(.unit-text, .tamu-name, .waktu-jam, .catatan-value, .catatan-entry-title, .room-status-unit, .room-status-value, .card-menu-btn, .guest-modal-close) { color:#edf3fb !important; }
/* Tombol menu jadwal memakai latar kuning di kedua tema, jadi ikon tetap gelap
   agar kontras dan tidak terlihat seperti blok warna yang kaku. */
html[data-theme="dark"] .card-menu-btn { color:#edf3fb !important; }
html[data-theme="dark"] .card-menu-btn[aria-expanded="true"] { color:#111827 !important; }
html[data-theme="dark"] :where(.catatan-entry-meta, .edit-history, .edit-history summary, .unit-status-item small, .room-status-legend) { color:#aebbd0 !important; }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .catatan-detail,
html[data-theme="dark"] .room-status-row { border-color:#3b4a60 !important; }
html[data-theme="dark"] .room-status-legend span { background:#243044 !important; border-color:#475569 !important; color:#dbe4f0 !important; }
html[data-theme="dark"] .room-status-branch h4 { background:#d9aa00 !important; color:#111827 !important; }
html[data-theme="dark"] .jadwal-card.cancelled { background:#1e293b !important; border-color:#64748b !important; }
html[data-theme="dark"] .waktu-box.checkout-soon { background:#451f23 !important; border-color:#f87171 !important; }
html[data-theme="dark"] .room-status-row.is-sos { background:#451f23 !important; }
html[data-theme="dark"] .room-status-row.is-repair { background:#3a300d !important; }
html[data-theme="dark"] .room-status-row.is-not-ready { background:#293548 !important; }
html[data-theme="dark"] .room-status-row.is-occupied .room-status-value { color:#6ee7a0 !important; }
html[data-theme="dark"] .room-status-row.is-cleaning .room-status-value,
html[data-theme="dark"] .room-status-row.is-repair .room-status-value { color:#facc15 !important; }
html[data-theme="dark"] .room-status-row.is-sos .room-status-value { color:#fca5a5 !important; }

/* Final low-glare palette: softer contrast for prolonged use at night. */
html[data-theme="dark"] body { background:#101827 !important; color:#c5cfdd !important; }
html[data-theme="dark"] :where(
  .card, .panel, .hero, .header-section, .page-head, .container,
  .jadwal-card, .cleaning-card, .status-card, .expense-card, .expense,
  .balance-panel, .room-status-board, .guest-modal-card, .edit-dialog,
  .table-container, .branch-item, .sewa-price-branch, #formRekapan
) { background:#192335 !important; border-color:#344158 !important; color:#c5cfdd !important; }
html[data-theme="dark"] :where(h1,h2,h3,strong,label,#checkout,.unit-text,.tamu-name,.waktu-jam,.catatan-value,.room-status-unit,.room-status-value) { color:#d8e0ea !important; }
html[data-theme="dark"] :where(.sub,small,.meta,.sync,.sync-label,.checkout-label,.shift-title,.waktu-label,.catatan-label,.payment-label,.expense-audit,.room-status-updated,.sewa-list-details) { color:#929fb2 !important; }
html[data-theme="dark"] :where(input,select,textarea,.ios-select-button,.custom-date-button,.custom-time-button,.month-picker-trigger,.period-trigger) { background:#131c2b !important; border-color:#3b4960 !important; color:#cbd5e1 !important; }
html[data-theme="dark"] :where(th,.badge,.period-toggle,.comparison-item,.time-picker-trigger,.sewa-price-grid,.maintenance-control,.metric,.balance-value) { background:#202b3d !important; border-color:#344158 !important; color:#c5cfdd !important; }
html[data-theme="dark"] :where(.primary,.save,.login-submit,.tab.active,.tab-btn.active,.period-toggle button.active,.custom-time-confirm) { background:#090d14 !important; color:#ffc800 !important; }
html[data-theme="dark"] :where(.total-box,.comparison-diff,.maintenance-announcement,.waktu-box,.move-current-room) { background:#3a3005 !important; border-color:#b58d12 !important; color:#ffe58a !important; }
html[data-theme="dark"] :where(.calendar-day.is-selected,.month-option.selected) { background:#ffc800 !important; color:#111827 !important; }
html[data-theme="dark"] .room-status-branch h4 { background:#ffc800 !important; color:#111827 !important; }
html[data-theme="dark"] #monthlyFinanceTable .monthly-finance-subtotal td {
  background:#202b3d !important;
  border-color:#3b4960 !important;
  color:#e8eef8 !important;
  -webkit-text-fill-color:#e8eef8 !important;
}
html[data-theme="dark"] #monthlyFinanceTable .monthly-finance-total td {
  background:#3a3005 !important;
  border-color:#806a12 !important;
  color:#ffe58a !important;
  -webkit-text-fill-color:#ffe58a !important;
}
html[data-theme="dark"] .metric.transfer strong { color:#79a7dc !important; }
html[data-theme="dark"] .metric.income strong,
html[data-theme="dark"] .room-status-row.is-occupied .room-status-value { color:#79bf99 !important; }
html[data-theme="dark"] .room-status-row.is-cleaning .room-status-value,
html[data-theme="dark"] .room-status-row.is-repair .room-status-value { color:#ffd43b !important; }
html[data-theme="dark"] .room-status-row.is-sos .room-status-value { color:#d98f96 !important; }
html[data-theme="dark"] :where(.custom-date-menu,.custom-time-menu,.month-picker-menu,.period-popover) { background:#192335 !important; border-color:#3b4960 !important; color:#c5cfdd !important; }
html[data-theme="dark"] :where(.custom-date-day,.custom-date-head button,.custom-time-option,.custom-time-actions button,.picker-nav-btn,.picker-today-btn,.month-option) { background:#192335 !important; border-color:#344158 !important; color:#c5cfdd !important; }
html[data-theme="dark"] :where(.custom-date-day:hover,.custom-time-option:hover,.month-option:hover) { background:#263247 !important; }
html[data-theme="dark"] :where(.custom-date-day.selected,.custom-time-option.selected,.month-option.selected) { background:#ffc800 !important; color:#111827 !important; }
html[data-theme="dark"] :where(.custom-date-week,.custom-date-week span,.calendar-weekdays,.custom-date-title,.custom-time-title) { color:#929fb2 !important; }
html[data-theme="dark"] :where(.custom-date-day:disabled,.calendar-day:disabled,.month-option:disabled) {
  background:#151e2d !important;
  border-color:transparent !important;
  color:#596579 !important;
  opacity:.52 !important;
  cursor:not-allowed !important;
  filter:saturate(.35);
}
html[data-theme="dark"] :where(.custom-date-day:disabled:hover,.calendar-day:disabled:hover,.month-option:disabled:hover) {
  background:#151e2d !important;
  color:#596579 !important;
}

/* Pengaturan: daftar jenis kamar. */
html[data-theme="dark"] .room-type-row {
  background:#131c2b !important;
  border-color:#3b4960 !important;
  color:#d8e0ea !important;
}
html[data-theme="dark"] .room-type-name { color:#e2e8f0 !important; }
html[data-theme="dark"] .room-type-actions button {
  background:#202b3d !important;
  border-color:#475569 !important;
  color:#e2e8f0 !important;
}
html[data-theme="dark"] .room-type-actions button:hover {
  background:#2a374c !important;
  border-color:#64748b !important;
}
html[data-theme="dark"] .room-type-actions .room-type-delete {
  background:#351b20 !important;
  border-color:#85434b !important;
  color:#f3a2a8 !important;
}
html[data-theme="dark"] .room-type-actions .room-type-delete:hover {
  background:#472128 !important;
  border-color:#b45c65 !important;
}
html[data-theme="dark"] .login-adjustment-grid {
  background:#131c2b !important;
  border-color:#3b4960 !important;
}
html[data-theme="dark"] .login-adjustment-field label span { color:#9da9ba !important; }
html[data-theme="dark"] .login-crop-readout span {
  background:#202b3d !important;
  color:#cbd5e1 !important;
}
.custom-date-today {
  background:#ffc800 !important;
  border-color:#d9aa00 !important;
  color:#111827 !important;
  font-weight:850 !important;
}
.custom-date-today:hover { background:#eab900 !important; }
html[data-theme="dark"] .custom-date-today {
  background:#b58d12 !important;
  border-color:#d1a91e !important;
  color:#111827 !important;
}
html[data-theme="dark"] .custom-date-today:hover { background:#c9a016 !important; }
html[data-theme="dark"] #formRekapan .input-box-time .custom-time-shell,
html[data-theme="dark"] #formRekapan .input-box-time .custom-time-button,
html[data-theme="dark"] #formRekapan .input-box-time .custom-time-button:hover,
html[data-theme="dark"] #formRekapan .checkout-manual-view .custom-time-shell,
html[data-theme="dark"] #formRekapan .checkout-manual-view .custom-time-button,
html[data-theme="dark"] #formRekapan .checkout-manual-view .custom-time-button:hover {
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .custom-time-col {
  border-color:transparent !important;
}
html[data-theme="dark"] .custom-time-option {
  width:calc(100% - 4px) !important;
  min-height:38px !important;
  height:38px !important;
  margin:3px 2px !important;
  border:1px solid #273449 !important;
  border-radius:8px !important;
  background:#1b2638 !important;
}
html[data-theme="dark"] .custom-time-option.selected {
  border-color:#b58d12 !important;
  background:#b58d12 !important;
  box-shadow:0 2px 5px rgba(0,0,0,.22) !important;
}

/* Jadwal cards: beri pemisahan yang jelas dari kanvas halaman tanpa membuat
   scroll mobile berat. Aksen kiri mengikuti warna cabang masing-masing. */
body:has(#jadwalContainer) .jadwal-card {
  isolation:isolate;
  overflow:visible;
  border:1px solid #d7e0ec;
  background:#fff;
  box-shadow:0 5px 16px rgba(30,50,78,.10),0 1px 2px rgba(30,50,78,.08);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
body:has(#jadwalContainer) .jadwal-card::before {
  content:"";
  position:absolute;
  z-index:1;
  top:12px;
  bottom:12px;
  left:-1px;
  width:4px;
  border-radius:0 5px 5px 0;
  background:var(--branch-accent,#d6a900);
  box-shadow:1px 0 5px color-mix(in srgb,var(--branch-accent,#d6a900) 35%,transparent);
  pointer-events:none;
}
body:has(#jadwalContainer) .jadwal-card.cancelled { border-style:dashed; background:#f5f7fa; opacity:.72; }
html[data-theme="dark"] body:has(#jadwalContainer) .jadwal-card {
  border-color:#405576 !important;
  background:linear-gradient(145deg,#1d2c43 0%,#19263b 100%) !important;
  box-shadow:0 7px 20px rgba(2,8,20,.34),inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html[data-theme="dark"] body:has(#jadwalContainer) .jadwal-card.cancelled { border-style:dashed !important; background:#202c40 !important; }
html[data-theme="dark"] body:has(#jadwalContainer) .jadwal-card .card-header {
  border-bottom-color:#42536d !important;
}
@media (hover:hover) and (pointer:fine) {
  body:has(#jadwalContainer) .jadwal-card:hover {
    border-color:#b9c7da;
    box-shadow:0 9px 24px rgba(30,50,78,.14),0 2px 4px rgba(30,50,78,.08);
  }
  html[data-theme="dark"] body:has(#jadwalContainer) .jadwal-card:hover {
    border-color:#526d94 !important;
    box-shadow:0 10px 26px rgba(2,8,20,.42),inset 0 1px 0 rgba(255,255,255,.035) !important;
  }
}
@media (max-width:759px) {
  html[data-theme="dark"], html[data-theme="dark"] body.login-page,
  html[data-theme="dark"] body.login-page .login-v2,
  html[data-theme="dark"] body.login-page .login-v2-visual { background:#101827 !important; }
  html:not([data-theme="dark"]), html:not([data-theme="dark"]) body.login-page,
  html:not([data-theme="dark"]) body.login-page .login-v2,
  html:not([data-theme="dark"]) body.login-page .login-v2-visual { background:#eef1f5 !important; }
  body.login-page .login-theme-toggle {
    right: 10px; top: max(12px, env(safe-area-inset-top));
    min-height: 32px !important; padding: 6px 8px !important;
    font-size: 9px !important; white-space: nowrap;
  }
  body.login-page .login-language-picker {
    right: 102px; top: max(12px, env(safe-area-inset-top));
    min-height: 32px !important; padding: 0 !important;
    white-space: nowrap;
    transform:none;
  }
  body.login-page .login-language-picker button {
    min-width: 0 !important; min-height: 32px !important; padding: 6px 8px !important;
    font-size: 9px !important; line-height:1 !important; letter-spacing: 0 !important;
  }
  body.login-page { overflow-y:auto; overflow-x:hidden; background:#101827; }
  body.login-page .login-v2 { display:block; min-height:100svh; height:auto; background:#101827; }
  body.login-page .login-v2-visual { position:absolute; inset:0; width:100%; height:100%; min-height:100svh; background:#101827; }
  body.login-page .login-v2-panel { height:auto; min-height:100svh; padding:100px 16px 0; overflow:visible; align-items:flex-end; justify-content:flex-end; background:transparent; box-sizing:border-box; }
  body.login-page .login-v2-form-wrap { width:100%; }
  body:has(#jadwalContainer) .jadwal-card { border-width:1px; box-shadow:0 4px 14px rgba(30,50,78,.12),0 1px 3px rgba(30,50,78,.08); }
  body:has(#jadwalContainer) .scroll-reveal { opacity:1 !important; transform:none !important; transition:none !important; will-change:auto !important; }
  body:has(#jadwalContainer) .jadwal-card.card-morph { animation:jadwal-mobile-update .22s ease-out !important; }
  @keyframes jadwal-mobile-update { from{opacity:.72} to{opacity:1} }
}

/* Login mobile keeps the background image visible and uses a low-glare glass card. */
.login-theme-toggle {
  position:fixed; top:max(16px,env(safe-area-inset-top)); right:16px; z-index:20;
  width:auto !important; min-height:38px; padding:8px 12px !important;
  border:1px solid rgba(255,255,255,.24) !important; border-radius:999px !important;
  background:rgba(10,14,22,.64) !important; color:#e2e8f0 !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:11px !important; font-weight:800 !important;
}

[data-theme-icon] { display:inline-block; min-width:1.15em; text-align:center; transform-origin:center; }
[data-theme-icon].theme-icon-animate { animation:theme-icon-pop .42s cubic-bezier(.2,.8,.2,1); }
@keyframes theme-icon-pop {
  0% { transform:rotate(0) scale(1); }
  45% { transform:rotate(150deg) scale(.65); opacity:.45; }
  100% { transform:rotate(360deg) scale(1); opacity:1; }
}

@media (max-width:849px) {
  html:not([data-theme="dark"]) body.login-page,
  html:not([data-theme="dark"]) body.login-page .login-v2,
  html:not([data-theme="dark"]) body.login-page .login-v2-visual { background:#eef1f5 !important; }
  html:not([data-theme="dark"]) .login-v2-panel { background:transparent !important; }
  html:not([data-theme="dark"]) .login-v2-overlay { background:linear-gradient(180deg,rgba(8,12,20,.08) 0%,rgba(8,12,20,.12) 38%,rgba(238,241,245,.78) 100%) !important; }
  html:not([data-theme="dark"]) .login-v2-form-wrap {
    padding:20px 17px 16px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:22px;
    background:rgba(246,248,251,.88);
    box-shadow:0 18px 48px rgba(15,23,42,.18);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  html:not([data-theme="dark"]) .login-v2-heading { color:#172033 !important; }
  html:not([data-theme="dark"]) .login-v2-heading span { color:#8a6c00 !important; }
  html:not([data-theme="dark"]) .login-v2-heading p { color:#5f6b7a !important; }
  html:not([data-theme="dark"]) .login-v2-password input { background:#fff !important; border:1px solid #d5dce6 !important; color:#172033 !important; }
  html:not([data-theme="dark"]) .login-v2-meta .forgot-password { color:#806400 !important; }
  html:not([data-theme="dark"]) .login-v2-help { color:#667085 !important; }
  html:not([data-theme="dark"]) .login-v2-legal { color:#7b8492 !important; }
  html[data-theme="dark"] .login-v2-panel { background:transparent !important; }
  html[data-theme="dark"] .login-v2-overlay { background:linear-gradient(180deg,rgba(8,12,20,.16) 0%,rgba(8,12,20,.22) 38%,rgba(8,12,20,.88) 100%) !important; }
  html[data-theme="dark"] .login-v2-form-wrap {
    padding:20px 17px 16px;
    border:1px solid rgba(148,163,184,.2);
    border-radius:22px;
    background:rgba(19,28,43,.84);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  html[data-theme="dark"] .login-v2-heading { color:#d8e0ea !important; }
  html[data-theme="dark"] .login-v2-heading span { color:#d9ae22 !important; }
  html[data-theme="dark"] .login-v2-heading p { color:#a5b0c1 !important; }
  html[data-theme="dark"] .login-v2-password input { background:#111927 !important; border:1px solid #3b4960 !important; color:#d8e0ea !important; }
  html[data-theme="dark"] .login-v2-password input:focus { border-color:#9b7b1c !important; outline:2px solid rgba(181,141,18,.35) !important; }
  html[data-theme="dark"] .login-v2-password .password-toggle { background:#202b3d !important; color:#9eabbc !important; }
  html[data-theme="dark"] .login-v2-password .password-toggle:hover { background:#29364a !important; color:#c5cfdd !important; }
  html[data-theme="dark"] .login-v2-meta .forgot-password { color:#c7a642 !important; }
  html[data-theme="dark"] .login-v2-meta .login-message { color:#d69a9d !important; }
  html[data-theme="dark"] .login-v2-help { color:#929fb2 !important; }
  html[data-theme="dark"] .login-v2-legal { color:#778397 !important; }
  html[data-theme="dark"] .maintenance-announcement { background:#30290f !important; border-color:#6d5b18 !important; color:#d8c985 !important; }
}

/* Mobile settings tables turn into cards; keep those cards fully dark as well. */
@media (max-width:680px) {
  html[data-theme="dark"] .settings-table tr {
    background:#192335 !important;
    border-color:#3b4960 !important;
    color:#d8e0ea !important;
    box-shadow:0 8px 20px rgba(2,6,23,.18) !important;
  }
  html[data-theme="dark"] .settings-table td {
    background:transparent !important;
    border-color:#344158 !important;
    color:#d8e0ea !important;
  }
  html[data-theme="dark"] .settings-table td::before {
    color:#aebbd0 !important;
    -webkit-text-fill-color:#aebbd0 !important;
  }
  html[data-theme="dark"] .settings-table td :where(span,div):not(.sewa-price-chip) {
    color:#d8e0ea;
  }
  html[data-theme="dark"] .settings-table .sub,
  html[data-theme="dark"] .settings-table .sewa-list-details {
    color:#aebbd0 !important;
  }
  html[data-theme="dark"] .settings-table tr.sewa-dragging {
    background:#30290f !important;
    border-color:#b58d12 !important;
  }
  html[data-theme="dark"] #detailUnitContent tr {
    background:#192335 !important;
    border-color:#3b4960 !important;
    color:#d8e0ea !important;
    box-shadow:0 8px 20px rgba(2,6,23,.18) !important;
  }
  html[data-theme="dark"] #detailUnitContent td,
  html[data-theme="dark"] #detailUnitContent td:first-child {
    background:transparent !important;
    border-color:#344158 !important;
    color:#d8e0ea !important;
  }
  html[data-theme="dark"] #detailUnitContent td::before {
    color:#aebbd0 !important;
    -webkit-text-fill-color:#aebbd0 !important;
  }
  html[data-theme="dark"] #detailUnitContent td .cell-value {
    color:#f1f5f9 !important;
    -webkit-text-fill-color:#f1f5f9 !important;
  }
}

html {
  min-width: 320px;
  scrollbar-gutter: stable;
}

body {
  line-height: 1.45;
}

*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

button,
input,
select {
  font-family: inherit;
}

/* Login */
body:has(#loginForm) .container {
  width: min(100%, 440px);
  margin-inline: auto;
}

/* Rekapan */
body:has(#formRekapan) {
  padding: 84px var(--layout-page-x) 32px !important;
}

body:has(#formRekapan) > .container {
  width: min(100%, 520px);
  max-width: 520px;
  padding: clamp(18px, 3vw, 28px);
  margin-inline: auto !important;
}

#formRekapan > label,
#formRekapan > div > label {
  margin-bottom: 6px;
}

.studio-rate-option {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
.studio-rate-option[hidden],.studio-rate-option.is-hidden { display:none !important; }
.unit-rate-field { min-width:0;margin-bottom:var(--layout-section-gap); }
.unit-rate-field > .ios-select-shell { margin-bottom:0!important; }
.unit-rate-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;margin-bottom:6px; }
.unit-rate-heading > label { margin:0!important; }
.studio-rate-option strong { color:#667085;font-size:.7rem;white-space:nowrap; }
.studio-rate-switch { position:relative;display:block!important;flex:0 0 46px!important;width:46px!important;min-width:46px!important;max-width:46px!important;height:26px!important;min-height:26px!important;margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;background:transparent!important;cursor:pointer;overflow:visible!important; }
.studio-rate-switch span { position:absolute;inset:0;border-radius:999px;background:#cbd5e1;transition:background .18s ease; }
.studio-rate-switch span::after { content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s ease; }
.studio-rate-switch[aria-checked="true"] span { background:#d6aa00; }
.studio-rate-switch[aria-checked="true"] span::after { transform:translateX(20px); }
.studio-rate-switch:focus-visible { outline:2px solid #ffc800!important;outline-offset:3px; }
html[data-theme="dark"] .studio-rate-option strong { color:#f8fafc!important; }

#formRekapan input,
#formRekapan select {
  min-height: var(--layout-control-height);
}

#formRekapan > .ios-select-shell,
#formRekapan .input-box-time,
#formRekapan .checkout,
#formRekapan > #containerSplit {
  margin-bottom: var(--layout-section-gap) !important;
}
.qris-payment {
  margin: 0 0 var(--layout-section-gap);
  padding: 16px;
  border: 1px solid #e2e5e9;
  border-radius: var(--layout-radius);
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.qris-payment[hidden] { display:none !important; }
.qris-payment-head { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px; }
.qris-payment-title { display:flex;align-items:center;gap:10px;min-width:0;color:#172033; }
.qris-payment-title > span:last-child { display:flex;flex-direction:column;gap:2px;text-align:left; }
.qris-payment-title strong { font-size:.92rem;font-weight:850;line-height:1.2; }
.qris-payment-title small { color:#667085;font-size:.7rem;font-weight:600;line-height:1.35; }
.qris-payment-icon { display:grid;flex:0 0 30px;width:30px;height:30px;place-items:center;color:#b58d00; }
.qris-payment-icon svg { display:block;width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.qris-payment-amount { flex:0 0 auto;padding:7px 10px;border-radius:9px;background:#fff5c2;color:#6b5200;font-size:.86rem;font-weight:900;font-variant-numeric:tabular-nums; }
.qris-code-frame { display:flex;justify-content:center;padding:15px;border:1px solid #edf0f3;border-radius:12px;background:#f7f8fa; }
.qris-code { display:flex;justify-content:center;padding:10px;border-radius:10px;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.08); }
.qris-code img,.qris-code canvas { display:block;max-width:100%;height:auto!important;background:#fff; }
.qris-payment-note { display:flex;align-items:flex-start;justify-content:center;gap:7px;margin-top:12px;color:#667085; }
.qris-payment-note > span { display:grid;flex:0 0 18px;width:18px;height:18px;place-items:center;border-radius:50%;background:#e8f7ee;color:#168044;font-size:10px;font-weight:900; }
.qris-payment-note p { margin:0;font-size:.72rem;line-height:1.5;text-align:left; }
html[data-theme="dark"] .qris-payment { border-color:#334155;background:#172033;color:#e5e7eb;box-shadow:0 10px 28px rgba(2,6,23,.25); }
html[data-theme="dark"] .qris-payment-title { color:#edf3fb; }
html[data-theme="dark"] .qris-payment-icon { color:#f3c900; }
html[data-theme="dark"] .qris-payment-title small,
html[data-theme="dark"] .qris-payment-note { color:#aebbd0; }
html[data-theme="dark"] .qris-payment-amount { background:#30290f;color:#f3cf58; }
html[data-theme="dark"] .qris-code-frame { border-color:#334155;background:#111927; }
html[data-theme="dark"] .qris-code { box-shadow:0 4px 16px rgba(0,0,0,.3); }
html[data-theme="dark"] .qris-payment-note > span { background:#153b2b;color:#70d9a0; }
@media (max-width:480px) {
  .qris-payment-head { align-items:flex-start; }
  .qris-payment-title small { max-width:145px; }
  .qris-payment-amount { font-size:.78rem; }
}

#formRekapan > .ios-select-shell + label {
  margin-top: 0;
}

#formRekapan > #containerCatatan {
  margin-bottom: 0 !important;
}

#formRekapan > #containerSplit input {
  margin-bottom: 0;
}
#containerSplit .split-option-locked{opacity:.55}#containerSplit .split-option-locked input{cursor:not-allowed!important}#containerSplit .split-option-locked label::after{content:" · terkunci";color:#8b95a5;font-size:.62rem;font-weight:700}
.dp-payment-box{margin:0 0 var(--layout-section-gap);padding:13px 15px;border:1px solid #e2e5e9;border-radius:var(--layout-radius);background:#fff}.dp-payment-toggle{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;margin:0!important;cursor:pointer}.dp-payment-toggle input,#formRekapan .dp-payment-toggle input{display:block!important;flex:0 0 18px!important;width:18px!important;min-width:18px!important;max-width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;margin:0!important;padding:0!important;border-radius:5px!important;accent-color:#d6aa00}.dp-payment-toggle span{display:flex;min-width:0;flex-direction:column;gap:2px;text-align:left}.dp-payment-toggle strong{color:#172033;font-size:.82rem;line-height:1.2}.dp-payment-toggle small{color:#667085;font-size:.68rem;line-height:1.3}.dp-payment-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.7fr);gap:12px;align-items:end;margin-top:13px;padding-top:13px;border-top:1px solid #eceff3}.dp-payment-fields[hidden]{display:none!important}.dp-payment-fields label{font-size:.7rem!important}.dp-payment-fields input{margin:0!important}.dp-payment-summary{display:flex;min-height:var(--layout-control-height);padding:8px 12px;flex-direction:column;justify-content:center;border-radius:9px;background:#fff5c2}.dp-payment-summary small{color:#6b5200;font-size:.65rem}.dp-payment-summary strong{color:#493900;font-size:.92rem;font-variant-numeric:tabular-nums}.split-remaining-hint{display:block;margin-top:8px;color:#667085;font-size:.68rem}.split-remaining-hint:empty{display:none}html[data-theme="dark"] .dp-payment-box{border-color:#334155;background:#172033}html[data-theme="dark"] .dp-payment-toggle strong{color:#edf3fb}html[data-theme="dark"] .dp-payment-toggle small,html[data-theme="dark"] .split-remaining-hint{color:#aebbd0}html[data-theme="dark"] .dp-payment-fields{border-color:#334155}html[data-theme="dark"] .dp-payment-summary{background:#30290f}html[data-theme="dark"] .dp-payment-summary small{color:#d6bd68}html[data-theme="dark"] .dp-payment-summary strong{color:#f3cf58}@media(max-width:520px){.dp-payment-box{padding:12px}.dp-payment-fields{grid-template-columns:minmax(0,1fr) minmax(128px,.72fr);gap:9px;margin-top:11px;padding-top:11px}.dp-payment-summary{padding-inline:10px}.dp-payment-summary strong{font-size:.84rem}}@media(max-width:350px){.dp-payment-fields{grid-template-columns:1fr}}

#formRekapan .input-box-time {
  min-height: 74px;
  padding: 11px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid #e2e5e9;
  border-radius: var(--layout-radius);
  background: #fff;
  box-shadow: none;
}

#formRekapan .checkout {
  min-height: 74px;
  padding: 11px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid #e2e5e9;
  border-radius: var(--layout-radius);
  background: #fff;
  box-shadow: none;
}

#formRekapan .time-picker-trigger {
  min-height: 58px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: #f7f8fa;
  box-shadow: none;
  font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
}

#formRekapan .time-picker-trigger:hover { background: #f2f3f5; }
#formRekapan .time-picker-trigger:focus-visible { outline: 2px solid #ffc800; outline-offset: 1px; }

#formRekapan .checkout-label {
  display: block;
  margin: 0;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .45px;
  text-transform: uppercase;
}

#formRekapan .checkout > span#checkout {
  margin: 0;
  color: #111;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

#formRekapan .checkout-view { width: 100%; min-height: 50px; }
#formRekapan .checkout-auto-view,
#formRekapan .checkout-manual-view { flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
#formRekapan .checkout-auto-view > span#checkout { margin: 0; color: #111; font-size: 1.28rem; font-weight: 800; line-height: 1.35; font-variant-numeric: tabular-nums; }
#formRekapan .checkout-manual-view .custom-time-shell { width: 100%; }
#formRekapan .checkout-manual-view .custom-time-button { height: 34px; justify-content: center; border: 0; background: transparent; font-size: 1.18rem; }
#formRekapan .checkout-manual-view .custom-time-button::after { position: absolute; right: 7px; }
#formRekapan .input-box-time .custom-time-shell { width: 100%; }
#formRekapan .input-box-time .custom-time-button { position: relative; height: 34px; justify-content: center; border: 0; border-radius: 0; background: transparent; font-size: 1.18rem; }
#formRekapan .input-box-time .custom-time-button::after { position: absolute; right: 7px; }

#formRekapan .checkout .time-picker-trigger {
  width: auto;
  min-width: 150px;
  min-height: 36px;
  padding: 2px 14px;
  background: transparent;
}

.rekapan-time-layout { min-width: 0; }
.rekapan-time-field { min-width: 0; }

/* Jadwal */
.container-jadwal {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding-inline: var(--layout-page-x);
}

.jadwal-heading {
  min-height: 32px;
  margin-bottom: 16px;
}

.filter-grid {
  gap: 12px 16px;
  margin-bottom: 20px;
}

.filter-grid > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
  justify-content: flex-start;
}

.filter-grid > div > label {
  flex: 0 0 16px;
  height: 16px;
  margin: 0 0 6px !important;
  line-height: 16px;
}

.filter-grid > div > input,
.filter-grid > div > .ios-select-shell,
.filter-grid > div > .custom-date-shell {
  flex: 0 0 44px;
  height: 44px;
  margin: 0 !important;
}

.filter-grid .ios-select-shell .ios-select-button {
  height: 44px !important;
}

.filter-grid .ios-select-button {
  display: flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}

.jadwal-list {
  align-items: start;
}

.jadwal-card {
  min-width: 0;
  height: auto;
}

#jadwalContainer .jadwal-card {
  padding-bottom:18px;
}

#jadwalContainer :where(.badge-cabang,.unit-text,.input-time,.guest-name-text,.lama-sewa,.team-name) {
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Isi kartu jadwal boleh menambah tinggi kartu. Label panjang (terutama bahasa
   Inggris) tidak boleh terpotong atau keluar dari batas kartu. */
#jadwalContainer .catatan-detail {
  min-height:80px;
  max-height:none;
  position:relative;
  overflow:visible;
}
#jadwalContainer .catatan-content,
#jadwalContainer .catatan-value,
#jadwalContainer .catatan-entries {
  min-height:0;
}
#jadwalContainer .catatan-value {
  max-height:none;
  overflow:visible;
}
#jadwalContainer .catatan-entries {
  gap:4px;
}
#jadwalContainer .catatan-entry {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:7px;
  min-height:25px;
  padding:4px 7px;
}
#jadwalContainer .catatan-entry-title {
  min-width:0;
  overflow-wrap:anywhere;
  white-space:normal;
  font-size:.69rem;
}
#jadwalContainer .catatan-entry-meta {
  min-width:0;
  margin-top:0;
  overflow-wrap:anywhere;
  text-align:right;
  white-space:normal;
  font-size:.61rem;
}
#jadwalContainer .edit-history-slot {
  position:static;
  z-index:auto;
  display:flex;
  justify-content:flex-end;
  width:100%;
  max-height:none;
  margin-top:3px;
  overflow:visible;
}
#jadwalContainer .edit-history {
  position:relative;
  margin:0;
}
#jadwalContainer .edit-history summary {
  padding:3px 7px;
  border-radius:6px;
  background:#eef2f7;
  white-space:nowrap;
}
#jadwalContainer .edit-history[open] {
  z-index:30;
}
#jadwalContainer .jadwal-card:has(.edit-history[open]) {
  z-index:60;
}
#jadwalContainer .edit-history[open] .edit-history-list {
  position:absolute;
  right:0;
  bottom:calc(100% + 6px);
  display:grid;
  gap:5px;
  width:min(270px,calc(100vw - 40px));
  max-height:190px;
  margin:0;
  padding:10px;
  overflow-y:auto;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:#344054;
}
html[data-theme="dark"] #jadwalContainer .edit-history summary {
  background:#25344d!important;
}
html[data-theme="dark"] #jadwalContainer .edit-history[open] .edit-history-list {
  border-color:#475569;
  background:#111b2d;
  color:#dbe4f1;
}
#jadwalContainer .catatan-user-text {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.card-header > * {
  min-width: 0;
}

/* Summary */
.summary-wrapper {
  width: min(100%, 960px);
  max-width: 960px;
  padding-inline: var(--layout-page-x);
}

.summary-wrapper > *,
#contentArea > * {
  min-width: 0;
}

.header-section,
.summary-wrapper .card,
.summary-wrapper .loading {
  margin-bottom: var(--layout-section-gap);
}

.summary-wrapper .filter-group input[type="date"] {
  border: 1.5px solid #e2e8f0 !important;
  background: #fff !important;
  color: #111 !important;
  accent-color: #ffc800;
  animation: summary-date-fade .32s cubic-bezier(.22,.8,.3,1);
}

.summary-wrapper .filter-group input[type="date"]:focus {
  border-color: #ffc800 !important;
  background: #fffdf2 !important;
  box-shadow: none !important;
}

.summary-wrapper .filter-group input[type="date"]::-webkit-calendar-picker-indicator {
  padding: 6px;
  border-radius: 7px;
  background-color: #ffc800;
  cursor: pointer;
}

@keyframes summary-date-fade {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.data-row:last-child {
  margin-bottom: 0;
}

/* Pengaturan */
.wrap {
  width: min(100% - (var(--layout-page-x) * 2), 1120px);
  max-width: 1120px;
}

.page-head,
.tabs,
.card {
  margin-bottom: var(--layout-section-gap);
}

.panel.active {
  align-items: start;
  gap: 20px;
}

.panel.active > .card {
  min-width: 0;
  margin-bottom: 0;
}

#users.panel.active { display:block; }
@media (max-width:959px) { .user-settings-columns { grid-template-columns:1fr; } }

.settings-table-wrap {
  width: 100%;
}

@media (min-width: 760px) {
  body:has(.container-jadwal),
  body:has(.summary-wrapper),
  body:has(main.wrap) {
    padding-top: 84px;
    padding-bottom: 40px;
  }

  .jadwal-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: row;
    gap: 16px;
    align-items:stretch;
  }

  #jadwalContainer .jadwal-card {
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:352px;
    max-height:none;
  }

  #jadwalContainer .card-header {
    flex:0 0 auto;
    min-height:52px;
    margin-bottom:10px;
  }

  #jadwalContainer .tamu-name {
    flex:0 0 auto;
    min-height:54px;
    max-height:none;
    margin-bottom:10px;
    overflow:visible;
  }

  #jadwalContainer .waktu-box {
    flex:0 0 74px;
    min-height:74px;
  }

  #jadwalContainer .payment-detail {
    flex:0 0 39px;
    margin-top:0;
  }

  .jadwal-list > .status-info {
    grid-column: 1 / -1;
  }

  .guest-modal.show {
    align-items: center;
  }

  .guest-modal-card {
    width: min(680px, 100%);
    padding: 24px;
  }

  .guest-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }

  .guest-edit-grid .full {
    grid-column: 1 / -1;
  }

  .header-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
    gap: 24px;
    padding: 20px;
  }

  .header-top {
    margin-bottom: 0;
    align-self: center;
  }

  .summary-wrapper .card {
    padding: 20px;
  }

  .rekapan-time-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
    margin-bottom: 4px;
  }

  .rekapan-time-layout .input-box-time,
  .rekapan-time-layout .checkout {
    min-height: 76px;
    margin-bottom: 16px !important;
  }

  .rekapan-time-layout .input-box-time { min-height: 76px; padding: 11px 16px; }
  .rekapan-time-layout .input-box-time .custom-time-button { height: 34px; border: 0; border-radius: 0; background: transparent; font-size: 1.18rem; }
  .rekapan-time-layout .input-box-time .custom-time-button::after { right: 7px; }
}

@media (min-width: 900px) {
  .top-nav-bar,
  .top-nav-bar-fixed {
    height: 64px !important;
    padding-inline: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .top-nav-bar .user-badge-btn,
  .top-nav-bar-fixed .user-badge-btn {
    background: #111 !important;
    color: #ffc800 !important;
    border: 1px solid #111 !important;
  }

  .top-nav-bar .arrow-icon,
  .top-nav-bar-fixed .arrow-icon {
    color: #ffc800 !important;
  }

  .top-nav-bar .nav-menu-btn,
  .top-nav-bar-fixed .nav-menu-btn {
    border: 0 !important;
    background: #111 !important;
  }

  .filter-grid {
    grid-template-columns: minmax(160px, .7fr) minmax(190px, .9fr) minmax(260px, 1.4fr);
    align-items: start;
    padding: 20px;
  }

  .filter-full {
    grid-column: auto;
  }
}

@media (min-width: 960px) {
  .panel.active {
    display: grid;
    grid-template-columns: minmax(320px, 0.75fr) minmax(440px, 1.25fr);
  }

  #units.panel.active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #units.panel.active > .card:last-child {
    grid-column: 1 / -1;
  }

  #rentals.panel.active { display:grid; grid-template-columns:1fr; gap:18px; }
  #rentals.panel.active > .card { width:100%; }
  #rentals .rental-day-grid { grid-template-columns:repeat(7,minmax(110px,1fr)); }
  #rentals .sewa-bonus-option { display:flex; width:fit-content; max-width:100%; }
  #rentals .settings-table { width:100%; min-width:0; table-layout:fixed; }
  #rentals .settings-table th:nth-child(1), #rentals .settings-table td:nth-child(1) { width:31%; }
  #rentals .settings-table th:nth-child(2), #rentals .settings-table td:nth-child(2) { width:12%; }
  #rentals .settings-table th:nth-child(3), #rentals .settings-table td:nth-child(3) { width:auto; }
  #rentals .settings-table th:nth-child(4), #rentals .settings-table td:nth-child(4) { width:150px; }
  #rentals .settings-table td { overflow-wrap:anywhere; line-height:1.5; }
  #rentals .settings-actions-cell .row-actions { display:grid; grid-template-columns:1fr; gap:7px; }
  #rentals .settings-actions-cell .row-actions button { width:100%; min-height:38px; }

  .summary-wrapper .table-container table { table-layout: fixed; }
  .summary-wrapper .table-container th,
  .summary-wrapper .table-container td { vertical-align: middle; }
  .summary-wrapper .table-container th:not(:first-child),
  .summary-wrapper .table-container td:not(:first-child) { text-align: right; }

  .settings-table { table-layout: fixed; }
  .settings-table th,
  .settings-table td { vertical-align: middle; }
  .settings-table td:last-child { width: 150px; }
  .settings-table .row-actions { justify-content: flex-end; }
  #sewaTable .row-actions { flex-wrap: wrap; }
}

@media (min-width: 1180px) {
  .jadwal-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 759px) {
  :root {
    --layout-page-x: 12px;
  }

  body:has(#formRekapan) {
    padding-top: 76px !important;
    padding-bottom: 20px !important;
  }

  body:has(#formRekapan) > .container {
    padding: 16px;
  }

  .container-jadwal,
  .summary-wrapper {
    padding-inline: var(--layout-page-x);
  }

  .filter-grid,
  .header-section,
  .summary-wrapper .card,
  .page-head,
  .card {
    padding: 16px;
  }

  .rekapan-time-layout .input-box-time { margin-bottom: 16px !important; }
  .rekapan-time-layout .checkout { margin-bottom: 16px !important; }
  .rekapan-time-layout .input-box-time { min-height: 74px; padding: 11px 16px; }
  .rekapan-time-layout .input-box-time .custom-time-button { height: 34px; border: 0; border-radius: 0; background: transparent; font-size: 1.18rem; }
  .rekapan-time-layout .input-box-time .custom-time-button::after { right: 7px; }

  .wrap {
    width: calc(100% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .summary-wrapper .filter-group input[type="date"] { animation: none; }
}

@media (max-width: 380px) {
  .jadwal-heading,
  .header-top {
    align-items: flex-start;
  }

  .live-indicator {
    flex: 0 0 auto;
    padding-inline: 8px;
  }

  .tabs {
    gap: 6px;
  }
}

/* Dark mode polish: beri kedalaman warna tanpa mengurangi kontras teks. */
html[data-theme="dark"] {
  min-height: 100%;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 91, 168, .22), transparent 32%),
    radial-gradient(circle at 95% 18%, rgba(21, 126, 145, .12), transparent 28%),
    linear-gradient(135deg, #0b1220 0%, #101b30 48%, #0d1728 100%) !important;
  background-attachment: fixed;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 91, 168, .22), transparent 32%),
    radial-gradient(circle at 95% 18%, rgba(21, 126, 145, .12), transparent 28%),
    linear-gradient(135deg, #0b1220 0%, #101b30 48%, #0d1728 100%) !important;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Gunakan satu kanvas background untuk seluruh halaman aplikasi. Pada desktop
   body dipersempit dan digeser oleh sidebar; bila body juga menggambar gradient,
   posisi warnanya berbeda dari html dan batasnya terlihat saat discroll. */
html[data-theme="dark"] body:has(#app-navbar) {
  background: transparent !important;
  background-image: none !important;
}

/* Jadwal memakai warna kanvas tunggal. Gradient fixed sebelumnya dapat
   terlihat tersambung ulang di batas tinggi body/viewport pada layar desktop. */
html:has(body #jadwalContainer),
body:has(#jadwalContainer) {
  min-height:100%;
  background-color:#f4f6f8 !important;
  background-image:none !important;
}
html[data-theme="dark"]:has(body #jadwalContainer),
html[data-theme="dark"] body:has(#jadwalContainer) {
  background:#0d1728 !important;
  background-image:none !important;
}

/* Rekapan desktop tetap dapat discroll pada layar yang lebih pendek. Gunakan
   html sebagai satu-satunya kanvas agar warna tidak berubah di ujung halaman. */
@media (min-width: 760px) {
  html:has(body #formRekapan) {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f7f9fc;
  }
  body:has(#formRekapan) {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: visible;
    background: transparent !important;
    background-image: none !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    display: block !important;
  }
  body:has(#formRekapan) > .container {
    margin-block: 0 !important;
    margin-inline: auto !important;
  }
}
html[data-theme="dark"]:has(body #formRekapan) {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 91, 168, .22), transparent 32%),
    radial-gradient(circle at 95% 18%, rgba(21, 126, 145, .12), transparent 28%),
    linear-gradient(135deg, #0b1220 0%, #101b30 48%, #0d1728 100%) !important;
  background-attachment: fixed !important;
}

html[data-theme="dark"] :where(.top-nav-bar, .top-nav-bar-fixed) {
  background:
    linear-gradient(110deg, #132342 0%, #1d3768 52%, #172f59 100%) !important;
  border-bottom: 1px solid rgba(125, 166, 232, .24) !important;
  box-shadow: 0 8px 26px rgba(2, 12, 31, .3) !important;
  transition: background .3s ease, box-shadow .3s ease;
}

html[data-theme="dark"] .desktop-sidebar {
  background: linear-gradient(180deg, #111d33 0%, #0d1728 100%) !important;
  border-right-color: rgba(92, 130, 190, .22) !important;
}

html[data-theme="dark"] :where(
  .card, .panel, .hero, .header-section, .page-head, .container,
  .jadwal-card, .cleaning-card, .status-card, .expense-card, .expense,
  .balance-panel, .room-status-board, .guest-modal-card, .edit-dialog,
  .table-container, .branch-item, .sewa-price-branch, #formRekapan
) {
  background: linear-gradient(145deg, #1b2a43 0%, #172337 72%, #162134 100%) !important;
  border-color: #344b70 !important;
  box-shadow: 0 10px 28px rgba(3, 12, 28, .16) !important;
}

html[data-theme="dark"] :where(.jadwal-card, .cleaning-card, .status-card, .expense-card) {
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

html[data-theme="dark"] :where(.jadwal-card, .cleaning-card, .status-card, .expense-card):hover {
  border-color: #46638f !important;
  box-shadow: 0 14px 32px rgba(3, 12, 28, .24) !important;
}

/* Dark mode safety net: page-local light borders must never appear white. */
html[data-theme="dark"] * {
  border-color: #344158 !important;
}
html[data-theme="dark"] :where(
  .custom-time-col,
  #formRekapan .input-box-time .custom-time-shell,
  #formRekapan .input-box-time .custom-time-button,
  #formRekapan .checkout-manual-view .custom-time-shell,
  #formRekapan .checkout-manual-view .custom-time-button
) {
  border-color: transparent !important;
}
html[data-theme="dark"] :where(
  input:focus, select:focus, textarea:focus,
  .ios-select-button:focus, .custom-date-button:focus,
  .custom-time-button:focus, .month-picker-trigger:focus,
  .period-trigger:focus, .tab.active, .tab-btn.active,
  .calendar-day.is-selected, .month-option.selected,
  .custom-date-day.selected, .custom-time-option.selected,
  .custom-date-today
) {
  border-color: #9b7b1c !important;
}
html[data-theme="dark"] :where(
  .danger, .room-type-delete, .status.error,
  .waktu-box.checkout-soon, .jadwal-card.cancelled
) {
  border-color: #85434b !important;
}
html[data-theme="dark"] :where(.cleaning-card, .status-card) {
  border-left-color: #b58d12 !important;
}
html[data-theme="dark"] :where(.total-box, .comparison-diff, .maintenance-announcement, .waktu-box, .move-current-room) {
  border-color: #b58d12 !important;
}

/* ================= MOBILE SYSTEM V6 ================= */
@media (max-width: 759px) {
  /* Root viewport ikut diberi warna karena area rubber-band/overscroll mobile
     digambar dari html, bukan selalu dari body. Hindari fixed background yang
     pada Safari/Chrome mobile sesekali memperlihatkan kanvas hitam. */
  html {
    min-height: 100%;
    background-color: #f4f6f8;
  }

  html[data-theme="dark"] {
    min-height: 100%;
    background-color: #0d1728 !important;
    background-image:
      radial-gradient(circle at 8% 0%, rgba(45, 91, 168, .22), transparent 32%),
      radial-gradient(circle at 95% 18%, rgba(21, 126, 145, .12), transparent 28%),
      linear-gradient(135deg, #0b1220 0%, #101b30 48%, #0d1728 100%) !important;
    background-attachment: scroll !important;
  }

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .top-nav-bar,
  .top-nav-bar-fixed {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  .top-nav-bar .user-badge-btn,
  .top-nav-bar-fixed .user-badge-btn {
    max-width: min(48vw, 190px) !important;
  }

  .top-nav-bar .nav-menu-wrapper,
  .top-nav-bar-fixed .nav-menu-wrapper {
    display: block !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    margin-left: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .top-nav-bar .nav-menu-btn,
  .top-nav-bar-fixed .nav-menu-btn {
    display: flex !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .container,
  .container-jadwal,
  .summary-wrapper,
  .page,
  .wrap,
  main,
  .panel,
  .card,
  .hero,
  .header-section {
    min-width: 0;
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  button,
  .ios-select-button,
  .custom-date-button,
  .custom-time-button,
  .month-picker-trigger {
    min-height: 44px;
  }

  .grid,
  .filter-grid,
  .filters,
  .guest-edit-grid,
  .rekapan-time-layout {
    min-width: 0;
  }

  .table-container,
  .table-wrap,
  .settings-table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  td,
  th,
  .data-row,
  .expense-meta,
  .jadwal-card,
  .catatan-content,
  .card-header {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .user-dropdown-menu,
  .nav-menu-dropdown {
    max-width: calc(100vw - 24px);
  }

  .modal,
  .edit-modal,
  .guest-modal {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .modal-content,
  .edit-dialog,
  .guest-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }

  /* Pengeluaran */
  body:has(.expense-list) .page {
    width: calc(100% - 24px) !important;
  }
  body:has(.expense-list) .hero,
  body:has(.expense-list) .panel {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  body:has(.expense-list) .expense-card {
    width: 100%;
    padding: 13px;
  }
  body:has(.expense-list) .actions {
    justify-content: stretch;
    flex-wrap: wrap;
  }
  body:has(.expense-list) .actions button {
    flex: 1 1 120px;
    min-height: 40px;
  }

  /* Jadwal */
  .jadwal-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .jadwal-card {
    width: 100%;
  }
  .edit-datetime-controls,
  .edit-datetime-pair {
    min-width: 0;
  }

  /* Pengaturan */
  body:has(main.wrap) .panel.active {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  body:has(main.wrap) .tabs {
    width: 100%;
  }
  body:has(main.wrap) .card {
    width: 100%;
  }

  /* Rekapan */
  body:has(#formRekapan) > .container {
    width: 100% !important;
    max-width: 100% !important;
  }
  #formRekapan .rekapan-time-layout,
  #formRekapan #containerSplit {
    grid-template-columns: 1fr !important;
  }

  /* Summary umum */
  .summary-wrapper {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .summary-wrapper .header-section,
  .summary-wrapper .card {
    width: 100%;
    padding: 16px !important;
    border-radius: 14px;
  }
  .summary-wrapper .data-row {
    gap: 14px;
    align-items: flex-start;
  }
  .summary-wrapper .data-row > :last-child {
    text-align: right;
  }
}

@media (max-width: 380px) {
  .summary-wrapper .header-section,
  .summary-wrapper .card,
  body:has(.expense-list) .hero,
  body:has(.expense-list) .panel,
  body:has(#formRekapan) > .container {
    padding: 14px !important;
  }
}