/*
 * SalesFlow light-mode comfort palette
 *
 * The product used pure white across most full-page and card surfaces. This
 * slightly warm, low-glare palette keeps the same hierarchy and contrast while
 * reducing the luminance jump between the canvas, cards, inputs, and tables.
 * Every selector explicitly excludes dark mode so the existing dark palette is
 * left unchanged.
 */

html:not(.dark-mode):not([data-theme="dark"]),
html:not(.dark-mode):not([data-theme="dark"]) body {
  color-scheme: light;

  /* Shared semantic palette. */
  --sf-comfort-canvas: #e9eeeb;
  --sf-comfort-canvas-soft: #edf2ee;
  --sf-comfort-surface: #f5f7f3;
  --sf-comfort-surface-raised: #f8f9f5;
  --sf-comfort-surface-soft: #eef2ed;
  --sf-comfort-surface-muted: #e5ebe7;
  --sf-comfort-input: #edf2ee;
  --sf-comfort-input-focus: #f7f9f5;
  --sf-comfort-border: #cbd6cf;
  --sf-comfort-border-strong: #bcc9c1;
  --sf-comfort-text: #17252d;
  --sf-comfort-text-soft: #3f535b;
  --sf-comfort-muted: #5d6f74;
  --sf-comfort-faint: #79888b;
  --sf-comfort-blue: #2864b7;
  --sf-comfort-blue-soft: #dfe9f3;
  --sf-comfort-focus: rgba(40, 100, 183, 0.2);
  --sf-comfort-shadow: 0 14px 36px rgba(35, 55, 49, 0.085);
  --sf-comfort-shadow-soft: 0 5px 18px rgba(35, 55, 49, 0.06);

  /* Common tokens used by the dashboard, sales, forms, and reports. */
  --page-bg: var(--sf-comfort-canvas);
  --light-bg: var(--sf-comfort-canvas);
  --bg: var(--sf-comfort-canvas);
  --bg-alt: var(--sf-comfort-surface-soft);
  --bg-card: var(--sf-comfort-surface);
  --bg-input: var(--sf-comfort-input);
  --card: var(--sf-comfort-surface);
  --card-bg: var(--sf-comfort-surface);
  --card-strong: var(--sf-comfort-surface);
  --panel: var(--sf-comfort-surface);
  --panel-soft: var(--sf-comfort-surface-soft);
  --surface: var(--sf-comfort-surface);
  --surface-soft: var(--sf-comfort-surface-soft);
  --surface-muted: var(--sf-comfort-surface-muted);
  --input-bg: var(--sf-comfort-input);
  --nav-bg: var(--sf-comfort-surface);
  --btn-bg: var(--sf-comfort-surface-soft);
  --border: var(--sf-comfort-border);
  --border-color: var(--sf-comfort-border);
  --border-strong: var(--sf-comfort-border-strong);
  --line: var(--sf-comfort-border);
  --line-strong: var(--sf-comfort-border-strong);
  --text: var(--sf-comfort-text);
  --text-dark: var(--sf-comfort-text);
  --text-soft: var(--sf-comfort-text-soft);
  --text-light: var(--sf-comfort-muted);
  --text-muted: var(--sf-comfort-faint);
  --ink: var(--sf-comfort-text);
  --ink-soft: var(--sf-comfort-text-soft);
  --muted: var(--sf-comfort-muted);
  --muted-2: var(--sf-comfort-faint);
  --placeholder: var(--sf-comfort-faint);
  --white: var(--sf-comfort-surface);
  --text-white: #f7faf8;
  --shadow: var(--sf-comfort-shadow);
  --shadow-card: var(--sf-comfort-shadow);
  --shadow-soft: var(--sf-comfort-shadow-soft);

  /* Dashboard. */
  --ta-page: var(--sf-comfort-canvas);
  --ta-panel: var(--sf-comfort-surface);
  --ta-line: var(--sf-comfort-border);
  --ta-ink: #16304a;
  --ta-muted: var(--sf-comfort-muted);
  --ta-shadow: var(--sf-comfort-shadow);
  --ta-soft-shadow: var(--sf-comfort-shadow-soft);
  --dash-page: var(--sf-comfort-canvas);
  --dash-surface: var(--sf-comfort-surface);
  --dash-ink: var(--sf-comfort-text);
  --dash-muted: var(--sf-comfort-muted);
  --dash-border: rgba(91, 111, 100, 0.2);
  --dash-shadow: var(--sf-comfort-shadow-soft);
  --dash-shadow-hover: var(--sf-comfort-shadow);
  --ta-clean-ink: #173653;
  --ta-clean-text: #29465b;
  --ta-clean-muted: var(--sf-comfort-muted);
  --ta-clean-line: #dae3dc;
  --ta-clean-line-strong: var(--sf-comfort-border);
  --ta-clean-head: #edf2ee;

  /* Shared application sidebar. */
  --app-sidebar-bg: #f2f5f1;
  --app-sidebar-text: var(--sf-comfort-text);
  --app-sidebar-muted: var(--sf-comfort-text-soft);
  --app-sidebar-heading: var(--sf-comfort-text);
  --app-sidebar-hover: #e4ebe6;
  --app-sidebar-border: var(--sf-comfort-border);
  --app-sidebar-shadow: 8px 0 30px rgba(35, 55, 49, 0.055);
  --app-sidebar-danger-bg: #f8e9e8;
  --app-sidebar-danger-border: #efcfce;
  --app-sidebar-danger-hover: #f3dedd;

  /* Authentication and public pages. */
  --auth-ink: #1a2940;
  --auth-muted: var(--sf-comfort-muted);
  --auth-line: var(--sf-comfort-border);
  --auth-surface: rgba(245, 247, 243, 0.97);
  --color-white: var(--sf-comfort-surface);
  --color-gray-50: #f2f5f1;
  --color-gray-100: #e9efeb;
  --color-gray-200: var(--sf-comfort-border);
  --color-gray-300: var(--sf-comfort-border-strong);

  /* Expenses. */
  --expense-bg: var(--sf-comfort-canvas);
  --expense-surface: var(--sf-comfort-surface);
  --expense-soft: var(--sf-comfort-surface-soft);
  --expense-line: var(--sf-comfort-border);
  --expense-line-soft: #dfe7e1;
  --expense-text: var(--sf-comfort-text);
  --expense-muted: var(--sf-comfort-muted);
  --expense-shadow: var(--sf-comfort-shadow);
  --expense-shadow-soft: var(--sf-comfort-shadow-soft);

  /* Inventory pages. */
  --gallery-page: var(--sf-comfort-canvas);
  --gallery-surface: var(--sf-comfort-surface);
  --gallery-soft: var(--sf-comfort-surface-soft);
  --gallery-line: var(--sf-comfort-border);
  --gallery-line-strong: var(--sf-comfort-border-strong);
  --gallery-text: var(--sf-comfort-text);
  --gallery-muted: var(--sf-comfort-muted);
  --gallery-shadow: var(--sf-comfort-shadow);
  --ih-bg: var(--sf-comfort-canvas);
  --ih-surface: var(--sf-comfort-surface);
  --ih-surface-soft: var(--sf-comfort-surface-soft);
  --ih-border: var(--sf-comfort-border);
  --ih-border-strong: var(--sf-comfort-border-strong);
  --ih-text: var(--sf-comfort-text);
  --ih-muted: var(--sf-comfort-muted);
  --ih-muted-strong: var(--sf-comfort-text-soft);
  --ih-shadow: var(--sf-comfort-shadow);
  --inv-page: var(--sf-comfort-canvas);
  --inv-surface: var(--sf-comfort-surface);
  --inv-ink: var(--sf-comfort-text);
  --inv-muted: var(--sf-comfort-muted);
  --inv-border: rgba(91, 111, 100, 0.2);
  --inv-shadow: var(--sf-comfort-shadow-soft);
  --inv-shadow-hover: var(--sf-comfort-shadow);

  /* Profit and tax reports. */
  --profit-bg: var(--sf-comfort-canvas);
  --profit-surface: var(--sf-comfort-surface);
  --profit-text: var(--sf-comfort-text);
  --profit-muted: var(--sf-comfort-muted);
  --profit-border: var(--sf-comfort-border);
  --profit-line: #dfe7e1;
  --profit-table-header: var(--sf-comfort-surface-soft);
  --profit-table-border: var(--sf-comfort-border);
  --profit-shadow: var(--sf-comfort-shadow);
  --profit-soft-shadow: var(--sf-comfort-shadow-soft);
  --tax-page-bg: var(--sf-comfort-canvas);
  --tax-card: var(--sf-comfort-surface);
  --tax-card-soft: var(--sf-comfort-surface-soft);
  --tax-border: var(--sf-comfort-border);
  --tax-line: #dfe7e1;
  --tax-text: var(--sf-comfort-text);
  --tax-muted: var(--sf-comfort-muted);
  --tax-shadow: var(--sf-comfort-shadow);
  --tax-soft-shadow: var(--sf-comfort-shadow-soft);

  /* Performance, shop, permissions, and tutorial. */
  --bg-grad-from: #f0f3ef;
  --bg-grad-mid: var(--sf-comfort-canvas);
  --bg-grad-to: #e4ebe7;
  --chart-canvas-bg: var(--sf-comfort-surface-soft);
  --permission-bg: var(--sf-comfort-canvas);
  --permission-surface: var(--sf-comfort-surface);
  --permission-panel: var(--sf-comfort-surface-soft);
  --permission-panel-soft: var(--sf-comfort-surface-muted);
  --permission-border: var(--sf-comfort-border);
  --permission-border-strong: var(--sf-comfort-border-strong);
  --permission-text: var(--sf-comfort-text);
  --permission-heading: #132129;
  --permission-muted: var(--sf-comfort-muted);
  --permission-faint: var(--sf-comfort-faint);
  --permission-primary-soft: var(--sf-comfort-blue-soft);
  --permission-shadow: var(--sf-comfort-shadow);
  --permission-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
  --shop-bg: var(--sf-comfort-canvas);
  --shop-surface: var(--sf-comfort-surface);
  --shop-surface-soft: var(--sf-comfort-surface-soft);
  --shop-text: var(--sf-comfort-text);
  --shop-muted: var(--sf-comfort-muted);
  --shop-border: var(--sf-comfort-border);
  --shop-shadow: var(--sf-comfort-shadow);
  --tutorial-bg: var(--sf-comfort-canvas);
  --tutorial-surface: var(--sf-comfort-surface);
  --tutorial-text: var(--sf-comfort-text);
  --tutorial-muted: var(--sf-comfort-muted);
  --tutorial-border: var(--sf-comfort-border);
  --tutorial-primary-soft: var(--sf-comfort-blue-soft);
}

/* Pages with hard-coded light backgrounds that do not use their variables. */
html:not(.dark-mode):not([data-theme="dark"]) body {
  background-color: var(--sf-comfort-canvas);
}

html:not(.dark-mode):not([data-theme="dark"]) body.sales-page {
  background:
    radial-gradient(circle at 32% 8%, rgba(40, 100, 183, 0.045), transparent 34%),
    linear-gradient(180deg, #eff3ef 0%, var(--sf-comfort-canvas) 40%, #e7ece9 100%);
}

html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page {
  background:
    linear-gradient(180deg, rgba(242, 246, 242, 0.92) 0, rgba(233, 239, 236, 0.82) 280px),
    var(--sf-comfort-canvas);
}

html:not(.dark-mode):not([data-theme="dark"]) body.auth-page,
html:not(.dark-mode):not([data-theme="dark"]) body.login-page,
html:not(.dark-mode):not([data-theme="dark"]) body.register-page {
  background: var(--sf-comfort-canvas);
}

html:not(.dark-mode):not([data-theme="dark"]) .auth-navbar,
html:not(.dark-mode):not([data-theme="dark"]) .auth-card {
  background-color: rgba(245, 247, 243, 0.97);
}

/* The home dashboard has a few late, intentionally forceful white rules. */
html:not(.dark-mode):not([data-theme="dark"]) body .sales-nav,
html:not(.dark-mode):not([data-theme="dark"]) body .subscription-badge,
html:not(.dark-mode):not([data-theme="dark"]) body .nav-icon-btn,
html:not(.dark-mode):not([data-theme="dark"]) body .dashboard-main .summary-item,
html:not(.dark-mode):not([data-theme="dark"]) body .summary-item,
html:not(.dark-mode):not([data-theme="dark"]) body .product-search-suggestions,
html:not(.dark-mode):not([data-theme="dark"]) body #salesTable,
html:not(.dark-mode):not([data-theme="dark"]) body #expenseTable,
html:not(.dark-mode):not([data-theme="dark"]) body #salesTable td,
html:not(.dark-mode):not([data-theme="dark"]) body #expenseTable td {
  background: var(--sf-comfort-surface) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body #salesTable th,
html:not(.dark-mode):not([data-theme="dark"]) body #expenseTable th {
  background: linear-gradient(180deg, var(--sf-comfort-surface) 0%, var(--sf-comfort-surface-soft) 100%) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body .forms-sidebar input,
html:not(.dark-mode):not([data-theme="dark"]) body .forms-sidebar select,
html:not(.dark-mode):not([data-theme="dark"]) body .forms-sidebar textarea,
html:not(.dark-mode):not([data-theme="dark"]) body .readonly-field {
  background: var(--sf-comfort-input) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body .analytics {
  --card: rgba(245, 247, 243, 0.97);
  --card-strong: var(--sf-comfort-surface);
  --surface-soft: var(--sf-comfort-surface-soft);
  --text: var(--sf-comfort-text);
  --muted: var(--sf-comfort-muted);
  --border: rgba(91, 111, 100, 0.2);
  --shadow: var(--sf-comfort-shadow);
  --soft-shadow: var(--sf-comfort-shadow-soft);
  --chart-canvas-bg: var(--sf-comfort-surface-soft);
}

/* Profile is older, hard-coded CSS, so map its large white regions directly. */
html:not(.dark-mode):not([data-theme="dark"]) body.profile-page {
  color: var(--sf-comfort-text);
  background: var(--sf-comfort-canvas);
}

html:not(.dark-mode):not([data-theme="dark"]) body.profile-page .profile-hero,
html:not(.dark-mode):not([data-theme="dark"]) body.profile-page .profile-card,
html:not(.dark-mode):not([data-theme="dark"]) body.profile-page .save-panel {
  background: var(--sf-comfort-surface);
  border-color: var(--sf-comfort-border);
  box-shadow: var(--sf-comfort-shadow-soft);
}

html:not(.dark-mode):not([data-theme="dark"]) body.profile-page input,
html:not(.dark-mode):not([data-theme="dark"]) body.profile-page select,
html:not(.dark-mode):not([data-theme="dark"]) body.profile-page textarea {
  background-color: var(--sf-comfort-input);
  border-color: var(--sf-comfort-border);
}

/* Replace the remaining large, hard-coded white regions on report pages. */
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .sales-topbar {
  background: rgba(245, 247, 243, 0.94);
}

html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .formBox,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .date-group,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .empty-state-card,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .sales-metric-card,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .date-group table,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .summaryContent,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .summaryContent p,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .summaryContent .summary-final-cash,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .sales-pagination-footer,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .sales-metric-card.metric-card {
  background: var(--sf-comfort-surface) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.sales-page form input[type="date"],
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page form input[type="month"],
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page form select,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .filter-form button[type="submit"],
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .day-download summary,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .toggleSummary,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .icon-button,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .sales-appbar-button,
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .sales-page-link {
  background: var(--sf-comfort-input) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .topbar-search,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .batch-table-wrapper,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .table-footer,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .empty-state,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .metric-card {
  background: var(--sf-comfort-surface) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .action-button,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .expand-button,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .edit-button,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .more-button,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .pagination button,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .pagination-button,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .page-size,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .icon-button {
  background: var(--sf-comfort-input) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page .date-display,
html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page .expense-day-card,
html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page .summary-stat,
html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page .daily-expense-row,
html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page .all-expenses-panel {
  background: var(--sf-comfort-surface) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page .input-shell,
html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page .sort-control,
html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page .filter-control,
html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page select,
html:not(.dark-mode):not([data-theme="dark"]) body.expenses-page input {
  background-color: var(--sf-comfort-input) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body .profit-table-wrapper,
html:not(.dark-mode):not([data-theme="dark"]) body .profit-table,
html:not(.dark-mode):not([data-theme="dark"]) body .profit-filter,
html:not(.dark-mode):not([data-theme="dark"]) body .filter-clear,
html:not(.dark-mode):not([data-theme="dark"]) body .filter-input,
html:not(.dark-mode):not([data-theme="dark"]) body .filter-select {
  background-color: var(--sf-comfort-surface) !important;
  border-color: var(--sf-comfort-border) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body .form-container input,
html:not(.dark-mode):not([data-theme="dark"]) body .form-container select,
html:not(.dark-mode):not([data-theme="dark"]) body .form-container textarea,
html:not(.dark-mode):not([data-theme="dark"]) body .filter-section select,
html:not(.dark-mode):not([data-theme="dark"]) body .form-input {
  background-color: var(--sf-comfort-input);
  border-color: var(--sf-comfort-border);
}

/* A consistent, calm interaction language for keyboard and pointer users. */
html:not(.dark-mode):not([data-theme="dark"]) :where(input, select, textarea):focus,
html:not(.dark-mode):not([data-theme="dark"]) .form-input:focus {
  background-color: var(--sf-comfort-input-focus) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--sf-comfort-focus);
  outline-offset: 2px;
}

html:not(.dark-mode):not([data-theme="dark"]) :where(input, textarea)::placeholder {
  color: var(--sf-comfort-faint);
  opacity: 1;
}

html:not(.dark-mode):not([data-theme="dark"]) {
  scrollbar-color: #a8b8ae var(--sf-comfort-canvas-soft);
}

html:not(.dark-mode):not([data-theme="dark"]) ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

html:not(.dark-mode):not([data-theme="dark"]) ::-webkit-scrollbar-track {
  background: var(--sf-comfort-canvas-soft);
}

html:not(.dark-mode):not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
  background: #a8b8ae;
  border: 3px solid var(--sf-comfort-canvas-soft);
  border-radius: 999px;
}

html:not(.dark-mode):not([data-theme="dark"]) body.landing-page {
  background: #e4ebe7;
}

html:not(.dark-mode):not([data-theme="dark"]) .tnc-container,
html:not(.dark-mode):not([data-theme="dark"]) body > main[style] {
  background: var(--sf-comfort-surface);
  border-color: var(--sf-comfort-border);
}

html:not(.dark-mode):not([data-theme="dark"]) ::selection {
  color: var(--sf-comfort-text);
  background: #c9dced;
}

/* Unified light-mode app bars. Dark mode deliberately keeps each page's
   existing palette. */
html:not(.dark-mode):not([data-theme="dark"]),
html:not(.dark-mode):not([data-theme="dark"]) body {
  --sf-appbar-bg: #1f4f8f;
  --sf-appbar-border: rgba(191, 219, 254, 0.28);
  --sf-appbar-text: #f8fbff;
  --sf-appbar-muted: #d8e8fb;
  --sf-appbar-control-bg: rgba(255, 255, 255, 0.96);
  --sf-appbar-control-hover: #ffffff;
  --sf-appbar-control-text: #173b68;
  --sf-appbar-control-border: rgba(219, 234, 254, 0.72);
  --sf-appbar-action-bg: rgba(255, 255, 255, 0.13);
  --sf-appbar-action-hover: rgba(255, 255, 255, 0.22);
  --sf-appbar-shadow: 0 8px 24px rgba(20, 57, 105, 0.2);
}

html:not(.dark-mode):not([data-theme="dark"]) body :is(
  .auth-navbar,
  .site-nav,
  .navbar,
  .privacy-header,
  .inventory-topbar,
  .sales-topbar,
  .history-topbar,
  .gallery-topbar,
  .expense-page-header,
  .profit-header,
  .tax-summary-header,
  .add-product-content > .page-header,
  .edit-stock-batch-content > .page-header,
  .dashboard-header,
  .profile-hero,
  .tutorial-player-topbar
) {
  background: var(--sf-appbar-bg) !important;
  border-color: var(--sf-appbar-border) !important;
  box-shadow: var(--sf-appbar-shadow) !important;
  color: var(--sf-appbar-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body :is(
  .auth-navbar,
  .site-nav,
  .navbar,
  .privacy-header,
  .inventory-topbar,
  .sales-topbar,
  .history-topbar,
  .gallery-topbar,
  .expense-page-header,
  .profit-header,
  .tax-summary-header,
  .add-product-content > .page-header,
  .edit-stock-batch-content > .page-header,
  .dashboard-header,
  .profile-hero,
  .tutorial-player-topbar
) :is(h1, h2, .page-title, .nav-business-name, .user-name, strong) {
  color: var(--sf-appbar-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body :is(
  .inventory-topbar,
  .sales-topbar,
  .history-topbar,
  .gallery-topbar,
  .expense-page-header,
  .profit-header,
  .tax-summary-header,
  .add-product-content > .page-header,
  .edit-stock-batch-content > .page-header,
  .dashboard-header,
  .profile-hero
) :is(p, small, label, .filter-label, .user-role, .gallery-field > span) {
  color: var(--sf-appbar-muted) !important;
}

/* Buttons and navigation actions sit on translucent blue; form fields remain
   bright enough to scan quickly against the darker bar. */
html:not(.dark-mode):not([data-theme="dark"]) body .history-topbar :is(
  .history-tabs a,
  .icon-button,
  .user-menu
),
html:not(.dark-mode):not([data-theme="dark"]) body .inventory-topbar .appbar-filter :is(
  .filter-button,
  #darkModeToggle,
  .never-sold-switch
),
html:not(.dark-mode):not([data-theme="dark"]) body .sales-topbar .appbar-filter :is(
  .sales-appbar-button,
  #darkModeToggle,
  button[type="submit"]
),
html:not(.dark-mode):not([data-theme="dark"]) body .expense-page-header :is(
  .filter-control,
  .filter-button
),
html:not(.dark-mode):not([data-theme="dark"]) body .profit-header .period-button,
html:not(.dark-mode):not([data-theme="dark"]) body .tax-summary-header .year-filter button,
html:not(.dark-mode):not([data-theme="dark"]) body .tutorial-player-topbar :is(a, button) {
  background: var(--sf-appbar-action-bg) !important;
  border-color: var(--sf-appbar-control-border) !important;
  color: var(--sf-appbar-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body .history-topbar .history-tabs a:hover,
html:not(.dark-mode):not([data-theme="dark"]) body .inventory-topbar .appbar-filter .filter-button:hover,
html:not(.dark-mode):not([data-theme="dark"]) body .sales-topbar .appbar-filter .sales-appbar-button:hover,
html:not(.dark-mode):not([data-theme="dark"]) body .expense-page-header :is(.filter-control, .filter-button):hover,
html:not(.dark-mode):not([data-theme="dark"]) body .profit-header .period-button:hover {
  background: var(--sf-appbar-action-hover) !important;
  color: #ffffff !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body :is(
  .inventory-topbar .appbar-filter,
  .sales-topbar .appbar-filter,
  .gallery-topbar .gallery-filter-form,
  .expense-page-header .expense-filter-form,
  .tax-summary-header .year-filter,
  .add-product-content > .page-header .filter-section,
  .edit-stock-batch-content > .page-header .filter-section
) :is(input:not([type="checkbox"]), select) {
  background: var(--sf-appbar-control-bg) !important;
  border-color: var(--sf-appbar-control-border) !important;
  color: var(--sf-appbar-control-text) !important;
  color-scheme: light;
}

html:not(.dark-mode):not([data-theme="dark"]) body :is(
  .inventory-topbar .appbar-filter,
  .sales-topbar .appbar-filter,
  .gallery-topbar .gallery-filter-form,
  .expense-page-header .expense-filter-form,
  .tax-summary-header .year-filter,
  .add-product-content > .page-header .filter-section,
  .edit-stock-batch-content > .page-header .filter-section
) :is(input:not([type="checkbox"]), select):focus {
  background: var(--sf-appbar-control-hover) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.32) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body :is(
  .inventory-topbar,
  .sales-topbar,
  .history-topbar,
  .gallery-topbar,
  .expense-page-header,
  .profit-header,
  .tax-summary-header,
  .add-product-content > .page-header,
  .edit-stock-batch-content > .page-header,
  .dashboard-header,
  .profile-hero,
  .tutorial-player-topbar
) i {
  color: inherit;
}

html:not(.dark-mode):not([data-theme="dark"]) body .history-topbar .history-tabs a.active {
  background: var(--sf-appbar-control-bg) !important;
  border-color: var(--sf-appbar-control-border) !important;
  color: var(--sf-appbar-control-text) !important;
}

/* The dashboard keeps its lighter product-specific app bar; its popover uses
   the same calm floating surface as the rest of light mode. */
html:not(.dark-mode):not([data-theme="dark"]) body .sales-nav .dashboard-more-panel {
  background: var(--sf-comfort-surface-raised) !important;
  border-color: var(--sf-comfort-border) !important;
  color: var(--sf-comfort-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body .sales-nav .dashboard-more-panel :is(
  a,
  span,
  i
) {
  color: var(--sf-comfort-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body :is(.auth-navbar, .site-nav, .navbar, .privacy-header) :is(
  a,
  button,
  .navbar-brand,
  .site-brand,
  .brand
) {
  color: var(--sf-appbar-text) !important;
}

@media print {
  html:not(.dark-mode):not([data-theme="dark"]),
  html:not(.dark-mode):not([data-theme="dark"]) body {
    --sf-comfort-canvas: #ffffff;
    --sf-comfort-surface: #ffffff;
    --sf-comfort-surface-soft: #ffffff;
    --sf-comfort-input: #ffffff;
  }
}