/*
 * 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: #e1e8ee;
  --sf-comfort-canvas-soft: #e7edf2;
  --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);
}

/* Sales base canvas. A shared app-shell rule below promotes this approved
   low-glare palette to the other work pages. */
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page:not(.dark-mode) {
  background:
    radial-gradient(circle at 32% 8%, rgba(31, 79, 143, 0.07), transparent 34%),
    linear-gradient(180deg, #e7edf2 0%, #e1e8ee 42%, #dce5ec 100%) !important;
}

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);
}

/* Match the Sales column-heading row to its app bar in light mode only. */
html:not(.dark-mode):not([data-theme="dark"])
  body.sales-page:not(.dark-mode)
  .sales-table
  thead
  tr,
html:not(.dark-mode):not([data-theme="dark"])
  body.sales-page:not(.dark-mode)
  .sales-table
  thead
  th {
  background: var(--sf-appbar-bg) !important;
  border-color: var(--sf-appbar-border) !important;
  color: var(--sf-appbar-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"])
  body.sales-page:not(.dark-mode)
  .sales-table
  thead
  th
  :is(i, svg, span, button) {
  color: var(--sf-appbar-text) !important;
  fill: currentColor;
  stroke: currentColor;
}

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;
}

/* Full-bleed app bars for the desktop pages approved in the light-mode
   app-bar pass. Page classes keep this geometry away from every other page. */
html:not(.dark-mode):not([data-theme="dark"]) body:is(
  .sales-page,
  .inventory-page,
  .inventory-history-page,
  .profit-report-page,
  .performance-page,
  .add-product-page,
  .user-management-page,
  .dashboard-page
) :is(
  .sales-topbar,
  .inventory-topbar,
  .history-topbar,
  .profit-header,
  .performance-topbar,
  .add-product-content > .page-header,
  .dashboard-header,
  .sales-nav
) {
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: var(--sf-appbar-bg) !important;
  border-bottom-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(
  .profit-report-page,
  .performance-page,
  .user-management-page
) :is(.profit-header, .performance-topbar, .dashboard-header) :is(h1, .page-title, .user-name) {
  color: var(--sf-appbar-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body:is(
  .profit-report-page,
  .performance-page,
  .user-management-page
) :is(.profit-header, .performance-topbar, .dashboard-header) :is(p, .user-role) {
  color: var(--sf-appbar-muted) !important;
}

/* Sales, Inventory, and History already have the desired full-width DOM
   structure. Normalize their final edge and height rules here. */
html:not(.dark-mode):not([data-theme="dark"]) body.sales-page .main-content > .sales-topbar,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-page .main-content > .inventory-topbar,
html:not(.dark-mode):not([data-theme="dark"]) body.inventory-history-page .main-content > .history-topbar {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 16px 28px !important;
}

/* Profit used to be a small centered strip inside a padded page. The bar is
   now full bleed while the report content keeps its readable max width. */
html:not(.dark-mode):not([data-theme="dark"]) body.profit-report-page .main-content {
  padding: 0 0 42px !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.profit-report-page .profit-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.profit-report-page .profit-header {
  align-items: center !important;
  width: 100% !important;
  min-height: 88px !important;
  margin: 0 0 26px !important;
  padding: 16px 30px !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.profit-report-page .profit-header h1 {
  margin: 0 0 4px !important;
  font-size: 28px !important;
  line-height: 1.12 !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.profit-report-page .profit-header p {
  margin: 0 !important;
  font-size: 14px !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.profit-report-page .profit-page > :is(
  .profit-view-switcher,
  .summary-grid,
  .breakdown-panel
) {
  width: min(1440px, calc(100% - 96px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.profit-report-page .profit-header .period-button {
  background: var(--sf-appbar-control-bg) !important;
  border: 1px solid var(--sf-appbar-control-border) !important;
  color: var(--sf-appbar-control-text) !important;
}

/* Performance did not have an app bar at all. Its new title bar owns the top
   edge; the existing filter and tables retain their familiar card layout. */
html:not(.dark-mode):not([data-theme="dark"]) body.performance-page .performance-page-main {
  width: calc(100% - var(--app-sidebar-width)) !important;
  max-width: none !important;
  margin: 0 0 0 var(--app-sidebar-width) !important;
  padding: 0 !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.performance-page .performance-topbar {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 88px;
  margin: 0 0 22px;
  padding: 16px 28px;
}

html:not(.dark-mode):not([data-theme="dark"]) body.performance-page .performance-topbar-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

html:not(.dark-mode):not([data-theme="dark"]) body.performance-page .performance-title-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--sf-appbar-text);
  font-size: 18px;
}

html:not(.dark-mode):not([data-theme="dark"]) body.performance-page .performance-topbar h1 {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 1.12;
}

html:not(.dark-mode):not([data-theme="dark"]) body.performance-page .performance-topbar p {
  margin: 0;
  font-size: 14px;
}

html:not(.dark-mode):not([data-theme="dark"]) body.performance-page .performance-page-main > :is(.filter, .tables) {
  width: auto !important;
  margin-right: 24px !important;
  margin-left: 24px !important;
}

/* Add Inventory had a correctly colored but inset header. Pull just that
   header through the content padding so it reaches all three outer edges. */
html:not(.dark-mode):not([data-theme="dark"]) body.add-product-page .content.add-product-content {
  --sf-add-product-gutter: 36px;
  padding-top: 0 !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.add-product-page .add-product-content > .page-header {
  width: auto !important;
  min-height: 88px !important;
  margin-top: 0 !important;
  margin-right: calc(-1 * var(--sf-add-product-gutter)) !important;
  margin-left: calc(-1 * var(--sf-add-product-gutter)) !important;
  padding: 16px var(--sf-add-product-gutter) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.add-product-page .add-product-content > .page-header :is(h1, p) {
  color: var(--sf-appbar-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.add-product-page .add-product-content > .page-header .breadcrumb-trail {
  color: var(--sf-appbar-muted) !important;
}

/* User Management's header was capped to the card width. Let the bar span the
   content viewport while leaving its form cards centered underneath. */
html:not(.dark-mode):not([data-theme="dark"]) body.user-management-page .main-content {
  padding-top: 0 !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.user-management-page .dashboard-header {
  flex: 0 0 auto !important;
  width: calc(100% + 3rem) !important;
  max-width: none !important;
  min-height: 88px !important;
  margin: 0 -1.5rem 1.5rem !important;
  padding: 16px 28px !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.user-management-page .dashboard-header .user-avatar {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--sf-appbar-text) !important;
}

/* The dashboard uses navigation as its app bar. Keep its own information
   architecture, but give it the same blue, contrast, and flush geometry. */
html:not(.dark-mode):not([data-theme="dark"]) body.dashboard-page .sales-nav {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 10px 0 !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.dashboard-page .sales-nav .nav-container {
  width: 100% !important;
  max-width: none !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.dashboard-page .sales-nav :is(
  .nav-business-name,
  .subscription-badge,
  .subscription-badge i,
  .nav-item,
  .nav-item span
) {
  color: var(--sf-appbar-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.dashboard-page .sales-nav .subscription-badge {
  color: var(--sf-appbar-muted) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.dashboard-page .sales-nav :is(
  .nav-item i,
  .nav-icon-btn,
  .nav-theme-action,
  .logout-btn,
  .mobile-menu-btn
) {
  border-color: var(--sf-appbar-control-border) !important;
  background: var(--sf-appbar-action-bg) !important;
  color: var(--sf-appbar-text) !important;
}

html:not(.dark-mode):not([data-theme="dark"]) body.dashboard-page .sales-nav :is(
  .nav-item,
  .nav-icon-btn,
  .logout-btn,
  .mobile-menu-btn
):hover {
  background: var(--sf-appbar-action-hover) !important;
  color: #ffffff !important;
}

@media (max-width: 1680px) {
  html:not(.dark-mode):not([data-theme="dark"]) body.add-product-page .content.add-product-content {
    --sf-add-product-gutter: 30px;
  }
}

@media (max-width: 980px) {
  html:not(.dark-mode):not([data-theme="dark"]) body.add-product-page .content.add-product-content {
    --sf-add-product-gutter: 16px;
  }
}

@media (max-width: 900px) {
  html:not(.dark-mode):not([data-theme="dark"]) body.performance-page .performance-page-main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  html:not(.dark-mode):not([data-theme="dark"]) body:is(
    .sales-page,
    .inventory-page,
    .inventory-history-page
  ) .main-content > :is(.sales-topbar, .inventory-topbar, .history-topbar),
  html:not(.dark-mode):not([data-theme="dark"]) body:is(
    .profit-report-page,
    .performance-page,
    .user-management-page
  ) :is(.profit-header, .performance-topbar, .dashboard-header) {
    min-height: 76px !important;
    padding: 14px 18px !important;
  }

  html:not(.dark-mode):not([data-theme="dark"]) body.profit-report-page .profit-page > :is(
    .profit-view-switcher,
    .summary-grid,
    .breakdown-panel
  ) {
    width: calc(100% - 36px) !important;
  }

  html:not(.dark-mode):not([data-theme="dark"]) body.add-product-page .add-product-content > .page-header {
    padding: 14px 18px !important;
  }
}

/* Shared low-glare canvas for authenticated work pages. Keep branded Shop and
   Build surfaces on their purpose-built backgrounds. Direct-child targeting
   reaches the visible full-height layer without recoloring cards or tables. */
html:not(.dark-mode):not([data-theme="dark"])
  body.has-app-sidebar:not(.dark-mode):not(.shop-page):not(.build-page),
html:not(.dark-mode):not([data-theme="dark"])
  body.dashboard-page:not(.dark-mode) {
  background: #dce5ec !important;
}

html:not(.dark-mode):not([data-theme="dark"])
  body.has-app-sidebar:not(.dark-mode):not(.shop-page):not(.build-page)
  > :is(
    .main-content,
    .page-wrapper,
    .profile-main,
    .content,
    main.main,
    .tutorial-main
  ),
html:not(.dark-mode):not([data-theme="dark"])
  body.dashboard-page:not(.dark-mode)
  > .page-container {
  background:
    radial-gradient(circle at 30% 4%, rgba(31, 79, 143, 0.08), transparent 34%),
    linear-gradient(180deg, #e7edf2 0%, #e1e8ee 38%, #dce5ec 100%) !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;
  }

  html:not(.dark-mode):not([data-theme="dark"]) body,
  html:not(.dark-mode):not([data-theme="dark"]) body > :is(
    .main-content,
    .page-wrapper,
    .profile-main,
    .content,
    main.main,
    .tutorial-main,
    .page-container
  ) {
    background: #ffffff !important;
  }
}