/* Visual refinement layer. Loaded after styles.css.
   To go back to the previous look, delete its <link> line in index.html. */

:root {
  color-scheme: dark;
  --bg-color: #0f1318;
  --panel-color: #171c23;
  --row-alt: #1d232b;
  --border-color: #2b333d;
  --text-primary: #eef1f5;
  --text-secondary: #9ba6b4;
  --accent: #5bbbe0;
  --on-accent: #04141c;
  --accent-green: #3fcf8e;
  --accent-amber: #f2b13a;
  --accent-red: #ff5d6e;
  --font-main: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;
}

body.theme-light {
  color-scheme: light;
  --bg-color: #f2f4f7;
  --panel-color: #ffffff;
  --row-alt: #eceff3;
  --border-color: #d3d9e0;
  --text-primary: #151a21;
  --text-secondary: #4a5563;
  --accent: #176582;
  --on-accent: #ffffff;
  --accent-green: #0b7a45;
  --accent-amber: #8a5300;
  --accent-red: #b3102a;
}

@media (prefers-color-scheme: light) {
  body.theme-system {
    color-scheme: light;
    --bg-color: #f2f4f7;
    --panel-color: #ffffff;
    --row-alt: #eceff3;
    --border-color: #d3d9e0;
    --text-primary: #151a21;
    --text-secondary: #4a5563;
    --accent: #176582;
    --on-accent: #ffffff;
    --accent-green: #0b7a45;
    --accent-amber: #8a5300;
    --accent-red: #b3102a;
  }
}

body.contrast-high { --accent: #8be0ff; --on-accent: #000000; }
body.theme-light.contrast-high { --accent: #00415c; --on-accent: #ffffff; }

@media (prefers-color-scheme: light) {
  body.theme-system.contrast-high { --accent: #00415c; --on-accent: #ffffff; }
}

html, body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::placeholder { color: var(--text-secondary); opacity: 0.7; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip-link { background: var(--accent); color: var(--on-accent); }

/* Header and bars */
.board-header { border-bottom: 2px solid var(--accent); }
.board-title { font-weight: 600; letter-spacing: -0.01em; }
.board-clock { color: var(--text-primary); font-weight: 500; letter-spacing: 0.02em; }
.unit-display { color: var(--text-secondary); }

.settings-btn {
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
}
.settings-btn:hover { background: var(--row-alt); border-color: var(--accent); color: var(--text-primary); }

.day-nav-btn { background: transparent; border-radius: var(--radius); font-weight: 600; }
.day-nav-btn:hover { background: var(--row-alt); border-color: var(--accent); }
.day-today-btn { color: var(--accent); border-color: var(--accent); }
.day-today-btn.day-today-active { background: var(--accent); color: var(--on-accent); }
.day-add-btn { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.day-add-btn:hover { background: var(--accent); filter: brightness(1.08); }

.area-chip { background: transparent; border-radius: var(--radius); font-weight: 500; }
.area-chip:hover { background: var(--row-alt); }
.area-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

.progress-chip {
  background: var(--row-alt);
  border-color: var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius);
}
.progress-chip strong { color: var(--accent-amber); }
.progress-zero, .progress-zero strong { color: var(--text-secondary); }
.progress-done { background: transparent; border-color: var(--accent-green); color: var(--accent-green); }

.notice-manage-btn { background: transparent; border-radius: var(--radius); font-weight: 600; }
.notice-manage-btn:hover { background: var(--row-alt); border-color: var(--accent); }

/* Table */
.run-board thead th {
  background: var(--panel-color);
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-color);
}
.run-board tbody tr:nth-child(even) { background-color: transparent; }
.run-board tbody tr:hover { background-color: var(--row-alt); }
.col-room { font-weight: 600; }
.col-building { color: var(--text-secondary); }

.editable-cell:hover { background-color: rgba(91, 187, 224, 0.12); outline: 1px dashed var(--accent); }
.status-cycle-cell:hover { outline: 1px dashed var(--accent); }

.vip-icon { color: var(--accent-amber); font-weight: 700; }
.complaint-icon { color: var(--accent-red); font-weight: 700; }

/* Status badges and chips */
.status-badge { border-radius: 6px; border: 0; font-weight: 600; letter-spacing: 0.05em; padding: 4px 10px; }

.status-pending {
  color: var(--accent-amber);
  background: rgba(242, 177, 58, 0.16);
  background: color-mix(in srgb, var(--accent-amber) 16%, transparent);
  border: 0;
}
.status-prepped {
  color: var(--accent);
  background: rgba(91, 187, 224, 0.16);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 0;
}
.status-delivered {
  color: var(--accent-green);
  background: rgba(63, 207, 142, 0.16);
  background: color-mix(in srgb, var(--accent-green) 16%, transparent);
  border: 0;
}
.status-cleared { color: var(--text-secondary); background: var(--row-alt); border: 0; }
.status-cancd, .status-late {
  color: var(--accent-red);
  background: rgba(255, 93, 110, 0.16);
  background: color-mix(in srgb, var(--accent-red) 16%, transparent);
  border: 0;
}

.flag-chip, .auth-chip { border-radius: 4px; border: 0; font-weight: 700; }
.flag-van {
  color: var(--accent);
  background: rgba(91, 187, 224, 0.16);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.flag-new {
  color: var(--accent-green);
  background: rgba(63, 207, 142, 0.16);
  background: color-mix(in srgb, var(--accent-green) 16%, transparent);
}
.flag-mod {
  color: var(--accent-amber);
  background: rgba(242, 177, 58, 0.16);
  background: color-mix(in srgb, var(--accent-amber) 16%, transparent);
}
.flag-cancel {
  color: var(--accent-red);
  background: rgba(255, 93, 110, 0.16);
  background: color-mix(in srgb, var(--accent-red) 16%, transparent);
}
.auth-chip { background: var(--row-alt); }
.auth-ok { color: var(--text-secondary); }
.auth-wait { color: var(--accent-amber); }
.auth-cancd { color: var(--accent-red); }

.status-pill { border-radius: 6px; }

/* Pop-ups and forms */
.modal-box, .lock-box {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.modal-box h2 { font-weight: 600; letter-spacing: -0.01em; }
.modal-box h3 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }

.modal-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modal-box select,
.modal-box textarea {
  background: var(--bg-color) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
}

.unit-add-row button { background: var(--accent); color: var(--on-accent); border-radius: var(--radius); font-weight: 600; }
.modal-close-btn { background: transparent; border-radius: var(--radius); font-weight: 600; }
.modal-close-btn:hover { background: var(--row-alt); border-color: var(--accent); }
.detail-delete-btn { color: var(--accent-red); border-color: var(--accent-red); }
.detail-delete-btn:hover { border-color: var(--accent-red); }

.settings-nav-btn { border-radius: var(--radius); font-weight: 500; }
.settings-nav-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.theme-option-btn, .a11y-opt-btn { border-radius: var(--radius); }
.theme-option-btn.active, .a11y-opt-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

.pin-keypad button { background: var(--row-alt); border-radius: 10px; font-weight: 500; }
.pin-keypad button:hover { background: var(--border-color); }
.pin-keypad button:active { transform: scale(0.97); }

.toast { border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.toast-error { border-left-color: var(--accent-red); }
.toast-warning { border-left-color: var(--accent-amber); }