/* ═══════════════════════════════════════════════════════════════════════════
   iCaker Design System
   ───────────────────────────────────────────────────────────────────────────
   Warm & refined: one deep-plum brand colour, warm neutral greys, flat
   surfaces. Colour is an accent, never the background.

   Loaded LAST in views/header.ejs so it settles the cascade over
   icaker-app-theme.css and the per-page stylesheets. Layered so the token
   block can be read on its own; !important appears only where it has to beat
   an inline style or a long-standing page rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS
   These re-point the variables the existing stylesheets already consume, so
   most of the app re-skins itself without any markup change.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand — deep plum. Used for the active state, primary actions, focus. */
  --ic-brand-50:  #fdf5f8;
  --ic-brand-100: #fae9f0;
  --ic-brand-200: #f3d0de;
  --ic-brand-300: #e4a8c2;
  --ic-brand-400: #cf7ba0;
  --ic-brand-500: #c2557e;   /* dusty rose — secondary accent */
  --ic-brand-600: #a33763;
  --ic-brand-700: #7a1f4b;   /* primary brand */
  --ic-brand-800: #5e1739;
  --ic-brand-900: #431027;

  /* Warm neutrals — a touch of red in the grey keeps the bakery warmth. */
  --ic-canvas:      #faf8f7;
  --ic-surface:     #ffffff;
  --ic-surface-alt: #f6f3f2;
  --ic-surface-sunk:#f1ecea;
  --ic-border:      #ece6e8;
  --ic-border-strong:#dcd3d6;
  --ic-ink:         #241c1f;
  --ic-ink-2:       #4a3f43;
  --ic-muted:       #7a6e72;
  --ic-muted-2:     #9c9297;

  /* Semantic — desaturated to sit beside the neutrals without shouting. */
  --ic-success:   #15734d;
  --ic-success-bg:#e9f5ef;
  --ic-warning:   #91621b;
  --ic-warning-bg:#fbf1e0;
  --ic-danger:    #a32626;
  --ic-danger-bg: #fbebeb;
  --ic-info:      #2a5580;
  --ic-info-bg:   #eaf1f8;

  /* Type — a tight, deliberate scale. No viewport clamps: headings that
     resize with the window are what made the old pages feel unsettled. */
  --ic-font: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ic-text-xs:   0.75rem;    /* 12 — labels, meta */
  --ic-text-sm:   0.8125rem;  /* 13 — secondary */
  --ic-text-base: 0.875rem;   /* 14 — body, the app's workhorse size */
  --ic-text-md:   0.9375rem;  /* 15 — emphasised body */
  --ic-text-lg:   1.0625rem;  /* 17 — card titles */
  --ic-text-xl:   1.375rem;   /* 22 — page titles */
  --ic-text-2xl:  1.75rem;    /* 28 — stat values */
  --ic-text-3xl:  2.25rem;    /* 36 — hero only */

  /* Geometry — 8px grid, restrained radii. */
  --ic-r-sm: 6px;
  --ic-r-md: 8px;
  --ic-r-lg: 12px;
  --ic-r-xl: 16px;
  --ic-r-pill: 999px;

  /* Shadows — neutral and shallow. The old brown-tinted glows read as plastic. */
  --ic-shadow-xs: 0 1px 2px rgba(36, 28, 31, 0.04);
  --ic-shadow-sm: 0 1px 3px rgba(36, 28, 31, 0.06), 0 1px 2px rgba(36, 28, 31, 0.04);
  --ic-shadow-md: 0 4px 12px rgba(36, 28, 31, 0.07);
  --ic-shadow-lg: 0 12px 28px rgba(36, 28, 31, 0.10);

  --ic-ring: 0 0 0 3px rgba(122, 31, 75, 0.16);
  --ic-transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);

  --ic-container: 1280px;
  --ic-header-h: 60px;   /* the sticky page header; the drawer sits under it */

  /* ── Re-point the legacy tokens ─────────────────────────────────────────
     icaker-app-theme.css and the page stylesheets read these. Overriding
     them here re-skins those rules in place. */
  --primary-50:  var(--ic-brand-50);
  --primary-100: var(--ic-brand-100);
  --primary-200: var(--ic-brand-200);
  --primary-300: var(--ic-brand-300);
  --primary-400: var(--ic-brand-400);
  --primary-500: var(--ic-brand-500);
  --primary-600: var(--ic-brand-600);
  --primary-700: var(--ic-brand-700);
  --primary-800: var(--ic-brand-800);
  --primary-900: var(--ic-brand-900);

  --accent-50:  var(--ic-brand-50);
  --accent-100: var(--ic-brand-100);
  --accent-200: var(--ic-brand-200);
  --accent-300: var(--ic-brand-300);
  --accent-400: var(--ic-brand-400);
  --accent-500: var(--ic-brand-500);
  --accent-600: var(--ic-brand-600);
  --accent-700: var(--ic-brand-700);

  --rose-gold:       var(--ic-brand-400);
  --rose-gold-light: var(--ic-brand-200);
  --rose-gold-dark:  var(--ic-brand-600);

  --success-500: var(--ic-success);
  --success-600: var(--ic-success);
  --success-700: var(--ic-success);
  --warning-500: var(--ic-warning);
  --warning-600: var(--ic-warning);
  --warning-700: var(--ic-warning);
  --error-500:   var(--ic-danger);
  --error-600:   var(--ic-danger);
  --error-700:   var(--ic-danger);

  --text-xs:   var(--ic-text-xs);
  --text-sm:   var(--ic-text-sm);
  --text-base: var(--ic-text-base);
  --text-lg:   var(--ic-text-lg);
  --text-xl:   var(--ic-text-xl);
  --text-2xl:  var(--ic-text-2xl);
  --text-3xl:  var(--ic-text-3xl);
  --text-4xl:  var(--ic-text-3xl);
  --text-5xl:  var(--ic-text-3xl);

  --radius-sm:  var(--ic-r-sm);
  --radius-md:  var(--ic-r-md);
  --radius:     var(--ic-r-md);
  --radius-lg:  var(--ic-r-lg);
  --radius-xl:  var(--ic-r-lg);
  --radius-2xl: var(--ic-r-xl);
  --radius-3xl: var(--ic-r-xl);

  --shadow-sm:  var(--ic-shadow-xs);
  --shadow:     var(--ic-shadow-sm);
  --shadow-md:  var(--ic-shadow-sm);
  --shadow-lg:  var(--ic-shadow-md);
  --shadow-xl:  var(--ic-shadow-lg);
  --shadow-2xl: var(--ic-shadow-lg);
  --shadow-glow:    var(--ic-shadow-sm);
  --shadow-glow-lg: var(--ic-shadow-md);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. BASE
   ─────────────────────────────────────────────────────────────────────────── */
body {
  background: var(--ic-canvas) !important;
  color: var(--ic-ink);
  font-family: var(--ic-font);
  font-size: var(--ic-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The old theme painted a decorative wash over the whole page. */
body::before,
body::after { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ic-font);
  color: var(--ic-ink);
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.3;
}
h1 { font-size: var(--ic-text-xl); }
h2 { font-size: var(--ic-text-lg); }
h3 { font-size: var(--ic-text-md); }

a { color: var(--ic-brand-700); text-decoration: none; }
a:hover { color: var(--ic-brand-600); }

:focus-visible {
  outline: 2px solid var(--ic-brand-700);
  outline-offset: 2px;
  border-radius: var(--ic-r-sm);
}

::selection { background: var(--ic-brand-100); color: var(--ic-brand-900); }

/* Quieter scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ic-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ic-border-strong);
  border-radius: var(--ic-r-pill);
  border: 3px solid var(--ic-canvas);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ic-muted-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. APP BAR
   One flat surface on every page. Page identity comes from the page header's
   title and icon, not from repainting the whole chrome.
   ─────────────────────────────────────────────────────────────────────────── */
.main-header {
  background: var(--ic-surface) !important;
  border-bottom: 1px solid var(--ic-border);
  box-shadow: none !important;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: var(--ic-container);
  margin: 0 auto;
  padding: 0 20px;
  min-height: var(--ic-header-h);
  gap: 16px;
}

.header-logo .logo-image {
  height: 28px;
  /* The supplied logo is light-on-transparent, made for the old dark bar.
     On a white bar it needs inverting back to the brand colour. */
  filter: brightness(0) saturate(100%) invert(13%) sepia(42%) saturate(3200%) hue-rotate(310deg) brightness(92%) contrast(96%);
}
.header-logo:hover .logo-image { transform: none; filter: brightness(0) saturate(100%) invert(13%) sepia(42%) saturate(3200%) hue-rotate(310deg) brightness(92%) contrast(96%) opacity(0.82); }

/* ── Nav items ── */
.desktop-nav { gap: 1px; }

.desktop-nav .nav-link {
  color: var(--ic-ink-2) !important;
  background: transparent !important;
  font-size: var(--ic-text-base);
  font-weight: 500;
  padding: 7px 11px;
  border-radius: var(--ic-r-md);
  border: none !important;
  box-shadow: none !important;
  transition: background var(--ic-transition), color var(--ic-transition);
  position: relative;
  white-space: nowrap;
}
.desktop-nav .nav-link i {
  font-size: 0.95rem;
  opacity: 0.65;
  margin-inline-end: 5px;
}
.desktop-nav .nav-link:hover {
  background: var(--ic-surface-alt) !important;
  color: var(--ic-ink) !important;
  transform: none;
}
.desktop-nav .nav-link:hover i { opacity: 0.85; }

/* Active: the one place brand colour appears in the bar. */
.desktop-nav .nav-link.active {
  background: var(--ic-brand-50) !important;
  color: var(--ic-brand-700) !important;
  font-weight: 600;
}
.desktop-nav .nav-link.active i { opacity: 1; color: var(--ic-brand-700); }
.desktop-nav .nav-link.active::before,
.desktop-nav .nav-link.active::after { display: none !important; }

.desktop-nav .nav-link.admin-link { color: var(--ic-muted) !important; }
.desktop-nav .nav-link.admin-link.active { color: var(--ic-brand-700) !important; }

/* ── Right-hand cluster ── */
.user-menu { gap: 6px; }

.user-menu > button,
.notif-bell-btn,
.desktop-view-toggle,
.desktop-pin-toggle {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--ic-r-md) !important;
  width: 34px !important;
  height: 34px !important;
  color: var(--ic-muted) !important;
  font-size: 1rem !important;
  backdrop-filter: none !important;
  transition: background var(--ic-transition), color var(--ic-transition);
}
.user-menu > button:hover,
.notif-bell-btn:hover,
.desktop-view-toggle:hover,
.desktop-pin-toggle:hover {
  background: var(--ic-surface-alt) !important;
  color: var(--ic-ink) !important;
}

.notif-badge {
  background: var(--ic-brand-700) !important;
  border: 2px solid var(--ic-surface) !important;
  box-shadow: none !important;
  animation: none !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  min-width: 17px !important;
  line-height: 13px !important;
}

.user-btn {
  background: transparent !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-pill) !important;
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-sm) !important;
  font-weight: 500;
  padding: 3px 4px 3px 12px !important;
  gap: 8px;
  box-shadow: none !important;
  transition: border-color var(--ic-transition), background var(--ic-transition);
}
.user-btn:hover {
  background: var(--ic-surface-alt) !important;
  border-color: var(--ic-border-strong) !important;
  transform: none !important;
}
.user-btn .user-avatar {
  width: 28px; height: 28px;
  border: none;
  background: var(--ic-brand-100);
  color: var(--ic-brand-700);
  font-size: 0.85rem;
}

/* Plan badges: small, quiet, legible — not neon pills. */
.admin-badge, .seller-badge {
  background: var(--ic-surface-alt) !important;
  color: var(--ic-muted) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-sm) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}
.admin-badge { color: var(--ic-brand-700) !important; background: var(--ic-brand-50) !important; border-color: var(--ic-brand-200) !important; }

/* ── Dropdown ── */
.dropdown-menu-custom {
  background: var(--ic-surface);
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-lg);
  box-shadow: var(--ic-shadow-lg);
  padding: 6px;
  min-width: 232px;
  margin-top: 8px;
}
.dropdown-item-custom {
  border-radius: var(--ic-r-md);
  padding: 8px 10px;
  font-size: var(--ic-text-base);
  color: var(--ic-ink-2);
  gap: 10px;
  transition: background var(--ic-transition), color var(--ic-transition);
}
.dropdown-item-custom:hover {
  background: var(--ic-surface-alt);
  color: var(--ic-ink);
  transform: none;
  padding-inline-start: 10px;
}
.dropdown-item-custom i { color: var(--ic-muted); font-size: 1rem; width: 18px; }
.dropdown-item-custom:hover i { color: var(--ic-brand-700); }
.dropdown-divider { border-color: var(--ic-border); margin: 6px 0; }

/* ── Mobile drawer ── */
.mobile-menu {
  background: var(--ic-surface);
  border-inline-start: 1px solid var(--ic-border);
  box-shadow: var(--ic-shadow-lg);
}
/* The drawer is fixed at top:0 under the sticky header (z 999 vs 1000), so its
   first header-height of pixels was always painted over. It rendered its own
   copy of the logo up there - permanently invisible - and the identity pill
   below it came out clipped. The header right above already carries the brand,
   so the drawer drops its logo and starts its content clear of the bar. */
.mobile-menu-logo { display: none !important; }
.mobile-menu-header {
  background: var(--ic-surface) !important;
  border-bottom: 1px solid var(--ic-border);
  padding-top: calc(var(--ic-header-h) + 16px) !important;
}
/* The drawer header used to be a plum slab, so header-style.css sets
   `color: white` on it and everything inside inherits that. Flattening the
   background to the page surface left the name and the email white on white -
   invisible in the mobile drawer and in the pinned desktop sidebar alike. */
.mobile-menu-header { color: var(--ic-ink) !important; }
.mobile-menu-header .mobile-user-name { color: var(--ic-ink) !important; }
.mobile-menu-header .mobile-user-email {
  /* --ic-muted lands at 4.42 against the pill; this clears 4.5 at 12px and is
     still clearly quieter than the ink name beside it. */
  color: #71656a !important;
  opacity: 1 !important;          /* it was dimmed white against the plum */
}
/* The identity pill was a translucent white, which read as a lighter panel on
   plum and as nothing at all on white. */
.mobile-user-info {
  background: var(--ic-surface-alt) !important;
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-lg) !important;
}
/* 11px bold sat at 4.42 against the pill it lives on. */
.mobile-menu-header .seller-badge { color: var(--ic-ink-2) !important; }

.mobile-menu-title {
  font-size: var(--ic-text-xs);
  font-weight: 600;
  color: var(--ic-muted);         /* muted-2 was 3.01 against the drawer */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mobile-nav-link {
  border-radius: var(--ic-r-md);
  color: var(--ic-ink-2);
  font-size: var(--ic-text-md);
  font-weight: 500;
  padding: 10px 12px;
}
.mobile-nav-link:hover { background: var(--ic-surface-alt); }
.mobile-nav-link.active {
  background: var(--ic-brand-50) !important;
  color: var(--ic-brand-700) !important;
  font-weight: 600;
}
.mobile-nav-link i { color: var(--ic-muted); }
.mobile-nav-link.active i { color: var(--ic-brand-700) !important; }
.mobile-overlay { background: rgba(36, 28, 31, 0.45); backdrop-filter: blur(2px); }

/* ───────────────────────────────────────────────────────────────────────────
   4. PAGE HEADER
   Replaces the full-bleed coloured gradient band. Title + subtitle on the
   left of the reading direction, actions on the other side, thin rule below.
   ─────────────────────────────────────────────────────────────────────────── */
.page-header,
.page-hero,
.hero-section,
.page-title-section {
  background: var(--ic-surface) !important;
  border-bottom: 1px solid var(--ic-border);
  color: var(--ic-ink) !important;
  padding: 18px 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.page-header::before, .page-header::after,
.page-hero::before, .page-hero::after { display: none !important; }

.page-header .page-title,
.page-header h1,
.page-hero h1 {
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-xl) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  margin: 0 !important;
  letter-spacing: -0.015em;
}
.page-header .page-subtitle,
.page-header p,
.page-hero p {
  color: var(--ic-muted) !important;
  font-size: var(--ic-text-base) !important;
  text-shadow: none !important;
  margin: 2px 0 0 !important;
}

/* Buttons that sat on the coloured band were styled translucent-white. */
.page-header .btn,
.page-header button:not(.btn-primary):not(.btn-danger) {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-border-strong) !important;
  color: var(--ic-ink) !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
}

/* ── The design-system page header, for markup we author ── */
.ic-page-head {
  background: var(--ic-surface);
  border-bottom: 1px solid var(--ic-border);
}
.ic-page-head__inner {
  max-width: var(--ic-container);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ic-page-head__icon {
  width: 38px; height: 38px;
  border-radius: var(--ic-r-md);
  background: var(--ic-brand-50);
  color: var(--ic-brand-700);
  display: grid; place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ic-page-head__text { min-width: 0; flex: 1; }
.ic-page-head__title {
  font-size: var(--ic-text-xl);
  font-weight: 600;
  color: var(--ic-ink);
  margin: 0;
  letter-spacing: -0.015em;
}
.ic-page-head__sub {
  font-size: var(--ic-text-base);
  color: var(--ic-muted);
  margin: 2px 0 0;
}
.ic-page-head__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   5. LAYOUT
   One container width across the app. The old pages each picked their own,
   which is why content drifted to one side of the window.
   ─────────────────────────────────────────────────────────────────────────── */
.container,
.container-fluid,
.main-container,
.page-container,
.content-wrapper {
  max-width: var(--ic-container);
  margin-inline: auto;
  padding-inline: 20px;
  width: 100%;
}

.ic-stack   { display: flex; flex-direction: column; gap: 16px; }
.ic-row     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ic-spacer  { flex: 1; }
.ic-section { padding-block: 20px; }

/* ───────────────────────────────────────────────────────────────────────────
   6. CARDS
   ─────────────────────────────────────────────────────────────────────────── */
.card,
.ic-card,
.item-card,
.recipe-card,
.cake-card,
.ingredient-card,
.customer-card,
.template-card,
.product-card,
.stat-card {
  background: var(--ic-surface);
  /* The profile page's own CSS sets white text on .stat-card, from when these
     were coloured tiles. Only the .stat-purple/.stat-pink/... modifiers are
     given ink further down, so a stat card without a modifier would come out
     white on white. The base class carries the colour instead. */
  color: var(--ic-ink);
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-lg);
  box-shadow: var(--ic-shadow-xs);
  transition: border-color var(--ic-transition), box-shadow var(--ic-transition);
}
.card:hover,
.ic-card:hover,
.item-card:hover,
.recipe-card:hover,
.cake-card:hover,
.ingredient-card:hover,
.customer-card:hover,
.template-card:hover,
.product-card:hover {
  border-color: var(--ic-border-strong);
  box-shadow: var(--ic-shadow-md);
  /* No lift: a whole grid of cards jumping on hover is visual noise. */
  transform: none;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ic-border);
  padding: 14px 16px;
  font-weight: 600;
  font-size: var(--ic-text-md);
  color: var(--ic-ink);
}
.card-body { padding: 16px; }
.card-footer {
  background: var(--ic-surface-alt);
  border-top: 1px solid var(--ic-border);
  padding: 12px 16px;
}

/* ───────────────────────────────────────────────────────────────────────────
   7. STAT TILES
   Was: bare numbers in five different colours floating on a tinted band.
   Now: bordered tiles, label above, value below, one accent.
   ─────────────────────────────────────────────────────────────────────────── */
.stats-bar,
.stats-row,
.stats-container,
.summary-stats {
  background: transparent !important;
  border: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  max-width: var(--ic-container);
  margin: 16px auto !important;
  padding: 0 20px !important;
  box-shadow: none !important;
}

.stat-item,
.stat-box,
.stat-card,
.summary-stat {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-lg) !important;
  padding: 14px 16px !important;
  box-shadow: var(--ic-shadow-xs) !important;
  text-align: start !important;
  display: flex !important;
  flex-direction: column-reverse !important; /* label sits above the value */
  align-items: flex-start !important;
  gap: 2px !important;
}

.stat-value,
.stat-number,
.stat-item > .value,
.stat-item strong {
  font-size: var(--ic-text-2xl) !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  background: none !important;
  -webkit-text-fill-color: var(--ic-ink) !important;
  text-shadow: none !important;
}

.stat-label,
.stat-title,
.stat-item > span:not(.stat-value):not(.stat-number),
.stat-item small {
  font-size: var(--ic-text-xs) !important;
  font-weight: 500 !important;
  color: var(--ic-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* The one figure worth colouring is money earned. */
.stat-item.is-primary .stat-value,
.stat-item.is-revenue .stat-value { color: var(--ic-brand-700) !important; -webkit-text-fill-color: var(--ic-brand-700) !important; }

.ic-stat {
  background: var(--ic-surface);
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-lg);
  padding: 14px 16px;
  box-shadow: var(--ic-shadow-xs);
}
.ic-stat__label { font-size: var(--ic-text-xs); color: var(--ic-muted); font-weight: 500; margin: 0 0 4px; }
.ic-stat__value { font-size: var(--ic-text-2xl); font-weight: 600; color: var(--ic-ink); line-height: 1.15; letter-spacing: -0.02em; }
.ic-stat__meta  { font-size: var(--ic-text-xs); color: var(--ic-muted-2); margin-top: 4px; }
.ic-stat-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

/* ───────────────────────────────────────────────────────────────────────────
   8. BUTTONS
   Solid brand for the one primary action; everything else is a bordered
   neutral. No gradients, no lift-on-hover, no glow.
   ─────────────────────────────────────────────────────────────────────────── */
.btn,
.button,
button.btn,
.ic-btn {
  font-family: var(--ic-font);
  font-size: var(--ic-text-base);
  font-weight: 500;
  border-radius: var(--ic-r-md);
  padding: 8px 14px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  line-height: 1.4;
  transition: background var(--ic-transition), border-color var(--ic-transition), color var(--ic-transition);
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn:hover, .button:hover, .ic-btn:hover { transform: none !important; }
.btn:active, .ic-btn:active { transform: translateY(0.5px) !important; }
.btn::before, .btn::after { display: none !important; }

.btn-primary, .ic-btn--primary {
  background: var(--ic-brand-700) !important;
  border-color: var(--ic-brand-700) !important;
  color: #fff !important;
}
.btn-primary:hover, .ic-btn--primary:hover {
  background: var(--ic-brand-800) !important;
  border-color: var(--ic-brand-800) !important;
}

.btn-secondary, .btn-light, .btn-outline-secondary, .ic-btn--secondary {
  background: var(--ic-surface) !important;
  border-color: var(--ic-border-strong) !important;
  color: var(--ic-ink) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .ic-btn--secondary:hover {
  background: var(--ic-surface-alt) !important;
}

.ic-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ic-ink-2);
}
.ic-btn--ghost:hover { background: var(--ic-surface-alt); color: var(--ic-ink); }

.btn-success { background: var(--ic-success) !important; border-color: var(--ic-success) !important; color: #fff !important; }
.btn-danger, .ic-btn--danger { background: var(--ic-danger) !important; border-color: var(--ic-danger) !important; color: #fff !important; }
.btn-warning { background: var(--ic-warning) !important; border-color: var(--ic-warning) !important; color: #fff !important; }
.btn-outline-danger { background: transparent !important; border-color: var(--ic-danger) !important; color: var(--ic-danger) !important; }
.btn-outline-danger:hover { background: var(--ic-danger-bg) !important; }

.btn-sm, .ic-btn--sm { font-size: var(--ic-text-sm); padding: 5px 10px; border-radius: var(--ic-r-sm); }
.btn-lg, .ic-btn--lg { font-size: var(--ic-text-md); padding: 11px 20px; }

.btn:disabled, .ic-btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }

/* Icon-only button */
.ic-btn--icon { width: 34px; height: 34px; padding: 0; }

/* ── Floating action button ─────────────────────────────────────────────────
   The app rendered two of these, in opposite corners. Keep one, make it
   sit in the end corner, and tone it down to a solid brand disc. */
.fab, .floating-btn, .float-btn, .add-fab, .fab-button {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  box-shadow: var(--ic-shadow-lg) !important;
  border: none !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--ic-r-pill) !important;
  color: #fff !important;
  animation: none !important;
  inset-inline-end: 20px !important;
  inset-inline-start: auto !important;
  bottom: 20px !important;
}
.fab:hover, .floating-btn:hover, .float-btn:hover { background: var(--ic-brand-800) !important; transform: none !important; }

/* ───────────────────────────────────────────────────────────────────────────
   9. FORMS
   ─────────────────────────────────────────────────────────────────────────── */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"],
input[type="tel"], input[type="url"], input[type="date"], input[type="time"],
select, textarea, .ic-input {
  font-family: var(--ic-font);
  font-size: var(--ic-text-base);
  color: var(--ic-ink);
  background: var(--ic-surface);
  border: 1px solid var(--ic-border-strong);
  border-radius: var(--ic-r-md);
  padding: 8px 12px;
  transition: border-color var(--ic-transition), box-shadow var(--ic-transition);
  box-shadow: none;
  /* No blanket width here: the pages lay their own controls out in flex rows,
     and forcing 100% collapsed the search box and stretched the sort select. */
}
.form-control:hover, select:hover, textarea:hover, .ic-input:hover { border-color: var(--ic-muted-2); }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus, .ic-input:focus {
  outline: none;
  border-color: var(--ic-brand-600);
  box-shadow: var(--ic-ring);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--ic-muted-2); }

.form-label, label, .ic-label {
  font-size: var(--ic-text-sm);
  font-weight: 500;
  color: var(--ic-ink-2);
  margin-bottom: 5px;
  display: block;
}
.ic-field { margin-bottom: 14px; }
.ic-hint  { font-size: var(--ic-text-xs); color: var(--ic-muted); margin-top: 4px; }
.ic-error { font-size: var(--ic-text-xs); color: var(--ic-danger); margin-top: 4px; }

.search-box, .search-input, .search-wrapper input {
  border-radius: var(--ic-r-md) !important;
  border: 1px solid var(--ic-border-strong) !important;
  background: var(--ic-surface) !important;
  box-shadow: none !important;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--ic-brand-700); width: auto; }

/* ───────────────────────────────────────────────────────────────────────────
   10. CHIPS / FILTERS / BADGES
   ─────────────────────────────────────────────────────────────────────────── */
.filter-btn, .filter-chip, .chip, .tag-filter, .ic-chip {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-border-strong) !important;
  color: var(--ic-ink-2) !important;
  border-radius: var(--ic-r-pill) !important;
  font-size: var(--ic-text-sm) !important;
  font-weight: 500 !important;
  padding: 5px 13px !important;
  box-shadow: none !important;
  transition: background var(--ic-transition), border-color var(--ic-transition), color var(--ic-transition);
}
.filter-btn:hover, .filter-chip:hover, .chip:hover, .ic-chip:hover {
  background: var(--ic-surface-alt) !important;
  transform: none !important;
}
.filter-btn.active, .filter-chip.active, .chip.active, .ic-chip--active,
.filter-btn[aria-pressed="true"] {
  background: var(--ic-brand-700) !important;
  border-color: var(--ic-brand-700) !important;
  color: #fff !important;
}

.badge, .ic-badge {
  font-size: var(--ic-text-xs) !important;
  font-weight: 600 !important;
  border-radius: var(--ic-r-sm) !important;
  padding: 2px 7px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: var(--ic-surface-alt) !important;
  color: var(--ic-muted) !important;
  border: 1px solid var(--ic-border) !important;
  letter-spacing: 0 !important;
}
.badge.bg-success, .badge-success, .ic-badge--success { background: var(--ic-success-bg) !important; color: var(--ic-success) !important; border-color: transparent !important; }
.badge.bg-warning, .badge-warning, .ic-badge--warning { background: var(--ic-warning-bg) !important; color: var(--ic-warning) !important; border-color: transparent !important; }
.badge.bg-danger,  .badge-danger,  .ic-badge--danger  { background: var(--ic-danger-bg)  !important; color: var(--ic-danger)  !important; border-color: transparent !important; }
.badge.bg-info,    .badge-info,    .ic-badge--info    { background: var(--ic-info-bg)    !important; color: var(--ic-info)    !important; border-color: transparent !important; }
.badge.bg-primary, .badge-primary, .ic-badge--brand   { background: var(--ic-brand-50)   !important; color: var(--ic-brand-700) !important; border-color: transparent !important; }

/* Recipe / cake tags */
.tag, .recipe-tag, .cake-tag {
  background: var(--ic-surface-alt) !important;
  color: var(--ic-muted) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-sm) !important;
  font-size: var(--ic-text-xs) !important;
  font-weight: 500 !important;
  padding: 2px 7px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   11. TABLES
   ─────────────────────────────────────────────────────────────────────────── */
.table, table.data-table, .ic-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ic-text-base);
  background: var(--ic-surface);
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-lg);
  overflow: hidden;
}
.table th, .ic-table th {
  background: var(--ic-surface-alt);
  color: var(--ic-muted);
  font-size: var(--ic-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  text-align: start;
  border-bottom: 1px solid var(--ic-border);
  white-space: nowrap;
}
.table td, .ic-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ic-border);
  color: var(--ic-ink-2);
  vertical-align: middle;
}
.table tbody tr:last-child td, .ic-table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover, .ic-table tbody tr:hover { background: var(--ic-surface-alt); }

/* Numeric columns line up when they share a tabular figure set. */
.ic-num, .table td.num, .price, .amount, .cost { font-variant-numeric: tabular-nums; }

.ic-table-wrap { overflow-x: auto; border-radius: var(--ic-r-lg); }

/* ───────────────────────────────────────────────────────────────────────────
   12. MODALS / SHEETS
   ─────────────────────────────────────────────────────────────────────────── */
.modal-content, .modal-box, .popup-content, .ic-modal {
  background: var(--ic-surface);
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-xl);
  box-shadow: var(--ic-shadow-lg);
}
.modal-header, .popup-header {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ic-border);
  color: var(--ic-ink) !important;
  padding: 16px 20px;
}
.modal-header h1, .modal-header h2, .modal-header h3, .modal-title {
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-lg) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
.modal-body { padding: 20px; }
.modal-footer {
  border-top: 1px solid var(--ic-border);
  padding: 14px 20px;
  gap: 8px;
  background: var(--ic-surface-alt);
}
.modal-backdrop, .overlay { background: rgba(36, 28, 31, 0.45); backdrop-filter: blur(2px); }

/* ───────────────────────────────────────────────────────────────────────────
   13. ALERTS / FLASH
   ─────────────────────────────────────────────────────────────────────────── */
.alert, .flash-message, .ic-alert {
  border-radius: var(--ic-r-md);
  border: 1px solid transparent;
  padding: 11px 14px;
  font-size: var(--ic-text-base);
  box-shadow: none;
  background-image: none !important;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.alert-success, .flash-success { background: var(--ic-success-bg) !important; color: var(--ic-success) !important; border-color: rgba(21,115,77,0.18) !important; }
.alert-danger, .alert-error, .flash-error { background: var(--ic-danger-bg) !important; color: var(--ic-danger) !important; border-color: rgba(163,38,38,0.18) !important; }
.alert-warning, .flash-warning { background: var(--ic-warning-bg) !important; color: var(--ic-warning) !important; border-color: rgba(145,98,27,0.18) !important; }
.alert-info, .flash-info { background: var(--ic-info-bg) !important; color: var(--ic-info) !important; border-color: rgba(42,85,128,0.18) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   14. EMPTY STATES
   An empty list should say what it is and offer the action, not sit blank.
   ─────────────────────────────────────────────────────────────────────────── */
.empty-state, .no-results, .ic-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--ic-surface);
  border: 1px dashed var(--ic-border-strong);
  border-radius: var(--ic-r-lg);
  color: var(--ic-muted);
}
.empty-state i, .ic-empty__icon {
  font-size: 2rem;
  color: var(--ic-muted-2);
  margin-bottom: 10px;
  display: block;
}
.ic-empty__title { font-size: var(--ic-text-md); font-weight: 600; color: var(--ic-ink); margin: 0 0 4px; }
.ic-empty__text  { font-size: var(--ic-text-base); color: var(--ic-muted); margin: 0 0 16px; max-width: 40ch; margin-inline: auto; }

/* ───────────────────────────────────────────────────────────────────────────
   15. MISC CHROME
   ─────────────────────────────────────────────────────────────────────────── */
/* The reminders bar was a purple gradient pill floating mid-page. */
.reminders-widget, .reminders-bar, .reminder-toggle {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-lg) !important;
  color: var(--ic-ink) !important;
  box-shadow: var(--ic-shadow-xs) !important;
  max-width: var(--ic-container);
  margin-inline: auto !important;
}
.reminders-widget .badge, .reminder-count {
  background: var(--ic-brand-50) !important;
  color: var(--ic-brand-700) !important;
  border: none !important;
}

/* Section headings inside pages (category group headers etc.) */
.section-header, .category-header, .group-header {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--ic-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px !important;
  margin: 24px 0 14px !important;
  font-size: var(--ic-text-md) !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
}
.section-header .count, .category-header .count {
  background: var(--ic-surface-alt) !important;
  color: var(--ic-muted) !important;
  border-radius: var(--ic-r-sm) !important;
  font-size: var(--ic-text-xs) !important;
  padding: 1px 6px !important;
  font-weight: 600 !important;
}

/* Avatars */
.avatar, .user-avatar, .profile-avatar {
  border-radius: var(--ic-r-pill);
  background: var(--ic-brand-100);
  color: var(--ic-brand-700);
  object-fit: cover;
}

/* Toggles */
.toggle-switch, .switch { accent-color: var(--ic-brand-700); }

/* Progress */
.progress { background: var(--ic-surface-sunk); border-radius: var(--ic-r-pill); height: 6px; overflow: hidden; }
.progress-bar { background: var(--ic-brand-700) !important; background-image: none !important; }

/* Dividers */
hr, .divider { border: none; border-top: 1px solid var(--ic-border); margin: 20px 0; }

/* Tooltips */
.tooltip-inner, .ic-tooltip {
  background: var(--ic-ink);
  color: #fff;
  font-size: var(--ic-text-xs);
  border-radius: var(--ic-r-sm);
  padding: 5px 9px;
}

/* Kill the decorative animations the old theme ran on a loop. */
.navbar::after,
[class*="shimmer"],
[class*="sparkle"],
[class*="float-animation"],
[class*="pulse-glow"] { animation: none !important; }

/* ───────────────────────────────────────────────────────────────────────────
   16. RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .header-container { padding: 0 16px; }
}

@media (max-width: 768px) {
  :root { --ic-text-xl: 1.25rem; --ic-text-2xl: 1.5rem; }

  .container, .container-fluid, .main-container,
  .page-container, .content-wrapper { padding-inline: 16px; }

  .ic-page-head__inner { padding: 14px 16px; gap: 12px; }
  .ic-page-head__actions { width: 100%; }
  .ic-page-head__actions .btn, .ic-page-head__actions .ic-btn { flex: 1; }

  .stats-bar, .stats-row, .stats-container, .summary-stats {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: 16px !important;
  }

  .page-header, .page-hero { padding: 14px 0 !important; }

  .table, .ic-table { font-size: var(--ic-text-sm); }
  .table th, .table td { padding: 9px 10px; }

  .modal-content, .ic-modal { border-radius: var(--ic-r-xl) var(--ic-r-xl) 0 0; }
}

@media (max-width: 420px) {
  .stats-bar, .stats-row, .stats-container, .summary-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-item, .stat-box, .ic-stat { padding: 11px 12px !important; }
  .ic-stat__value, .stat-value, .stat-number { font-size: var(--ic-text-xl) !important; }
}

/* Touch targets stay at least 40px on coarse pointers. */
@media (pointer: coarse) {
  .btn, .ic-btn, .nav-link, .dropdown-item-custom, .filter-btn, .ic-chip { min-height: 40px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   17. PRINT
   Order summaries are printed and handed to customers.
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
  .main-header, .mobile-menu, .fab, .floating-btn,
  .reminders-widget, .page-header .btn, .no-print { display: none !important; }
  body { background: #fff !important; }
  .card, .ic-card { border: 1px solid #ddd !important; box-shadow: none !important; break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. PAGE HERO BANDS — the single biggest change
   ───────────────────────────────────────────────────────────────────────────
   Each page used to open with a full-bleed saturated gradient in its own
   colour (amber for products, fuchsia for recipes, rose for sold, …). That
   is what made the app read as a toy. They all become one flat white band
   with a thin rule; the page is identified by its title and icon instead.
   ═══════════════════════════════════════════════════════════════════════════ */
.ingredients-hero,
.cakes-hero,
.categories-hero,
.pantry-hero,
.recipes-hero,
.recipe-hero,
.templates-hero,
.template-hero,
.completed-hero,
.customers-hero,
.reports-hero,
.portfolio-hero,
.shop-hero,
.help-hero,
.admin-hero,
.author-hero,
.detail-hero,
.cake-hero,
.hero-section,
.hero-section-mini,
.page-hero,
.page-header {
  background: var(--ic-surface) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  border-bottom: 1px solid var(--ic-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
  min-height: 0 !important;
  text-shadow: none !important;
}

/* Their decorative blobs and overlays go with them. */
.ingredients-hero::before, .ingredients-hero::after,
.cakes-hero::before, .cakes-hero::after,
.categories-hero::before, .categories-hero::after,
.pantry-hero::before, .pantry-hero::after,
.recipes-hero::before, .recipes-hero::after,
.recipe-hero::before, .recipe-hero::after,
.templates-hero::before, .templates-hero::after,
.template-hero::before, .template-hero::after,
.completed-hero::before, .completed-hero::after,
.customers-hero::before, .customers-hero::after,
.reports-hero::before, .reports-hero::after,
.portfolio-hero::before, .portfolio-hero::after,
.shop-hero::before, .shop-hero::after,
.help-hero::before, .help-hero::after,
.admin-hero::before, .admin-hero::after,
.detail-hero::before, .detail-hero::after,
.cake-hero::before, .cake-hero::after,
.hero-section::before, .hero-section::after { display: none !important; }

/* Text inside a hero was written white-on-colour. */
.ingredients-hero *, .cakes-hero *, .categories-hero *, .pantry-hero *,
.recipes-hero *, .recipe-hero *, .templates-hero *, .template-hero *,
.completed-hero *, .customers-hero *, .reports-hero *, .portfolio-hero *,
.shop-hero *, .help-hero *, .admin-hero *, .detail-hero *, .cake-hero *,
.hero-section *, .page-hero *, .page-header * {
  text-shadow: none !important;
}

.ingredients-hero h1, .cakes-hero h1, .categories-hero h1, .pantry-hero h1,
.recipes-hero h1, .recipe-hero h1, .templates-hero h1, .template-hero h1,
.completed-hero h1, .customers-hero h1, .reports-hero h1, .portfolio-hero h1,
.shop-hero h1, .help-hero h1, .admin-hero h1, .detail-hero h1, .cake-hero h1,
.hero-section h1, .page-hero h1, .page-header h1,
.hero-title, .page-title {
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-xl) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
}

.hero-subtitle, .page-subtitle,
.ingredients-hero p, .cakes-hero p, .recipes-hero p, .customers-hero p,
.reports-hero p, .completed-hero p, .templates-hero p, .pantry-hero p,
.categories-hero p, .shop-hero p, .help-hero p {
  color: var(--ic-muted) !important;
  font-size: var(--ic-text-base) !important;
  margin: 2px 0 0 !important;
}

/* The hero's inner row becomes the standard page-head layout. */
.hero-row, .hero-content {
  max-width: var(--ic-container);
  margin-inline: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap;
}
.hero-text { flex: 1; min-width: 0; }
.hero-actions { display: flex; gap: 8px; align-items: center; }

/* Hero icon: a small tinted chip, not a coloured gradient disc. */
.hero-icon {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--ic-r-md) !important;
  box-shadow: none !important;
  font-size: 1.1rem !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0;
}

/* Buttons sitting on the old coloured band were translucent white.
   The primary-action classes are excluded: this selector is more specific
   than .add-btn, so without the :not() it painted the products page's two
   add buttons white on top of a white icon - invisible until hover. */
.hero-actions .btn:not(.add-btn):not(.new-btn):not(.btn-add),
.hero-row .btn:not(.add-btn):not(.new-btn):not(.btn-add),
.hero-content .btn:not(.add-btn):not(.new-btn):not(.btn-add),
.hero-actions button:not(.add-btn):not(.new-btn):not(.btn-add),
.hero-row > button:not(.add-btn):not(.new-btn):not(.btn-add) {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border-strong) !important;
  color: var(--ic-ink) !important;
  backdrop-filter: none !important;
}
.hero-actions .btn-primary, .hero-row .btn-primary, .hero-content .btn-primary,
.hero-actions .btn.primary, .hero-actions .btn-add {
  background: var(--ic-brand-700) !important;
  border-color: var(--ic-brand-700) !important;
  color: #fff !important;
}

.hero-badge {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border: 1px solid var(--ic-brand-200) !important;
  box-shadow: none !important;
  font-size: var(--ic-text-xs) !important;
  font-weight: 600 !important;
  border-radius: var(--ic-r-pill) !important;
  padding: 3px 10px !important;
}

/* The stats band under a hero had its own tinted wash. */
.hero-stats, .stats-band, .stats-section {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   19. ROW ACTION BUTTONS
   Were 40px gradient discs in sky/amber/red — three loud colours per row,
   multiplied by every item on the page.
   ─────────────────────────────────────────────────────────────────────────── */
.action-icon, .action-btn, .card-action, .item-action {
  background: var(--ic-surface-alt) !important;
  background-image: none !important;
  color: var(--ic-muted) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-md) !important;
  width: 32px !important;
  height: 32px !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  transition: background var(--ic-transition), color var(--ic-transition), border-color var(--ic-transition);
}
.action-icon:hover, .action-btn:hover, .card-action:hover {
  background: var(--ic-surface) !important;
  border-color: var(--ic-border-strong) !important;
  color: var(--ic-ink) !important;
  transform: none !important;
}
/* Intent shows on hover only, so a list of rows stays calm at rest. */
.action-icon.delete:hover, .action-btn.delete:hover { color: var(--ic-danger) !important; border-color: var(--ic-danger) !important; background: var(--ic-danger-bg) !important; }
.action-icon.edit:hover,   .action-btn.edit:hover   { color: var(--ic-brand-700) !important; border-color: var(--ic-brand-300) !important; background: var(--ic-brand-50) !important; }
.action-icon.pantry:hover, .action-btn.pantry:hover { color: var(--ic-info) !important; border-color: var(--ic-info) !important; background: var(--ic-info-bg) !important; }

/* Inline save buttons inside cards */
.btn-save {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ic-r-md) !important;
  box-shadow: none !important;
  font-size: var(--ic-text-sm) !important;
  font-weight: 500 !important;
}
.btn-save:hover { background: var(--ic-brand-800) !important; }
.btn-save.success { background: var(--ic-success) !important; background-image: none !important; }

/* AI assistant launcher + accessibility widget: neutral, out of the way. */
.ai-chat-fab, #aiChatFab {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  box-shadow: var(--ic-shadow-lg) !important;
  width: 48px !important;
  height: 48px !important;
  animation: none !important;
}
.ai-chat-fab:hover { background: var(--ic-brand-800) !important; transform: none !important; }
.accessibility-header, .footer-logo-icon {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. PAGE SHELLS AND STRIPS
   Each page wrapper picked its own background (mostly a cool #f3f4f6, which
   fights the warm neutrals) and each filter/stat strip its own tint.
   ═══════════════════════════════════════════════════════════════════════════ */
.ingredients-page, .cakes-page, .cake-page, .cake-detail-page, .completed-page,
.recipes-page, .edit-recipe-page, .view-recipe-page, .templates-page,
.template-page, .customers-page, .calendar-page, .pantry-page, .reports-page,
.categories-page, .profile-page, .shop-page, .portfolio-page, .social-page,
.home-page, .help-page, .admin-page, .author-recipes-page, .contact-page,
.terms-page, .privacy-page, .statement-page {
  background: var(--ic-canvas) !important;
  background-image: none !important;
}

/* Strips: transparent by default, with a rule where separation is needed. */
.stats-strip, .filter-strip, .controls-strip, .search-strip,
.quick-strip, .info-strip {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--ic-border) !important;
  box-shadow: none !important;
  padding: 14px 20px !important;
}
.stats-strip { border-bottom: none !important; padding-bottom: 4px !important; }

/* Inner rows inside a strip keep to the app container. */
.stats-strip > *, .filter-strip > *, .controls-strip > *,
.search-strip > *, .quick-strip > * {
  max-width: var(--ic-container);
  margin-inline: auto;
}

/* ── Container width ───────────────────────────────────────────────────────
   Several pages set .container to 900px, so on a wide screen the content
   sat in a narrow column with a large dead margin. One width everywhere. */
.container,
.ingredients-page .container, .cakes-page .container, .recipes-page .container,
.templates-page .container, .customers-page .container, .pantry-page .container,
.reports-page .container, .categories-page .container, .completed-page .container,
.profile-page .container, .shop-page .container, .calendar-page .container {
  max-width: var(--ic-container) !important;
  margin-inline: auto !important;
  padding-inline: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. REMAINING GRADIENT SURFACES
   Found by walking every page with a headless browser and collecting every
   element still painting a gradient.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Marketing hero on the dashboard / login / register */
.hero-bg, .hero-showcase, .benefits-section {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ic-border);
}
.hero-bg::before, .hero-bg::after,
.hero-showcase::before, .hero-showcase::after { display: none !important; }
.rotate-word, .rotate-word.active {
  background: none !important;
  -webkit-text-fill-color: var(--ic-brand-700) !important;
  color: var(--ic-brand-700) !important;
}

/* Profile */
.profile-header, .profile-cover {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: var(--ic-r-lg) var(--ic-r-lg) 0 0;
}
.modal-header-custom {
  background: var(--ic-surface) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  border-bottom: 1px solid var(--ic-border);
}
.premium-badge {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border: 1px solid var(--ic-brand-200) !important;
  box-shadow: none !important;
}
.btn-renew, .portfolio-view-link, .profile-portfolio-link, .btn-submit {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--ic-r-md) !important;
}
.btn-renew:hover, .portfolio-view-link:hover, .btn-submit:hover { background: var(--ic-brand-800) !important; }

/* Upgrade page plan cards */
.card-header.text-center {
  background: var(--ic-surface-alt) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  border-bottom: 1px solid var(--ic-border);
}

/* Assorted panels */
.col-lg-3.bg-light, .bg-light {
  background: var(--ic-surface-alt) !important;
  background-image: none !important;
}
.section-card.template-loader, .import-card, .new-total {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border) !important;
  color: var(--ic-ink) !important;
  border-radius: var(--ic-r-lg) !important;
  box-shadow: var(--ic-shadow-xs) !important;
}
.notification-header, .notification-header.bg-info {
  background: var(--ic-surface-alt) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  border-bottom: 1px solid var(--ic-border);
}
.info-banner {
  background: var(--ic-info-bg) !important;
  background-image: none !important;
  color: var(--ic-info) !important;
  border: 1px solid rgba(42, 85, 128, 0.16) !important;
  border-radius: var(--ic-r-md) !important;
}
.cost-value {
  background: none !important;
  -webkit-text-fill-color: var(--ic-ink) !important;
  color: var(--ic-ink) !important;
}

/* Dashboard stat icons: one tinted chip, not four different gradients. */
.stat-icon, .stat-icon.blue, .stat-icon.green, .stat-icon.pink, .stat-icon.amber {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border-radius: var(--ic-r-md) !important;
  box-shadow: none !important;
}

/* Shop tabs */
.shop-tab {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  color: var(--ic-muted) !important;
  border-radius: var(--ic-r-md) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.shop-tab.active {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border-color: var(--ic-brand-200) !important;
  font-weight: 600 !important;
}

/* Reminders toggle */
.reminders-toggle {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border) !important;
  color: var(--ic-ink) !important;
  box-shadow: var(--ic-shadow-xs) !important;
  border-radius: var(--ic-r-lg) !important;
}
.reminders-toggle .badge, .reminders-toggle span[class*="count"] {
  background: var(--ic-brand-700) !important;
  color: #fff !important;
}

/* Category / group heading rows were white pills on the page background. */
.category-header, .category-title-row, .group-title {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--ic-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px !important;
  margin: 26px 0 14px !important;
}

/* Toggles picked up the old per-page accent. */
input:checked + .slider, .switch input:checked + .slider,
.toggle input:checked + .toggle-track {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
}

/* Prices were rendered in each page's accent colour. */
.price, .item-price, .product-price, .ingredient-price {
  color: var(--ic-ink) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. LIST PAGE FURNITURE
   The controls row, group headings and card chrome shared by Products,
   Orders, Recipes, Templates, Customers and Sold.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Search + sort row ─────────────────────────────────────────────────────
   Search takes the free space; sort is sized to its content. */
.controls-strip, .filter-strip, .search-strip {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.controls-strip > *, .filter-strip > *, .search-strip > * { margin: 0 !important; }

.search-input, #searchInput, input[type="search"],
input[placeholder*="חיפוש"], input[placeholder*="Search"] {
  flex: 1 1 240px !important;
  min-width: 200px;
  height: 38px;
}
.sort-select, select.sort-select, #sortSelect {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 150px;
  height: 38px;
}

/* ── Group heading ─────────────────────────────────────────────────────────
   Was a white rounded pill floating on the page; now a plain heading with a
   rule under it, so the groups read as sections rather than as more cards. */
.category-group-header {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--ic-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px !important;
  margin: 26px 0 14px !important;
  min-height: 0 !important;
  font-size: var(--ic-text-md) !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
}
.category-group-header:hover { background: transparent !important; transform: none !important; }
.category-group:first-child .category-group-header { margin-top: 8px !important; }

.category-group-count {
  background: var(--ic-surface-alt) !important;
  color: var(--ic-muted) !important;
  border-radius: var(--ic-r-sm) !important;
  font-size: var(--ic-text-xs) !important;
  font-weight: 600 !important;
  padding: 1px 7px !important;
  min-width: 0 !important;
}
.category-group-chevron { color: var(--ic-muted-2) !important; font-size: 0.9rem !important; }
.category-delete-btn {
  background: transparent !important;
  border: none !important;
  color: var(--ic-muted-2) !important;
  box-shadow: none !important;
}
.category-delete-btn:hover { color: var(--ic-danger) !important; background: var(--ic-danger-bg) !important; }

/* ── Item cards ── */
.card-price, .item-price {
  color: var(--ic-ink) !important;
  font-weight: 600 !important;
  font-size: var(--ic-text-md) !important;
  font-variant-numeric: tabular-nums;
}
.card-unit, .price-unit, .card-price small, .card-price span {
  color: var(--ic-muted) !important;
  font-weight: 400 !important;
  font-size: var(--ic-text-xs) !important;
}
.card-title, .card-name, .ingredient-name {
  font-size: var(--ic-text-base) !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
}

/* Ownership marker: was a filled gold/blue disc on every card. A small
   outlined chip says the same thing without dotting the grid with colour. */
.type-badge {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--ic-muted) !important;
  border: 1px solid var(--ic-border-strong) !important;
  border-radius: var(--ic-r-sm) !important;
  width: auto !important;
  height: 20px !important;
  min-width: 20px;
  padding: 0 5px !important;
  font-size: 0.6875rem !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px);
}
.type-badge.global { color: var(--ic-info) !important; }
.type-badge.copy   { color: var(--ic-brand-600) !important; }

.card-image {
  background: var(--ic-surface-sunk) !important;
  border-bottom: 1px solid var(--ic-border);
}
.card-actions {
  background: transparent !important;
  border-top: 1px solid var(--ic-border) !important;
  padding: 6px !important;
  gap: 4px;
}
.card-actions button, .card-actions a {
  background: transparent !important;
  border: none !important;
  color: var(--ic-muted) !important;
  border-radius: var(--ic-r-sm) !important;
  box-shadow: none !important;
}
.card-actions button:hover, .card-actions a:hover {
  background: var(--ic-surface-alt) !important;
  color: var(--ic-ink) !important;
}

/* ── Grid ── */
.category-group-grid, .items-grid, .cards-grid, .ingredient-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 640px) {
  .category-group-grid, .items-grid, .cards-grid, .ingredient-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ── View toggle (grid / list) ── */
.view-toggle {
  background: var(--ic-surface-sunk) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-pill) !important;
}
.view-toggle input:checked + .view-toggle-slider,
.view-toggle .slider, .view-toggle-slider {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
}

/* ── Result count line ── */
.results-count, .items-count {
  font-size: var(--ic-text-sm) !important;
  color: var(--ic-muted) !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. HERO BUTTONS
   These were built for a saturated hero: translucent-white fill, white icon.
   On the flat white header they were invisible, so they are restated here as
   ordinary buttons. One rule set covers ~40 of them across the app.
   ═══════════════════════════════════════════════════════════════════════════ */
.back-btn, .hero-btn, .guide-btn, .export-btn, .help-btn {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border-strong) !important;
  color: var(--ic-ink-2) !important;
  border-radius: var(--ic-r-md) !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background var(--ic-transition), border-color var(--ic-transition), color var(--ic-transition);
}
.back-btn i, .hero-btn i, .guide-btn i, .export-btn i, .help-btn i { color: inherit !important; }
.back-btn:hover, .hero-btn:hover, .guide-btn:hover, .export-btn:hover, .help-btn:hover {
  background: var(--ic-surface-alt) !important;
  border-color: var(--ic-muted-2) !important;
  color: var(--ic-ink) !important;
  transform: none !important;
}

/* The one primary action on a list page. */
.add-btn, .new-btn, .hero-btn.edit, .btn-add {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  border: 1px solid var(--ic-brand-700) !important;
  color: #fff !important;
  border-radius: var(--ic-r-md) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-weight: 500 !important;
  padding-inline: 14px !important;
  width: auto !important;
  min-width: 36px;
  height: 36px !important;
  gap: 7px;
}
.add-btn i, .new-btn i, .hero-btn.edit i, .btn-add i { color: #fff !important; }
.add-btn:hover, .new-btn:hover, .hero-btn.edit:hover, .btn-add:hover {
  background: var(--ic-brand-800) !important;
  border-color: var(--ic-brand-800) !important;
  transform: none !important;
}
/* An add button the user's plan blocks reads as disabled, not as the CTA. */
.add-btn.limit-blocked {
  background: var(--ic-surface-alt) !important;
  border-color: var(--ic-border-strong) !important;
  color: var(--ic-muted) !important;
}
.add-btn.limit-blocked i { color: var(--ic-muted) !important; }

/* Any leftover translucent-white chrome from the coloured-hero era. */
.hero-row [style*="rgba(255,255,255"], .hero-content [style*="rgba(255,255,255"],
.hero-row [style*="rgba(255, 255, 255"], .hero-content [style*="rgba(255, 255, 255"] {
  background: var(--ic-surface-alt) !important;
  color: var(--ic-ink) !important;
}

/* Hero text that was explicitly white. */
.hero-row [style*="color: white"], .hero-row [style*="color:#fff"],
.hero-content [style*="color: white"], .hero-content [style*="color:#fff"],
.page-header [style*="color: white"], .page-header [style*="color:#fff"] {
  color: var(--ic-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. NAV OVERFLOW
   The bar carries 11+ destinations and wrapped onto a second row on smaller
   laptops. nav-overflow.js moves whatever does not fit into this menu.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Deliberately does NOT set `display`: header-style.css keeps .desktop-nav
   hidden below 1024px and in sidebar mode, and overriding that here hid the
   hamburger and left the bar broken on phones. */
.desktop-nav {
  align-items: center;
  flex-wrap: nowrap !important;   /* never wrap; overflow goes to the menu */
  overflow: visible;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}

.nav-more { position: relative; flex-shrink: 0; }
.nav-more[hidden] { display: none !important; }

.nav-more__btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  font-family: inherit;
}
.nav-more.open > .nav-more__btn {
  background: var(--ic-surface-alt) !important;
  color: var(--ic-ink) !important;
}

.nav-more__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 210px;
  background: var(--ic-surface);
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-lg);
  box-shadow: var(--ic-shadow-lg);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 1px;
  z-index: 1200;
}
.nav-more.open .nav-more__menu { display: flex; }

/* A link inside the menu is a full-width row, not a pill. */
.nav-more__menu .nav-link,
.nav-link.nav-more__item {
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--ic-r-md) !important;
  padding: 8px 10px !important;
  font-size: var(--ic-text-base) !important;
  white-space: nowrap;
}
.nav-more__menu .nav-link i { margin-inline-end: 9px; width: 18px; text-align: center; }

@media (max-width: 991px) {
  /* Below this the mobile drawer takes over and the bar is hidden anyway. */
  .nav-more { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   25. FLOATING ACTIONS
   The add button and the AI assistant sat in opposite bottom corners, so the
   eye had two competing targets. They stack in one corner instead: the page's
   primary action on the baseline, the assistant above it.
   ═══════════════════════════════════════════════════════════════════════════ */
.fab-add {
  position: fixed !important;
  inset-inline-end: 20px !important;
  inset-inline-start: auto !important;
  bottom: 20px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--ic-r-pill) !important;
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--ic-shadow-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  z-index: 90 !important;
  animation: none !important;
  transition: background var(--ic-transition);
}
.fab-add i { color: #fff !important; }
.fab-add:hover { background: var(--ic-brand-800) !important; transform: none !important; }

.ai-chat-fab, #aiChatFab {
  position: fixed !important;
  inset-inline-end: 22px !important;
  inset-inline-start: auto !important;
  bottom: 82px !important;         /* clears the 52px add button + 10px gap */
  width: 44px !important;
  height: 44px !important;
  background: var(--ic-surface) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border: 1px solid var(--ic-border-strong) !important;
  box-shadow: var(--ic-shadow-md) !important;
  z-index: 89 !important;
}
.ai-chat-fab i, #aiChatFab i { color: var(--ic-brand-700) !important; }
.ai-chat-fab:hover, #aiChatFab:hover {
  background: var(--ic-brand-50) !important;
  border-color: var(--ic-brand-300) !important;
}

/* On a page with no add button the assistant drops to the baseline. */
body:not(:has(.fab-add)) .ai-chat-fab,
body:not(:has(.fab-add)) #aiChatFab { bottom: 20px !important; }

@media (max-width: 768px) {
  .fab-add { bottom: 16px !important; inset-inline-end: 16px !important; }
  .ai-chat-fab, #aiChatFab { bottom: 78px !important; inset-inline-end: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   26. ODDS AND ENDS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Reminders sat as a 700px pill floating mid-page, aligned to nothing. */
.reminders-widget, .reminders-toggle {
  max-width: var(--ic-container) !important;
  width: 100% !important;
  margin-inline: auto !important;
}
.reminders-widget { padding-inline: 20px; }

/* Segmented grid / list control */
.toggle-btn, .view-toggle-btn {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  color: var(--ic-muted) !important;
  border-radius: var(--ic-r-sm) !important;
  box-shadow: none !important;
}
.toggle-btn.active, .view-toggle-btn.active {
  background: var(--ic-surface) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  box-shadow: var(--ic-shadow-xs) !important;
}
.toggle-btn.active i, .view-toggle-btn.active i { color: var(--ic-brand-700) !important; }
.view-toggle, .toggle-group, .segmented {
  background: var(--ic-surface-sunk) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-md) !important;
  padding: 2px !important;
  gap: 2px;
}

/* Accessibility panel */
.accessibility-panel {
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-lg) !important;
  box-shadow: var(--ic-shadow-lg) !important;
}

/* Modal headers were white text on a coloured bar; the bar is now light. */
.modal-header, .modal-header *, .popup-header, .popup-header *,
.modal-header-custom, .modal-header-custom * {
  color: var(--ic-ink) !important;
  text-shadow: none !important;
}
.modal-header .modal-subtitle, .modal-header small, .modal-header p,
.modal-header-custom small, .modal-header-custom p { color: var(--ic-muted) !important; }
.modal-header .btn-close, .modal-header .close, .popup-close, .modal-close {
  color: var(--ic-muted) !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
  font-size: 1.1rem !important;
}
.modal-header .btn-close:hover, .modal-close:hover { color: var(--ic-ink) !important; background: var(--ic-surface-alt) !important; }
.modal-header .modal-icon, .modal-header-custom .modal-icon {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border-radius: var(--ic-r-md) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   27. DASHBOARD HEADER
   Shown to signed-in users in place of the marketing hero.
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-head {
  background: var(--ic-surface);
  border-bottom: 1px solid var(--ic-border);
}
/* .container sets `padding: 0 20px` as a shorthand, which zeroes the block
   padding, so the vertical padding is stated here at matching specificity. */
.dash-head .dash-head__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
}
.dash-head__text { flex: 1; min-width: 0; }
.dash-head__title {
  font-size: var(--ic-text-xl);
  font-weight: 600;
  color: var(--ic-ink);
  margin: 0;
  letter-spacing: -0.015em;
}
.dash-head__meta {
  font-size: var(--ic-text-base);
  color: var(--ic-muted);
  margin: 3px 0 0;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.dash-head__dot { color: var(--ic-muted-2); }
.dash-head__actions { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 640px) {
  .dash-head .dash-head__inner { padding: 16px; }
  .dash-head__actions { width: 100%; }
  .dash-head__actions .btn { flex: 1; justify-content: center; }
}

/* ── Dashboard stat cards ──────────────────────────────────────────────────
   The generic stat rule flips label and value; these cards have their own
   icon + content structure, so they are laid out explicitly instead. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.stats-grid .stat-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px;
  padding: 16px !important;
  animation: none !important;
  position: relative;
}
.stats-grid .stat-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 1.1rem;
}
.stats-grid .stat-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px;
  min-width: 0;
}
.stats-grid .stat-value {
  font-size: var(--ic-text-2xl) !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
  line-height: 1.1 !important;
  order: 2;
}
.stats-grid .stat-label {
  font-size: var(--ic-text-xs) !important;
  color: var(--ic-muted) !important;
  font-weight: 500 !important;
  order: 1;
}
.stat-tooltip {
  background: var(--ic-ink) !important;
  color: #fff !important;
  border-radius: var(--ic-r-md) !important;
  font-size: var(--ic-text-xs) !important;
  box-shadow: var(--ic-shadow-lg) !important;
  border: none !important;
}
.stat-tooltip * { color: #fff !important; }

/* ── Quick actions ─────────────────────────────────────────────────────────
   Eight tiles, each with its own coloured icon (blue, green, grey, gold,
   teal, red, plum) - the row read as a box of crayons. One tinted chip, and
   the labels do the distinguishing. */
.quick-section .quick-grid, .quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.quick-card, .quick-action, .quick-item {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-lg) !important;
  box-shadow: var(--ic-shadow-xs) !important;
  padding: 16px 12px !important;
  text-align: center;
  transition: border-color var(--ic-transition), box-shadow var(--ic-transition);
}
.quick-card:hover, .quick-action:hover, .quick-item:hover {
  border-color: var(--ic-border-strong) !important;
  box-shadow: var(--ic-shadow-md) !important;
  transform: none !important;
}
.quick-card .quick-icon, .quick-action i, .quick-icon {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border-radius: var(--ic-r-md) !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 9px !important;
  font-size: 1.05rem !important;
  box-shadow: none !important;
}
.quick-card .quick-icon i, .quick-icon i { color: var(--ic-brand-700) !important; }
.quick-card span, .quick-label {
  font-size: var(--ic-text-sm) !important;
  font-weight: 500 !important;
  color: var(--ic-ink-2) !important;
}

/* Feature / benefit cards on the marketing page keep the same chip. */
.feature-icon, .benefit-icon {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border-radius: var(--ic-r-lg) !important;
  box-shadow: none !important;
}
.feature-icon i, .benefit-icon i { color: var(--ic-brand-700) !important; }

/* Promo banner */
.social-banner, .promo-banner {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  border-radius: var(--ic-r-lg) !important;
  border: none !important;
}
.social-banner *, .promo-banner * { color: #fff !important; }
.social-banner .banner-icon, .promo-banner .banner-icon {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--ic-r-md) !important;
}

/* The stat cards used a -2rem pull to float over the tall marketing hero.
   With the compact dashboard header they overlapped its text instead. */
.stats-section {
  margin-top: 0 !important;
  padding-block: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   28. REPORTS
   ═══════════════════════════════════════════════════════════════════════════ */
/* The tab strip and every card header carried a pale blue wash. */
.reports-tabs, .tabs-strip, .tab-strip, .report-tabs {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ic-border) !important;
  padding: 10px 20px !important;
}
.report-tab, .tab-btn {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  color: var(--ic-muted) !important;
  border-radius: var(--ic-r-pill) !important;
  font-size: var(--ic-text-sm) !important;
  font-weight: 500 !important;
  padding: 6px 13px !important;
  box-shadow: none !important;
}
.report-tab:hover, .tab-btn:hover { background: var(--ic-surface-alt) !important; color: var(--ic-ink) !important; }
.report-tab.active, .tab-btn.active {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--ic-brand-700) !important;
}
.report-tab.active i, .tab-btn.active i { color: #fff !important; }

.report-card, .chart-card {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-lg) !important;
  box-shadow: var(--ic-shadow-xs) !important;
}
.report-card .card-header, .chart-card .card-header,
.report-card-header, .chart-header {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ic-border) !important;
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-md) !important;
  font-weight: 600 !important;
  padding: 13px 16px !important;
}
.report-card .card-header i, .chart-card .card-header i,
.report-card-header i, .chart-header i { color: var(--ic-muted) !important; }

/* KPI row: coloured left borders and four different icon chips became one. */
.kpi-card, .report-stat {
  border-inline-start: 1px solid var(--ic-border) !important;
}
.kpi-card .kpi-icon, .report-stat .stat-icon {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  box-shadow: none !important;
}
.kpi-card .kpi-icon i, .report-stat .stat-icon i { color: var(--ic-brand-700) !important; }

/* Chart canvases need a defined box or Chart.js collapses them. */
.chart-container, .chart-wrap { min-height: 240px; padding: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   29. MOBILE CORRECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nothing may push the page sideways. */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* The controls row laid search and sort side by side and overflowed. */
  .controls-strip, .filter-strip, .search-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px !important;
  }
  .search-input, #searchInput, input[type="search"],
  input[placeholder*="חיפוש"], input[placeholder*="Search"],
  .sort-select, select.sort-select, #sortSelect {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0;
  }

  /* The page header stacked badly: title, then actions on their own row. */
  .hero-row, .hero-content {
    flex-wrap: wrap;
    gap: 10px !important;
  }
  .hero-text { flex: 1 1 100%; order: -1; }
  .hero-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }

  /* Filter chips scroll rather than wrap into a tall block. */
  .filters-row, .chips-row, .filter-buttons {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filters-row::-webkit-scrollbar, .chips-row::-webkit-scrollbar { display: none; }
  .filters-row > *, .chips-row > * { flex: 0 0 auto; }

  /* Tables become horizontally scrollable rather than squashing. */
  .table, .ic-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* The grid/list segmented control kept a per-page accent on its active half. */
.view-toggle .toggle-btn.active,
.view-toggle-btn.active,
.view-btn.active, .layout-btn.active {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
}
.view-toggle .toggle-btn.active i,
.view-btn.active i, .layout-btn.active i { color: #fff !important; }
.view-btn, .layout-btn {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  color: var(--ic-muted) !important;
  border-radius: var(--ic-r-sm) !important;
}

/* Customer / user avatars picked up the old blue. */
.customer-avatar, .avatar-circle, .initials-avatar, .user-initial {
  background: var(--ic-brand-100) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  font-weight: 600 !important;
}
.order-count, .count-badge, .customer-orders-count {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border: 1px solid var(--ic-brand-200) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   30. FINAL SWEEP
   Everything a headless pass over all 18 pages still found painting off the
   palette. Each entry names the page it came from.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile menu trigger: white icon left over from the dark header. */
.hamburger-btn, #hamburgerBtn, .mobile-menu-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--ic-ink-2) !important;
  border-radius: var(--ic-r-md) !important;
  box-shadow: none !important;
}
.hamburger-btn i, #hamburgerBtn i, .mobile-menu-btn i { color: inherit !important; }
.hamburger-btn:hover, #hamburgerBtn:hover { background: var(--ic-surface-alt) !important; }
.hamburger-btn span, #hamburgerBtn span:not(.visually-hidden) { background: var(--ic-ink-2) !important; }

/* Card hover overlays (recipes, pantry) were fuchsia and indigo washes. */
.card-overlay {
  background: rgba(36, 28, 31, 0.55) !important;
  background-image: none !important;
}
.card-overlay * { color: #fff !important; }

/* Shop (my-shop) */
.add-product-btn {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border: 1px dashed var(--ic-brand-300) !important;
  box-shadow: none !important;
}
.add-product-btn:hover { background: var(--ic-brand-100) !important; }

/* New cake / new recipe forms */
.section-title, .form-section-title {
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-md) !important;
  font-weight: 600 !important;
}
.section-title i, .form-section-title i { color: var(--ic-muted) !important; }
.total-value, .cost-total, .sum-value {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border: 1px solid var(--ic-brand-200) !important;
  border-radius: var(--ic-r-md) !important;
  font-variant-numeric: tabular-nums;
}
/* The chip on the order and template forms was a solid plum block, so its
   currency symbol and its readonly amount field are both set to white by the
   page. Repainting the chip left the amount white on near-white - and an
   input does not inherit its parent's colour, so the `color` above never
   reached it. Both halves are named here. */
.total-value .shekel,
.total-value input,
.cost-total .shekel,
.cost-total input {
  color: var(--ic-brand-700) !important;
  -webkit-text-fill-color: var(--ic-brand-700);   /* readonly/disabled inputs */
  opacity: 1 !important;
}
.product-type-pill {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border-strong) !important;
  color: var(--ic-ink-2) !important;
  border-radius: var(--ic-r-pill) !important;
  box-shadow: none !important;
}
.product-type-pill.active {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  border-color: var(--ic-brand-700) !important;
  color: #fff !important;
}
.btn-load, .template-icon {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border: 1px solid var(--ic-brand-200) !important;
}
.btn-add-customer { color: var(--ic-brand-700) !important; }

/* Step / list numbering */
.list-num, .step-num, .order-num {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: var(--ic-r-pill) !important;
  box-shadow: none !important;
  font-variant-numeric: tabular-nums;
}

/* Templates, friends, reports, customers */
.quick-link, .quick-link.import-link {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border) !important;
  color: var(--ic-ink-2) !important;
  box-shadow: none !important;
}
.quick-link:hover { background: var(--ic-surface-alt) !important; }
.post-submit-btn {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
}
.metric-icon, .cm-icon, .cm-icon.info {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border-radius: var(--ic-r-md) !important;
}
.metric-icon i, .cm-icon i { color: var(--ic-brand-700) !important; }
.customer-avatar.active {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
}

/* Calendar: today marker and the jump-to-today button. */
.today-btn {
  color: var(--ic-brand-700) !important;
  border-color: var(--ic-brand-300) !important;
  background: var(--ic-brand-50) !important;
}
.day-num.today, .day.today .day-num, .calendar-day.today .day-num {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: var(--ic-r-pill) !important;
}
/* The Google sign-in button keeps Google's blue: their brand guidelines
   require it, and changing it makes the button look untrustworthy. */

/* Help centre */
.help-card.premium-card {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  border: 1px solid var(--ic-brand-200) !important;
  color: var(--ic-ink) !important;
}
.help-card.premium-card * { color: var(--ic-ink) !important; }
.tip, .tip strong { color: var(--ic-ink-2) !important; }
.tip { background: var(--ic-warning-bg) !important; border-radius: var(--ic-r-md) !important; }

/* ── Bootstrap's own utilities ──────────────────────────────────────────────
   Loaded from a CDN, so they cannot be edited at source; they are restated
   here to match the palette. */
.text-success { color: var(--ic-success) !important; }
.text-danger  { color: var(--ic-danger) !important; }
.text-warning { color: var(--ic-warning) !important; }
.text-info    { color: var(--ic-info) !important; }
.text-primary { color: var(--ic-brand-700) !important; }
.text-muted   { color: var(--ic-muted) !important; }
.bg-success   { background-color: var(--ic-success-bg) !important; color: var(--ic-success) !important; }
.bg-warning   { background-color: var(--ic-warning-bg) !important; color: var(--ic-warning) !important; }
.bg-danger    { background-color: var(--ic-danger-bg) !important; color: var(--ic-danger) !important; }
.bg-info      { background-color: var(--ic-info-bg) !important; color: var(--ic-info) !important; }
.bg-primary   { background-color: var(--ic-brand-700) !important; }
.btn-outline-success { color: var(--ic-success) !important; border-color: var(--ic-success) !important; background: transparent !important; }
.btn-outline-success:hover { background: var(--ic-success-bg) !important; }
.btn-outline-primary { color: var(--ic-brand-700) !important; border-color: var(--ic-brand-700) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--ic-brand-50) !important; }
.btn-link { color: var(--ic-brand-700) !important; }
.display-4, .display-5, .display-6 { color: var(--ic-ink) !important; font-weight: 600 !important; }
.border-primary { border-color: var(--ic-brand-700) !important; }
.link-primary { color: var(--ic-brand-700) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   31. PUBLIC PAGES
   The portfolio, the shop and the order summary are what a baker's own
   customers see. They are the pages that decide whether the business looks
   professional, so they get the same restraint as the app.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Flat brand band instead of a gradient. The shop keeps its owner's chosen
   colour (that is a feature); only the gradient treatment goes. */
.public-portfolio-header, .portfolio-hero {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}
.public-portfolio-header *, .portfolio-hero * { text-shadow: none !important; }
.portfolio-hero h1, .portfolio-hero h2 { color: #fff !important; font-weight: 600 !important; }
.portfolio-hero p, .portfolio-hero .hero-bio { color: rgba(255, 255, 255, 0.82) !important; }
.portfolio-hero .hero-badge, .portfolio-hero .stat-pill {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
}
/* The shop header is painted from the owner's own --shop-* colours. Keep the
   colour, drop the three-stop gradient for a single flat field - but only when
   there is no cover photo, where the gradient is the readability scrim over the
   image and removing it would leave white text on the photo. */
.shop-header:not([style*="background-image"]) {
  background: var(--shop-primary, var(--ic-brand-700)) !important;
}
.shop-header { box-shadow: none !important; }
.shop-header * { text-shadow: none !important; }

.order-from-portfolio-btn, .order-btn {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ic-r-md) !important;
  box-shadow: var(--ic-shadow-sm) !important;
  font-weight: 500 !important;
}
.order-from-portfolio-btn:hover, .order-btn:hover { background: var(--ic-brand-800) !important; }

.no-image-placeholder {
  background: var(--ic-surface-sunk) !important;
  background-image: none !important;
  color: var(--ic-muted-2) !important;
}

/* Portfolio / shop grids fill the page instead of huddling in the middle. */
.portfolio-grid, .shop-grid, .public-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 18px !important;
  max-width: var(--ic-container);
  margin-inline: auto !important;
  padding-inline: 20px;
}

/* ── Order summary ─────────────────────────────────────────────────────────
   Printed and handed to a customer, or opened from a link, so it wants to
   read as a document: plenty of white, one accent, aligned figures. */
.order-summary-page, .summary-page { background: var(--ic-canvas) !important; }
.summary-card, .order-summary-card {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-lg) !important;
  box-shadow: var(--ic-shadow-sm) !important;
  max-width: 760px;
  margin-inline: auto;
}
.summary-header, .order-summary-header {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: var(--ic-r-lg) var(--ic-r-lg) 0 0;
}
.summary-header * { color: #fff !important; text-shadow: none !important; }
.summary-row, .order-line {
  border-bottom: 1px solid var(--ic-border) !important;
  padding: 11px 0;
}
.summary-total, .order-total {
  border-top: 2px solid var(--ic-ink) !important;
  font-weight: 600 !important;
  font-size: var(--ic-text-lg) !important;
  font-variant-numeric: tabular-nums;
}

/* ── Auth pages (login / register / password reset) ── */
.auth-page, .auth-wrapper { background: var(--ic-canvas) !important; }
.auth-card, .login-card, .register-card {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-xl) !important;
  box-shadow: var(--ic-shadow-md) !important;
}
.auth-header, .auth-title { color: var(--ic-ink) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   32. LAST OFFENDERS
   ═══════════════════════════════════════════════════════════════════════════ */
/* Calendar: today's date marker read as a Google-blue dot. */
.day-num.today, .calendar-day.today .day-num, td.today .day-num, .day.today .day-num {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: var(--ic-r-pill) !important;
}

/* Google Calendar sync: Google's own outlined button style. Still obviously
   Google (their blue, their mark), without a solid blue pill dominating the
   page the way the filled variant did. */
.google-btn {
  background: var(--ic-surface) !important;
  background-image: none !important;
  color: #1a73e8 !important;
  border: 1px solid var(--ic-border-strong) !important;
  border-radius: var(--ic-r-md) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.google-btn:hover { background: var(--ic-surface-alt) !important; border-color: #1a73e8 !important; }

/* Rank / row numbering chips */
.row-num, .item-rank, .item-rank.top {
  background: var(--ic-surface-alt) !important;
  background-image: none !important;
  color: var(--ic-muted) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-sm) !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
}
.item-rank.top {
  background: var(--ic-brand-50) !important;
  color: var(--ic-brand-700) !important;
  border-color: var(--ic-brand-200) !important;
}

.reminders-badge, .notif-count {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

.delivery-event-time, .event-time { color: var(--ic-muted) !important; font-variant-numeric: tabular-nums; }

/* Dashboard promo link rendered as a gradient block. */
.social-banner, a.social-banner, .promo-link {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
}

/* ── Mobile page header ────────────────────────────────────────────────────
   The page-level rules give .hero-text a content-width flex basis, which on a
   phone left the title squeezed to ~70px and truncated next to the buttons.
   Title takes its own row; the actions sit under it. */
@media (max-width: 768px) {
  .hero-row, .hero-content { align-items: flex-start !important; }
  .hero-text {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    order: -1;
  }
  .hero-text h1, .hero-title, .page-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .hero-actions { flex: 1 1 100% !important; width: 100% !important; }

  /* Clear the floating buttons so the last row is never sitting under them. */
  .ingredients-page, .cakes-page, .recipes-page, .templates-page,
  .customers-page, .completed-page, .pantry-page, .categories-page,
  .reports-page, .shop-page, .home-page { padding-bottom: 110px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   33. EMPTY STATES
   The icon inherited white from the old coloured hero, and the call to
   action came out transparent - so an empty page looked broken rather than
   empty. Neither is ever painted in a status colour: nothing has gone wrong.
   ═══════════════════════════════════════════════════════════════════════════ */
.empty-icon, .empty-state-icon, .no-data-icon {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--ic-r-pill) !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 14px !important;
  font-size: 1.5rem !important;
  box-shadow: none !important;
}
.empty-icon i, .empty-state-icon i, .no-data-icon i { color: var(--ic-brand-700) !important; }

.empty-state h2, .empty-state h3, .empty-title, .empty-state-title {
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-lg) !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
}
.empty-state p, .empty-text, .empty-state-text {
  color: var(--ic-muted) !important;
  font-size: var(--ic-text-base) !important;
  margin: 0 0 18px !important;
}

.btn-primary-action, .empty-state .btn, .empty-state a.btn, .empty-cta {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--ic-brand-700) !important;
  border-radius: var(--ic-r-md) !important;
  padding: 9px 18px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.btn-primary-action i, .empty-state .btn i, .empty-cta i { color: #fff !important; }
.btn-primary-action:hover, .empty-state .btn:hover, .empty-cta:hover {
  background: var(--ic-brand-800) !important;
  border-color: var(--ic-brand-800) !important;
}

/* A hero add button must never lose to the generic hero-button rule again. */
.hero-row .add-btn, .hero-row .new-btn, .hero-content .add-btn,
.hero-actions .add-btn, button.add-btn, a.add-btn {
  background: var(--ic-brand-700) !important;
  border-color: var(--ic-brand-700) !important;
  color: #fff !important;
}
.hero-row .add-btn i, .hero-content .add-btn i, button.add-btn i, a.add-btn i { color: #fff !important; }
.hero-row .add-btn.limit-blocked, button.add-btn.limit-blocked {
  background: var(--ic-surface-alt) !important;
  border-color: var(--ic-border-strong) !important;
  color: var(--ic-muted) !important;
}
.hero-row .add-btn.limit-blocked i, button.add-btn.limit-blocked i { color: var(--ic-muted) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   34. HELP PAGE
   The table of contents was position:fixed, with room reserved by a
   `padding-right: 280px` on .container - a gutter the design system's
   container rule wiped out, dropping the TOC on top of the article. Rather
   than restore the hack, the layout becomes a real two-column grid with a
   sticky sidebar, so the columns cannot overlap at any width.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .help-page .container { max-width: 1280px !important; padding-inline: 20px !important; }

  .help-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .toc-sidebar {
    display: block !important;
    position: sticky !important;
    top: calc(var(--ic-header-h) + 16px) !important;
    inset-inline-end: auto !important;
    width: auto !important;
    max-height: calc(100vh - var(--ic-header-h) - 32px);
    z-index: 1 !important;
  }
  .help-sections { min-width: 0; }
}


.toc-inner {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-lg) !important;
  box-shadow: var(--ic-shadow-md) !important;
}
.toc-header {
  border-bottom: 1px solid var(--ic-border);
  padding: 12px 14px;
  font-size: var(--ic-text-sm);
  font-weight: 600;
  color: var(--ic-ink);
}
.toc-chapter-title {
  font-size: var(--ic-text-xs);
  font-weight: 600;
  color: var(--ic-muted);
  padding: 10px 14px 4px;
}
.toc-links { padding: 6px; overflow-y: auto; }
.toc-link, .toc-chapter-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: var(--ic-r-sm);
  font-size: var(--ic-text-sm);
  color: var(--ic-ink-2) !important;
}
.toc-link:hover, .toc-chapter-link:hover { background: var(--ic-surface-alt); color: var(--ic-ink) !important; }
.toc-link.active, .toc-chapter-link.active {
  background: var(--ic-brand-50) !important;
  color: var(--ic-brand-700) !important;
  font-weight: 600;
}
.toc-link-num {
  font-size: var(--ic-text-xs);
  color: var(--ic-muted-2);
  font-variant-numeric: tabular-nums;
  min-width: 26px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   35. PROFILE
   Eleven settings sections used to run down one page. They are grouped into
   four tabs, each holding one job: the account, the plan, optional features,
   and the switches you rarely touch.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The page capped itself at 800px, so on a wide screen the settings sat in
   a narrow column with most of the window empty. */
.profile-page {
  background: var(--ic-canvas) !important;
  /* Settings read better in a column than stretched across a wide monitor,
     but 800px was too narrow for the two-up language/currency rows. */
  max-width: 1040px !important;
  margin-inline: auto !important;
  padding: 0 20px 40px !important;
}

/* ── Header ─────────────────────────────────────────────────────────────────
   Was a tall plum slab with the avatar and name crowded to one side and a
   large empty half. Now a compact identity bar on the page surface. */
.profile-header {
  background: var(--ic-surface) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-lg) !important;
  box-shadow: var(--ic-shadow-xs) !important;
  max-width: var(--ic-container);
  margin: 20px auto 0 !important;
  padding: 20px !important;
}
.profile-header * { text-shadow: none !important; }
.profile-header .header-content {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.profile-header .avatar-section { flex-shrink: 0; }
.profile-header .avatar-wrapper,
.profile-header .avatar-wrapper img,
.profile-header .profile-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: var(--ic-r-pill) !important;
  background: var(--ic-brand-100) !important;
  color: var(--ic-brand-700) !important;
  border: 1px solid var(--ic-border) !important;
  object-fit: cover;
}
.profile-header .user-name {
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-xl) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.profile-header .user-email, .profile-header .user-username {
  color: var(--ic-muted) !important;
  font-size: var(--ic-text-base) !important;
}
.profile-header .avatar-edit-btn, .profile-header .camera-btn {
  background: var(--ic-brand-700) !important;
  color: #fff !important;
  border: 2px solid var(--ic-surface) !important;
  border-radius: var(--ic-r-pill) !important;
  width: 26px !important;
  height: 26px !important;
  box-shadow: none !important;
}

/* Header stat row: was centred under the name with a large empty half beside
   it. It now sits at the far end of the same row as the identity. */
.profile-header { display: flex !important; align-items: center; gap: 24px; flex-wrap: wrap; }
.profile-header .header-content { flex: 1 1 auto; min-width: 0; }
.profile-header .header-stats {
  display: flex !important;
  gap: 30px;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.profile-header .header-stat {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 1px;
}
.profile-header .stat-num {
  color: var(--ic-ink) !important;
  -webkit-text-fill-color: var(--ic-ink) !important;
  font-size: var(--ic-text-xl) !important;
  font-weight: 600 !important;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  order: 2;
}
.profile-header .stat-text {
  color: var(--ic-muted) !important;
  font-size: var(--ic-text-xs) !important;
  font-weight: 500 !important;
  order: 1;
}

/* ── Tab bar ── */
.profile-tabs {
  display: flex;
  gap: 4px;
  max-width: var(--ic-container);
  margin: 18px auto 0;
  padding: 4px;
  background: var(--ic-surface-sunk);
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }

.profile-tab {
  flex: 1 1 0;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--ic-r-md);
  background: transparent;
  color: var(--ic-muted);
  font-family: var(--ic-font);
  font-size: var(--ic-text-base);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ic-transition), color var(--ic-transition);
}
.profile-tab i { font-size: 1rem; opacity: 0.75; }
.profile-tab:hover { color: var(--ic-ink); background: var(--ic-surface); }
.profile-tab.is-active {
  background: var(--ic-surface);
  color: var(--ic-brand-700);
  font-weight: 600;
  border-color: var(--ic-border);
  box-shadow: var(--ic-shadow-xs);
}
.profile-tab.is-active i { opacity: 1; color: var(--ic-brand-700); }

/* ── Panels ── */
.profile-panel {
  max-width: var(--ic-container);
  margin: 16px auto 40px;
  display: grid;
  gap: 16px;
}
.profile-panel[hidden] { display: none !important; }

.profile-content { max-width: none !important; padding-inline: 20px !important; }

.profile-section {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-lg) !important;
  box-shadow: var(--ic-shadow-xs) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
.profile-section .section-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--ic-border) !important;
  background: transparent !important;
  background-image: none !important;
  margin: 0 !important;
}
.profile-section .section-header i {
  color: var(--ic-brand-700) !important;
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
}
.profile-section .section-header h2 {
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-md) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.profile-section .section-header p {
  color: var(--ic-muted) !important;
  font-size: var(--ic-text-sm) !important;
  margin: 1px 0 0 !important;
}
.profile-section > *:not(.section-header) { padding-inline: 18px; }
.profile-section > *:last-child { padding-bottom: 18px; }

/* ── Settings rows ── */
.settings-list { display: flex; flex-direction: column; }
.settings-list > * {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--ic-border);
}
.settings-list > *:last-child { border-bottom: none; }
.settings-list h3 {
  font-size: var(--ic-text-base) !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
  margin: 0 !important;
}
.settings-list p, .setting-desc {
  font-size: var(--ic-text-sm) !important;
  color: var(--ic-muted) !important;
  margin: 2px 0 0 !important;
}

/* ── Stat cards: four different tints became one ── */
.stat-card.stat-purple, .stat-card.stat-pink,
.stat-card.stat-cyan, .stat-card.stat-green {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border) !important;
  color: var(--ic-ink) !important;
}
.stat-card.stat-purple i, .stat-card.stat-pink i,
.stat-card.stat-cyan i, .stat-card.stat-green i {
  color: var(--ic-brand-700) !important;
  background: var(--ic-brand-50) !important;
  border-radius: var(--ic-r-md) !important;
}

/* ── Plan card ── */
.premium-section .premium-badge, .plan-badge {
  background: var(--ic-brand-50) !important;
  color: var(--ic-brand-700) !important;
  border: 1px solid var(--ic-brand-200) !important;
}
.premium-days, .days-remaining, .premium-section .big-number {
  color: var(--ic-brand-700) !important;
  -webkit-text-fill-color: var(--ic-brand-700) !important;
  font-variant-numeric: tabular-nums;
}
.usage-stats-section .usage-row { border-bottom: 1px solid var(--ic-border); }
.usage-bar, .usage-track { background: var(--ic-surface-sunk) !important; }
.usage-fill { background: var(--ic-brand-700) !important; background-image: none !important; }
.usage-fill.is-full, .usage-fill.warning { background: var(--ic-warning) !important; }

.upgrade-prompt {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  border: 1px solid var(--ic-brand-200) !important;
}
.upgrade-prompt i { color: var(--ic-brand-700) !important; }
.btn-upgrade {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border-radius: var(--ic-r-md) !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
}

/* Radio cards (language / currency) */
.radio-card {
  border: 1px solid var(--ic-border-strong) !important;
  border-radius: var(--ic-r-md) !important;
  background: var(--ic-surface) !important;
}
.radio-card:hover { border-color: var(--ic-muted-2) !important; }
.radio-card.selected, .radio-card input:checked + * , .radio-card.is-selected {
  border-color: var(--ic-brand-700) !important;
  background: var(--ic-brand-50) !important;
}

/* Danger zone stays red - it is the one place a status colour belongs here. */
.delete-account-row h3, .danger-zone h3 { color: var(--ic-danger) !important; }
.btn-delete-account, .btn-danger-outline {
  background: transparent !important;
  border: 1px solid var(--ic-danger) !important;
  color: var(--ic-danger) !important;
}
.btn-delete-account:hover { background: var(--ic-danger-bg) !important; }

@media (max-width: 768px) {
  .profile-tabs { margin-inline: 16px; }
  .profile-tab span { display: none; }        /* icons only on a phone */
  .profile-tab { flex: 1 1 0; min-width: 0; padding: 10px; }
  .profile-tab i { font-size: 1.15rem; }
  .profile-header { margin-inline: 16px; padding: 16px !important; }
  .profile-panel { margin-inline: 0; }
  .profile-content { padding-inline: 16px !important; }
}

/* Profile forms were capped at 500px inside a full-width card, so every field
   sat in the right half with the rest of the card empty. */
.profile-panel .profile-form,
.profile-panel .localization-grid,
.profile-panel .form-grid {
  width: 100% !important;
  max-width: none !important;
}
.profile-panel .localization-grid, .profile-panel .form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 18px !important;
}
.profile-panel .form-group { width: auto !important; min-width: 0; }
.profile-panel .form-group input,
.profile-panel .form-group select,
.profile-panel .form-group textarea { width: 100% !important; }
.profile-panel .language-options { display: flex !important; gap: 10px; flex-wrap: wrap; }
.profile-panel .language-options .radio-card { flex: 1 1 120px; justify-content: center; }

/* The save button belongs at the end of its section, not stretched across it. */
.profile-panel .profile-form button[type="submit"],
.profile-panel .btn-save-prefs {
  width: auto !important;
  min-width: 180px;
  margin-inline-start: auto;
  display: inline-flex !important;
}
.profile-panel .form-actions { display: flex; justify-content: flex-start; margin-top: 6px; }

@media (max-width: 640px) {
  .profile-panel .profile-form button[type="submit"] { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   36. HERO BUTTONS — CATCH-ALL
   The pages each named their hero buttons differently (.back-btn,
   .hero-action-btn, .guide-btn, …) and every one of them was written for the
   old coloured band: a translucent-white fill with a white icon. Naming them
   one at a time meant the ones I had not found yet stayed invisible, so this
   matches any link or button inside a page hero and gives it a legible
   default. The primary action and the segmented controls opt out by class.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-row a:not(.add-btn):not(.new-btn):not(.btn-add):not(.btn-primary):not(.hero-badge):not(.chip):not(.filter-btn),
.hero-row button:not(.add-btn):not(.new-btn):not(.btn-add):not(.btn-primary):not(.toggle-btn):not(.view-btn):not(.layout-btn):not(.filter-btn):not(.chip),
.hero-content a:not(.add-btn):not(.new-btn):not(.btn-add):not(.btn-primary):not(.hero-badge):not(.chip):not(.filter-btn),
.hero-content button:not(.add-btn):not(.new-btn):not(.btn-add):not(.btn-primary):not(.toggle-btn):not(.view-btn):not(.layout-btn):not(.filter-btn):not(.chip),
.hero-actions a:not(.add-btn):not(.new-btn):not(.btn-add):not(.btn-primary):not(.chip),
.hero-actions button:not(.add-btn):not(.new-btn):not(.btn-add):not(.btn-primary):not(.toggle-btn):not(.view-btn):not(.chip) {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-border-strong) !important;
  color: var(--ic-ink-2) !important;
  border-radius: var(--ic-r-md) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
}
.hero-row a:not(.add-btn):not(.btn-primary):not(.hero-badge) i,
.hero-row button:not(.add-btn):not(.btn-primary):not(.toggle-btn):not(.view-btn) i,
.hero-content a:not(.add-btn):not(.btn-primary):not(.hero-badge) i,
.hero-content button:not(.add-btn):not(.btn-primary):not(.toggle-btn):not(.view-btn) i,
.hero-actions a:not(.add-btn):not(.btn-primary) i,
.hero-actions button:not(.add-btn):not(.btn-primary):not(.toggle-btn):not(.view-btn) i {
  color: inherit !important;
}

.hero-action-btn, .csv-btn, .export-csv-btn {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background var(--ic-transition), border-color var(--ic-transition), color var(--ic-transition);
}
.hero-action-btn:hover, .csv-btn:hover {
  background: var(--ic-surface-alt) !important;
  border-color: var(--ic-muted-2) !important;
  color: var(--ic-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   37. PER-SECTION HELP LINKS (profile)
   Each settings section links to the help chapter that documents it. The link
   is the first child in the markup but `order` puts it at the far end of the
   header row, so the section icon still leads.
   ═══════════════════════════════════════════════════════════════════════════ */
.profile-section .section-header { position: relative; }

.section-help {
  order: 99;
  margin-inline-start: auto;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--ic-r-md);
  border: 1px solid transparent;
  color: var(--ic-muted-2) !important;
  text-decoration: none !important;
  transition: background var(--ic-transition), color var(--ic-transition), border-color var(--ic-transition);
}
.section-help i { font-size: 0.95rem; color: inherit !important; }
.section-help:hover {
  background: var(--ic-brand-50) !important;
  border-color: var(--ic-brand-200) !important;
  color: var(--ic-brand-700) !important;
}
.section-help:focus-visible {
  outline: 2px solid var(--ic-brand-700);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .section-help { width: 40px; height: 40px; }
}

/* Count badge and the accessibility spacing control kept the old info blue. */
.orders-badge, .count-pill {
  background: var(--ic-brand-50) !important;
  background-image: none !important;
  color: var(--ic-brand-700) !important;
  border: 1px solid var(--ic-brand-200) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}
.spacing-btn.active, .a11y-btn.active {
  background: var(--ic-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--ic-brand-700) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   38. SYSTEM NOTIFICATION POPUP
   The header used to be a saturated gradient keyed to the notification type,
   with white text on top. Flattening it to a light surface (section 21) left
   Bootstrap's .text-white / .text-white-50 / .btn-close-white painting white
   on white - the title and date were invisible. The text goes dark and the
   type is carried by the icon instead, which is where a single accent belongs.
   Scoped to this header so .text-white keeps working on genuinely dark
   surfaces elsewhere (the promo banner, the plum shop header).
   ═══════════════════════════════════════════════════════════════════════════ */
.notification-header {
  color: var(--ic-ink) !important;
  border-bottom: 1px solid var(--ic-border) !important;
  align-items: center !important;
}
.notification-header h4,
.notification-header .text-white,
.notification-header h4.text-white {
  color: var(--ic-ink) !important;
  font-size: var(--ic-text-lg) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
.notification-header small,
.notification-header .text-white-50 {
  color: var(--ic-muted) !important;
  font-size: var(--ic-text-xs) !important;
}

/* Close button: .btn-close-white is a white SVG mask, invisible on a light
   header. Reset the filter Bootstrap applies and tint it like our other
   close buttons. */
.notification-header .btn-close,
.notification-header .btn-close-white {
  filter: none !important;
  opacity: 0.55 !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--ic-r-sm) !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0;
}
.notification-header .btn-close:hover,
.notification-header .btn-close-white:hover {
  opacity: 1 !important;
  background-color: var(--ic-surface-alt) !important;
}

/* The type icon is the one coloured thing in the header. */
.notification-header > .d-flex > i,
.notification-header i:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--ic-r-md);
  font-size: 1.1rem !important;
  flex-shrink: 0;
  background: var(--ic-brand-50);
  color: var(--ic-brand-700) !important;
  margin-inline-end: 12px !important;
}
.notification-header.bg-bug-fix i:first-child     { background: var(--ic-danger-bg);  color: var(--ic-danger) !important; }
.notification-header.bg-feature i:first-child     { background: var(--ic-success-bg); color: var(--ic-success) !important; }
.notification-header.bg-warning i:first-child,
.notification-header.bg-maintenance i:first-child { background: var(--ic-warning-bg); color: var(--ic-warning) !important; }
.notification-header.bg-info i:first-child        { background: var(--ic-info-bg);    color: var(--ic-info) !important; }

.notification-message { color: var(--ic-ink-2) !important; font-size: var(--ic-text-md) !important; }
.notification-expiry { background: var(--ic-surface-alt) !important; border-radius: var(--ic-r-md) !important; }
.notification-footer { border-top: 1px solid var(--ic-border) !important; background: var(--ic-surface-alt) !important; }
.system-notification-modal {
  border-radius: var(--ic-r-xl) !important;
  border: 1px solid var(--ic-border) !important;
  box-shadow: var(--ic-shadow-lg) !important;
  overflow: hidden;
}
.system-notification-overlay { background: rgba(36, 28, 31, 0.45) !important; backdrop-filter: blur(2px); }

/* ═══════════════════════════════════════════════════════════════════════════
   39. CONTRAST CORRECTIONS
   Found by a pass that checks every visible text node and icon against the
   background actually painted behind it - including inside modals, which is
   where the system-notification popup's white-on-white was hiding. Two kinds
   of fault: text still white after I flattened its container to a light
   surface, and text I turned dark on a container that stayed plum.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark text on a surface that is still brand-coloured ── */
.modal-header.bg-primary,
.modal-header.bg-primary *,
.modal-header.bg-dark,
.modal-header.bg-dark * {
  color: #fff !important;
}
.modal-header.bg-primary .btn-close,
.modal-header.bg-dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 0.85 !important;
}
/* Chapter reference chips on the help page are plum discs. */
.kb-ref, .kb-ref * { color: #fff !important; }

/* ── White text left behind on a surface I lightened ── */
.import-card, .import-card * { color: var(--ic-ink-2) !important; }
.import-card strong, .import-card h3, .import-card h4 { color: var(--ic-ink) !important; }
.import-card small { color: var(--ic-muted) !important; }
.import-card i { color: var(--ic-brand-700) !important; }

.shekel, .currency-symbol { color: inherit !important; }

/* Segmented control on the help page: the page sets the active half's text to
   white, which stopped working once the active pill became a light surface. */
.guide-toggle .toggle-btn.active,
.guide-toggle .toggle-btn.active *,
.guide-toggle .toggle-btn.active i {
  color: var(--ic-brand-700) !important;
}
.guide-toggle .toggle-btn, .guide-toggle .toggle-btn * { color: var(--ic-muted) !important; }
.guide-toggle {
  background: var(--ic-surface-sunk) !important;
  border: 1px solid var(--ic-border) !important;
  box-shadow: none !important;
  border-radius: var(--ic-r-md) !important;
}

/* "Best value" ribbon on the upgrade page. */
.text-white-50 { color: var(--ic-muted) !important; }
.bg-primary .text-white-50, .bg-dark .text-white-50,
.social-banner .text-white-50, .profile-header .text-white-50 {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Recipe-source badges were each in that site's own brand colour; as small
   chips beside a label the site name carries the meaning on its own. */
.site-badge, .site-badge.mako, .site-badge.foody, .site-badge.tenmin {
  background: var(--ic-surface-alt) !important;
  background-image: none !important;
  color: var(--ic-ink-2) !important;
  border: 1px solid var(--ic-border) !important;
  border-radius: var(--ic-r-sm) !important;
  font-weight: 500 !important;
}

/* Image placeholders were barely a shade off their own background. */
.no-img, i.no-img, .placeholder-icon {
  color: var(--ic-muted-2) !important;
  opacity: 0.7;
}

/* Avatar placeholder glyph was near-white on the pale brand chip. */
.avatar-wrapper .bi-person-fill, .user-avatar .bi-person-fill,
.profile-avatar .bi-person-fill, .avatar .bi-person-fill {
  color: var(--ic-brand-600) !important;
}

/* Modal close glyphs kept the white they had on coloured headers. */
.modal .bi-x-lg, .modal .bi-x, .modal-close .bi-x-lg,
.popup-close .bi-x-lg, .close-btn .bi-x-lg, .close-btn .bi-x {
  color: var(--ic-muted) !important;
}
.modal .bi-x-lg:hover, .close-btn:hover .bi-x-lg { color: var(--ic-ink) !important; }
/* …except on a header that is still brand-coloured. */
.modal-header.bg-primary .bi-x-lg, .modal-header.bg-dark .bi-x-lg,
.notification-header .bi-x-lg { color: #fff !important; }

/* Category icons are a colour each user picks and stores, so a pale choice
   can land unreadably on the light chip behind it. Darkening the glyph keeps
   their hue recognisable while guaranteeing it is visible. */
.category-icon i, .cat-icon i, .icon-preview i,
[class*="category"] > i[style*="color"] {
  filter: brightness(0.72) saturate(1.15);
}

/* The premium help card's blanket `* { color: ink }` outranked .kb-ref's own
   white, so the one chapter chip inside it came out dark on plum. */
.help-card.premium-card .kb-ref,
.help-card.premium-card .kb-ref * { color: #fff !important; }

/* Messaging panel close button kept its white glyph. */
.msg-close, .msg-close i, .msg-header .btn-close {
  color: var(--ic-muted) !important;
  background: transparent !important;
  border: none !important;
}
.msg-close:hover, .msg-close:hover i { color: var(--ic-ink) !important; }

/* WhatsApp's brand green on a pale green tile is close to unreadable; the
   channel is still obvious from the icon shape and the label beside it. */
.wa-option-icon, .wa-option-icon i, .whatsapp-icon i {
  color: var(--ic-success) !important;
}

/* Category icons carry a colour each user picked, applied inline, so a pale
   choice lands unreadably on the light row behind it. Darkening the glyph
   keeps their hue recognisable while guaranteeing it stays visible. */
.category-group-info i[style*="color"],
.category-group-header i[style*="color"],
.category-icon i[style*="color"],
.cat-icon i[style*="color"],
.icon-preview i[style*="color"] {
  filter: brightness(0.68) saturate(1.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   40. DASHBOARD STAT TOOLTIPS
   The tooltip sets z-index:1000, but that number only counts inside its own
   stacking context - .stats-section, which sits at z-index:2. The dashboard
   header's buttons are at z-index:10, so they painted over the tooltip.
   Raising the section above them fixes every tooltip at once; the two never
   overlap otherwise, so nothing else changes.
   ═══════════════════════════════════════════════════════════════════════════ */
.stats-section { z-index: 20 !important; }

/* And lift the hovered card over its neighbours, so a tooltip that spills
   sideways is not covered by the next card along. */
.stats-grid .stat-card:hover,
.stats-grid .stat-card:focus-within { z-index: 30; }

.stat-tooltip { z-index: 40 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   41. REPORTS TABS
   The six report sections were scroll anchors down one very long page; each
   is now its own tab, matching the profile settings page.
   ═══════════════════════════════════════════════════════════════════════════ */
.section-nav {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ic-border) !important;
  box-shadow: none !important;
  position: static !important;   /* no longer a scroll-spy bar */
  padding: 12px 0 !important;
}
.section-nav .nav-scroll {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--ic-surface-sunk);
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav .nav-scroll::-webkit-scrollbar { display: none; }

.nav-pill {
  flex: 1 1 0;
  min-width: max-content;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px !important;
  border: 1px solid transparent !important;
  border-radius: var(--ic-r-md) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ic-muted) !important;
  font-family: var(--ic-font);
  font-size: var(--ic-text-base) !important;
  font-weight: 500 !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background var(--ic-transition), color var(--ic-transition);
}
.nav-pill i { font-size: 1rem; opacity: 0.75; }
.nav-pill:hover { background: var(--ic-surface) !important; color: var(--ic-ink) !important; }
.nav-pill.active {
  background: var(--ic-surface) !important;
  color: var(--ic-brand-700) !important;
  font-weight: 600 !important;
  border-color: var(--ic-border) !important;
  box-shadow: var(--ic-shadow-xs) !important;
}
.nav-pill.active i { opacity: 1; color: var(--ic-brand-700) !important; }
.nav-pill:focus-visible { outline: 2px solid var(--ic-brand-700); outline-offset: 2px; }

/* A hidden panel must not reserve space. */
.reports-page [hidden] { display: none !important; }

.reports-page .metrics-strip,
.reports-page .charts-grid,
.reports-page .data-row,
.reports-page .section-card { margin-top: 18px; }

@media (max-width: 768px) {
  .nav-pill { flex: 0 0 auto; padding: 9px 12px !important; }
  .section-nav .nav-scroll { margin-inline: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   42. TEXT ON BRAND-COLOURED SURFACES
   Flattening the app turned most coloured panels into light ones, and the
   rules that darkened their text are broad (h1-h6, .modal-header *). Every
   surface that legitimately STAYED brand-coloured then inherited dark text on
   plum. Rather than fix those one report at a time, every such surface is
   listed here once and told to carry light text. Add new plum panels to this
   list and they are correct by default.
   ═══════════════════════════════════════════════════════════════════════════ */
.pp-cover,
.profile-cover,
.friend-modal-header,
.social-banner,
.promo-banner,
.portfolio-hero,
.public-portfolio-header,
.summary-header,
.order-summary-header,
.toc-header,
.modal-header.bg-primary,
.modal-header.bg-dark,
.premium-hero,
.upgrade-hero {
  color: #fff !important;
}
.pp-cover *, .pp-cover h1, .pp-cover h2, .pp-cover h3,
.profile-cover *,
.friend-modal-header *,
.social-banner *, .promo-banner *,
.portfolio-hero h1, .portfolio-hero h2, .portfolio-hero h3,
.public-portfolio-header *,
.summary-header *, .order-summary-header *,
.toc-header *,
.modal-header.bg-primary *, .modal-header.bg-dark *,
.premium-hero *, .upgrade-hero * {
  color: #fff !important;
  text-shadow: none !important;
}

/* Secondary text on those surfaces is dimmed white, not grey. */
.pp-cover .pp-username, .pp-cover small, .pp-cover .muted,
.friend-modal-header small, .friend-modal-header .user-handle,
.social-banner p, .promo-banner p,
.portfolio-hero p, .portfolio-hero .hero-bio,
.public-portfolio-header small,
.summary-header small, .order-summary-header small {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Close buttons on those surfaces need the light treatment too. */
.friend-modal-header .btn-close, .friend-modal-header .modal-close,
.friend-modal-header .close-btn, .friend-modal-header i.bi-x,
.friend-modal-header i.bi-x-lg {
  color: #fff !important;
  filter: none !important;
  opacity: 0.85 !important;
}
.friend-modal-header .btn-close:hover { opacity: 1 !important; }

/* Chips sitting on a brand surface. */
.pp-cover .pp-stat, .pp-cover .stat-box,
.portfolio-hero .hero-badge, .social-banner .banner-icon, .promo-banner .banner-icon {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
}

/* ── Reports KPI strip ───────────────────────────────────────────────────── */
/* Four cards, four different 4px accent bars - green, teal, plum, plum. The
   figures already differ, so the stripes only added colour; and the strip now
   heads the whole page rather than sitting in a tab, so the figures lead. */
.metric-item::before { display: none !important; }
.metric-item {
  padding: 14px 16px !important;
  gap: 12px !important;
  border: 1px solid var(--ic-border) !important;
  box-shadow: var(--ic-shadow-xs) !important;
}
.metric-item .metric-icon {
  background: var(--ic-brand-50) !important;
  color: var(--ic-brand-700) !important;
  border-radius: var(--ic-r-md) !important;
}
.metric-item .metric-value {
  font-size: 1.4rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  color: var(--ic-ink) !important;
}
.metric-item .metric-label {
  font-size: 0.78rem !important;
  color: var(--ic-muted) !important;
}
@media (max-width: 768px) {
  .metric-item .metric-value { font-size: 1.15rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   43. THE LEFTOVER NAVY ACCENT
   Half the pages declare their own :root { --blue: #2a5580 } and paint
   headings, values and the calendar's "today" marker with it, so a plum app
   kept showing a second, unrelated accent colour. Those pages set the tokens
   in a <style> that comes after this file, so :root alone loses the cascade -
   html:root outranks it without needing !important on every use.

   The accessibility widget keeps its blue: it hard-codes #2a5580 rather than
   reading these tokens, which is what makes this safe to retune.
   ═══════════════════════════════════════════════════════════════════════════ */
html:root {
  --blue: var(--ic-brand-600);
  --blue-dark: var(--ic-brand-700);
  --blue-light: var(--ic-brand-500);
  --blue-pale: var(--ic-brand-50);

  /* The calendar carried a second copy of the same idea under its own names -
     a Google-Calendar blue for today, the busy-day tints and the day hover. */
  --gcal-blue: var(--ic-brand-600);
  --gcal-blue-dark: var(--ic-brand-700);
  --gcal-blue-light: var(--ic-brand-200);
  --gcal-blue-pale: var(--ic-brand-50);
}

/* Titles are structure, not accent: they read as ink, and the icon beside them
   carries the brand colour. */
.chart-title,
.data-header,
.data-header span,
.fin-subtitle,
.section-title {
  color: var(--ic-ink) !important;
  font-weight: 600 !important;
}
.chart-title i,
.data-header i,
.fin-subtitle i,
.section-title i { color: var(--ic-brand-600) !important; }

/* The chart card headers were a pale blue band with a blue hairline. */
.chart-header,
.data-header {
  background: var(--ic-surface-alt) !important;
  border-bottom: 1px solid var(--ic-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   44. LEGAL DOCUMENTS  (/terms, /privacy)
   These two pages shared a marketing-style hero whose .hero-content class the
   app's page-head rules then claimed, laying the centred masthead out as a
   flex row: ghost icon, title, subtitle and date all crammed onto one line.
   They are reference documents, not landing pages, so they get a document
   layout - a masthead, a sticky outline, and one readable column - and both
   pages now share it rather than keeping two drifting copies.
   ═══════════════════════════════════════════════════════════════════════════ */
.legal-page {
  background: var(--ic-canvas);
  min-height: 100vh;
  padding-bottom: 64px;
}
.legal-wrap {
  /* Sized to the two columns it holds - a 220px outline, a 48px gutter and a
     column of legal text at its reading measure - so the block sits centred
     instead of leaving a wide empty margin beside the document. */
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Masthead ───────────────────────────────────────────────────────────── */
.legal-masthead {
  background: var(--ic-surface);
  border-bottom: 1px solid var(--ic-border);
  padding-block: 28px;
  margin-bottom: 32px;
}
.legal-masthead .legal-wrap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.legal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--ic-r-md);
  background: var(--ic-brand-50);
  color: var(--ic-brand-700);
  font-size: 1.25rem;
}
/* A basis narrow enough that the icon and the title stay on one row even on
   a 390px screen, rather than the icon wrapping alone above the heading. */
.legal-headings { flex: 1 1 200px; min-width: 0; }
.legal-headings h1 {
  margin: 0;
  font-size: var(--ic-text-xl);
  font-weight: 650;
  line-height: 1.25;
  color: var(--ic-ink);
}
.legal-headings > p {
  margin: 4px 0 0;
  font-size: var(--ic-text-base);
  color: var(--ic-muted);
  max-width: 62ch;
}
.legal-updated {
  margin: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ic-text-xs);
  color: var(--ic-muted);
  white-space: nowrap;
}

/* ── Two columns: outline + document ────────────────────────────────────── */
.legal-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.legal-toc { position: sticky; top: 24px; }
.legal-toc nav { display: flex; flex-direction: column; gap: 1px; }
.legal-toc-title {
  margin: 0 0 10px;
  font-size: var(--ic-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ic-muted-2);
}
.legal-toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--ic-r-sm, 8px);
  font-size: var(--ic-text-sm);
  color: var(--ic-muted);
  text-decoration: none;
  line-height: 1.3;
  transition: background var(--ic-transition), color var(--ic-transition);
}
.legal-toc a span {
  flex: 0 0 20px;
  font-size: var(--ic-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ic-muted-2);
  text-align: center;
}
.legal-toc a:hover { background: var(--ic-surface-alt); color: var(--ic-ink); }
.legal-toc a.is-current {
  background: var(--ic-brand-50);
  color: var(--ic-brand-700);
  font-weight: 600;
}
.legal-toc a.is-current span { color: var(--ic-brand-600); }
.legal-toc a:focus-visible { outline: 2px solid var(--ic-brand-700); outline-offset: 1px; }

/* ── Document ───────────────────────────────────────────────────────────── */
.legal-doc {
  max-width: 72ch;              /* a legal page is read, not scanned */
  font-size: var(--ic-text-md);
  line-height: 1.75;
  color: var(--ic-ink-2);
}
.legal-lede {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ic-ink);
}

.legal-callout {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 28px;
  background: var(--ic-brand-50);
  border: 1px solid var(--ic-brand-200);
  border-radius: var(--ic-r-lg);
}
.legal-callout > i { color: var(--ic-brand-600); font-size: 1.1rem; margin-top: 3px; }
.legal-callout h2 {
  margin: 0 0 4px;
  font-size: var(--ic-text-base);
  font-weight: 650;
  color: var(--ic-brand-700);
}
.legal-callout p {
  margin: 0;
  font-size: var(--ic-text-sm);
  line-height: 1.65;
  color: var(--ic-ink-2);
}

.legal-section { scroll-margin-top: 24px; padding-top: 28px; }
.legal-section + .legal-section { border-top: 1px solid var(--ic-border); }
.legal-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font-size: var(--ic-text-lg);
  font-weight: 650;
  line-height: 1.35;
  color: var(--ic-ink);
}
.legal-num {
  flex: 0 0 auto;
  font-size: var(--ic-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ic-brand-600);
}
.legal-text > :first-child { margin-top: 0; }
.legal-text > :last-child { margin-bottom: 0; }
.legal-text p { margin: 0 0 12px; }
.legal-text ul { margin: 0 0 12px; padding-inline-start: 20px; }
.legal-text li { margin-bottom: 6px; }
.legal-text li::marker { color: var(--ic-brand-300); }
.legal-text strong { color: var(--ic-ink); font-weight: 600; }

/* Callouts inside a section: a tinted rule, not a boxed card in a boxed card. */
.legal-text .highlight-box {
  display: flex;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: var(--ic-r-md);
  border: 1px solid var(--ic-border);
  background: var(--ic-surface-alt);
  font-size: var(--ic-text-sm);
  line-height: 1.6;
}
.legal-text .highlight-box i { flex: 0 0 auto; margin-top: 3px; color: var(--ic-brand-600); }
.legal-text .highlight-box.green { background: var(--ic-success-bg); border-color: #c7e5d6; }
.legal-text .highlight-box.green i { color: var(--ic-success); }
.legal-text .highlight-box.amber { background: var(--ic-warning-bg); border-color: #eeddc0; }
.legal-text .highlight-box.amber i { color: var(--ic-warning); }
.legal-text .highlight-box.purple { background: var(--ic-brand-50); border-color: var(--ic-brand-200); }

/* Grouped lists on the privacy page. */
.legal-text .info-category { margin: 14px 0; }
.legal-text .info-category h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: var(--ic-text-base);
  font-weight: 600;
  color: var(--ic-ink);
}
.legal-text .info-category h4 i { color: var(--ic-brand-600); font-size: 0.95rem; }

/* Four items in a column of legal text: 200px settles them into two even
   rows rather than three-then-one. */
.legal-text .security-features,
.legal-text .rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.legal-text .security-item,
.legal-text .right-item {
  padding: 12px 14px;
  border: 1px solid var(--ic-border);
  border-radius: var(--ic-r-md);
  background: var(--ic-surface);
  font-size: var(--ic-text-sm);
}
.legal-text .security-item {
  display: flex;
  align-items: center;
  gap: 9px;
}
.legal-text .security-item i,
.legal-text .right-item i { color: var(--ic-brand-600); }
.legal-text .right-item span {
  display: block;
  margin: 6px 0 2px;
  font-weight: 600;
  color: var(--ic-ink);
}
.legal-text .right-item p { margin: 0; font-size: var(--ic-text-xs); color: var(--ic-muted); }

.legal-text .contact-link,
.legal-text .inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 14px;
  border-radius: var(--ic-r-md);
  font-size: var(--ic-text-sm);
  font-weight: 600;
  text-decoration: none;
  background: var(--ic-brand-700);
  color: #fff;
  border: 1px solid var(--ic-brand-700);
}
.legal-text .inline-link {
  background: var(--ic-surface);
  color: var(--ic-brand-700);
  border-color: var(--ic-border-strong);
  font-weight: 500;
}
.legal-text .contact-link:hover { background: var(--ic-brand-800); border-color: var(--ic-brand-800); color: #fff; }
.legal-text .inline-link:hover { background: var(--ic-brand-50); }

/* ── Foot ───────────────────────────────────────────────────────────────── */
.legal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ic-border);
}
.legal-back, .legal-sibling {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--ic-border-strong);
  border-radius: var(--ic-r-md);
  background: var(--ic-surface);
  font-size: var(--ic-text-sm);
  font-weight: 500;
  color: var(--ic-ink-2);
  text-decoration: none;
}
.legal-back:hover, .legal-sibling:hover {
  background: var(--ic-surface-alt);
  color: var(--ic-ink);
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .legal-wrap { padding-inline: 16px; }
  .legal-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* The outline turns into a scrollable strip rather than a tall block the
     reader has to scroll past to reach the document. */
  .legal-toc {
    position: static;
    margin: 0 -16px;
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--ic-border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .legal-toc::-webkit-scrollbar { display: none; }
  .legal-toc nav { flex-direction: row; gap: 6px; }
  .legal-toc-title { display: none; }
  .legal-toc a { flex: 0 0 auto; border: 1px solid var(--ic-border); white-space: nowrap; }
  .legal-toc a span { display: none; }
  .legal-doc { max-width: none; }
  .legal-updated { align-self: flex-start; flex-basis: 100%; }
}