/*
   Dark-theme layer (rebuilt 2026-09-26)
   -------------------------------------
   Components take their colours from the roles in brand.css (--surface,
   --surface-soft, --text, --text-soft, --line-soft, --edge …), so a surface and
   the words on it always switch together. This file no longer lists component
   names or forces every heading white: that pairing left white words on
   surfaces it did not list. It only carries what roles cannot express:
   the dark backdrop, native form controls, primary actions and state chips.
   Screen only: printing keeps the daytime roles.
*/
@media screen {

html[data-theme="dark"] {
  background-color: var(--page);
  background-image:
    radial-gradient(ellipse 62% 75% at 50% 42%, rgba(22, 22, 22, .96) 0%, rgba(22, 22, 22, .90) 55%, rgba(0, 38, 35, .78) 100%),
    url('/static/images/pattern/pattern-ivory.png');
}

html[data-theme="dark"] body {
  background: transparent !important;
  color: var(--text);
}

/* Native controls: a darker well than the card they sit on. */
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea, .form-control) {
  background-color: var(--page) !important;
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
}
html[data-theme="dark"] :is(input, select, textarea, .form-control):focus {
  border-color: var(--focus) !important;
  box-shadow: var(--shadow-gold) !important;
}
html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--disabled) !important;
  opacity: 1;
}
html[data-theme="dark"] :is(input, select, textarea):disabled {
  color: var(--text-soft) !important;
}

/* Primary actions turn golden with charcoal words (7.5:1); forest would sink
   into the emerald cards. */
html[data-theme="dark"] :is(.btn-primary, .btn-success, .account-nav a.is-current,
  .tab-btn.active, .section-btn.active, .gate-choice.active, .btn-login,
  .print-btn, .chip.active, .section-workspace-nav-item.active, .view-tab.active,
  .ui-dialog-btn.confirm:not(.danger):not(.success)) {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: var(--primary) !important;
}
html[data-theme="dark"] :is(.btn-primary, .btn-success, .account-nav a.is-current,
  .tab-btn.active, .section-btn.active, .gate-choice.active, .btn-login,
  .print-btn, .chip.active, .section-workspace-nav-item.active, .view-tab.active) :is(i, span, strong, b):not(.section-count) {
  color: inherit !important;
}
/* A count on an active golden button stays a damask chip. */
html[data-theme="dark"] .section-btn.active .section-count {
  background: var(--danger) !important;
  color: var(--on-danger) !important;
}
html[data-theme="dark"] :is(.btn-primary, .btn-success, .btn-login, .print-btn):hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
html[data-theme="dark"] :is(.btn-danger, .danger-btn, .btn-delete) {
  background: var(--danger) !important;
  color: var(--on-danger) !important;
  border-color: var(--danger) !important;
}
html[data-theme="dark"] .theme-toggle {
  background: transparent;
  color: var(--text);
  border-color: var(--edge);
}

/* States: damask and teal fall below 3:1 as words on the dark grounds, so a
   state becomes a filled chip (white on damask 12.5:1, white on teal 4.6:1). */
html[data-theme="dark"] :is(.ticket-sla.overdue, .status-badge.rejected, .notif-level.urgent,
  .ctl-count.is-urgent, .alert-danger, .notice-error, .status-error) {
  background: var(--danger) !important;
  color: var(--on-danger) !important;
  border-color: var(--danger) !important;
}
html[data-theme="dark"] .ticket-sla.overdue {
  border-radius: 999px;
  padding: 1px 8px;
}
html[data-theme="dark"] :is(.alert-warning, .notice-warning, .status-warning) {
  background: var(--warning-bg) !important;
  color: var(--warning-text) !important;
  border-color: var(--accent-deep) !important;
}

/* A golden ground always carries charcoal words, never white (2.4:1). */
html[data-theme="dark"] .account-nav a.is-current :is(.nav-label, .nav-lock-reason, i) {
  color: var(--on-primary) !important;
}

}