/* =====================================================================
   CacaoFlow — Light Theme softening

   Every rule here is scoped to html:not([data-theme="dark"]), so this
   file can never affect dark mode. Load it BEFORE cacaoflow-dark.css.

   The problem it fixes: the page canvas was warm cream (#FDFBF5) but
   cards were pure #FFFFFF, so every card read as a bright slab glaring
   out of the background. Here the canvas drops a step, cards become a
   warm off-white, and a soft border carries the edge instead of a
   heavy shadow. Text colours are untouched.
   ===================================================================== */

html:not([data-theme="dark"]) {
  /* canvas */
  --cfl-canvas: #F7F3EA;
  --cfl-topbar: #FDFBF6;

  /* surfaces */
  --cfl-surface: #FFFDF8;   /* cards, panels */
  --cfl-surface-2: #FBF7EF; /* inner boxes, table head, read-only values */
  --cfl-surface-3: #F4EEE2; /* hover, secondary buttons */
  --cfl-input: #FFFDF8;

  /* lines */
  --cfl-border: #EDE4D6;
  --cfl-border-soft: #F2EBE0;
  --cfl-border-strong: #E0D4C0;

  /* Soft edge: a hairline ring plus a low shadow. Deliberately a
     box-shadow and not a `border` shorthand, so the coloured accents
     the pages already draw (a card's gold border-top, a DSS card's
     border-left) survive untouched. */
  --cfl-shadow: 0 0 0 1px rgba(61, 28, 2, 0.045), 0 1px 3px rgba(61, 28, 2, 0.05);
  --cfl-shadow-lg: 0 0 0 1px rgba(61, 28, 2, 0.05), 0 12px 32px -12px rgba(61, 28, 2, 0.18);
}

/* =====================================================================
   CANVAS
   ===================================================================== */

html:not([data-theme="dark"]) body {
  background: var(--cfl-canvas) !important;
}

html:not([data-theme="dark"]) #topbar,
html:not([data-theme="dark"]) .topbar {
  background: var(--cfl-topbar) !important;
  border-bottom: 1px solid var(--cfl-border) !important;
}

html:not([data-theme="dark"]) #page-content,
html:not([data-theme="dark"]) #main-wrapper,
html:not([data-theme="dark"]) .main,
html:not([data-theme="dark"]) .content,
html:not([data-theme="dark"]) .content-container {
  background: transparent;
}

html:not([data-theme="dark"]) #scroll-indicator {
  background: #EFE7DA !important;
}
html:not([data-theme="dark"]) #scroll-indicator-fill {
  background: #CBBCA6 !important;
}

/* =====================================================================
   SURFACES — the actual fix: no more pure white
   ===================================================================== */

html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .summary-card,
html:not([data-theme="dark"]) .sub-summary-card,
html:not([data-theme="dark"]) .chart-card,
html:not([data-theme="dark"]) .report-card,
html:not([data-theme="dark"]) .table-card,
html:not([data-theme="dark"]) .table-section,
html:not([data-theme="dark"]) .history-card,
html:not([data-theme="dark"]) .order-card,
html:not([data-theme="dark"]) .product-card,
html:not([data-theme="dark"]) .staff-card,
html:not([data-theme="dark"]) .storage-card,
html:not([data-theme="dark"]) .list-card,
html:not([data-theme="dark"]) .empty-card,
html:not([data-theme="dark"]) .empty-panel,
html:not([data-theme="dark"]) .dss-card,
html:not([data-theme="dark"]) .settings-nav,
html:not([data-theme="dark"]) .settings-menu,
html:not([data-theme="dark"]) .profile-card,
html:not([data-theme="dark"]) .profile-hero,
html:not([data-theme="dark"]) .recommendation-card,
html:not([data-theme="dark"]) .process-card,
html:not([data-theme="dark"]) .metric-card,
html:not([data-theme="dark"]) .buyer-panel,
html:not([data-theme="dark"]) .product-panel,
html:not([data-theme="dark"]) .recent-card,
html:not([data-theme="dark"]) .logout-box,
html:not([data-theme="dark"]) .notification-panel,
html:not([data-theme="dark"]) .login-card {
  background: var(--cfl-surface) !important;
  border-color: var(--cfl-border) !important;
  box-shadow: var(--cfl-shadow) !important;
}

/* nested boxes sit one warm step down from their card */
html:not([data-theme="dark"]) .detail-box,
html:not([data-theme="dark"]) .meta-box,
html:not([data-theme="dark"]) .action-box,
html:not([data-theme="dark"]) .info-box,
html:not([data-theme="dark"]) .info-value,
html:not([data-theme="dark"]) .info-chip,
html:not([data-theme="dark"]) .field-value,
html:not([data-theme="dark"]) .storage-detail,
html:not([data-theme="dark"]) .storage-note,
html:not([data-theme="dark"]) .cart-item,
html:not([data-theme="dark"]) .metric,
html:not([data-theme="dark"]) .record-item,
html:not([data-theme="dark"]) .empty-table,
html:not([data-theme="dark"]) .note,
html:not([data-theme="dark"]) .profile-note,
html:not([data-theme="dark"]) .recommendation-block {
  background: var(--cfl-surface-2) !important;
  border-color: var(--cfl-border-soft) !important;
}

/* layout wrappers must never draw a box of their own */
html:not([data-theme="dark"]) .info-item,
html:not([data-theme="dark"]) .field,
html:not([data-theme="dark"]) .form-group,
html:not([data-theme="dark"]) .form-options,
html:not([data-theme="dark"]) .input-wrapper,
html:not([data-theme="dark"]) .password-wrap,
html:not([data-theme="dark"]) .password-wrapper,
html:not([data-theme="dark"]) .analytics-panel,
html:not([data-theme="dark"]) .dss-panel,
html:not([data-theme="dark"]) .settings-container,
html:not([data-theme="dark"]) .settings-layout,
html:not([data-theme="dark"]) .settings-wrap,
html:not([data-theme="dark"]) .profile-container,
html:not([data-theme="dark"]) .notification-container,
html:not([data-theme="dark"]) .section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* internal rules within a card */
html:not([data-theme="dark"]) .card-head,
html:not([data-theme="dark"]) .panel-header,
html:not([data-theme="dark"]) .chart-header,
html:not([data-theme="dark"]) .section-header,
html:not([data-theme="dark"]) .history-head,
html:not([data-theme="dark"]) .report-head,
html:not([data-theme="dark"]) .dss-head,
html:not([data-theme="dark"]) .recent-header,
html:not([data-theme="dark"]) .settings-header,
html:not([data-theme="dark"]) .notification-header,
html:not([data-theme="dark"]) .toolbar,
html:not([data-theme="dark"]) .filter-bar,
html:not([data-theme="dark"]) .setting-row,
html:not([data-theme="dark"]) .process-header,
html:not([data-theme="dark"]) .process-footer,
html:not([data-theme="dark"]) .form-actions,
html:not([data-theme="dark"]) .history-row,
html:not([data-theme="dark"]) .summary-line,
html:not([data-theme="dark"]) .profile-footer,
html:not([data-theme="dark"]) .profile-header,
html:not([data-theme="dark"]) .profile-body,
html:not([data-theme="dark"]) .recommendation-footer,
html:not([data-theme="dark"]) .header {
  border-color: var(--cfl-border) !important;
}

html:not([data-theme="dark"]) .setting-row:hover,
html:not([data-theme="dark"]) tbody tr:hover,
html:not([data-theme="dark"]) .history-row:hover {
  background: rgba(61, 28, 2, 0.022) !important;
}

/* =====================================================================
   INPUTS — warm, not stark white
   ===================================================================== */

html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) .form-input,
html:not([data-theme="dark"]) .form-select,
html:not([data-theme="dark"]) .form-textarea,
html:not([data-theme="dark"]) .field-input,
html:not([data-theme="dark"]) .field-select,
html:not([data-theme="dark"]) .setting-select,
html:not([data-theme="dark"]) .search-input,
html:not([data-theme="dark"]) .history-search,
html:not([data-theme="dark"]) .period-select,
html:not([data-theme="dark"]) .status-select,
html:not([data-theme="dark"]) .mini-search,
html:not([data-theme="dark"]) .discount-input,
html:not([data-theme="dark"]) .input,
html:not([data-theme="dark"]) .select,
html:not([data-theme="dark"]) .field input {
  background: var(--cfl-input) !important;
  border-color: var(--cfl-border-strong) !important;
}

html:not([data-theme="dark"]) .search-box,
html:not([data-theme="dark"]) .search-bar,
html:not([data-theme="dark"]) .input-wrap {
  background: var(--cfl-input) !important;
  border-color: var(--cfl-border-strong) !important;
}

html:not([data-theme="dark"]) input::placeholder,
html:not([data-theme="dark"]) textarea::placeholder {
  color: #AFA294 !important;
}

/* =====================================================================
   TABLES
   ===================================================================== */

html:not([data-theme="dark"]) thead th,
html:not([data-theme="dark"]) .table-head,
html:not([data-theme="dark"]) .history-head {
  background: var(--cfl-surface-2) !important;
  border-bottom: 1px solid var(--cfl-border) !important;
}
html:not([data-theme="dark"]) tbody td,
html:not([data-theme="dark"]) .history-cell {
  border-bottom: 1px solid var(--cfl-border-soft) !important;
}

/* =====================================================================
   CONTROLS
   ===================================================================== */

html:not([data-theme="dark"]) .btn-outline,
html:not([data-theme="dark"]) .btn-secondary,
html:not([data-theme="dark"]) .small-btn:not(.primary),
html:not([data-theme="dark"]) .header-button,
html:not([data-theme="dark"]) .view-details-button,
html:not([data-theme="dark"]) .qty-btn,
html:not([data-theme="dark"]) .modal-cancel,
html:not([data-theme="dark"]) .staff-login,
html:not([data-theme="dark"]) .owner-login {
  background: var(--cfl-surface) !important;
  border-color: var(--cfl-border-strong) !important;
}
html:not([data-theme="dark"]) .btn-outline:hover,
html:not([data-theme="dark"]) .btn-secondary:hover,
html:not([data-theme="dark"]) .small-btn:not(.primary):hover,
html:not([data-theme="dark"]) .header-button:hover,
html:not([data-theme="dark"]) .view-details-button:hover,
html:not([data-theme="dark"]) .qty-btn:hover,
html:not([data-theme="dark"]) .modal-cancel:hover,
html:not([data-theme="dark"]) .staff-login:hover,
html:not([data-theme="dark"]) .owner-login:hover {
  background: var(--cfl-surface-3) !important;
}

/* .small-btn is excluded from .primary above for the same reason as
   .filter-btn below: .small-btn.primary (e.g. "Evaluate", "Evaluate Result")
   is a gold-filled, white-text button — the neutral background here would
   win via !important and leave white text on a near-white pill. */

/* Tab CONTAINERS and gold active pills are deliberately left alone:
   the containers are already a warm tint, and a gold pill carries
   white text — recolouring it would wipe out the label. Only the
   pages whose active pill is literally white get softened. */
html:not([data-theme="dark"]) .tab-btn.active {
  background: var(--cfl-surface) !important;
}

/* remaining white surfaces the group selectors above don't reach */
html:not([data-theme="dark"]) .empty-state,
html:not([data-theme="dark"]) .panel-body,
html:not([data-theme="dark"]) .danger-zone {
  background: var(--cfl-surface) !important;
  border-color: var(--cfl-border) !important;
}

html:not([data-theme="dark"]) .theme-option,
html:not([data-theme="dark"]) .history-date,
html:not([data-theme="dark"]) .choice label {
  background: var(--cfl-surface-2) !important;
  border-color: var(--cfl-border) !important;
}

/* .filter-btn is excluded from the neutral-button softening below: the
   pages that use it also give it a gold-filled, white-text .active/selected
   state (e.g. the "All" product filter on Inventory & Sales) — the same
   pattern already carved out for tabs elsewhere in this file. Recolouring
   its background here would win over that gold fill via !important and
   leave white text on a near-white pill, unreadable. */
/* .btn-danger is excluded here for the same reason as .small-btn.primary
   and .filter-btn.active above: it's a red-filled, white-text button —
   the neutral background here would win via !important and leave white
   text on a near-white pill, unreadable. .history-delete-button is a
   red-outline chip (white bg already, red border/text) — excluded too so
   its red border isn't softened to a neutral one. */
html:not([data-theme="dark"]) .filter-btn:not(.active),
html:not([data-theme="dark"]) .header-btn,
html:not([data-theme="dark"]) .receipt-btn,
html:not([data-theme="dark"]) .modal-button.secondary,
html:not([data-theme="dark"]) .staff-link {
  background: var(--cfl-surface) !important;
  border-color: var(--cfl-border-strong) !important;
}

html:not([data-theme="dark"]) .form-input:focus,
html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) select:focus,
html:not([data-theme="dark"]) textarea:focus {
  background: var(--cfl-surface) !important;
}

/* =====================================================================
   OVERLAYS
   ===================================================================== */

html:not([data-theme="dark"]) .modal-box,
html:not([data-theme="dark"]) #profile-dropdown,
html:not([data-theme="dark"]) #notification-dropdown,
html:not([data-theme="dark"]) .notification-dropdown,
html:not([data-theme="dark"]) .dropdown,
html:not([data-theme="dark"]) .dropdown-content,
html:not([data-theme="dark"]) .settings-panel,
html:not([data-theme="dark"]) .toast {
  background: var(--cfl-surface) !important;
  border-color: var(--cfl-border) !important;
  box-shadow: var(--cfl-shadow-lg) !important;
}
html:not([data-theme="dark"]) .modal-title,
html:not([data-theme="dark"]) .modal-header,
html:not([data-theme="dark"]) .modal-footer,
html:not([data-theme="dark"]) .dropdown-header {
  border-color: var(--cfl-border) !important;
}
html:not([data-theme="dark"]) .dropdown-item:hover,
html:not([data-theme="dark"]) .notification-item:hover,
html:not([data-theme="dark"]) .item:hover {
  background: var(--cfl-surface-3) !important;
}

html:not([data-theme="dark"]) .notification-item,
html:not([data-theme="dark"]) .item {
  background: var(--cfl-surface) !important;
  border-bottom: 1px solid var(--cfl-border-soft) !important;
}

/* =====================================================================
   LOGIN
   ===================================================================== */

html:not([data-theme="dark"]) .login-side {
  background: var(--cfl-canvas) !important;
}
html:not([data-theme="dark"]) .login-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:not([data-theme="dark"]) .divider-line {
  background: var(--cfl-border) !important;
}