/* Screen UI only. Keep invoice paper, artwork, theme samples and printing intact.
   Load after page styles: legacy component colours must not override the theme. */
@media screen {
  html[data-appearance=dark] {
    --surface:var(--app-card); --surface-alt:var(--app-bg);
    --text:var(--app-text); --muted:var(--app-muted);
    --border:var(--app-border); --primary:var(--app-accent); --accent:var(--app-accent);
    --app-surface:var(--app-card);
    --dark-success:#7ce6ac; --dark-danger:#ff9ca7; --dark-warning:#f6d375;
    --dark-soft:color-mix(in srgb,var(--app-accent) 10%,var(--app-card));
    --dark-nav-bg:var(--app-accent); --dark-nav-ink:var(--app-ink);
  }
  html[data-appearance=dark] body {background:var(--app-bg);color:var(--app-text)}
  html[data-appearance=dark] :is(.utility-card,.utility-drop,
    .report-metrics article,.valuation-alert,.reports-page>header,
    .account-summary,.account-company,.account-create-note,.account-empty,
    .account-page nav,.settings-save,.scan-dialog,#entry-calculator,
    .page-customization-panel,.company-popover,.workspace-profile-menu) {
    background:var(--app-card)!important;color:var(--app-text)!important;border-color:var(--app-border)!important;
  }
  html[data-appearance=dark] :is(.overview-card span,.overview-card strong,
    .utility-card strong,.account-company-name,.account-welcome h1,
    .account-card-heading h2,.account-summary strong) {color:var(--app-text)}
  html[data-appearance=dark] :is(.account-welcome p,.account-summary span,
    .account-summary small,.account-company-name small,.account-footnote,
    .account-create-note p,.account-count,.easy-tile small) {color:var(--app-muted)}
  html[data-appearance=dark] :is(.account-icon,.account-company-icon,.account-count) {
    background:var(--dark-soft);color:var(--app-accent);border-color:var(--app-border);
  }
  html[data-appearance=dark] :is(.account-page nav a,.account-company-arrow,
    .utility-nav a.active,.settings-nav a.selected) {color:var(--app-accent)}
  html[data-appearance=dark] :is(.utility-nav a.active,.settings-nav a.selected,
    .balance-sheet tfoot,.balance-sheet .bs-group,.utility-note) {
    background:var(--dark-soft);border-color:var(--app-border);
  }
  html[data-appearance=dark] .utility-note {color:var(--dark-warning)}
  html[data-appearance=dark] :is(input,select,textarea):not(.paper *) {
    color-scheme:dark;background-color:var(--app-card);color:var(--app-text);border-color:var(--app-border);
  }
  html[data-appearance=dark] :is(input,textarea)::placeholder {color:var(--app-muted);opacity:1}
  html[data-appearance=dark] select option {background:var(--app-card);color:var(--app-text)}
  html[data-appearance=dark] :is(#calculator-expression,#entry-calculator .secondary,
    .account-create input,.account-page .secondary) {
    background:var(--app-card)!important;color:var(--app-text)!important;border-color:var(--app-border)!important;
  }
  html[data-appearance=dark] .easy-layout .easy-tile {
    background:var(--app-card);color:var(--app-text);border-color:var(--app-border);
  }
  html[data-appearance=dark] .easy-layout .easy-tile:hover {background:var(--dark-soft);color:var(--app-text)}
  html[data-appearance=dark] .easy-no-image {background:var(--app-bg);color:var(--app-muted)}
  html[data-appearance=dark] .account-page .account-company:hover {background:var(--dark-soft)!important}
  html[data-appearance=dark] .scan-item {border-color:var(--app-border)}
  html[data-appearance=dark] :is(.sales-pending,.journal-out,.money-out,
    .attendance-absent,.attendance-unpaid_leave,#easy-error) {color:var(--dark-danger)!important}
  html[data-appearance=dark] :is(.journal-in,.money-in,.attendance-present) {color:var(--dark-success)!important}
  html[data-appearance=dark] :is(.attendance-half,.attendance-unmarked,.field-demo) {color:var(--dark-warning)}
  html[data-appearance=dark] :is(.attendance-paid_leave,.attendance-weekly_off) {color:var(--app-accent)}
  html[data-appearance=dark] :is(.sales-status-unpaid,.sales-status-refund,.stock-negative,.stock-out) {
    background:#411f2a;color:var(--dark-danger);
  }
  html[data-appearance=dark] :is(.sales-status-partial,.stock-low,.stock-undefined) {
    background:#3b321c;color:var(--dark-warning);
  }
  html[data-appearance=dark] :is(.sales-status-paid,.stock-in) {background:#153a2b;color:var(--dark-success)}
  html[data-appearance=dark] :is(.sales-status-neutral,.stock-badge:not(.stock-in,.stock-negative,.stock-out,.stock-low,.stock-undefined)) {
    background:var(--dark-soft);color:var(--app-muted);
  }
  html[data-appearance=dark] .platform-polish .workspace-profile-menu button {color:var(--dark-danger)!important}
  html[data-appearance=dark] .notice.error {background:#411f2a;color:var(--dark-danger);border-color:#995264}
  html[data-appearance=dark] .notice.success {background:#153a2b;color:var(--dark-success);border-color:#34745a}
  html[data-appearance=dark] :is(.notice.error,.notice.success) :is(a,p,small) {color:inherit}
  html[data-appearance=dark] :is(.bank-help,.opening-help,.manual-fields) {background:var(--app-bg)}
  html[data-palette=qarin-blue-dark] {--qarin-gloss:linear-gradient(135deg,#4358da,#2943ce)}
  html[data-palette=qarin-red-dark] {--qarin-gloss:linear-gradient(135deg,#d02649,#b41236)}
  html:is([data-palette=qarin-blue-dark],[data-palette=qarin-red-dark]) {--dark-nav-bg:var(--qarin-gloss);--dark-nav-ink:#fff}
  html[data-palette=lagoon-dark] {--dark-nav-bg:#087f83;--dark-nav-ink:#fff}
  html[data-appearance=dark] .platform-polish .sidebar .app-menu :is(a.active,summary.current-group,.menu-group:has(a.active)>summary) {
    background:var(--dark-nav-bg);color:var(--dark-nav-ink);transition:none;
  }
  html[data-appearance=dark] .platform-polish .sidebar .app-menu :is(summary.current-group,.menu-group:has(a.active)>summary) a {
    color:var(--dark-nav-ink);
  }
  html:is([data-palette=qarin-blue-dark],[data-palette=qarin-red-dark]) .platform-polish main :is(button,.button):not(.secondary,.easy-tile,.theme-preview-card,.report-star,.account-company,.invoice-settings-card) {
    background:var(--qarin-gloss);color:#fff;
  }
  html[data-appearance=dark] .platform-polish main button:is(.easy-tile,.secondary) {box-shadow:none}
  html[data-appearance=dark] :is(.settings-nav input,.utility-drop input) {background:var(--app-card);color:var(--app-text)}
  html[data-appearance=dark] :is(.inventory-tabs a[aria-current=page],.bank-tabs a.active,.journal-tabs a.selected,.item-type-toggle input:checked+span) {
    background:var(--app-accent);color:var(--app-ink);border-color:var(--app-accent);
  }
  html[data-appearance=dark] .platform-polish main .entry-add.secondary,
  html[data-appearance=dark] .account-eyebrow {color:var(--app-accent)}
  html[data-appearance=dark] .item-type-toggle span {color:var(--app-accent);border-color:var(--app-accent)}
  html[data-appearance=dark] .workspace-avatar {background:linear-gradient(145deg,#3765d3,#2346ae);color:#fff}
  html[data-appearance=dark] .platform-polish main .invoice-settings-card {
    background:var(--app-card);color:var(--app-text);border-color:var(--app-border);
  }
  html[data-appearance=dark] .account-page :is(button,.button):not(.secondary,.account-company) {
    background:var(--app-accent);color:var(--app-ink);border-color:var(--app-accent);
  }
  html[data-palette=midnight] .platform-polish .sidebar nav a.active {color:var(--app-ink)}
  html[data-palette=midnight] .platform-polish .sidebar :is(.current-group,.current-group a,.menu-group:has(a.active)>summary),
  html[data-palette=midnight] .reports-primary-menu a.selected {color:var(--app-ink)}
  html[data-palette=midnight] .platform-polish .sidebar :is(.current-group,.menu-group:has(a.active)>summary) {background:var(--app-accent)}
  html[data-palette=lagoon-dark] .platform-polish main a.button:not(.secondary) {
    color:var(--app-ink);
  }
  @media (forced-colors:active) {
    html[data-appearance=dark] :is(.sales-status,.stock-badge,.notice) {color:CanvasText;background:Canvas;border:1px solid CanvasText}
  }
}