/* Shared design tokens cover every role, including TV and modal dialogs. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg:#f4f6fa; --surface:#ffffff; --surface-2:#f5f7fb; --surface-3:#eaf0f7;
  --border:#dce3ed; --text:#19263b; --text-muted:#5d6c82;
  --accent:#b84908; --accent-dim:#fff0e5; --primary:#c34c0b; --primary-text:#ffffff;
  --st-belum:#5e6f86; --st-belum-bg:#edf1f6;
  --st-waiting:#926000; --st-waiting-bg:#fff5da;
  --st-produksi:#245fc1; --st-produksi-bg:#eaf2ff;
  --st-selesai:#167346; --st-selesai-bg:#e5f6ed;
  --st-telat:#c12f42; --st-telat-bg:#ffedf0;
  --radius:16px; --shadow:0 4px 24px rgba(29,47,75,.045);
  --shadow-raised:0 20px 70px rgba(29,47,75,.12);
  --glow:rgba(244,135,66,.12); --cool-glow:rgba(96,141,216,.10);
  --focus:rgba(195,76,11,.20); --overlay:rgba(21,32,51,.38);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#101722; --surface:#182230; --surface-2:#1e2b3c; --surface-3:#26364a;
  --border:#304157; --text:#edf2fa; --text-muted:#a4b3c8;
  --accent:#ffad73; --accent-dim:#3c2b25; --primary:#ffad73; --primary-text:#25180f;
  --st-belum:#a4b3c8; --st-belum-bg:#243245;
  --st-waiting:#f4ca6c; --st-waiting-bg:#393121;
  --st-produksi:#85b5ff; --st-produksi-bg:#20334f;
  --st-selesai:#77d7a5; --st-selesai-bg:#1c382e;
  --st-telat:#ff91a0; --st-telat-bg:#432630;
  --shadow:0 4px 24px rgba(0,0,0,.10); --shadow-raised:0 20px 70px rgba(0,0,0,.3);
  --glow:rgba(233,133,66,.09); --cool-glow:rgba(63,112,183,.12);
  --focus:rgba(255,173,115,.23); --overlay:rgba(3,9,18,.65);
}
body { background:var(--bg); color:var(--text); font-family:Inter,"Segoe UI",system-ui,sans-serif; }
::selection {background:var(--accent-dim);color:var(--accent);}
* {scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
::-webkit-scrollbar-thumb {background:var(--border);}
button, input, select, textarea {font:inherit;}
button, .side-item, .panel, .stat, input, select, textarea {transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;}
button:focus-visible, .side-item:focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
button:disabled {opacity:.55;cursor:wait;}
.theme-toggle {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 13px;flex:none;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:12px;font-weight:650;cursor:pointer;box-shadow:var(--shadow);}
.theme-toggle:hover {background:var(--surface-2);border-color:var(--accent);}
.theme-toggle svg {width:18px;height:18px;flex:none;color:var(--accent);}
#login-screen {position:relative;padding:88px 20px 48px;min-height:100dvh;background:radial-gradient(ellipse at 15% 15%,var(--glow),transparent 50%),radial-gradient(ellipse at 90% 85%,var(--cool-glow),transparent 50%),var(--bg);}
.login-theme {position:absolute;top:24px;right:28px;}
.login-card {max-width:460px;padding:36px;gap:24px;border-radius:24px;box-shadow:var(--shadow-raised);}
.login-brand {display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:10px;font-weight:750;letter-spacing:.19em;}
.login-brand::before {content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);}
.login-head {align-items:flex-start;gap:16px;}
.login-badge {background:var(--primary);color:var(--primary-text);border-radius:14px;box-shadow:0 5px 16px var(--glow);}
.login-title {font-size:22px;line-height:1.3;letter-spacing:-.035em;}
.login-sub {font-size:13px;line-height:1.7;margin-top:10px;}
.login-form {gap:17px;}
.login-form label {font-size:12px;color:var(--text);margin-bottom:8px;}
.login-form input {min-height:46px;}
.login-form .btn {min-height:46px;}
.login-hint {line-height:1.8;padding-top:18px;}
.login-err:empty {display:none;}
.sidebar {width:250px;background:var(--surface);}
.side-head {padding:24px 20px;gap:12px;}
.side-head .app-name {font-size:13px;line-height:1.5;}
.side-role {margin:16px 14px 4px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);font-size:10px;}
.side-role b {font-size:13px;margin-top:6px;}
.side-menu {padding:14px 12px;}
.side-item {padding:12px;margin-bottom:5px;border:1px solid transparent;border-radius:10px;font-size:12.5px;line-height:1.45;}
.side-item.active {border-color:var(--focus);background:var(--accent-dim);}
.side-dot {width:5px;height:5px;}
.side-foot {padding:16px;}
.logout-btn {border-radius:10px;min-height:40px;}
.topbar {height:72px;gap:12px;padding:0 24px;background:var(--surface);}
.topbar .view-title {font-size:16px;letter-spacing:-.025em;min-width:0;}
.topbar .clock {font-size:12px;white-space:nowrap;}
.burger {width:38px;height:38px;border-radius:10px;}
.conn-badge {font-size:10px;padding:6px 9px;white-space:nowrap;}
#topbarVersionBadge {font-size:9px;}
.content {padding:24px;}
.realtime-status {flex:none;padding:9px 24px;border-bottom:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);font-size:11px;line-height:1.6;}
.realtime-status::before {content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--st-selesai);margin-right:8px;}
.realtime-status[data-state="stale"] {background:var(--st-telat-bg);color:var(--st-telat);}
.realtime-status[data-state="stale"]::before {background:var(--st-telat);}
.realtime-status[data-state="pending"] {background:var(--st-waiting-bg);color:var(--st-waiting);}
.realtime-status[data-state="pending"]::before {background:var(--st-waiting);}
.panel {padding:22px;margin-bottom:20px;box-shadow:var(--shadow);}
.panel-title {font-size:14px;font-weight:700;margin-bottom:18px;line-height:1.5;}
.stat {border-radius:16px;padding:20px;box-shadow:var(--shadow);}
.stat .n {letter-spacing:-.04em;}
.stat .l {font-size:10px;line-height:1.5;margin-top:7px;}
.form-grid {gap:18px;}
input, select, textarea {padding:11px 12px;border-radius:10px;background:var(--surface-2);font-size:13px;line-height:1.4;}
input::placeholder, textarea::placeholder {color:var(--text-muted);opacity:.85;}
input:focus,select:focus,textarea:focus {outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus);}
input[type="checkbox"],input[type="radio"] {accent-color:var(--primary);}
.btn {border-radius:10px;padding:11px 16px;font-size:12.5px;}
.btn-primary,.zone-tab.active,.slot-btn.selected {background:var(--primary);color:var(--primary-text);}
.btn-danger {background:var(--st-telat-bg);color:var(--st-telat);border:1px solid var(--st-telat);}
.btn-sm {padding:7px 11px;font-size:11.5px;}
th {padding:12px;background:var(--surface-2);font-size:10px;line-height:1.5;}
td {padding:13px 12px;font-size:12.5px;line-height:1.55;}
tbody tr:hover {background:var(--surface-2);}
.table-wrap {border:1px solid var(--border);border-radius:12px;}
.vcard {padding:16px;border-radius:14px;}
.vcard .vloc {background:var(--surface);}
.stall-box {border-radius:14px;padding:14px;min-height:136px;}
.slot-btn.available,.alert-icon-box.success {color:var(--st-selesai);}
.slot-btn.occupied,.alert-icon-box.danger {color:var(--st-telat);}
.alert-icon-box.warning {color:var(--st-waiting);}
.tabs {gap:4px;}
.tab-btn {font-size:12px;padding:12px 15px;}
.tab-btn.active {background:var(--accent-dim);border-radius:10px 10px 0 0;}
.modal-overlay,.alert-overlay {background:var(--overlay);backdrop-filter:blur(6px);}
.modal,.alert-card {border-radius:20px;box-shadow:var(--shadow-raised);padding:26px;}
#toast {background:var(--surface-3);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-raised);}
#app-boot-loader {background:radial-gradient(ellipse at 50% 40%,var(--glow),transparent 60%),var(--bg);}
.boot-title,.boot-status-text {color:var(--text);}
.boot-progress-wrap {background:var(--border);box-shadow:none;}
@keyframes blinkR {0%,100%{box-shadow:0 0 0 0 transparent;}50%{box-shadow:0 0 0 3px var(--st-telat);}}
@media(min-width:1500px) {.content{padding:30px 36px;}.topbar{padding:0 36px;}}
@media(max-width:1100px) {#topbarVersionBadge{display:none;}.topbar{padding:0 16px;gap:10px;}.topbar .clock{display:none;}}
@media(max-width:768px) {
  .topbar{height:auto;min-height:64px;padding:12px;gap:8px;flex-wrap:wrap;}
  .topbar .view-title{flex:1;font-size:14px;}
  #topbarConnBadge{order:6;width:100%;justify-content:center;border:0;background:var(--surface-2);font-size:10px;}
  #btnRefreshApp{margin-left:0!important;}
  .topbar .theme-toggle{width:38px;min-height:38px;padding:8px;border-radius:10px;}
  .topbar .theme-toggle span{display:none;}
  .content{padding:14px;}.panel{padding:16px;border-radius:14px;}.stat{padding:16px;}
  .table-wrap{border:0;border-radius:0;}.table-wrap td{padding:7px 0;overflow-wrap:anywhere;}
  .table-wrap td::before{flex-shrink:0;}.form-grid{grid-template-columns:1fr;}
  .login-card{padding:26px;}.login-title{font-size:20px;}.login-theme{top:18px;right:20px;}
  .modal{padding:20px;}.tabs{overflow-x:auto;}.tab-btn{white-space:nowrap;}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}