/* Show Screen night mode. Loaded after the existing page styles. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --surface: rgba(22, 27, 34, .92);
  --surface-solid: #161b22;
  --text: #f0f3f6;
  --muted: #9da7b3;
  --line: rgba(240, 246, 252, .10);
  --line-strong: rgba(240, 246, 252, .18);
  --shadow: 0 18px 55px rgba(0, 0, 0, .36);
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, .24);
  --accent: #f0f3f6;
  --accent2: #c8d1da;
  --danger: #ff7b72;
  --danger-bg: rgba(248, 81, 73, .12);
  --success: #56d364;
}

html[data-theme="dark"] body {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 72, 150, .08), transparent 25%),
    radial-gradient(circle at 86% 12%, rgba(59, 130, 246, .09), transparent 27%),
    radial-gradient(circle at 72% 80%, rgba(30, 200, 160, .05), transparent 25%),
    linear-gradient(145deg, #0d1117 0%, #111720 100%) !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .login-view {
  color: var(--text);
}

/* Light icon tiles stay readable when the surrounding dashboard uses night mode. */
html[data-theme="dark"] .section-icon {
  color: #1f2937 !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .dialog-card,
html[data-theme="dark"] .entry-card,
html[data-theme="dark"] .day-venue-block,
html[data-theme="dark"] .task-row,
html[data-theme="dark"] .employee-row,
html[data-theme="dark"] .approval-row,
html[data-theme="dark"] .venue-row,
html[data-theme="dark"] .readonly-value,
html[data-theme="dark"] .duration-box,
html[data-theme="dark"] .workday-correction-box,
html[data-theme="dark"] .profile-section,
html[data-theme="dark"] .employee-profile-summary,
html[data-theme="dark"] .rate-history-row,
html[data-theme="dark"] .grade-chip,
html[data-theme="dark"] .work-reference-row,
html[data-theme="dark"] .online-row,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .admin-note,
html[data-theme="dark"] .admin-comment,
html[data-theme="dark"] .receipt-preview-body,
html[data-theme="dark"] .help-center-card,
html[data-theme="dark"] .install-help-card,
html[data-theme="dark"] .avatar-lightbox-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .login-card {
  background: rgba(22, 27, 34, .86) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

html[data-theme="dark"] .login-card::after {
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02), rgba(64,111,255,.16)) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: var(--text) !important;
  background: #111820 !important;
  border-color: var(--line-strong) !important;
  caret-color: var(--text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #788493 !important;
  opacity: 1;
}

html[data-theme="dark"] input:disabled,
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
  color: #aab3bf !important;
  background: #171e27 !important;
  opacity: .9;
}

html[data-theme="dark"] option {
  color: var(--text);
  background: #161b22;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] small,
html[data-theme="dark"] .entry-type,
html[data-theme="dark"] .month-status-line {
  color: var(--muted) !important;
}

html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .admin-nav-btn,
html[data-theme="dark"] .rates-tab,
html[data-theme="dark"] .view-toggle-btn,
html[data-theme="dark"] .dashboard-layout-actions button,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .help-topic-btn {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .035) !important;
  border-color: var(--line-strong) !important;
}

html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .admin-nav-btn:hover,
html[data-theme="dark"] .rates-tab:hover,
html[data-theme="dark"] .view-toggle-btn:hover,
html[data-theme="dark"] .dashboard-layout-actions button:hover,
html[data-theme="dark"] .icon-btn:hover,
html[data-theme="dark"] .help-topic-btn:hover {
  background: rgba(255, 255, 255, .08) !important;
}

html[data-theme="dark"] .admin-nav-btn.is-active,
html[data-theme="dark"] .rates-tab.is-active,
html[data-theme="dark"] .view-toggle-btn.is-active,
html[data-theme="dark"] .employee-row.active {
  background: #293241 !important;
  color: #fff !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-nav-accent {
  background: #244f40 !important;
  color: #c6f2dc !important;
  border-color: #3b725b !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-nav-accent:hover {
  background: #dce2e8 !important;
  border-color: #dce2e8 !important;
}

html[data-theme="dark"] .btn-danger {
  color: #ffb4ae !important;
  background: rgba(248, 81, 73, .10) !important;
  border-color: rgba(255, 123, 114, .30) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  color: var(--text);
  border-color: var(--line) !important;
}

html[data-theme="dark"] thead th,
html[data-theme="dark"] .summary-table thead th {
  background: #171e27 !important;
  color: #c9d1d9 !important;
}

html[data-theme="dark"] tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, .018);
}

html[data-theme="dark"] tbody tr:hover td {
  background-color: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .divider,
html[data-theme="dark"] hr {
  border-color: var(--line) !important;
}

html[data-theme="dark"] dialog::backdrop {
  background: rgba(0, 0, 0, .42);
  backdrop-filter: none;
}

/* Keep late-added screens consistent with the dark palette.  These selectors
   are intentionally scoped to dark mode: the light theme remains unchanged. */
html[data-theme="dark"] dialog {
  background: transparent !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .summary-table tbody tr,
html[data-theme="dark"] .summary-table tbody tr.summary-active-row,
html[data-theme="dark"] .employee-report-table tbody tr,
html[data-theme="dark"] .employee-report-table tfoot tr {
  background: transparent !important;
}

html[data-theme="dark"] .summary-table tbody td,
html[data-theme="dark"] .employee-report-table tbody td,
html[data-theme="dark"] .employee-report-table tfoot td {
  background: transparent !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .summary-table tbody tr.summary-active-row:hover td,
html[data-theme="dark"] .summary-table tbody tr.summary-active-row:focus-visible td {
  background: rgba(255, 255, 255, .06) !important;
}

html[data-theme="dark"] .employee-profile-summary,
html[data-theme="dark"] .profile-section,
html[data-theme="dark"] .profile-stat,
html[data-theme="dark"] .employee-table-view,
html[data-theme="dark"] .report-comment,
html[data-theme="dark"] .disclosure,
html[data-theme="dark"] .footer-actions {
  color: var(--text) !important;
}

html[data-theme="dark"] .profile-stat,
html[data-theme="dark"] .profile-stat-positive {
  background: #1b222c !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .profile-stat-positive strong {
  color: #56d364 !important;
}

html[data-theme="dark"] .view-toggle,
html[data-theme="dark"] .help-mode-tabs,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .report-comment,
html[data-theme="dark"] .footer-actions {
  background: #161d26 !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .view-toggle-btn,
html[data-theme="dark"] .help-mode-btn {
  color: var(--muted) !important;
}

html[data-theme="dark"] .view-toggle-btn.is-active,
html[data-theme="dark"] .help-mode-btn.is-active {
  background: #293241 !important;
  color: #fff !important;
  box-shadow: none;
}

html[data-theme="dark"] .rates-page-header,
html[data-theme="dark"] .admin-nav {
  background: rgba(13, 17, 23, .96) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .day-venue-block,
html[data-theme="dark"] .venue-summary,
html[data-theme="dark"] .task-row,
html[data-theme="dark"] .admin-task-row,
html[data-theme="dark"] .task-display-row,
html[data-theme="dark"] .work-reference-row,
html[data-theme="dark"] .grade-chip,
html[data-theme="dark"] .position-row,
html[data-theme="dark"] .taxi-section,
html[data-theme="dark"] .taxi-trip-card,
html[data-theme="dark"] .admin-taxi-trip,
html[data-theme="dark"] .fine-card,
html[data-theme="dark"] .bug-report-card,
html[data-theme="dark"] .help-faq-item,
html[data-theme="dark"] .help-guide-topic {
  background: #1b222c !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .help-mode-tabs,
html[data-theme="dark"] .help-context-banner,
html[data-theme="dark"] .help-category,
html[data-theme="dark"] .help-answer,
html[data-theme="dark"] .help-guide-topic p,
html[data-theme="dark"] .help-guide-topic li,
html[data-theme="dark"] .help-answer li {
  color: var(--muted) !important;
}

html[data-theme="dark"] .help-context-banner {
  background: #222b36 !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .help-category,
html[data-theme="dark"] .task-chip,
html[data-theme="dark"] .locked-chip,
html[data-theme="dark"] .lock-note {
  background: #293241 !important;
  color: #c9d1d9 !important;
}

html[data-theme="dark"] .meal-suggestion,
html[data-theme="dark"] .city-change-box,
html[data-theme="dark"] .workday-correction-box,
html[data-theme="dark"] .admin-note,
html[data-theme="dark"] .review-info,
html[data-theme="dark"] .duration-box,
html[data-theme="dark"] .readonly-value {
  background: #222b36 !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .entry-card.corrected,
html[data-theme="dark"] .entry-card,
html[data-theme="dark"] .admin-comment {
  background: #1b222c !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .entry-comment,
html[data-theme="dark"] .help-answer,
html[data-theme="dark"] .admin-comment,
html[data-theme="dark"] .dialog-card label {
  color: var(--muted) !important;
}

html[data-theme="dark"] .dialog-actions {
  border-color: var(--line) !important;
}

/* employee.css uses ID-qualified light-theme rules, so mirror that
   specificity here instead of relying on the generic component overrides. */
html[data-theme="dark"] #employeeView .employee-finances,
html[data-theme="dark"] #employeeView .finance-item,
html[data-theme="dark"] #employeeView .report-period,
html[data-theme="dark"] #employeeView .disclosure,
html[data-theme="dark"] #employeeView .employee-menu-items,
html[data-theme="dark"] #employeeView .entry-card,
html[data-theme="dark"] #employeeView .venue-summary,
html[data-theme="dark"] #employeeView .footer-actions {
  background: #1b222c !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="dark"] #employeeView .finance-payable,
html[data-theme="dark"] #employeeView .disclosure[open] > summary {
  border-color: var(--line) !important;
}

html[data-theme="dark"] #employeeView .task-chip,
html[data-theme="dark"] #employeeView .badge,
html[data-theme="dark"] #employeeView .expense-meal,
html[data-theme="dark"] #employeeView .expense-taxi {
  background: #293241 !important;
  color: #d7dee7 !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] #employeeView #addEventBtn {
  background: #f0f3f6 !important;
  color: #11151c !important;
  border-color: #f0f3f6 !important;
}

html[data-theme="dark"] #eventForm,
html[data-theme="dark"] #profileForm,
html[data-theme="dark"] #eventForm > .dialog-header,
html[data-theme="dark"] #profileForm > .dialog-header,
html[data-theme="dark"] #eventForm > .dialog-actions,
html[data-theme="dark"] #profileForm > .dialog-actions {
  background: #161d26 !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] #eventForm .task-row,
html[data-theme="dark"] #eventForm .day-venue-block,
html[data-theme="dark"] #eventForm .venue-dropdown,
html[data-theme="dark"] #eventForm .venue-dropdown button,
html[data-theme="dark"] #eventForm .task-row .x2-check,
html[data-theme="dark"] #profileForm .profile-section,
html[data-theme="dark"] #profileForm .avatar-preview {
  background: #1b222c !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] #eventForm .venue-dropdown button:hover,
html[data-theme="dark"] #eventForm .venue-dropdown button[aria-selected="true"] {
  background: #293241 !important;
}

html[data-theme="dark"] #eventForm .venue-city-switch select {
  background: #222b36 !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] #adminView .admin-report-table tbody tr,
html[data-theme="dark"] #adminView .employee-report-table tbody tr,
html[data-theme="dark"] #adminView .stats-table tbody tr,
html[data-theme="dark"] #adminView .summary-table tbody tr {
  background: #1b222c !important;
  color: var(--text) !important;
}

html[data-theme="dark"] #adminView .admin-report-table tbody td,
html[data-theme="dark"] #adminView .employee-report-table tbody td,
html[data-theme="dark"] #adminView .stats-table tbody td,
html[data-theme="dark"] #adminView .summary-table tbody td {
  background: transparent !important;
  color: var(--text) !important;
}

html[data-theme="dark"] #employeeView .date-shortcuts,
html[data-theme="dark"] #adminView .dashboard-layout-toolbar {
  background: #1b222c !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] #employeeView .date-range-inputs label {
  color: var(--muted) !important;
}

html[data-theme="dark"] #employeeView .date-shortcuts .btn,
html[data-theme="dark"] #adminView .dashboard-layout-actions button,
html[data-theme="dark"] #adminView .dashboard-order-btn,
html[data-theme="dark"] #adminView .dashboard-collapse-btn {
  background: #293241 !important;
  color: #d7dee7 !important;
  border-color: var(--line-strong) !important;
}

html[data-theme="dark"] #employeeView .date-shortcuts .btn:hover,
html[data-theme="dark"] #adminView .dashboard-layout-actions button:hover,
html[data-theme="dark"] #adminView .dashboard-order-btn:hover,
html[data-theme="dark"] #adminView .dashboard-collapse-btn:hover {
  background: #344154 !important;
}

/* Restore the brand green for primary actions in night mode. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-nav-accent {
  background: linear-gradient(135deg, #237744, #2f9a5b) !important;
  color: #fff !important;
  border-color: #2f9a5b !important;
  box-shadow: 0 9px 20px rgba(35, 119, 68, .24) !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-nav-accent:hover {
  background: linear-gradient(135deg, #2f9a5b, #3aa866) !important;
  border-color: #3aa866 !important;
}

html[data-theme="dark"] .training-brand img {
  filter: none !important;
}

html[data-theme="dark"] .training-header,
html[data-theme="dark"] .training-footer {
  border-color: var(--line) !important;
}

html[data-theme="dark"] .training-header .header-label,
html[data-theme="dark"] .training-header .back-to-report,
html[data-theme="dark"] .training-tabs a,
html[data-theme="dark"] .search-label,
html[data-theme="dark"] .card-meta,
html[data-theme="dark"] .material-card p,
html[data-theme="dark"] .card-bottom {
  color: var(--muted) !important;
}

html[data-theme="dark"] .training-tabs a[aria-current="page"] {
  color: #45a66a !important;
  border-color: #2f9a5b !important;
}

html[data-theme="dark"] .material-card,
html[data-theme="dark"] .lesson-table-wrap,
html[data-theme="dark"] .lesson-image,
html[data-theme="dark"] .source-link,
html[data-theme="dark"] .editorial-notes,
html[data-theme="dark"] .image-scroll {
  background: #1b222c !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .material-card h3,
html[data-theme="dark"] .lesson-body h1,
html[data-theme="dark"] .lesson-body h2,
html[data-theme="dark"] .lesson-body h3,
html[data-theme="dark"] .lesson-heading h1,
html[data-theme="dark"] .material-card strong {
  color: var(--text) !important;
}

html[data-theme="dark"] .start-card {
  background: #203a2b !important;
  border-color: rgba(69, 166, 106, .35) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .start-card span,
html[data-theme="dark"] .start-card strong,
html[data-theme="dark"] .start-card b {
  color: #d9f2df !important;
}

html[data-theme="dark"] .category-filters button,
html[data-theme="dark"] .favorite {
  background: #1b222c !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .category-filters button[aria-pressed="true"],
html[data-theme="dark"] .favorite.is-saved {
  background: #237744 !important;
  color: #fff !important;
  border-color: #2f9a5b !important;
}

html[data-theme="dark"] .button.primary,
html[data-theme="dark"] .training-header .back-to-report {
  background: linear-gradient(135deg, #237744, #2f9a5b) !important;
  color: #fff !important;
  border-color: #2f9a5b !important;
}

html[data-theme="dark"] .training-header a,
html[data-theme="dark"] .training-tabs a,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .button {
  text-decoration: none !important;
}

html[data-theme="dark"] .badge {
  border-color: rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] .offline-banner {
  color: #f6e7b0;
  background: rgba(161, 98, 7, .20) !important;
  border-color: rgba(245, 190, 80, .24) !important;
}

html[data-theme="dark"] .error-text {
  color: #ff9b94 !important;
}

/* The RGB Show Screen mark is a brand asset. Keep its original colours in both themes. */
html[data-theme="dark"] .header-logo-desktop,
html[data-theme="dark"] .header-logo-mobile,
html[data-theme="dark"] img[src*="show-screen-black"],
html[data-theme="dark"] img[src*="show-screen-icon"] {
  filter: none !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] #adminView .topbar {
  background: rgba(22, 27, 34, .96) !important;
  border-color: rgba(240, 246, 252, .16) !important;
  color: #f0f3f6 !important;
}

html[data-theme="dark"] .attention-card,
html[data-theme="dark"] .attention-person,
html[data-theme="dark"] .attention-row,
html[data-theme="dark"] .bug-report-card {
  background: #1b222c !important;
  color: #f0f3f6 !important;
  border-color: rgba(240, 246, 252, .17) !important;
}

html[data-theme="dark"] .attention-person.attention-blocking,
html[data-theme="dark"] .attention-row.attention-blocking {
  background: #2a2025 !important;
  border-color: rgba(255, 123, 114, .42) !important;
}

html[data-theme="dark"] .attention-detail-row,
html[data-theme="dark"] .bug-report-card.is-new,
html[data-theme="dark"] .bug-report-card.is-progress,
html[data-theme="dark"] .bug-report-card.is-fixed {
  background: #222b36 !important;
  color: #f0f3f6 !important;
}

html[data-theme="dark"] .attention-person-head strong,
html[data-theme="dark"] .bug-report-card strong,
html[data-theme="dark"] .bug-report-card p,
html[data-theme="dark"] .attention-detail-row strong {
  color: #f7f9fb !important;
}

html[data-theme="dark"] .dashboard-order-btn,
html[data-theme="dark"] .dashboard-collapse-btn,
html[data-theme="dark"] .dashboard-layout-actions button {
  background: #e9eef4 !important;
  color: #18202a !important;
  border-color: #e9eef4 !important;
}

html[data-theme="dark"] ::-webkit-scrollbar {
  width:0.6875rem;
  height:0.6875rem;
}
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #39424e;
  border: 3px solid #0d1117;
  border-radius:62.4375rem;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4c5664; }

.theme-toggle {
  position: fixed;
  right:max(1rem, env(safe-area-inset-right));
  bottom:max(4.875rem, calc(env(safe-area-inset-bottom) + 3.875rem));
  z-index: 10050;
  width:3rem;
  height:3rem;
  display: grid;
  place-items: center;
  padding:0;
  border: 1px solid rgba(18, 21, 27, .14);
  border-radius:1rem;
  background: rgba(255, 255, 255, .92);
  color: #161b22;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size:max(11px,1.25rem);
  line-height:1;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle:active { transform: translateY(0) scale(.96); }
.theme-toggle:focus-visible { outline: 3px solid rgba(59,130,246,.35); outline-offset: 3px; }

html[data-theme="dark"] .theme-toggle {
  color: #f0f3f6;
  background: rgba(22, 27, 34, .94);
  border-color: rgba(240, 246, 252, .16);
  box-shadow: 0 12px 34px rgba(0,0,0,.40);
}

@media (max-width: 640px) {
  .theme-toggle {
    right:max(0.75rem, env(safe-area-inset-right));
    bottom:max(4.375rem, calc(env(safe-area-inset-bottom) + 3.625rem));
    width:2.75rem;
    height:2.75rem;
    border-radius:0.875rem;
  }
}

@media print {
  .theme-toggle { display: none !important; }
}

html[data-theme="dark"] #eventForm .mounting-options .checkbox-label,
html[data-theme="dark"] #eventForm .altitude-check { background:#252e39; border-color:var(--line-strong); }
html[data-theme="dark"] #eventForm .altitude-price { color:#c9b9ef; }