/* The preference control is shared by the app, sign-in and customer pages. */
.theme-control { display: inline-flex; flex-direction: row; align-items: center; gap: 9px; min-width: 0; margin: 0; color: var(--muted, #6e6e73); font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.theme-control[hidden] { display: none !important; }
.theme-control > span { flex: none; text-align: left; }
.theme-control select { width: auto; min-width: 112px; max-width: 100%; min-height: 44px; margin: 0; padding: 10px 28px 10px 11px; border: 1px solid var(--border, #d6d6de); border-radius: 11px; color: var(--text, #1d1d1f); background: var(--surface, #fff); font: 400 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.theme-control select:focus-visible { outline: 3px solid var(--accent-bright, #007aff); outline-offset: 2px; }
.sidebar .theme-control { display: flex; justify-content: space-between; margin: 20px 12px -10px; }
.sidebar .theme-control select { flex: 0 1 135px; }
.auth-shell > .theme-control { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 24px; }
.signing-header, .storage-top, .print-toolbar { flex-wrap: wrap; }
.signing-header .theme-control { margin-left: auto; }
.landing-header .topbar-right { flex-wrap: wrap; }

/* Screen-only colors keep exports and printing independent from the preference. */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --text: #f5f5f7;
    --muted: #b0b0b8;
    --border: #414147;
    --canvas: #161618;
    --white: #222225;
    --surface: #222225;
    --surface-soft: #2c2c30;
    --accent: #7db7ff;
    --accent-bright: #88bfff;
    --accent-soft: #20344e;
    --navy: #b9cce5;
    --navy-deep: #d9e5f5;
    --teal-dark: #a1ccff;
    --amber: #edc577;
    --red: #ffacb0;
    --green: #8edbab;
    --shadow: 0 2px 8px #00000012, 0 12px 32px #00000016;
    color: var(--text);
    background: var(--canvas);
  }
  html[data-theme="dark"] body { color: var(--text); background: var(--canvas); }
  html[data-theme="dark"] [data-theme-logo] { filter: brightness(0) invert(1); }
  html[data-theme="dark"] :is(.sidebar, .navigation-ready .sidebar) { background: #202024f5; border-color: var(--border); box-shadow: 16px 0 48px #00000025; }
  html[data-theme="dark"] .topbar { background: #202024ed; border-color: var(--border); }
  html[data-theme="dark"] .nav-backdrop:not([hidden]) { background: #00000080; }
  html[data-theme="dark"] .business-switch { background: #2b2b30; border-color: var(--border); }
  html[data-theme="dark"] .business-switch:hover { background: #34343b; border-color: #65738a; }
  html[data-theme="dark"] :is(.nav-list a, .breadcrumb strong, .directory-links a) { color: #d8d8df; }
  html[data-theme="dark"] :is(.nav-list a svg, .nav-group > summary, .nav-group > summary::after, .breadcrumb span) { color: var(--muted); }
  html[data-theme="dark"] .nav-list a:hover { color: var(--text); background: #303035; }
  html[data-theme="dark"] .nav-list a.active { color: #a5ceff; background: #263c58; }
  html[data-theme="dark"] .nav-group { border-color: #4141479c; }
  html[data-theme="dark"] :is(.nav-group .nav-count, .count-pill) { color: #cdcad5; background: #36363e; }
  html[data-theme="dark"] .nav-group a.active .nav-count { color: #c3dfff; background: #3a5577; }
  html[data-theme="dark"] :is(.development-badge, .demo-badge) { color: #b5d5ff; background: #263b54; border-color: #405977; }
  html[data-theme="dark"] .user-avatar { color: #c0d7f3; background: #303d4d; border-color: #4d6078; }
  html[data-theme="dark"] .skip-link { color: var(--text); background: #303035; }

  /* Surfaces, tables and forms. Paper descendants are deliberately excluded. */
  html[data-theme="dark"] :is(.metric-card, .business-card, .module-link, .auth-card) { color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
  html[data-theme="dark"] :is(.business-card:hover, .module-link:hover, .settings-shortcuts > a:hover) { background: #2c3037; border-color: #647b9b; }
  html[data-theme="dark"] :is(.attention-row, .directory-links a) { border-color: var(--border); }
  html[data-theme="dark"] :is(.attention-row:hover, .journal-entry summary:hover, .directory-links a:hover) { background: #2c2c33; }
  html[data-theme="dark"] :is(.directory-links a:hover, .metric-accent > strong, .vat-balance strong, .report-result strong) { color: var(--accent); }
  html[data-theme="dark"] :is(.metric-accent, .vat-balance, .demo-card, .demo-notice) { background: #213247; border-color: #3c506b; }
  html[data-theme="dark"] :is(.metric-accent .metric-top, .metric-accent > small, .demo-card p, .demo-card .small-label, .demo-notice) { color: #b8cce6; }
  html[data-theme="dark"] .demo-card h3 { color: #cce1ff; }
  html[data-theme="dark"] :is(.metric-top .icon, .metric-symbol, .attention-row > span:last-child, .business-card > .icon) { color: #a9a9b4; }
  html[data-theme="dark"] .attention-number { background: var(--accent-soft); }
  html[data-theme="dark"] .attention-number.amber { color: var(--amber); background: #453820; }
  html[data-theme="dark"] :is(.module-facts, .report-result):not(.print-document *) { background: #243347; }
  html[data-theme="dark"] :is(.module-facts strong, .report-result):not(.print-document *) { color: #bdd9ff; }
  html[data-theme="dark"] .report-links a { background: var(--surface); border-color: var(--border); }
  html[data-theme="dark"] .report-links a:hover { background: var(--accent-soft); border-color: #5b7ca7; }
  html[data-theme="dark"] th:not(.print-document *):not(.wo-paper *) { color: var(--muted); background: #2b2b30; }
  html[data-theme="dark"] td:not(.print-document *):not(.wo-paper *) { border-color: var(--border); }
  html[data-theme="dark"] tbody tr:hover td:not(.print-document *):not(.wo-paper *) { background: #2c2c33; }
  html[data-theme="dark"] :is(.vat-report tfoot, .signing-section table tfoot) { background: #2b2b30; }
  html[data-theme="dark"] .form-actions { background: #26262b; }
  html[data-theme="dark"] .responsive-editor tbody tr { background: #29292e; }
  html[data-theme="dark"] .responsive-editor td[data-label]::before { color: #c3c3cb; }
  html[data-theme="dark"] .responsive-editor td .icon-button { background: #34343a; border-color: var(--border); }
  html[data-theme="dark"] :is(input:not([type="hidden"]), select, textarea) { color: var(--text); background: #29292e; border-color: #747480; }
  html[data-theme="dark"] :is(input, textarea)::placeholder { color: #acacb6; }
  html[data-theme="dark"] :is(input, select, textarea):focus { border-color: var(--accent-bright); outline-color: #88bfff66; box-shadow: 0 0 0 3px #88bfff26; }
  html[data-theme="dark"] :is(input, select, textarea):disabled { color: #a9a9b3; background: #252529; border-color: #47474f; }
  html[data-theme="dark"] :is(input, textarea)[readonly] { color: #dedee5; background: #242429; }
  html[data-theme="dark"] input[type="file"]::file-selector-button { color: var(--accent); background: #34465e; }
  html[data-theme="dark"] input:-webkit-autofill { -webkit-text-fill-color: #f5f5f7; caret-color: #f5f5f7; -webkit-box-shadow: 0 0 0 1000px #293747 inset; }
  html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { accent-color: #76b3ff; }

  /* Links use a pale blue; filled actions retain white text on a deeper blue. */
  html[data-theme="dark"] .button:hover { color: var(--text); background: #34343c; border-color: #646470; }
  html[data-theme="dark"] .button-secondary { color: var(--accent); background: #2c2c32; border-color: #555561; }
  html[data-theme="dark"] .button-secondary:hover { color: #c0dcff; background: #304764; border-color: #6688b3; }
  html[data-theme="dark"] .button-ghost { color: var(--accent); background: transparent; border-color: transparent; }
  html[data-theme="dark"] .button-ghost:hover { color: #bddaff; background: #2a3749; border-color: transparent; }
  html[data-theme="dark"] :is(.button-primary, .auth-card button) { color: #fff; background: #1769ca; border-color: #4589dc; box-shadow: 0 2px 5px #00000026; }
  html[data-theme="dark"] :is(.button-primary:hover, .auth-card button:hover) { color: #fff; background: #1a70d3; border-color: #88bfff; }
  html[data-theme="dark"] :is(.button-danger, .icon-button:hover) { color: #ffb1b6; background: #47282c; border-color: #875259; }
  html[data-theme="dark"] .button-danger:hover { color: #ffd3d5; background: #613038; border-color: #b56a75; }
  html[data-theme="dark"] .storage-restore .button-danger { color: #fff; background: #a82d38; border-color: #d9626d; }
  html[data-theme="dark"] .storage-restore .button-danger:hover { color: #fff; background: #b63742; border-color: #ee7c87; }

  /* Each state keeps its semantic color as well as its text label. */
  html[data-theme="dark"] .status.draft:not(.print-document *) { color: #d4d2dd; background: #3b3a44; }
  html[data-theme="dark"] .status.issued:not(.print-document *) { color: #b2d4ff; background: #2b4565; }
  html[data-theme="dark"] :is(.status.paid, .status.posted, .status.active):not(.print-document *) { color: #a1e3ba; background: #264b37; }
  html[data-theme="dark"] .status.void:not(.print-document *) { color: #ffc0c4; background: #5a3037; }
  html[data-theme="dark"] :is(.alert-success, .auth-success, .paid-card) { color: #abe7c1; background: #223c2c; border-color: #4e795d; }
  html[data-theme="dark"] .paid-check { color: #aae4bf; background: #31593e; }
  html[data-theme="dark"] .paid-card p { color: #bbd6c5; }
  html[data-theme="dark"] :is(.alert-error, .auth-error) { color: #ffc0c5; background: #45282e; border-color: #83515b; }
  html[data-theme="dark"] :is(.alert-info, .edit-lock-banner) { color: #bbd8ff; background: #26394f; border-color: #4c6c91; }
  html[data-theme="dark"] :is(.auth-dev, .edit-lock-banner.edit-lock-readonly) { color: #f1d399; background: #433720; border-color: #806943; }
  html[data-theme="dark"] .storage-restore { border-color: #806943; }

  /* Authentication is intentionally usable before a session exists. */
  html[data-theme="dark"] :is(.auth-brand, .auth-card label) { color: var(--text); }
  html[data-theme="dark"] :is(.auth-product, .auth-eyebrow, .auth-intro, .auth-note, .auth-footer) { color: var(--muted); }
  html[data-theme="dark"] .auth-note { border-color: var(--border); }
  html[data-theme="dark"] .auth-secondary { color: var(--accent); }
  html[data-theme="dark"] :is(.auth-card a, .auth-card button):focus-visible { outline-color: var(--accent-bright); }

  /* Keep drawn black ink on white, including previously saved signatures. */
  html[data-theme="dark"] :is(.signing-header, .signing-fields dt, .signing-material p, .signing-footer, .signing-section .form-hint, .signing-digest) { color: var(--muted); }
  html[data-theme="dark"] :is(.wo-signature-box, .wo-signature-image, .signing-section canvas, .signing-signed-image) { color-scheme: light; color: #303030; background: #fff; border-color: #86868f; }
  html[data-theme="dark"] .wo-signature-box > span { color: #666670; }
  html[data-theme="dark"] .wo-signature-notice { color: var(--amber); }
  html[data-theme="dark"] .signing-consent input { accent-color: #76b3ff; }

  /* The printable document remains a white sheet even in its screen preview. */
  html[data-theme="dark"] :is(.print-document, .wo-paper) {
    color-scheme: light;
    --text: #1d1d1f;
    --muted: #6e6e73;
    --border: #e3e3e8;
    --canvas: #f5f5f7;
    --white: #fff;
    --surface: #fff;
    --surface-soft: #fafafa;
    --accent: #0066cc;
    --accent-bright: #007aff;
    --accent-soft: #eaf3ff;
    --amber: #8a5700;
    --red: #b42327;
    --green: #216c42;
    color: #1d1d1f;
    background: #fff;
  }
}

@media screen and (max-width: 700px) {
  .theme-control { gap: 8px; }
  .signing-header .theme-control { margin-left: 0; }
  .storage-top > .theme-control { margin-left: auto; }
}
@media screen and (prefers-reduced-transparency: reduce) {
  html[data-theme="dark"] :is(.sidebar, .navigation-ready .sidebar, .topbar) { background: #202024; }
}
@media screen and (prefers-contrast: more) {
  html[data-theme="dark"] { --muted: #d3d3dc; --border: #858591; }
  html[data-theme="dark"] :is(input:not([type="hidden"]), select, textarea) { border-color: #9696a1; }
  html[data-theme="dark"] :is(.nav-list a, .directory-links a, .breadcrumb strong) { color: #f5f5f7; }
}
@media print {
  .theme-control { display: none !important; }
}