/* Public-entry and employee surfaces. The shared color-mode runtime owns the
   preference, OS following, palette tokens and accessible selector. These
   overrides are color-only except for fitting that selector in public headers.
   Keep this file after each page's existing styles. Light retains those styles. */
@media screen {
body[data-color-page] > header {
  flex-wrap: wrap;
  gap: 10px 16px;
  height: auto !important;
  min-height: 72px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
body[data-color-page="admin-login"] > header,
body[data-color-page="employee"]:has(#loginView:not([hidden])) > header { min-height: 80px; }
body[data-color-page] > header > .public-color-mode-control {
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}
body[data-color-page] > header > .public-color-mode-control:empty { display: none; }
@media (max-width: 600px) {
  body[data-color-page] > header { min-height: 68px; gap: 8px 12px; }
  body[data-color-page="admin-login"] > header,
  body[data-color-page="employee"]:has(#loginView:not([hidden])) > header { min-height: 68px; }
}

/* A mobile employee header now has one additional control. Let its wrapped
   rows scroll normally, with the existing pane tabs sticky at the viewport top;
   a fixed 72px tab offset would otherwise overlap a taller wrapped header. */
@media (max-width: 780px) {
  body[data-color-page="employee"] > header { position: static; }
  body[data-color-page="employee"] .space-tabs { top: 0; }
}

/* Inherited aliases bridge the older feature styles without changing their
   account-theme choices or the global --cm-* palette. */
html[data-color-mode="dark"] body[data-color-page] {
  --bg: var(--cm-bg);
  --paper: var(--cm-surface);
  --panel: var(--cm-surface);
  --ink: var(--cm-text);
  --text: var(--cm-text);
  --muted: var(--cm-muted);
  --line: var(--cm-border);
  --border: var(--cm-border);
  --border-color: var(--cm-border);
  --blue: var(--cm-accent);
  --blue-dark: var(--cm-accent);
  --navy: var(--cm-accent);
  --green: var(--cm-success);
  --gold: var(--cm-warning);
  --theme-accent: var(--cm-accent);
  --soft: var(--cm-surface-muted);
  --shadow: 0 18px 50px rgb(0 0 0 / 28%);
  --gele-dialog-background: var(--cm-surface-raised);
  min-height: 100vh;
  background: var(--cm-bg) !important;
  color: var(--cm-text) !important;
  color-scheme: dark;
}

/* Entry pages, including login/register switching and company selection. */
html[data-color-mode="dark"] body[data-color-page] :where(
  .portal-header, .login-card, .company-expired,
  .info-card, .section-card, .space-summary > div, .space-job,
  .space-interview-entry, .confirmation-card, .prejob-panel,
  .pa-panel, .pa-project, #interviewRegistration, #registrationSuccess
) {
  background: var(--cm-surface) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}
html[data-color-mode="dark"] body[data-color-page] :where(
  .portal-brand, .login-copy h1, .login-card h2, .login-card label,
  #spaceRegister > h2, .space-identity strong, .section-head h2,
  .work-reports-total, .work-reports-summary > strong,
  .work-reports-total-main strong, .pa-jobs, .pa-status
) { color: var(--cm-text) !important; }
html[data-color-mode="dark"] body[data-color-page] :where(
  .login-copy p, .login-card-head p, .login-card > h2, .login-help,
  .company-selector small, .password-sms-status, .login-card > .eyebrow,
  #spaceRegister > p:not([role="status"]), #spaceRegister .space-check,
  .profile-actions p, .section-head > small, .section-head span,
  .space-heading p, .space-empty, .space-muted, .space-row p, .space-row small,
  .space-job p, .space-identity span, .space-detail dt,
  .space-pane .section-card > p, .space-summary small, .space-banner p,
  .space-interview-entry p, .term-line small, .info-card small, .info-card p,
  .empty-hours, .hours-row small, .smart-shortcuts small,
  .work-reports-muted, .work-reports-empty, .work-reports-summary,
  .work-reports-self-project small, .work-reports-row p, .work-reports-row small,
  .work-reports-detail dt, .work-reports-history summary,
  .work-reports-total-main span, .work-reports-total-detail,
  .work-reports-period label, .work-reports-review legend,
  .work-reports-table th, .work-reports-table td small,
  .prejob-note, .prejob-empty, .prejob-heading p, .prejob-detail-heading p,
  .prejob-history summary, .intro p:last-child, .privacy-disclosure,
  .rate-field small, footer, .access-footer
) { color: var(--cm-muted) !important; }
html[data-color-mode="dark"] body[data-color-page] :where(
  a, .eyebrow, .info-card strong b, .section-head > strong, .hours-total,
  .shortcut-edit, .privacy-disclosure summary, .prejob-status,
  .prejob-roster .prejob-record, .prejob-roster th button
) { color: var(--cm-accent); }

/* Native field surfaces and validation. :user-invalid avoids showing an error
   before a person has interacted; required, disabled and autocomplete remain
   under the original form/OTP scripts and browser behavior. */
html[data-color-mode="dark"] body[data-color-page] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea
) {
  background-color: var(--cm-surface) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
  caret-color: var(--cm-text);
  color-scheme: dark;
}
html[data-color-mode="dark"] body[data-color-page] :where(input, textarea)::placeholder {
  color: var(--cm-muted) !important;
  opacity: 1;
}
html[data-color-mode="dark"] body[data-color-page] :where(input, select, textarea):where(:disabled, [readonly]) {
  background-color: var(--cm-surface-muted) !important;
  color: var(--cm-muted) !important;
}
html[data-color-mode="dark"] body[data-color-page] :where(input, select, textarea):user-invalid {
  border-color: var(--cm-danger) !important;
}
html[data-color-mode="dark"] body[data-color-page] :where(input, select, textarea):autofill {
  -webkit-text-fill-color: var(--cm-text);
  box-shadow: 0 0 0 1000px var(--cm-surface) inset !important;
  caret-color: var(--cm-text);
}
html[data-color-mode="dark"] body[data-color-page] :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--cm-accent) !important;
  color-scheme: dark;
}
html[data-color-mode="dark"] body[data-color-page] :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--cm-focus) !important;
  outline-offset: 3px;
}
html[data-color-mode="dark"] body[data-color-page] input[type="file"]::file-selector-button {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}

/* Secondary/primary actions share the same high-contrast pair. Important is
   limited to paint properties so legacy ID selectors cannot leave a pale
   field, black label or white button behind after a lazy render. */
html[data-color-mode="dark"] body[data-color-page] :where(
  button, .space-register-link, .space-interview-link, .pa-button
) {
  background-color: var(--cm-surface-raised) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}
html[data-color-mode="dark"] body[data-color-page] :where(
  button, .space-register-link, .space-interview-link, .pa-button
):hover:not(:disabled) { background-color: var(--cm-surface-muted) !important; }
html[data-color-mode="dark"] body[data-color-page] :where(
  .login-button:not(#sendSms):not([data-register-sms]),
  .space-form [type="submit"], .space-actions button, .space-job button,
  .password-dialog [type="submit"], .chat-compose button,
  .work-reports-primary, .primary-button, .pa-primary,
  .space-interview-link, .company-expired a, #submitRegistration
) {
  background: var(--cm-accent) !important;
  color: var(--cm-on-accent) !important;
  border-color: var(--cm-accent) !important;
}
html[data-color-mode="dark"] body[data-color-page] :where(
  .login-button:not(#sendSms):not([data-register-sms]),
  .space-form [type="submit"], .space-actions button, .space-job button,
  .password-dialog [type="submit"], .chat-compose button,
  .work-reports-primary, .primary-button, .pa-primary,
  .space-interview-link, .company-expired a, #submitRegistration
):hover:not(:disabled) {
  background: var(--cm-accent) !important;
  box-shadow: inset 0 0 0 2px var(--cm-on-accent);
}
html[data-color-mode="dark"] body[data-color-page] :where(
  .password-link, .space-register-link, [data-back-login], .shortcut-edit
) { background: transparent !important; color: var(--cm-accent) !important; }
html[data-color-mode="dark"] body[data-color-page] :where(
  .password-link, .space-register-link, [data-back-login], .shortcut-edit
):hover:not(:disabled) { background: var(--cm-surface-muted) !important; }

/* Dialogs, sticky Close bars and panels are created after login or on demand. */
html[data-color-mode="dark"] body[data-color-page] :where(
  dialog, .space-dialog, .password-dialog, .work-reports-dialog, .pa-dialog,
  .prejob-progress-dialog, .theme-dialog, .company-chat-picker, .company-pet-dialog,
  .interview-qr-dialog, .gele-close-bar, .gele-close-header,
  .prejob-dialog-heading, .prejob-dialog-footer
) {
  background: var(--cm-surface-raised) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}
html[data-color-mode="dark"] body[data-color-page] dialog::backdrop { background: rgb(0 0 0 / 68%); }
html[data-color-mode="dark"] body[data-color-page] :where(
  .password-dialog p, .password-dialog label, .space-form label,
  .work-reports-form label, .theme-heading p, .theme-footer span,
  .company-pet-dialog p, .pet-photo-tools p, .company-chat-picker p
) { color: var(--cm-muted) !important; }
html[data-color-mode="dark"] body[data-color-page] :where(
  .pa-panel, .pa-dialog
) {
  --pa-ink: var(--cm-text);
  --pa-subtle: var(--cm-muted);
  --pa-line: var(--cm-border);
  --pa-surface: var(--cm-surface-muted);
}

/* Self-service cards, history, selectable tabs, progress and notices. */
html[data-color-mode="dark"] body[data-color-page] :where(
  .welcome-card, .space-banner, .smart-shortcuts, .space-finance-chat,
  .space-tabs, .term-note, .benefit-note, .pa-notice, .pa-empty,
  .work-reports-preview, .work-reports-status, .space-status,
  .registration-company, .prejob-record, .prejob-day, .prejob-attendance span,
  .prejob-roster th, .chat-messages, .chat-suggestion
) {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}
html[data-color-mode="dark"] body[data-color-page] :where(
  .welcome-card p, .welcome-card .eyebrow, .term-note, .benefit-note,
  .pa-notice small, .pa-muted, .pa-eyebrow, .pa-details dt, .pa-empty,
  .prejob-record > span:nth-child(2)
) { color: var(--cm-muted) !important; }
html[data-color-mode="dark"] body[data-color-page] :where(
  .space-tabs button.active, .employee-task-tabs button.active,
  .shortcut-items button.pinned, .prejob-record.is-selected,
  .prejob-roster-tabs button[aria-pressed="true"],
  .theme-grid button[aria-pressed="true"], .company-pet-grid button[aria-pressed="true"]
) {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-accent) !important;
  border-color: var(--cm-accent) !important;
  box-shadow: inset 0 0 0 1px var(--cm-accent);
}
html[data-color-mode="dark"] body[data-color-page] :where(
  .hours-row, .space-row, .space-job, .space-fields > fieldset,
  .receiving-fields, .work-reports-row, .work-reports-shift,
  .work-reports-review, .work-reports-history, .work-reports-self-project,
  .prejob-detail, .prejob-history, .prejob-day-entry, .prejob-manual-form,
  .prejob-table-scroll, .employee-notice-card, .pet-photo-tools,
  .option-fields, .theme-grid button, .company-pet-grid button,
  td, th
) { border-color: var(--cm-border) !important; }
html[data-color-mode="dark"] body[data-color-page] .prejob-day-entry { background: var(--cm-surface) !important; }
html[data-color-mode="dark"] body[data-color-page] :where(
  .employee-task-summary, .status-pill, .benefit-list span, .privacy-points span,
  .card-icon, .prejob-day.is-learned, .work-reports-status.is-accounted
) {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-success) !important;
  border-color: var(--cm-border) !important;
}
html[data-color-mode="dark"] body[data-color-page] :where(
  .prejob-count, .prejob-detail-heading > strong, .chat-status
) { color: var(--cm-success) !important; }
html[data-color-mode="dark"] body[data-color-page] :where(.card-icon.blue, .pa-badge) {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-accent) !important;
}
html[data-color-mode="dark"] body[data-color-page] :where(
  .prejob-conflict, .prejob-recovery, .prejob-attendance .is-marked,
  .work-reports-warning, .work-reports-status.is-returned, .card-icon.gold
) {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-warning) !important;
  border-color: var(--cm-warning) !important;
}
html[data-color-mode="dark"] body[data-color-page] :where(
  .form-message, .space-error, .password-error, .work-reports-error,
  .shortcut-message, .company-chat-picker .error, #registrationMessage, .required-mark
) { color: var(--cm-danger) !important; }
html[data-color-mode="dark"] body[data-color-page] :where(.pa-error, .status-pill.off) {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-danger) !important;
  border-color: var(--cm-danger) !important;
}
html[data-color-mode="dark"] body[data-color-page] .benefit-list .empty { color: var(--cm-muted) !important; }

/* Public interview form: choice states remain distinguishable without color
   alone (the original checked state and heavier label remain in place). */
html[data-color-mode="dark"] body[data-color-page="interview-registration"] .choice-toggle span {
  background: var(--cm-surface) !important;
  color: var(--cm-muted) !important;
  border-color: var(--cm-border) !important;
}
html[data-color-mode="dark"] body[data-color-page="interview-registration"] .choice-toggle input:checked + span {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-accent) !important;
  border-color: var(--cm-accent) !important;
  box-shadow: inset 0 0 0 1px var(--cm-accent);
}
html[data-color-mode="dark"] body[data-color-page="interview-registration"] .choice-toggle input:focus-visible + span {
  outline: 3px solid var(--cm-focus);
  outline-offset: 3px;
}

/* Employee messenger, lazy picker, pet menu, receipts and notification inbox. */
html[data-color-mode="dark"] body[data-color-page="employee"] :where(
  .company-chat, .company-chat .company-room-heading, .company-chat .company-composer,
  .company-chat .company-message, .chat-message, .company-chat-picker .candidates label,
  .employee-notices, .employee-notice-card
) {
  background: var(--cm-surface) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}
html[data-color-mode="dark"] body[data-color-page="employee"] :where(
  .company-chat .company-chat-header, .company-chat .company-chat-status,
  .company-conversations, .company-chat .company-chat-messages,
  .company-chat .company-message.mine, .chat-message.system,
  .conversation-avatar, .company-chat-button.company-pet-button,
  .company-chat .room-presence-details
) {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-text) !important;
  border-color: var(--cm-border) !important;
}
html[data-color-mode="dark"] body[data-color-page="employee"] :where(
  .company-chat .company-chat-header h2, .conversation-copy strong,
  .room-title, .company-chat .company-message p, .chat-empty strong
) { color: var(--cm-text) !important; }
html[data-color-mode="dark"] body[data-color-page="employee"] :where(
  .company-chat .company-chat-status, .company-chat .company-chat-tools,
  .conversation-copy small, .conversation-meta time, .rooms-empty,
  .room-members, .company-chat .company-message small, .message-receipt,
  .chat-empty, .chat-empty > span, .composer-tools > span,
  .composer-send span, .company-chat .attachment-status,
  .company-chat-picker .candidates, .chat-message small,
  .employee-notice-card small, .employee-notice-limits, .employee-notice-pager,
  .chat-notice, .self-presence, .presence-filter-control, .conversation-presence,
  .room-presence-summary, .presence-details-note
) { color: var(--cm-muted) !important; }
html[data-color-mode="dark"] body[data-color-page="employee"] :where(
  .company-chat .company-chat-rooms .conversation-item.active,
  .company-chat .room-tabs button.active
) {
  background: var(--cm-surface-muted) !important;
  color: var(--cm-accent) !important;
  box-shadow: inset 3px 0 var(--cm-accent);
}
html[data-color-mode="dark"] body[data-color-page="employee"] :where(
  .company-chat .composer-send button, .company-chat-picker .create
) {
  background: var(--cm-accent) !important;
  color: var(--cm-on-accent) !important;
}
html[data-color-mode="dark"] body[data-color-page="employee"] :where(
  .pet-unread, .conversation-meta b
) {
  background: var(--cm-danger) !important;
  color: var(--cm-bg) !important;
  border-color: var(--cm-surface) !important;
}
html[data-color-mode="dark"] body[data-color-page="employee"] :where(
  .company-chat-toolbar, .company-chat .company-chat-status, .company-conversations,
  .company-room-heading, .company-chat .company-composer, .emoji-tray,
  .company-chat .company-chat-header, .employee-notices article
) { border-color: var(--cm-border) !important; }
html[data-color-mode="dark"] body[data-color-page="employee"] .chat-message.finance { border-left-color: var(--cm-accent) !important; }
html[data-color-mode="dark"] body[data-color-page="employee"] .chat-message.employee { border-left-color: var(--cm-success) !important; }

html[data-color-mode="dark"] body[data-color-page="employee"] .conversation-presence[data-status="online"] { color: var(--cm-success) !important; }
html[data-color-mode="dark"] body[data-color-page="employee"] .conversation-presence[data-status="busy"] { color: var(--cm-warning) !important; }
html[data-color-mode="dark"] body[data-color-page="employee"] .conversation-presence[data-status="away"] { color: var(--cm-accent) !important; }

/* QR pixels and the white quiet zone are deliberately theme-independent.
   No image, video, canvas, brand or theme-swatch inversion is used. */
body[data-color-page] .interview-qr-dialog canvas { background: #fff; color-scheme: light; }

} /* screen: leave the existing printable document colors unchanged */