/* Personal colors affect the workspace, while documents keep their print colors. */
@media screen {
  :root[data-personal-theme] {
    color-scheme: var(--theme-scheme);
    --ink: var(--theme-text);
    --accent: var(--theme-link);
    --muted: color-mix(in srgb, var(--theme-text) 72%, var(--theme-surface));
    --line: color-mix(in srgb, var(--theme-text) 20%, var(--theme-surface));
    --paper: var(--theme-background);
    --surface: var(--theme-surface);
    --theme-hover: color-mix(in srgb, var(--theme-primary) 17%, var(--theme-surface));
    --theme-active: color-mix(in srgb, var(--theme-primary) 26%, var(--theme-surface));
    --theme-field: color-mix(in srgb, var(--theme-background) 55%, var(--theme-surface));
    --theme-border: color-mix(in srgb, var(--theme-link) 44%, var(--theme-surface));
    --scroll-track: var(--theme-background);
    --scroll-thumb: color-mix(in srgb, var(--theme-link) 65%, var(--theme-surface));
    --scroll-thumb-hover: var(--theme-link);
    --scroll-end: color-mix(in srgb, var(--theme-secondary) 60%, var(--surface));
  }
  :root[data-personal-theme] body { background: var(--paper); color: var(--ink); }
  :root[data-personal-theme] :is(.app-sidebar, .app-topbar, .mobile-bottom-nav) { background: var(--theme-background); border-color: var(--line); }
  :root[data-personal-theme] :is(.card, .confirmation-dialog, .mobile-more-dialog, .order-output-panel, .order-preview, .mobile-card-table tbody tr) { background: var(--surface); border-color: var(--line); color: var(--ink); }
  :root[data-personal-theme] .card { background: linear-gradient(145deg, color-mix(in srgb, var(--theme-primary) 5%, var(--surface)), var(--surface)); }
  :root[data-personal-theme] :is(.field input, .field select, .field textarea, .product-fields textarea, .sale-card textarea, .order-form select, .movement-filters select, .report-period-form select) { background: var(--theme-field); color: var(--ink); border-color: var(--line); accent-color: var(--theme-primary); }
  :root[data-personal-theme] :is(.field input:focus, .field select:focus, .field textarea:focus, .product-fields textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible) { outline-color: var(--accent); }
  :root[data-personal-theme] :is(.shop-fixed-field:disabled, .customer-fixed-field:disabled) { background: var(--theme-field); color: var(--muted); border-color: var(--line); }
  :root[data-personal-theme] .order-form .field input.shop-fixed-field:disabled { background: var(--theme-field); color: var(--muted); border-color: var(--line); }
  :root[data-personal-theme] :is(button:not(:where(.secondary, .sale-details-button, .password-toggle, .message-close, .remove-sale-item, .remove-color-variant, .sale-search-result, [data-mobile-more], [data-close-mobile-more])), .action-link, .page-heading > .button, .appearance-sample-primary, .appearance-sample-logo) { background: var(--theme-primary); color: var(--theme-on-primary); border-color: var(--theme-primary); }
  :root[data-personal-theme] :is(button:not(:where(.secondary, .sale-details-button, .password-toggle, .message-close, .remove-sale-item, .remove-color-variant, .sale-search-result, [data-mobile-more], [data-close-mobile-more])), .action-link, .page-heading > .button):hover:not(:disabled) { background: color-mix(in srgb, var(--theme-primary) 84%, var(--theme-on-primary)); border-color: var(--accent); }
  :root[data-personal-theme] :is(.secondary:not(.ui-control), .sale-details-button, .product-edit-button, .form-actions .product-cancel-button, .badge, .account-avatar, .detail-icon, .company-logo-placeholder, .stock-count, .product-editor .image-slot) { background: var(--theme-hover); color: var(--accent); border-color: var(--theme-border); }
  :root[data-personal-theme] :is(.secondary:not(.ui-control), .sale-details-button, .product-edit-button, .form-actions .product-cancel-button):hover:not(:disabled) { background: var(--theme-active); color: var(--ink); border-color: var(--accent); }
  :root[data-personal-theme] :is(.sidebar-nav a, .mobile-bottom-nav > a, .mobile-bottom-nav > button, .mobile-more-links a, .sidebar-account small, .sidebar-account strong, .topbar-company-name strong, .topbar-context) { color: var(--ink); }
  :root[data-personal-theme] :is(.sidebar-nav a:hover, .mobile-more-links a:hover, .mobile-bottom-nav > :hover, .password-toggle:hover) { background: var(--theme-hover); color: var(--accent); }
  :root[data-personal-theme] :is(.sidebar-nav a[aria-current="page"], .mobile-bottom-nav > [data-current="true"], .mobile-more-links a[data-current="true"], .color-option:hover, .color-option.is-active, .customer-picker-results li:hover, .customer-picker-results li[aria-selected="true"]) { background: var(--theme-active); color: var(--accent); border-color: var(--theme-border); }
  :root[data-personal-theme] :is(#sale-search-results, .customer-picker-results, .color-picker-panel, .chart-tooltip, .empty-state) { background: var(--surface); color: var(--ink); border-color: var(--theme-border); }
  :root[data-personal-theme] .sale-search-result { background: transparent; color: var(--ink); border-color: transparent; }
  :root[data-personal-theme] .sale-search-result:hover:not(:disabled) { background: var(--theme-hover); }
  :root[data-personal-theme] :is(.color-option-custom, .sale-result-price) { color: var(--accent); border-color: var(--theme-border); }
  :root[data-personal-theme] .brand-icon { background: linear-gradient(135deg, var(--theme-primary), color-mix(in srgb, var(--theme-primary) 65%, var(--theme-secondary))); color: var(--theme-on-primary); border-color: var(--theme-border); box-shadow: 0 0 30px color-mix(in srgb, var(--theme-primary) 15%, transparent); }
  :root[data-personal-theme] .dashboard-body .stock-metric { background: linear-gradient(135deg, var(--theme-active), var(--surface)); border-color: var(--theme-border); }
  :root[data-personal-theme] .chart-grid { stroke: var(--line); }
  :root[data-personal-theme] .chart-label { fill: var(--muted); }
  :root[data-personal-theme] .chart-line { stroke: var(--accent); }
  :root[data-personal-theme] .chart-point { fill: var(--accent); stroke: var(--surface); }
  :root[data-personal-theme] .chart-area { fill: color-mix(in srgb, var(--theme-primary) 14%, transparent); }
  :root[data-personal-theme] .chart-focus:hover, :root[data-personal-theme] .chart-focus:focus { fill: color-mix(in srgb, var(--theme-primary) 12%, transparent); }
  :root[data-personal-theme] .revenue-legend, :root[data-personal-theme] .best-sellers progress::-webkit-progress-value { background: var(--accent); }
  :root[data-personal-theme] .best-sellers progress::-moz-progress-bar { background: var(--accent); }
  :root[data-personal-theme] .best-sellers progress, :root[data-personal-theme] .best-sellers progress::-webkit-progress-bar { background: var(--line); }
  :root[data-personal-theme] .appearance-sample-bar span { background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)); }
  :root[data-personal-theme] .appearance-sample-secondary { color: var(--theme-link); border-color: var(--theme-secondary); }
  :root[data-personal-theme] .appearance-preset[aria-pressed="true"] { border-color: var(--accent); }
  :root[data-personal-theme] .product-editor { --ink: var(--theme-text); --muted: color-mix(in srgb, var(--theme-text) 72%, var(--theme-surface)); --line: color-mix(in srgb, var(--theme-text) 20%, var(--theme-surface)); --accent: var(--theme-link); color: var(--ink); background: var(--surface); border-color: var(--line); }
  :root[data-personal-theme] .product-editor :is(.card, input:not([type="checkbox"]), textarea, select) { background: var(--theme-field); color: var(--ink); border-color: var(--line); }
  :root[data-personal-theme] .product-editor :is(.field label, h2, .margin-content strong, .variant-card legend, .image-slot) { color: var(--ink); border-color: var(--line); }
  :root[data-personal-theme] .product-editor :is(.margin-content p, .margin-content button, .product-more summary, .form-actions > a, .product-title > a) { color: var(--muted); }
  :root[data-personal-theme] .active-switch input:checked { background: var(--theme-primary); }
  :root[data-personal-theme] .profile-form input[type="file"]::file-selector-button { background: var(--theme-hover); color: var(--accent); border-color: var(--theme-border); }
  :root[data-personal-theme] .profile-form input[type="file"]:hover::file-selector-button { background: var(--theme-active); }
  :root[data-personal-theme] .field :is(input, select, textarea)[aria-invalid="true"] { border-color: #ed7a84; }
  :root[data-personal-theme] .team-layout .deactivate-button { color: #ffada6; }
  :root[data-personal-theme] ::-webkit-scrollbar-thumb, :root[data-personal-theme] ::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(135deg, var(--scroll-thumb), color-mix(in srgb, var(--theme-secondary) 60%, var(--surface))); background-clip: padding-box; }
  :root[data-personal-theme] ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
  :root[data-personal-theme] ::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: padding-box; }
}
@media screen and (forced-colors: active) {
  :root[data-personal-theme] { --ink: CanvasText; --accent: LinkText; --muted: CanvasText; --surface: Canvas; --paper: Canvas; --line: CanvasText; }
  :root[data-personal-theme] ::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; }
}