/* Shared surfaces also serve the profile menu in the existing light theme. */
:root {
  color-scheme: light;
  --surface: #fff;
  --surface-raised: #fff;
  --surface-soft: #f3f6f0;
  --theme-hover: #edf3e8;
  --theme-shadow: 0 16px 48px #17312526;
}

/* Screen-only overrides keep receipts, labels and exported documents light. */
@media screen {
  html[data-theme="dark"],
  html[data-theme="dark"]:has(.workspace) {
    color-scheme: dark;
    --bg: #000000;
    --ink: #f2f2f2;
    --muted: #a8a8a8;
    --line: #343434;
    --border: var(--line);
    --surface: #111111;
    --surface-raised: #1a1a1a;
    --surface-soft: #222222;
    --white: var(--surface);
    --wash: var(--surface-soft);
    --soft: var(--surface-soft);
    --brand: color-mix(in srgb, var(--company-accent, #285b49) 45%, #eeeeee);
    --brand-hover: color-mix(in srgb, var(--company-color, #285b49) 85%, #000);
    --brand-soft: var(--surface-soft);
    --brand-ink: var(--ink);
    --green: var(--brand);
    --dark: #dedede;
    --sage: var(--surface-soft);
    --pink: var(--brand);
    --rose: #262626;
    --theme-hover: #2b2b2b;
    --theme-shadow: 0 16px 48px #0007;
    --theme-danger: #ffb0b9;
    --theme-danger-bg: #3e272d;
    --theme-warning: #efd09a;
    --theme-warning-bg: #393123;
  }

  html[data-theme="dark"] body {
    background: var(--bg);
    color: var(--ink);
  }

  html[data-theme="dark"] .boot,
  html[data-theme="dark"] .skip,
  html[data-theme="dark"] .sidebar,
  html[data-theme="dark"] .sidebar-heading,
  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] .workspace .topbar,
  html[data-theme="dark"] .module-workspace .module-topbar,
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .stat,
  html[data-theme="dark"] .product-card,
  html[data-theme="dark"] .module-card,
  html[data-theme="dark"] .q-product,
  html[data-theme="dark"] .load-product,
  html[data-theme="dark"] .basket-summary,
  html[data-theme="dark"] .basket-customer-option,
  html[data-theme="dark"] .route-calendar,
  html[data-theme="dark"] .support-stat,
  html[data-theme="dark"] .wa-client,
  html[data-theme="dark"] .plant-photo-item,
  html[data-theme="dark"] .catalog-export-dialog,
  html[data-theme="dark"] .appearance-panel,
  html[data-theme="dark"] #pwa-update {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
  }

  html[data-theme="dark"] dialog:not(.photo-gallery) {
    background: var(--surface-raised);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--theme-shadow);
  }

  html[data-theme="dark"] dialog::backdrop {
    background: #00000080;
  }

  html[data-theme="dark"] #modal .modal-header,
  html[data-theme="dark"] #modal .modal-footer,
  html[data-theme="dark"] .appearance-panel footer {
    background: var(--surface-raised);
    border-color: var(--line);
  }

  html[data-theme="dark"] input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])),
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] .cloud-auth input:not([type="checkbox"]),
  html[data-theme="dark"] .cloud-auth select,
  html[data-theme="dark"] .appearance-panel input:not([type="file"]),
  html[data-theme="dark"] .appearance-panel textarea,
  html[data-theme="dark"] .trend-filters input,
  html[data-theme="dark"] .trend-filters select,
  html[data-theme="dark"] .permission-override select,
  html[data-theme="dark"] .module-topbar .branch-picker,
  html[data-theme="dark"] .shop-stepper input.shop-quantity,
  html[data-theme="dark"] .in-cart .shop-stepper input.shop-quantity,
  html[data-theme="dark"] .money-period input,
  html[data-theme="dark"] .catalog-export-dialog input,
  html[data-theme="dark"] .catalog-export-dialog select {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
  }

  html[data-theme="dark"] input::placeholder,
  html[data-theme="dark"] textarea::placeholder {
    color: #999999;
    opacity: 1;
  }

  html[data-theme="dark"] input[type="checkbox"],
  html[data-theme="dark"] input[type="radio"],
  html[data-theme="dark"] input[type="range"] {
    accent-color: var(--brand);
  }

  html[data-theme="dark"] button:focus-visible,
  html[data-theme="dark"] a:focus-visible,
  html[data-theme="dark"] input:focus-visible,
  html[data-theme="dark"] select:focus-visible,
  html[data-theme="dark"] textarea:focus-visible {
    outline-color: #bdbdbd;
  }

  html[data-theme="dark"] .btn,
  html[data-theme="dark"] .module-home-link,
  html[data-theme="dark"] .category-chip,
  html[data-theme="dark"] .size-option,
  html[data-theme="dark"] .q-step button,
  html[data-theme="dark"] .q-product.selected .q-step button,
  html[data-theme="dark"] .shop-stepper .btn,
  html[data-theme="dark"] .plant-photo-item > div button,
  html[data-theme="dark"] .password-control button,
  html[data-theme="dark"] .catalog-export-dialog .btn {
    background: var(--surface-raised);
    border-color: var(--line);
    color: var(--brand);
  }

  html[data-theme="dark"] .btn:hover,
  html[data-theme="dark"] .module-home-link:hover,
  html[data-theme="dark"] .top-account:hover,
  html[data-theme="dark"] .nav-item:hover,
  html[data-theme="dark"] .icon-button:hover,
  html[data-theme="dark"] .category-link:hover,
  html[data-theme="dark"] .table-actions button:hover,
  html[data-theme="dark"] .wa-client:hover,
  html[data-theme="dark"] .int-loss-details > summary:hover,
  html[data-theme="dark"] .basket-customer-option[aria-pressed="true"],
  html[data-theme="dark"] .password-control button:hover {
    background: var(--theme-hover);
    border-color: var(--line);
  }

  html[data-theme="dark"] .btn.primary,
  html[data-theme="dark"] .btn.pink,
  html[data-theme="dark"] .vc-home .btn.primary,
  html[data-theme="dark"] .appearance-panel .btn.primary,
  html[data-theme="dark"] .cloud-submit,
  html[data-theme="dark"] .cloud-auth.company-auth .cloud-submit,
  html[data-theme="dark"] .nav-item.active,
  html[data-theme="dark"] .vc-home .module-order-actions .module-order-save {
    background: var(--company-color, #285b49);
    border-color: var(--company-color, #285b49);
    color: var(--company-on-color, #fff);
  }

  html[data-theme="dark"] .btn.primary:hover,
  html[data-theme="dark"] .btn.pink:hover,
  html[data-theme="dark"] .cloud-submit:hover,
  html[data-theme="dark"] .vc-home .module-order-actions .module-order-save:hover {
    /* Brightness preserves the configured foreground contrast with its brand. */
    filter: brightness(1.12);
  }

  html[data-theme="dark"] .btn.subtle {
    background: transparent;
  }

  html[data-theme="dark"] .top-account,
  html[data-theme="dark"] .icon-button,
  html[data-theme="dark"] .table-actions button,
  html[data-theme="dark"] .nav-item,
  html[data-theme="dark"] .trend-legend button,
  html[data-theme="dark"] .trend-pie-legend button,
  html[data-theme="dark"] .expense-legend button {
    color: var(--ink);
  }

  html[data-theme="dark"] .avatar,
  html[data-theme="dark"] .profile-avatar,
  html[data-theme="dark"] .customer-name .avatar,
  html[data-theme="dark"] .count-pill,
  html[data-theme="dark"] .badge,
  html[data-theme="dark"] .plant-thumb,
  html[data-theme="dark"] .plant-glyph,
  html[data-theme="dark"] .stat-head .stat-icon,
  html[data-theme="dark"] .activity .circle,
  html[data-theme="dark"] .side-note,
  html[data-theme="dark"] .future-note,
  html[data-theme="dark"] .track,
  html[data-theme="dark"] .product-art,
  html[data-theme="dark"] .q-photo,
  html[data-theme="dark"] .sale-photo,
  html[data-theme="dark"] .plant-image,
  html[data-theme="dark"] .photo-preview,
  html[data-theme="dark"] .photo-full img,
  html[data-theme="dark"] .plant-photo-preview,
  html[data-theme="dark"] .presentation-badge,
  html[data-theme="dark"] .interest-position,
  html[data-theme="dark"] .round-symbol,
  html[data-theme="dark"] .publication-photo,
  html[data-theme="dark"] .publication-price,
  html[data-theme="dark"] .wa-photo,
  html[data-theme="dark"] .wa-state {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--brand);
  }

  html[data-theme="dark"] .welcome,
  html[data-theme="dark"] .inventory-tip,
  html[data-theme="dark"] .zero-stock-note,
  html[data-theme="dark"] .existing-plant,
  html[data-theme="dark"] .family-stock-row.has-change,
  html[data-theme="dark"] .user-removal-summary,
  html[data-theme="dark"] .login-update-note,
  html[data-theme="dark"] .basket-customer.btn,
  html[data-theme="dark"] .int-loss-zero,
  html[data-theme="dark"] .int-loss-position,
  html[data-theme="dark"] .int-loss-variants > li,
  html[data-theme="dark"] .today-routes a,
  html[data-theme="dark"] .gps-trace,
  html[data-theme="dark"] .crm-purchases,
  html[data-theme="dark"] .driver-total,
  html[data-theme="dark"] .load-total,
  html[data-theme="dark"] .load-basket,
  html[data-theme="dark"] .checkout-payment,
  html[data-theme="dark"] .checkout-order-total,
  html[data-theme="dark"] .payment-panel,
  html[data-theme="dark"] .money-account,
  html[data-theme="dark"] .money-category,
  html[data-theme="dark"] .q-edit-order,
  html[data-theme="dark"] .q-share,
  html[data-theme="dark"] .stock-change-summary,
  html[data-theme="dark"] .pwa-offline-module,
  html[data-theme="dark"] #pwa-message,
  html[data-theme="dark"] #gps-map-status,
  html[data-theme="dark"] .delivery-agreement,
  html[data-theme="dark"] .customer-location-form,
  html[data-theme="dark"] .map-city-row,
  html[data-theme="dark"] .map-search-result,
  html[data-theme="dark"] .category-chip.selected,
  html[data-theme="dark"] .size-option.is-selected,
  html[data-theme="dark"] .sale-plant.in-cart,
  html[data-theme="dark"] .wa-intro,
  html[data-theme="dark"] .wa-taken,
  html[data-theme="dark"] .wa-winner,
  html[data-theme="dark"] .wa-select-plant,
  html[data-theme="dark"] .wa-share-status,
  html[data-theme="dark"] .wa-share-preview,
  html[data-theme="dark"] .wa-order-codes a,
  html[data-theme="dark"] .social-hero,
  html[data-theme="dark"] .cloud-license-banner,
  html[data-theme="dark"] .appearance-panel .appearance-upload,
  html[data-theme="dark"] .trend-total,
  html[data-theme="dark"] .trend-pie-panel,
  html[data-theme="dark"] .trend-day-values,
  html[data-theme="dark"] .trend-pie-detail,
  html[data-theme="dark"] .trend-empty {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--ink);
  }

  html[data-theme="dark"] .badge.green,
  html[data-theme="dark"] .subscription-state.is-current {
    color: #b4e8bf;
    background: #233e2b;
  }

  html[data-theme="dark"] .badge.pink,
  html[data-theme="dark"] .badge.Restricted,
  html[data-theme="dark"] .btn.danger,
  html[data-theme="dark"] .btn.user-delete,
  html[data-theme="dark"] .quote-row-actions .quote-cancel,
  html[data-theme="dark"] .quote-cancellation .quote-cancel,
  html[data-theme="dark"] .basket-clear.btn,
  html[data-theme="dark"] .form-error,
  html[data-theme="dark"] .cloud-error,
  html[data-theme="dark"] .appearance-panel #appearance-error,
  html[data-theme="dark"] .trend-pie-negative,
  html[data-theme="dark"] .support-pill.High,
  html[data-theme="dark"] .support-pill.Urgent,
  html[data-theme="dark"] .stock-change-summary.removing,
  html[data-theme="dark"] .wa-taken .wa-state {
    background: var(--theme-danger-bg);
    border-color: #71454e;
    color: var(--theme-danger);
  }

  html[data-theme="dark"] .badge.amber,
  html[data-theme="dark"] .badge.Caution,
  html[data-theme="dark"] .demo-tag,
  html[data-theme="dark"] .sync-conflict,
  html[data-theme="dark"] .support-tips,
  html[data-theme="dark"] .support-notice,
  html[data-theme="dark"] .subscription-state.is-pending {
    background: var(--theme-warning-bg);
    border-color: #74603e;
    color: var(--theme-warning);
  }

  html[data-theme="dark"] .form-error,
  html[data-theme="dark"] .payment-error,
  html[data-theme="dark"] .q-clear,
  html[data-theme="dark"] .basket-remove,
  html[data-theme="dark"] .size-in-cart,
  html[data-theme="dark"] .int-loss-total strong,
  html[data-theme="dark"] .int-loss-variant-quantity strong,
  html[data-theme="dark"] .family-stock-row.has-error .family-stock-preview,
  html[data-theme="dark"] #quote-cancel-error {
    color: var(--theme-danger);
  }

  html[data-theme="dark"] .demo-tag,
  html[data-theme="dark"] .approval-note,
  html[data-theme="dark"] .trend-message {
    color: var(--theme-warning);
  }

  html[data-theme="dark"] .nav-label,
  html[data-theme="dark"] .brand span,
  html[data-theme="dark"] .breadcrumb,
  html[data-theme="dark"] .eyebrow,
  html[data-theme="dark"] .stat-head,
  html[data-theme="dark"] .toolbar .total,
  html[data-theme="dark"] .search .icon,
  html[data-theme="dark"] .product-info .latin,
  html[data-theme="dark"] .product-info .care,
  html[data-theme="dark"] .module-card p,
  html[data-theme="dark"] .page-footer,
  html[data-theme="dark"] .page-footer span:last-child,
  html[data-theme="dark"] .pager,
  html[data-theme="dark"] .empty,
  html[data-theme="dark"] .busy,
  html[data-theme="dark"] .size-label,
  html[data-theme="dark"] .size-option small,
  html[data-theme="dark"] .variant-caption,
  html[data-theme="dark"] .inventory-size-note,
  html[data-theme="dark"] .family-stock-row small,
  html[data-theme="dark"] .family-stock-preview,
  html[data-theme="dark"] .password-help,
  html[data-theme="dark"] .no-photo,
  html[data-theme="dark"] .driver-unlock p,
  html[data-theme="dark"] .plant-image-empty:not([hidden]),
  html[data-theme="dark"] .q-product-body small,
  html[data-theme="dark"] .q-cart-info small,
  html[data-theme="dark"] .q-empty,
  html[data-theme="dark"] .brand-settings p,
  html[data-theme="dark"] .wa-intro p,
  html[data-theme="dark"] .wa-counts,
  html[data-theme="dark"] .wa-winner span,
  html[data-theme="dark"] .wa-demand summary,
  html[data-theme="dark"] .round-card p,
  html[data-theme="dark"] .round-counts,
  html[data-theme="dark"] .round-card-bottom small,
  html[data-theme="dark"] .publication-body > p,
  html[data-theme="dark"] .interest-main > small,
  html[data-theme="dark"] .reservation-summary > p,
  html[data-theme="dark"] .qr-card p,
  html[data-theme="dark"] .qr-card small,
  html[data-theme="dark"] .cell-sub,
  html[data-theme="dark"] .appearance-panel p,
  html[data-theme="dark"] .appearance-upload small,
  html[data-theme="dark"] .appearance-preview > span,
  html[data-theme="dark"] .cloud-expired p,
  html[data-theme="dark"] .trend-heading p,
  html[data-theme="dark"] .trend-filters label,
  html[data-theme="dark"] .trend-total > span,
  html[data-theme="dark"] .trend-total small,
  html[data-theme="dark"] .trend-chart-heading small,
  html[data-theme="dark"] .trend-explore > label,
  html[data-theme="dark"] .trend-explanation,
  html[data-theme="dark"] .trend-footnote,
  html[data-theme="dark"] .trend-pie-heading p,
  html[data-theme="dark"] .trend-pie-legend small,
  html[data-theme="dark"] .trend-pie-empty,
  html[data-theme="dark"] .customer-map-status {
    color: var(--muted);
  }

  html[data-theme="dark"] .welcome h2,
  html[data-theme="dark"] .empty h2,
  html[data-theme="dark"] .sale-plant-bottom > b,
  html[data-theme="dark"] .cart-total,
  html[data-theme="dark"] .q-price,
  html[data-theme="dark"] .q-cart-total strong,
  html[data-theme="dark"] .round-counts b,
  html[data-theme="dark"] .wa-intro h2,
  html[data-theme="dark"] .wa-price,
  html[data-theme="dark"] .trend-pie-heading h3,
  html[data-theme="dark"] .trend-pie-net,
  html[data-theme="dark"] .customer-map-summary {
    color: var(--ink);
  }

  html[data-theme="dark"] .welcome p,
  html[data-theme="dark"] .welcome-tag,
  html[data-theme="dark"] .stat-open,
  html[data-theme="dark"] .brand-settings a,
  html[data-theme="dark"] .customer-map-eyebrow,
  html[data-theme="dark"] .trend-heading .trend-eyebrow,
  html[data-theme="dark"] .trend-pie-heading .trend-eyebrow,
  html[data-theme="dark"] .route-calendar b {
    color: var(--brand);
  }

  html[data-theme="dark"] .alert-row,
  html[data-theme="dark"] .activity,
  html[data-theme="dark"] td,
  html[data-theme="dark"] .history-item,
  html[data-theme="dark"] .collection-row,
  html[data-theme="dark"] .q-cart-row,
  html[data-theme="dark"] .tabs,
  html[data-theme="dark"] .round-counts,
  html[data-theme="dark"] .interest-list,
  html[data-theme="dark"] .publication-foot,
  html[data-theme="dark"] .appearance-panel header,
  html[data-theme="dark"] .appearance-scroll section,
  html[data-theme="dark"] .appearance-logo > img,
  html[data-theme="dark"] .appearance-panel .appearance-preview,
  html[data-theme="dark"] .trend-explore,
  html[data-theme="dark"] .trend-explanation,
  html[data-theme="dark"] .trend-pie-net,
  html[data-theme="dark"] .quote-cancellation,
  html[data-theme="dark"] .support-technical span {
    border-color: var(--line);
  }

  html[data-theme="dark"] th {
    background: var(--surface-soft);
    color: var(--muted);
    border-color: var(--line);
  }

  html[data-theme="dark"] tbody tr:hover {
    background: var(--theme-hover);
  }

  html[data-theme="dark"] .support-stat-icon,
  html[data-theme="dark"] .support-pill {
    background: color-mix(in srgb, var(--status, #a8a8a8) 16%, var(--surface));
    color: color-mix(in srgb, var(--status, #a8a8a8) 55%, #fff);
  }

  /* The company color stays on actions; text receives a readable lighter tint. */
  html[data-theme="dark"] .vc-home {
    --brand: color-mix(in srgb, var(--company-accent, #285b49) 45%, #eeeeee);
    --ink: #f2f2f2;
  }

  html[data-theme="dark"] .vc-search,
  html[data-theme="dark"] .vc-home .module-organize,
  html[data-theme="dark"] .vc-home .module-order-actions button,
  html[data-theme="dark"] .vc-home .module-position,
  html[data-theme="dark"] .vc-home .module-move-controls button {
    background: var(--surface-raised);
    border-color: var(--line);
    color: var(--ink);
  }

  html[data-theme="dark"] .vc-search input,
  html[data-theme="dark"] .support-search input {
    background: transparent;
  }

  html[data-theme="dark"] .vc-home .category-tabs button,
  html[data-theme="dark"] .vc-home #module-count,
  html[data-theme="dark"] .vc-home .module-info small,
  html[data-theme="dark"] .vc-eyebrow,
  html[data-theme="dark"] .vc-welcome-copy > p:not(.vc-eyebrow),
  html[data-theme="dark"] .vc-home .module-order-editor p,
  html[data-theme="dark"] .vc-home .module-order-editor small,
  html[data-theme="dark"] .vc-home .module-drag-handle {
    color: var(--muted);
  }

  html[data-theme="dark"] .vc-home .category-tabs button[aria-pressed="true"],
  html[data-theme="dark"] .vc-home .module-order-editor,
  html[data-theme="dark"] .vc-home .module-organize:hover,
  html[data-theme="dark"] .vc-home .module-order-actions button:not(.module-order-save):hover,
  html[data-theme="dark"] .vc-home .module-move-controls button:hover:not(:disabled),
  html[data-theme="dark"] .vc-no-results,
  html[data-theme="dark"] .vc-welcome {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--ink);
  }

  html[data-theme="dark"] .vc-home .module-card {
    background: linear-gradient(155deg, var(--surface-raised), var(--surface));
    border-color: var(--line);
    box-shadow: 0 1px 0 #ffffff09 inset, 0 8px 18px -9px #0008;
  }

  html[data-theme="dark"] .vc-home .module-card:hover {
    box-shadow: 0 1px 0 #ffffff0f inset, 0 12px 24px -9px #0009;
  }

  html[data-theme="dark"] .vc-home .module-move-controls {
    border-color: var(--line);
  }

  html[data-theme="dark"] .vc-home .module-order-status,
  html[data-theme="dark"] .vc-welcome h1 span {
    color: var(--brand);
  }

  html[data-theme="dark"] .vc-welcome-photo::after {
    background: linear-gradient(90deg, var(--surface-soft), #22222210 45%, #00000012);
  }

  /* Login and connection screens also honor the same saved preference. */
  html[data-theme="dark"] .login,
  html[data-theme="dark"] .cloud-auth,
  html[data-theme="dark"] .cloud-connection,
  html[data-theme="dark"] main#main.cloud-connection {
    --auth-ink: var(--ink);
    background: var(--bg);
    color: var(--ink);
  }

  html[data-theme="dark"] .cloud-brand,
  html[data-theme="dark"] .company-auth .cloud-brand,
  html[data-theme="dark"] .cloud-connection h1 {
    color: var(--ink);
  }

  html[data-theme="dark"] .cloud-eyebrow,
  html[data-theme="dark"] .cloud-auth label,
  html[data-theme="dark"] .cloud-subtitle,
  html[data-theme="dark"] .cloud-login-note,
  html[data-theme="dark"] .cloud-new-company p,
  html[data-theme="dark"] .cloud-new-company small,
  html[data-theme="dark"] .cloud-form-panel footer,
  html[data-theme="dark"] .cloud-form-panel footer span,
  html[data-theme="dark"] .cloud-small,
  html[data-theme="dark"] .cloud-switch,
  html[data-theme="dark"] .cloud-auth .password-help,
  html[data-theme="dark"] .cloud-connection p,
  html[data-theme="dark"] .login-content > p,
  html[data-theme="dark"] .cloud-connection p.cloud-connection-note {
    color: var(--muted);
  }

  html[data-theme="dark"] .cloud-auth .password-control button,
  html[data-theme="dark"] .cloud-offer,
  html[data-theme="dark"] .cloud-switch a,
  html[data-theme="dark"] .cloud-progress {
    color: var(--brand);
  }

  html[data-theme="dark"] .cloud-new-company {
    border-color: var(--line);
  }

  html[data-theme="dark"] .cloud-new-company > div > span {
    color: var(--ink);
  }

  html[data-theme="dark"] .cloud-new-company > a,
  html[data-theme="dark"] .login-content .demo-box {
    background: var(--surface);
    border-color: var(--line);
    color: var(--brand);
  }

  html[data-theme="dark"] .cloud-new-company > a:hover,
  html[data-theme="dark"] .cloud-auth .password-control button:hover {
    background: var(--theme-hover);
  }

  /* Chart series retain their colors while axes, labels and empty rings adapt. */
  html[data-theme="dark"] .trend-plot text,
  html[data-theme="dark"] .pie-center-label {
    fill: var(--muted);
  }

  html[data-theme="dark"] .pie-center-value {
    fill: var(--ink);
  }

  html[data-theme="dark"] .trend-plot line {
    stroke: var(--line);
  }

  html[data-theme="dark"] .trend-plot line[stroke="#81988b"] {
    stroke: var(--muted);
  }

  html[data-theme="dark"] .trend-plot circle[stroke="white"] {
    stroke: var(--surface);
  }

  html[data-theme="dark"] .trend-pie-chart circle[stroke="#e9eeea"],
  html[data-theme="dark"] .expense-chart circle[stroke="#edf0ec"] {
    stroke: var(--line);
  }

  html[data-theme="dark"] .trend-pie-legend button[aria-pressed="true"] {
    background: var(--theme-hover);
    border-color: var(--line);
  }

  html[data-theme="dark"] .trend-legend button {
    background: var(--surface-raised);
    border-color: var(--line);
  }

  /* Keep photo previews and maps faithful; style only their surrounding UI. */
  html[data-theme="dark"] .appearance-preview > div p {
    color: #fff;
  }

  html[data-theme="dark"] .product-art .reference,
  html[data-theme="dark"] .sale-photo .reference,
  html[data-theme="dark"] .plant-reference {
    background: #111111e8;
    color: var(--ink);
  }

  html[data-theme="dark"] .leaflet-control-layers,
  html[data-theme="dark"] .leaflet-bar a,
  html[data-theme="dark"] .leaflet-popup-content-wrapper,
  html[data-theme="dark"] .leaflet-popup-tip {
    background: var(--surface-raised);
    color: var(--ink);
  }

  html[data-theme="dark"] #toast {
    background: #e5e5e5;
    color: #171717;
  }
}

@media print {
  :root {
    color-scheme: light;
    --surface: #fff;
    --surface-raised: #fff;
    --surface-soft: #f3f6f0;
  }
}