@layer components {
  .workspace { color-scheme: light; color: var(--ink); }
  .topbar-title { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }

}

/* Screen-only colours keep printed records on a light background. */
@media screen {
  @layer components {
    .workspace[data-theme=dark] {
      color-scheme: dark;
      --ink: #e6eff4;
      --muted: #a5bac5;
      --accent: #79d7e2;
      --line: #304854;
      --canvas: #0b1d28;
      --danger: #ffadb5;
      background: var(--canvas);
    }
    .workspace[data-theme=dark] :is(.topbar, .panel, .metric) { background: #122c3a; }
    .workspace[data-theme=dark] :is(input:not([type=submit]), select, textarea) {
      background: #0c222f;
      color: var(--ink);
      border-color: #587381;
      accent-color: var(--accent);
    }
    .workspace[data-theme=dark] input::placeholder,
    .workspace[data-theme=dark] textarea::placeholder { color: var(--muted); opacity: 1; }
    .workspace[data-theme=dark] input:autofill {
      box-shadow: 0 0 0 1000px #0c222f inset;
      -webkit-text-fill-color: var(--ink);
      caret-color: var(--ink);
    }
    .workspace[data-theme=dark] th { background: #173442; }
    .workspace[data-theme=dark] tbody tr:hover { background: #1a3948; }
    .workspace[data-theme=dark] .badge { background: #2c4553; color: #d4e2eb; }
    .workspace[data-theme=dark] :is(.badge--current,.badge--approved, .badge--accept, .badge--available) { background: #1b443a; color: #a0e4c5; }
    .workspace[data-theme=dark] :is(.badge--expired, .badge--reject, .badge--rejected, .badge--revoked, .badge--maintenance) { background: #4a2c35; color: #ffbac1; }
    .workspace[data-theme=dark] :is(.badge--expiring,.badge--pending, .badge--submitted) { background: #453b24; color: #f1d38f; }
    .workspace[data-theme=dark] .flash { background: #173d35; border-color: #427b69; color: #d3f3e5; }
    .workspace[data-theme=dark] .flash--alert { background: #442a30; border-color: #975b65; color: #ffd4d9; }
    .workspace[data-theme=dark] .environment-banner { background: #453b24; color: #f1d38f; }
    .workspace[data-theme=dark] .field_with_errors :is(input:not([type=submit]), select, textarea) { border-color: var(--danger); }
    .workspace[data-theme=dark] .skip-link:focus { background: #122c3a; color: var(--accent); }
  }
}

@layer components {
  .panel > .panel-heading { background: #edf3f6; }
}
@media screen {
  @layer components {
    .workspace[data-theme=dark] .panel > .panel-heading { background: #1d3b4b; }
  }
}