/* CEK METERAN — modern dashboard theme layer.
   Loaded after the existing desktop, responsive and mobile styles. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --rwa-bg: #081321;
  --rwa-bg-soft: #0b192b;
  --rwa-panel: #101f33;
  --rwa-panel-raised: #14263d;
  --rwa-border: #263a55;
  --rwa-text: #e8f0fc;
  --rwa-muted: #91a5bf;
  --rwa-faint: #7186a2;
  --rwa-blue: #3b82f6;
  --rwa-teal: #18c6b4;
  --rwa-green: #10b981;
  --rwa-amber: #f59e0b;
  --rwa-purple: #8b5cf6;
  --rwa-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  background: var(--rwa-bg);
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #dce5ed;
  border-radius: 12px;
  background: #fff;
  color: #334e68;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(20, 48, 78, .06);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle:focus-visible,
.screen-toggle:focus-visible { outline: 3px solid rgba(59, 130, 246, .35); outline-offset: 2px; }
.screen-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #dce5ed;
  border-radius: 12px;
  background: #fff;
  color: #334e68;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(20, 48, 78, .06);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.screen-toggle:hover { transform: translateY(-1px); }

/* Dark surfaces and typography. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] #root {
  background: var(--rwa-bg);
  color: var(--rwa-text);
}

:root[data-theme="dark"] .loading-screen,
:root[data-theme="dark"] .setup-screen {
  background: var(--rwa-bg);
  color: var(--rwa-muted);
}
:root[data-theme="dark"] .loading-screen .spinner {
  border-color: #263a55;
  border-top-color: var(--rwa-teal);
}
:root[data-theme="dark"] .loading-screen p { color: var(--rwa-muted); }

:root[data-theme="dark"] .layout {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 620px 420px at 92% 0%, rgba(35, 94, 170, .13), transparent 72%),
    radial-gradient(ellipse 500px 360px at 0% 100%, rgba(13, 148, 136, .08), transparent 72%),
    var(--rwa-bg);
  color: var(--rwa-text);
}

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .sidebar.mobile-drawer {
  background: #0a1728;
  border-right: 1px solid #1e3049;
  color: #dce8f8;
}
:root[data-theme="dark"] .brand small,
:root[data-theme="dark"] .nav-label,
:root[data-theme="dark"] .user-meta small { color: #849bb7; }
:root[data-theme="dark"] .nav-item { color: #a9bad0; }
:root[data-theme="dark"] .nav-item:hover,
:root[data-theme="dark"] .nav-item:focus,
:root[data-theme="dark"] .nav-item.active {
  background: linear-gradient(100deg, rgba(44, 111, 210, .23), rgba(18, 184, 166, .12));
  color: #f5f9ff;
}
:root[data-theme="dark"] .user-card { border-color: #263a55; }
:root[data-theme="dark"] .avatar { background: #1c4164; color: #d8edff; }
:root[data-theme="dark"] .main { background: transparent; }
:root[data-theme="dark"] .topbar {
  background: rgba(10, 23, 40, .94) !important;
  border-bottom: 1px solid #223650;
  color: var(--rwa-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
:root[data-theme="dark"] .topbar h2,
:root[data-theme="dark"] .page-heading h1,
:root[data-theme="dark"] .dashboard-section-title,
:root[data-theme="dark"] .panel-head h3,
:root[data-theme="dark"] .analytics-panel h3,
:root[data-theme="dark"] .dashboard-progress-heading h3 {
  color: #edf4ff;
}
:root[data-theme="dark"] .topbar .eyebrow { color: #66c9d2; }
:root[data-theme="dark"] .top-right,
:root[data-theme="dark"] .page-heading p,
:root[data-theme="dark"] .panel-head p,
:root[data-theme="dark"] .analytics-muted,
:root[data-theme="dark"] .cell-sub,
:root[data-theme="dark"] .dashboard-no-data-note {
  color: var(--rwa-muted);
}
:root[data-theme="dark"] .status-dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .12); }
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .screen-toggle {
  border-color: #314965;
  background: #14263d;
  color: #f8c95b;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .18);
}
:root[data-theme="dark"] .theme-toggle:hover,
:root[data-theme="dark"] .screen-toggle:hover { background: #1a3451; border-color: #456487; }
:root[data-theme="dark"] .screen-toggle.is-active { background: #1c4164; border-color: #4b91e8; color: #8dc5ff; }

/* Shared cards, dashboard statistics and analytics panels. */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .form-panel,
:root[data-theme="dark"] .dashboard-tab-panel,
:root[data-theme="dark"] .dashboard-progress-panel,
:root[data-theme="dark"] .analytics-panel,
:root[data-theme="dark"] .analytics-filters,
:root[data-theme="dark"] .report-filter,
:root[data-theme="dark"] .report-note-panel,
:root[data-theme="dark"] .account-panel,
:root[data-theme="dark"] .permission-panel,
:root[data-theme="dark"] .dashboard-detail-panel {
  background: linear-gradient(145deg, rgba(20, 38, 61, .98), rgba(14, 29, 48, .98));
  border: 1px solid var(--rwa-border);
  color: var(--rwa-text);
  box-shadow: var(--rwa-shadow);
}
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .account-stat-card,
:root[data-theme="dark"] .analytics-stat {
  background: linear-gradient(145deg, #142a46, #102139) !important;
  border: 1px solid #294360;
  color: var(--rwa-text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}
:root[data-theme="dark"] .stat-card:hover,
:root[data-theme="dark"] .analytics-stat-clickable:hover {
  border-color: #4776a8;
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, .24);
}
:root[data-theme="dark"] .stat-label,
:root[data-theme="dark"] .analytics-stat-label,
:root[data-theme="dark"] .stat-hint,
:root[data-theme="dark"] .analytics-card-hint { color: #a4b7cf; }
:root[data-theme="dark"] .stat-value,
:root[data-theme="dark"] .analytics-stat strong { color: #f2f7ff; }
:root[data-theme="dark"] .stat-icon.blue { background: rgba(59, 130, 246, .18); color: #60a5fa; }
:root[data-theme="dark"] .stat-icon.green { background: rgba(16, 185, 129, .16); color: #34d399; }
:root[data-theme="dark"] .stat-icon.orange { background: rgba(245, 158, 11, .16); color: #fbbf24; }
:root[data-theme="dark"] .stat-icon.teal { background: rgba(20, 184, 166, .16); color: #2dd4bf; }
:root[data-theme="dark"] .stat-icon.purple { background: rgba(139, 92, 246, .17); color: #a78bfa; }
:root[data-theme="dark"] .dashboard-period-toolbar {
  background: #102139;
  border-color: var(--rwa-border);
  color: #e3edf9;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}
:root[data-theme="dark"] .dashboard-period-controls label { color: #a8bad0; }
:root[data-theme="dark"] .dashboard-tabs {
  background: #0d1b2e;
  border-color: #293e59;
}
:root[data-theme="dark"] .dashboard-tab { color: #9fb1c8; }
:root[data-theme="dark"] .dashboard-tab.active {
  background: #1c3859;
  color: #e9f3ff;
  box-shadow: inset 0 0 0 1px #355b85;
}
:root[data-theme="dark"] .dashboard-progress-track,
:root[data-theme="dark"] .analytics-bar-track,
:root[data-theme="dark"] .bar-track {
  background: #263a54;
}
:root[data-theme="dark"] .dashboard-progress-track span,
:root[data-theme="dark"] .analytics-bar {
  background: linear-gradient(90deg, #2563eb, #16b8a6);
}
:root[data-theme="dark"] .dashboard-progress-heading strong { color: #55d6c4; }
:root[data-theme="dark"] .dashboard-bars-six .dashboard-bar-column b { color: #dbe8f8; }
:root[data-theme="dark"] .dashboard-bars-six .dashboard-bar-column small,
:root[data-theme="dark"] .dashboard-bars-six .dashboard-bar-column em { color: #91a5bf; }
:root[data-theme="dark"] .dashboard-bars-six .bar-track span { background: linear-gradient(180deg, #36a3ff, #2365d9); }
:root[data-theme="dark"] .dashboard-bars-six .bar-track span.dashboard-empty-bar { background: #263a54; }
:root[data-theme="dark"] .dashboard-status-badge { border: 1px solid rgba(255,255,255,.08); }

/* Filters, form controls, modal surfaces and tables. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .dashboard-period-select,
:root[data-theme="dark"] .analytics-filters select {
  background: #0b192b;
  border-color: #344a66;
  color: #e5eefb;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #7187a2; }
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  outline: 2px solid rgba(59, 130, 246, .28);
  border-color: #4b91e8;
}
:root[data-theme="dark"] label,
:root[data-theme="dark"] .field-label,
:root[data-theme="dark"] .form-label { color: #c5d4e7; }
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .analytics-modal-table,
:root[data-theme="dark"] .dashboard-detail-table { border-color: #263a55; }
:root[data-theme="dark"] table { color: #dce8f7; }
:root[data-theme="dark"] th {
  background: #0b192b;
  color: #9eb3cc;
  border-color: #263a55;
}
:root[data-theme="dark"] td {
  color: #d5e2f2;
  border-color: #263a55;
}
:root[data-theme="dark"] tbody tr:hover { background: rgba(55, 107, 165, .12); }
:root[data-theme="dark"] .empty {
  color: #9db0c8;
  background: rgba(12, 28, 47, .55);
  border-color: #263a55;
}
:root[data-theme="dark"] .analytics-modal {
  background: #102139;
  border: 1px solid #304966;
  color: var(--rwa-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}
:root[data-theme="dark"] .analytics-modal-backdrop { background: rgba(1, 8, 18, .78); }
:root[data-theme="dark"] .analytics-modal-head { border-color: #2a405c; }
:root[data-theme="dark"] .search-box {
  background: #0b192b;
  border-color: #344a66;
  color: #a7bbd4;
}
:root[data-theme="dark"] .btn.secondary {
  background: #172b44;
  border: 1px solid #36506e;
  color: #dce9f9;
}
:root[data-theme="dark"] .btn.secondary:hover { background: #203b5c; border-color: #4c7199; }
:root[data-theme="dark"] .btn.primary {
  background: linear-gradient(120deg, #087eaa, #2563eb);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .22);
}
:root[data-theme="dark"] .text-btn,
:root[data-theme="dark"] .inline-link { color: #75baff; }
:root[data-theme="dark"] .alert.info { background: rgba(37, 99, 235, .14); border-color: rgba(96, 165, 250, .35); color: #c9e2ff; }
:root[data-theme="dark"] .alert.success { background: rgba(16, 185, 129, .13); border-color: rgba(52, 211, 153, .32); color: #b8f4dc; }
:root[data-theme="dark"] .alert.warning { background: rgba(245, 158, 11, .13); border-color: rgba(251, 191, 36, .34); color: #fde7b0; }
:root[data-theme="dark"] .alert.error { background: rgba(239, 68, 68, .13); border-color: rgba(248, 113, 113, .32); color: #fecaca; }
:root[data-theme="dark"] .badge { background: #203750; color: #cfe1f6; }
:root[data-theme="dark"] .badge.approved { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
:root[data-theme="dark"] .badge.rejected { background: rgba(239, 68, 68, .17); color: #fca5a5; }
:root[data-theme="dark"] .badge.submitted { background: rgba(59, 130, 246, .17); color: #93c5fd; }
:root[data-theme="dark"] .login-page { background: #081321; color: #e8f0fc; }
:root[data-theme="dark"] .login-form-wrap { background: #0d1b2e; }
:root[data-theme="dark"] .login-form { color: #e8f0fc; }
:root[data-theme="dark"] .login-form h2 { color: #f0f6ff; }
:root[data-theme="dark"] .login-form p { color: #9eb1c9; }

/* Keep the petugas quick actions vivid while matching the dark application shell. */
:root[data-theme="dark"] .staff-mobile-home .content {
  background: linear-gradient(180deg, #0b2036 0%, #091728 320px, #081321 720px);
}
:root[data-theme="dark"] .staff-home-shortcuts {
  background: rgba(16, 31, 51, .94);
  border: 1px solid #263d59;
  box-shadow: var(--rwa-shadow);
}
:root[data-theme="dark"] .staff-home-shortcuts-heading h3 { color: #e9f2ff; }
:root[data-theme="dark"] .staff-home-shortcuts-heading span { color: #91a5bf; }
:root[data-theme="dark"] .staff-home-menu-item {
  background: #142a43;
  border: 1px solid #2b4664;
  color: #e0ecfb;
}
:root[data-theme="dark"] .staff-home-menu-item:hover { background: #1b3858; }

/* Bottom navigation and drawer on compact screens. */
:root[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(8, 19, 33, .94);
  border-top: 1px solid #263a55;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .30);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
}
:root[data-theme="dark"] .mobile-bottom-item { color: #8fa5bf; }
:root[data-theme="dark"] .mobile-bottom-item.active { color: #63b5ff; }
:root[data-theme="dark"] .mobile-bottom-item.active svg { color: #63b5ff; }
:root[data-theme="dark"] .mobile-bottom-fab-circle {
  background: linear-gradient(135deg, #2688ff, #11b9ad);
  box-shadow: 0 8px 22px rgba(25, 132, 229, .38);
}
:root[data-theme="dark"] .mobile-bottom-more-icon::before,
:root[data-theme="dark"] .mobile-bottom-more-icon::after { background: #9db2cc; }
:root[data-theme="dark"] .mobile-drawer-backdrop.is-open { background: rgba(0, 0, 0, .66); }
:root[data-theme="dark"] .mobile-drawer-close { color: #dce9f8; }
:root[data-theme="dark"] .mobile-logout { color: #d7e6f7; }

/* Responsive layout: preserve the existing navigation and make content use the viewport. */
@media (max-width: 700px) {
  body, #root { min-height: 100dvh; }
  .topbar { height: auto; min-height: 66px; }
  :root[data-theme="dark"] .topbar {
    background: rgba(9, 21, 37, .96) !important;
    border-bottom-color: #263a55;
    min-height: 62px;
    padding-top: env(safe-area-inset-top, 0px);
  }
  :root[data-theme="dark"] .content { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
  .theme-toggle, .screen-toggle { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
  .top-right { gap: 7px; }
  :root[data-theme="dark"] .top-right { color: #9eb2ca; }
  :root[data-theme="dark"] .mobile-bottom-nav { min-height: calc(64px + env(safe-area-inset-bottom, 0px)); }
  :root[data-theme="dark"] .dashboard-period-toolbar { box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
  :root[data-theme="dark"] .dashboard-stat-section { margin-bottom: 18px; }
  :root[data-theme="dark"] .analytics-filters { box-shadow: none; }
  :root[data-theme="dark"] .analytics-trend-row { grid-template-columns: minmax(78px, 1fr) minmax(80px, 1.3fr) minmax(75px, .9fr); gap: 8px; font-size: 11px; }
  :root[data-theme="dark"] .analytics-columns { gap: 12px; }
}

@media (max-width: 360px) {
  .top-right > span:not(.status-dot) { display: none; }
}

@media (max-width: 420px) {
  .theme-toggle, .screen-toggle { width: 34px; height: 34px; flex-basis: 34px; }
  :root[data-theme="dark"] .topbar .eyebrow { font-size: 8px !important; }
  :root[data-theme="dark"] .topbar h2 { font-size: 15px !important; }
  :root[data-theme="dark"] .analytics-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-theme="dark"] .analytics-trend-row { grid-template-columns: 72px minmax(54px, 1fr) 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .screen-toggle { transition: none !important; }
}

/* Fullscreen API viewport: browser chrome can only be hidden after a user gesture. */
:root:fullscreen { background: #081321; }
:root:fullscreen body,
:root:fullscreen #root,
:root:fullscreen .layout { min-height: 100vh; min-height: 100dvh; }