/* ========================================================================
 * molecules.css — small atom combinations (one bit of meaning each)
 *
 * Per docs/superpowers/specs/2026-05-08-atomic-design-system.md §4.
 *
 * Routing guide (molecule inventory §4):
 *  - Card:               .card (base shell for KPIs, sections)
 *  - MetricCard layout:  .kpi-grid, .alert-strip
 *  - AlertPill:          .alert-pill + .alert-critical|warning|info,
 *                        .alert-title, .alert-desc
 *  - SavingsBanner:      .savings-banner, .value-number
 *  - ModalShell:         .modal__overlay / .modal__box / .modal__header /
 *                        .modal__title / .modal__body / .modal__footer /
 *                        .modal__close + legacy aliases .modal-overlay,
 *                        .modal-box, .modal-header, .modal-body
 *                        (behavior in js/modal.js — Phase 1.2)
 *  - FilterButtonRow:    .filter-row (atom .filter-btn lives in atoms.css)
 *  - QuadBox:            .quad-box, .quad-*-bg, .quad-item
 *  - PrepCard:           .prep-card
 *  - InvRow / InvTrow:   .inv-row, .inv-trow (table row variants)
 *  - SettingRow:         .setting-row
 *  - InsightCard:        .insight-card + parts (icon, content, title, desc,
 *                        action, side)
 *  - DraftCard:          .draft-card, .draft-textarea (atom)
 *  - EventCard:          .event-card
 *  - GuidelineBanner:    .guideline-banner + nested rules
 *  - ImportZone:         .import-zone (drag-drop)
 *  - PreEngOutput:       .pre-eng-output
 *  - BuilderRow/Summary: .builder-row, .builder-summary
 *  - RecipeCardGrid:     .recipe-card-grid, .recipe-card
 *  - IngTable:           .ing-table (recipe ingredient table)
 *  - ChartGrid:          .chart-grid, .bottom-grid
 *  - RestCard:           .rest-card and friends (login-screen restaurant
 *                        select cards)
 *  - LoginCard:          .login-card and login-* parts (login form)
 * ======================================================================== */

/* ========================================================================
 * Card molecule (canonical) — Phase 1.5
 *
 * BEM: .card (host) > .card__header / .card__title / .card__subtitle /
 *      .card__body / .card__footer / .card__actions
 *      Modifiers: .card--padded-sm | --padded-md | --padded-lg
 *                 .card--ghost (transparent + dashed border)
 *                 .card--alert (terra-tinted, for variance / warning cards)
 *                 .card--interactive (clickable row — focus ring, hover)
 *
 * The base .card retains its current visual (background, border, radius,
 * shadow) so existing static markup in index.html (~55 callsites with
 * inline `padding:18px / 20px / etc.`) is unaffected.
 *
 * The padded modifiers replace the inline `style="padding:14px"` /
 * `style="padding:18px"` / `style="padding:20px"` patterns that recur
 * in JS-rendered cards (foodcost-daily, foodcost-by-supplier, alerts).
 *
 * a11y:
 *   - .card--interactive sets role="button" + tabindex="0" on the host
 *     element (added by JS), and provides a :focus-visible ring matching
 *     other atoms via --btn-focus-ring.
 *   - .card--alert is presentational; the JS layer is responsible for
 *     setting role="status" / role="alert" when the card communicates
 *     real-time variance / threshold breach state.
 * ======================================================================== */

/* ── Base shell (unchanged visual; tokens-only refactor) ── */
.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

/* Padding modifiers — canonical replacement for inline padding overrides */
.card--padded-sm { padding: var(--card-padding-sm); }
.card--padded-md { padding: var(--card-padding-md); }
.card--padded-lg { padding: var(--card-padding-lg); }

/* Variants ──────────────────────────────────────────────── */
.card--ghost {
  background: var(--card-bg-ghost);
  border-style: dashed;
  box-shadow: none;
}
.card--alert {
  border-color: rgba(199,106,63,0.35);    /* terra @ 35% */
  background: rgba(199,106,63,0.06);
}
.card--alert-info {
  border-color: rgba(232,183,66,0.35);    /* gold @ 35% */
  background: rgba(232,183,66,0.06);
}
.card--alert-success {
  border-color: rgba(111,161,163,0.35);   /* teal @ 35% */
  background: rgba(111,161,163,0.06);
}
.card--interactive {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.card--interactive:hover { border-color: var(--card-border-strong); }
.card--interactive:focus { outline: none; }
.card--interactive:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}

/* BEM parts ─────────────────────────────────────────────── */
.card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--card-header-mb);
}
.card__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--card-subtitle-color);
  margin: 0;
}
.card__title--lg {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--card-title-color);
  font-family: var(--font-display);
}
.card__subtitle {
  font-size: 12px;
  color: var(--card-subtitle-color);
  margin-top: 2px;
}
.card__body { /* layout slot */ }
.card__footer {
  margin-top: var(--card-footer-mt);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.card__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 26px;
}

/* ── KPI grid layout ────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

/* ── Alert strip + pills ────────────────────────────────── */
.alert-strip { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.alert-pill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  flex: 1;
  min-width: 240px;
  cursor: pointer;
  transition: all 0.12s;
}
.alert-pill:hover { filter: brightness(1.1); }
.alert-critical {
  background: rgba(255,69,58,0.08);
  border: 1px solid rgba(255,69,58,0.18);
  border-left: 3px solid #FF453A;
}
.alert-warning {
  background: rgba(255,159,10,0.08);
  border: 1px solid rgba(255,159,10,0.18);
  border-left: 3px solid #FF9F0A;
}
.alert-info {
  background: rgba(232,183,66,0.08);
  border: 1px solid rgba(232,183,66,0.18);
  border-left: 3px solid #0A84FF;
}
.alert-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.alert-desc  { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.alert-critical .alert-title { color: #FF6B61; }
.alert-warning  .alert-title { color: #FFB340; }
.alert-info     .alert-title { color: var(--gold); }

/* ── Savings banner ─────────────────────────────────────── */
.savings-banner {
  background: #131D35;
  border: 1px solid rgba(232,183,66,0.18);
  border-radius: 16px;
  padding: 22px 26px;
  color: white;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.value-number {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #FF9F0A;
  font-family: var(--font-display);
}

/* ========================================================================
 * Modal molecule (canonical) — Phase 1.2
 *
 * BEM: .modal (host) > .modal__overlay (scrim) > .modal__box (content)
 *      .modal__header / .modal__title / .modal__body / .modal__footer
 *      .modal__close (icon-style close button — alias of .modal-close-btn)
 *
 * Behavior contract (provided by js/modal.js):
 *   - ESC key closes (configurable)
 *   - Click on .modal__overlay (not .modal__box) closes (configurable)
 *   - Focus trap: Tab cycles between first/last focusable element in box
 *   - Scroll-lock on <body> while open via body.modal-open
 *   - ARIA: role="dialog", aria-modal="true", aria-labelledby on box
 *
 * Legacy classes .modal-overlay / .modal-box / .modal-header / .modal-body
 * remain as aliases below — the 6 existing index.html callsites need no
 * markup change.
 * ======================================================================== */

/* ── Overlay (scrim) — shared rules for new + legacy ────── */
.modal__overlay,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay-bg);
  z-index: var(--modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── Box (content container) — shared rules for new + legacy */
.modal__box,
.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--modal-shadow);
}

/* ── Header (title row + close button) ──────────────────── */
.modal__header,
.modal-header {
  padding: 20px 26px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  border-radius: 18px 18px 0 0;
  z-index: 1;
}

/* ── Title (heading text within header) ─────────────────── */
.modal__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  margin: 0;
}

/* ── Body (scrollable content region) ───────────────────── */
.modal__body,
.modal-body { padding: 24px 26px; }

/* ── Footer (action row, justify-end) ───────────────────── */
.modal__footer {
  padding: 16px 26px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Close button (icon-style ×) — alias of .modal-close-btn ─ */
.modal__close {
  background: var(--btn-ghost-bg);
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.modal__close:hover { background: rgba(255,255,255,0.12); }
.modal__close:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}

/* ── Open-state body lock — set by js/modal.js openModal() ── */
body.modal-open { overflow: hidden; }

/* ── Filter row layout ──────────────────────────────────── */
.filter-row { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }

/* ── Quadrant boxes (menu engineering) ──────────────────── */
.quad-box { border-radius: 12px; padding: 18px; }
.quad-star-bg      { background: rgba(111,161,163,0.06); border: 1px solid rgba(111,161,163,0.15); }
.quad-puzzle-bg    { background: rgba(232,183,66,0.06);  border: 1px solid rgba(232,183,66,0.15); }
.quad-plowhorse-bg { background: rgba(255,159,10,0.06);  border: 1px solid rgba(255,159,10,0.15); }
.quad-dog-bg       { background: rgba(255,69,58,0.06);   border: 1px solid rgba(255,69,58,0.15); }
.quad-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.quad-item:last-child { border-bottom: none; }

/* ── Prep card ──────────────────────────────────────────── */
.prep-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--border);
}

/* ── Inventory rows ─────────────────────────────────────── */
.inv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.1s;
}
.inv-row:hover { background: rgba(255,255,255,0.03); }
.inv-trow { border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.1s; }
.inv-trow:last-child { border-bottom: none; }
.inv-trow:hover { background: rgba(255,255,255,0.03); }

/* ── Setting row ────────────────────────────────────────── */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.setting-row:last-child { border-bottom: none; }

/* ── Insight card ───────────────────────────────────────── */
.insight-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 22px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: all 0.15s;
}
.insight-card:hover { border-color: rgba(232,183,66,0.3); }
.insight-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.insight-content { flex: 1; }
.insight-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.insight-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 12px;
}
.insight-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.insight-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 110px;
}

/* ── Draft / event cards (social) ───────────────────────── */
.draft-card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.15s;
}
.draft-card:hover { border-color: rgba(232,183,66,0.3); }
.event-card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.15s;
}
.event-card:hover { border-color: rgba(232,183,66,0.25); }

/* ── Guideline banner ───────────────────────────────────── */
.guideline-banner {
  background: rgba(232,183,66,0.06);
  border: 1px solid rgba(232,183,66,0.15);
  border-radius: 10px;
  padding: 11px 16px;
  margin-bottom: 18px;
  cursor: pointer;
  transition: background 0.15s;
}
.guideline-banner:hover { background: rgba(232,183,66,0.09); }
.guideline-banner summary {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.guideline-banner ul {
  margin: 10px 0 2px 18px;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
}

/* ── Recipe costing ─────────────────────────────────────── */
.recipe-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.recipe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.recipe-card:hover { border-color: rgba(232,183,66,0.4); transform: translateY(-1px); }
.recipe-card.on-target  { border-left: 3px solid var(--teal); }
.recipe-card.over-target { border-left: 3px solid var(--terra); }

.ing-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ing-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.ing-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ── CSV/Recipe import zone ─────────────────────────────── */
.import-zone {
  border: 2px dashed rgba(232,183,66,0.35);
  border-radius: 14px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(232,183,66,0.03);
}
.import-zone:hover,
.import-zone.drag-over {
  border-color: var(--gold);
  background: rgba(232,183,66,0.08);
}

.pre-eng-output {
  background: rgba(111,161,163,0.07);
  border: 1px solid rgba(111,161,163,0.2);
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 16px;
}

/* ── Recipe builder rows ────────────────────────────────── */
.builder-row {
  display: grid;
  grid-template-columns: 1fr 80px 70px 70px 28px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.builder-summary {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  gap: 24px;
  align-items: center;
}

/* ── Chart / bottom grids ───────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: 14px;
  margin-bottom: 20px;
}
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Restaurant select cards (pre-app) ──────────────────── */
.rest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.rest-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.rest-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.13);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.rest-live-card { border-color: rgba(232,183,66,0.22); }
.rest-live-card:hover { border-color: rgba(232,183,66,0.45); }
.rest-proforma-card { border-color: rgba(184,155,122,0.22); }
.rest-proforma-card:hover { border-color: rgba(184,155,122,0.5); box-shadow: 0 8px 30px rgba(184,155,122,0.1); }
.rest-name {
  color: white;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
  font-family: var(--font-display);
}
.rest-loc { color: #48484A; font-size: 12px; margin-bottom: 16px; }
.rest-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.rest-stat-label { color: #6C6C70; font-size: 12px; }
.rest-stat-val { color: #6C6C70; font-size: 12px; font-weight: 600; }
.rest-stat-val.bad { color: #FF6B61; }
.rest-stat-val.ok  { color: var(--teal); }
.rest-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.rest-sync { color: #48484A; font-size: 11px; }
.rest-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  margin-top: 14px;
  overflow: hidden;
}
.rest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF9F0A, #FFB340);
  border-radius: 99px;
}
.rest-add {
  border: 1.5px dashed rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.rest-add:hover { border-color: rgba(255,255,255,0.2); }

/* ── Login card ─────────────────────────────────────────── */
.login-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  padding: 38px;
  backdrop-filter: blur(24px);
}
.login-card h2 {
  color: white;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 7px;
  font-family: var(--font-display);
}
.login-card p {
  color: #505058;
  font-size: 13.5px;
  margin-bottom: 28px;
  line-height: 1.5;
}
.login-footer { text-align: center; margin-top: 32px; color: #3A3A3C; font-size: 12px; }

/* ========================================================================
 * Loading molecule (spinner + label) — Phase 1.3
 *
 * BEM: .loading (host) > .loading__spinner + .loading__label
 *      Modifier: .loading--center (full-width centered block, e.g. tab panels)
 *
 * Composes the .spinner atom from atoms.css with a muted label. Use on
 * any async-fetch initial state or in-flight indicator.
 *
 * A11y contract:
 *   - Add aria-live="polite" and aria-busy="true" to the parent that
 *     swaps in the loading element so screen readers announce state.
 *   - When the fetch completes, replace the .loading node with the
 *     real content and (if you set them) drop those ARIA attrs.
 *
 * Example:
 *   <div aria-live="polite" aria-busy="true">
 *     <div class="loading loading--center">
 *       <span class="spinner spinner--sm loading__spinner"></span>
 *       <span class="loading__label">Loading…</span>
 *     </div>
 *   </div>
 * ======================================================================== */

.loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.loading__spinner { /* explicit hook for layout overrides; visual styling lives on .spinner */ }
.loading__label   { font-size: 12px; color: var(--muted); line-height: 1.2; }

/* Centered block — swaps inline-flex for full-width centered flex with padding */
.loading--center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  width: 100%;
}

/* ========================================================================
 * FormField molecule (canonical) — Phase 1.4
 *
 * BEM: .form-field (host) > .form-field__label / .form-field__control /
 *      .form-field__help / .form-field__error
 *      Modifier: .form-field--invalid (reveals __error, paints input border)
 *
 * Composes the form atoms (.input / .select / .textarea / .checkbox / .toggle)
 * from atoms.css with a stacked-label layout. Apply BOTH .label AND
 * .form-field__label on the <label> element (label gets typography from atom,
 * field-label gets layout-specific tweaks if any).
 *
 * a11y contract:
 *   - <label for> targets the control's id, OR control is wrapped in <label>
 *   - Required: control gets aria-required="true"; label gets .label--required
 *   - Helper text: control's aria-describedby points at .form-field__help id
 *   - Error: container gains .form-field--invalid; control gets
 *     aria-invalid="true" + aria-describedby pointing at .form-field__error id
 *   - .form-field__error is hidden by default; .form-field--invalid reveals it
 *
 * Example:
 *   <div class="form-field">
 *     <label class="label label--required" for="ex-rev">Revenue</label>
 *     <input id="ex-rev" class="input" type="number" aria-required="true"
 *            aria-describedby="ex-rev-help">
 *     <span id="ex-rev-help" class="help form-field__help">Daily gross sales.</span>
 *   </div>
 * ======================================================================== */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--form-field-gap);
}
.form-field__label {
  /* Applied alongside .label — kept as a stable hook for future overrides */
  margin: 0;
}
.form-field__control {
  /* Slot for the input/select/textarea — the atom carries the visual */
  display: block;
  width: 100%;
}
.form-field__help {
  font-size: 11.5px;
  color: var(--help-color);
  line-height: 1.4;
  margin-top: 2px;
}
.form-field__error {
  display: none;
  font-size: 11.5px;
  color: var(--terra);
  line-height: 1.4;
  font-weight: 500;
  margin-top: 2px;
}
.form-field--invalid .form-field__error { display: block; }
.form-field--invalid .input,
.form-field--invalid .select,
.form-field--invalid .textarea { border-color: var(--terra); }

/* Inline horizontal variant — label sits left of control on the same row.
   Used in dense rows like sales-upload's date+revenue+covers row. */
.form-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.form-field--inline .form-field__label { white-space: nowrap; }

/* ========================================================================
 * Empty State molecule (canonical) — Phase 1.7
 *
 * BEM: .empty-state (host) > .empty-state__icon / .empty-state__title /
 *      .empty-state__body / .empty-state__actions
 *      Modifier: .empty-state--compact (denser padding for inline panels)
 *
 * Replaces the recurring "padding:30px;color:var(--muted);text-align:center"
 * inline blocks in foodcost-daily, foodcost-by-supplier, and alerts when
 * no data is present. Use a ghost-card or panel as the host wrapper if
 * you need a bordered surface; the molecule itself is layout-only.
 *
 * a11y:
 *   - When the empty state is async-revealed (e.g. after a fetch returns
 *     no rows), the parent should set aria-live="polite" so screen readers
 *     announce the message. The molecule itself is purely visual.
 *   - Provide an action button (.empty-state__actions > .btn ...) when
 *     the empty state is recoverable (e.g. "Add your first supplier").
 * ======================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--empty-state-gap);
  padding: var(--empty-state-padding-y) var(--empty-state-padding-x);
  text-align: center;
  color: var(--empty-state-color);
}
.empty-state__icon {
  font-size: 32px;
  opacity: 0.6;
  line-height: 1;
}
.empty-state__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--empty-state-title);
  margin: 0;
}
.empty-state__body {
  font-size: 13px;
  color: var(--empty-state-color);
  max-width: 320px;
  line-height: 1.5;
  margin: 0;
}
.empty-state__actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.empty-state--compact { padding: 24px 16px; }