/* =========================================================================
   LoopMenu — Owner Dashboard Theme (M241)
   Owner request (Aug 6 2026): "report tab where all my reports are" (done in
   nav), plus a lighter feel — "the font is a bit heavy can we use a more
   italic font" and "the colors are kittling my eye, black yellow white only,
   every other color needs to go."

   WHAT THIS DOES (all scoped under .owner-shell — the owner back-office shell
   ONLY. The customer/guest app (app.html) and the public landing (index.html)
   do NOT load this sheet, so their visuals are untouched per the standing
   "leave the landing/customer visuals alone" guardrail):
     1. Headings -> elegant ITALIC serif (Fraunces italic).
     2. Body -> LIGHTER weight (Inter 300/400 instead of 600/700 bold).
     3. Palette -> BLACK / YELLOW / WHITE (+ warm grays for structure) only.
        Every stray red / green / orange / blue used for deltas, badges,
        status pills and chart series is neutralized to ink, yellow or gray.
        Meaning is preserved by the existing TEXT labels + up/down arrows, not
        by hue (honest-data rule: we never hide or fake a value, we only
        recolor it).

   SAFETY: additive, class/scope-guarded. No JS, no markup, no schema change.
   Loaded AFTER brand.css + v5.css so these owner-only rules win by cascade.
   ========================================================================= */

/* Italic serif for headings. Fraunces has a true italic + optical sizing, so
   it reads elegant rather than heavy. Inter is already loaded by brand.css. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500;1,9..144,600&display=swap");

/* -------------------------------------------------------------------------
   Owner-only palette tokens. Redefining the shell/brand/v5 variables INSIDE
   the .owner-shell scope re-tints every component that reads them, without
   touching the customer app (which never gets .owner-shell).
   ------------------------------------------------------------------------- */
.owner-shell {
  /* black / yellow / white + warm neutrals only */
  --lm-ink:        #171512;   /* near-black text + structure */
  --lm-ink-soft:   #3A362D;   /* softer ink for secondary headings */
  --lm-muted:      #6E6A5E;   /* gray secondary text */
  --lm-faint:      #9A9587;   /* gray tertiary / placeholder */
  --lm-line:       #E7E3D8;   /* hairline borders */
  --lm-surface:    #FFFFFF;   /* white card */
  --lm-bg:         #FCFBF7;   /* soft warm white page */
  --lm-accent:     #FFDA4B;   /* THE yellow */
  --lm-accent-2:   #FFE85C;   /* lighter yellow (badges/hover) */
  --lm-accent-ink: #171512;   /* always black text on yellow */

  /* Re-point the brand + v5 design tokens to the mono palette so existing
     .lm-* / .v5-* components inherit it automatically. */
  --font-body:    "Inter", system-ui, sans-serif;
  --font-sans:    "Inter", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --v5-ink:       var(--lm-ink);
  --v5-muted:     var(--lm-muted);
  --v5-sub:       var(--lm-ink-soft);
  --v5-accent:    var(--lm-accent);
  --v5-accent-ink:var(--lm-accent-ink);
  --v5-line:      var(--lm-line);
  --v5-card:      var(--lm-surface);
  --v5-bg:        var(--lm-bg);
  --v5-font-display:"Fraunces", Georgia, serif;
  --v5-font-body: "Inter", system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   1) TYPOGRAPHY — italic serif headings, lighter body.
   ------------------------------------------------------------------------- */
.owner-shell {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;                 /* lighter default body */
  color: var(--lm-ink);
  letter-spacing: 0.005em;
}
.owner-shell p,
.owner-shell li,
.owner-shell td,
.owner-shell span,
.owner-shell label,
.owner-shell input,
.owner-shell select,
.owner-shell textarea,
.owner-shell .muted,
.owner-shell .lm-muted { font-weight: 400; }

/* Headings + anything that used the display font -> italic Fraunces serif. */
.owner-shell h1,
.owner-shell h2,
.owner-shell h3,
.owner-shell h4,
.owner-shell .font-black,
.owner-shell [class*="-title"],
.owner-shell [class*="-heading"] {
  font-family: "Fraunces", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;      /* elegant, not heavy */
  letter-spacing: -0.01em;
  color: var(--lm-ink);
}
.owner-shell h1 { font-weight: 600 !important; }

/* Trim the heaviest weights everywhere else down to a refined medium so the
   whole back office feels lighter (the owner said the font felt "heavy"). */
.owner-shell [style*="font-weight:800"],
.owner-shell [style*="font-weight: 800"],
.owner-shell [style*="font-weight:700"],
.owner-shell [style*="font-weight: 700"],
.owner-shell .fw-800,
.owner-shell .fw-700 { font-weight: 600 !important; }

/* KPI / big numeric values stay upright (not italic) + tabular so figures line
   up — italic numerals are hard to scan in a money table. */
.owner-shell .lm-kpi-value,
.owner-shell .lm-analytics-kpi-value,
.owner-shell [class*="kpi-value"],
.owner-shell [class*="stat-value"],
.owner-shell .lm-money-hero-amount,
.owner-shell td[class*="num"],
.owner-shell .tabular {
  font-family: "Inter", system-ui, sans-serif !important;
  font-style: normal !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600 !important;
}

/* -------------------------------------------------------------------------
   2) COLOR — kill every non mono/yellow hue.
   These target the specific stray families found across the owner views
   (reds, greens, oranges, blues used for deltas / badges / status pills /
   chart series). We remap them to ink, yellow, or gray. Meaning is carried by
   the existing text + arrows, never by hue.
   ------------------------------------------------------------------------- */

/* --- positive / success (was green): show as INK on a soft yellow chip --- */
.owner-shell [class*="pos"][class*="delta"],
.owner-shell .lm-delta-up,
.owner-shell .delta-up,
.owner-shell .is-up,
.owner-shell .badge-success,
.owner-shell .status-paid,
.owner-shell .status-active,
.owner-shell .status-open { color: var(--lm-ink) !important; }

/* --- negative / error / refund (was red): show as INK, underlined arrow --- */
.owner-shell [class*="neg"][class*="delta"],
.owner-shell .lm-delta-down,
.owner-shell .delta-down,
.owner-shell .is-down,
.owner-shell .badge-error,
.owner-shell .badge-danger,
.owner-shell .status-refunded,
.owner-shell .status-canceled,
.owner-shell .status-void { color: var(--lm-ink) !important; }

/* Generic chip/badge/pill base -> yellow surface, black text, black outline.
   (Reuses the shape already in the markup; only the colors change.) */
.owner-shell .badge,
.owner-shell .pill,
.owner-shell .tag,
.owner-shell .chip,
.owner-shell [class*="-badge"],
.owner-shell [class*="-pill"],
.owner-shell [class*="-chip"],
.owner-shell [class*="-tag"] {
  background: var(--lm-accent-2) !important;
  color: var(--lm-accent-ink) !important;
  border-color: var(--lm-ink) !important;
}

/* Nuke inline colored text/background/border on stray hues.
   Attribute-substring selectors catch the exact offending hex values seen in
   the owner views so we recolor them without editing 36 files. */
.owner-shell [style*="#FF4B2B"], .owner-shell [style*="#ff4b2b"],
.owner-shell [style*="#B3311C"], .owner-shell [style*="#b3311c"],
.owner-shell [style*="#EF4444"], .owner-shell [style*="#ef4444"],
.owner-shell [style*="#9B2C2C"], .owner-shell [style*="#9b2c2c"],
.owner-shell [style*="#1F5E37"], .owner-shell [style*="#1f5e37"],
.owner-shell [style*="#437A22"], .owner-shell [style*="#437a22"],
.owner-shell [style*="#0F3A20"], .owner-shell [style*="#0f3a20"],
.owner-shell [style*="#5A3A1E"], .owner-shell [style*="#5a3a1e"],
.owner-shell [style*="#8A5A11"], .owner-shell [style*="#8a5a11"],
.owner-shell [style*="#92700A"], .owner-shell [style*="#92700a"] {
  color: var(--lm-ink) !important;
}
/* Soft colored FILL backgrounds (success/danger/info tints) -> warm neutral. */
.owner-shell [style*="#DFF0E4"], .owner-shell [style*="#dff0e4"],
.owner-shell [style*="#FFE3DB"], .owner-shell [style*="#ffe3db"],
.owner-shell [style*="#FFD7CB"], .owner-shell [style*="#ffd7cb"],
.owner-shell [style*="background:#FDF0C8"],
.owner-shell [style*="background:#FFF4A8"] {
  background: var(--lm-bg) !important;
  border-color: var(--lm-line) !important;
}

/* SVG chart series (bars, lines, dots) -> ink + yellow only. Highlighted /
   current series stays yellow; everything else is ink or gray so the chart is
   still readable in one accent. */
.owner-shell svg [fill="#FF4B2B"], .owner-shell svg [fill="#B3311C"],
.owner-shell svg [fill="#EF4444"], .owner-shell svg [fill="#1F5E37"],
.owner-shell svg [fill="#437A22"], .owner-shell svg [fill="#0F3A20"],
.owner-shell svg [fill="#20808D"], .owner-shell svg [fill="#A84B2F"],
.owner-shell svg [fill="#006494"], .owner-shell svg [fill="#7A39BB"] {
  fill: var(--lm-ink) !important;
}
.owner-shell svg [stroke="#FF4B2B"], .owner-shell svg [stroke="#B3311C"],
.owner-shell svg [stroke="#EF4444"], .owner-shell svg [stroke="#1F5E37"],
.owner-shell svg [stroke="#437A22"], .owner-shell svg [stroke="#0F3A20"],
.owner-shell svg [stroke="#20808D"], .owner-shell svg [stroke="#006494"] {
  stroke: var(--lm-ink) !important;
}
/* The "current / highlighted" chart element keeps the yellow accent. */
.owner-shell svg .is-current,
.owner-shell svg [class*="current"],
.owner-shell svg [class*="highlight"] { fill: var(--lm-accent) !important; }

/* Primary buttons: black text on yellow, black outline (brand button). */
.owner-shell .btn-primary,
.owner-shell .v5-btn-primary {
  background: var(--lm-accent) !important;
  color: var(--lm-accent-ink) !important;
  border: 1.5px solid var(--lm-ink) !important;
}
.owner-shell .btn-primary:hover,
.owner-shell .v5-btn-primary:hover { filter: brightness(0.97); }

/* Ghost / secondary buttons: ink text, hairline border, white surface. */
.owner-shell .btn-ghost,
.owner-shell .btn-secondary {
  color: var(--lm-ink) !important;
  border-color: var(--lm-line) !important;
  background: var(--lm-surface) !important;
}

/* Links inside the dashboard: ink with a yellow underline (no blue). */
.owner-shell a:not(.btn):not(.owner-nav-item):not(.owner-bnav-item):not(.owner-more-tile) {
  color: var(--lm-ink);
  text-decoration-color: var(--lm-accent);
}

/* Focus ring -> ink (was often a blue browser default). */
.owner-shell :focus-visible {
  outline: 2px solid var(--lm-ink) !important;
  outline-offset: 2px;
}

/* =========================================================================
   M242 — Interactive analytics visuals (owner dashboard only)
   Owner request (Aug 6 2026): make the dashboard interactive; Sales/Marketing/
   Guests should each be HIGHLIGHTABLE in their OWN color (not one flat yellow
   bar behind all three); replace the plain bars with sleeker charts + gauges
   like the reference mockups; do this "throughout all analytics and reports".

   All rules are scoped under .owner-shell so the customer app + landing are
   untouched. Colors stay in the black / yellow / white brand family, but each
   topic gets a DISTINCT shade so the active pill + its gauges read differently:
       Sales     -> brand yellow  (#FFDA4B on ink)
       Marketing -> ink / black   (#18170F on white, yellow accent ring)
       Guests    -> warm gold      (#E8A317 -> deep #8A5A11 ink)
   ========================================================================= */
.owner-shell {
  --an-sales:      #FFDA4B;  --an-sales-ink:   #18170F;
  --an-marketing:  #18170F;  --an-marketing-ink:#FFFFFF;
  --an-guests:     #FFDA4B;  --an-guests-ink:  #18170F;
  --an-track:      #EFEAD9;  /* soft neutral gauge/track color */
}

/* ---- 1) TOPIC PILLS: distinct color each, filled when active ------------ */
/* Kill the M241 generic-chip yellow fill that also matched ".lm-an-chips"
   (the pill *container*) and ".lm-an-chip" — that stray fill was the exact
   "yellow bar behind them" the owner flagged. Reset the container to no fill. */
.owner-shell .lm-an-chips {
  gap: 10px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.owner-shell .lm-an-chip {
  border: 1.5px solid var(--lm-ink) !important;
  background: #FFFFFF !important;
  color: var(--lm-ink) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.owner-shell .lm-an-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--lm-ink); }
/* Active = filled with the topic's OWN color. nth-child maps the three chips
   (Sales / Marketing / Guests) to their colors; only the ON chip fills. */
.owner-shell .lm-an-chip.is-on:nth-child(1) { background: var(--an-sales) !important;     color: var(--an-sales-ink) !important;     border-color: var(--lm-ink) !important; }
.owner-shell .lm-an-chip.is-on:nth-child(2) { background: var(--an-marketing) !important; color: var(--an-marketing-ink) !important; border-color: var(--lm-ink) !important; }
.owner-shell .lm-an-chip.is-on:nth-child(3) { background: var(--an-guests) !important;    color: var(--an-guests-ink) !important;    border-color: var(--an-guests) !important; }
.owner-shell .lm-an-chip.is-on { box-shadow: 0 3px 0 var(--lm-ink); }

/* ---- 2) SEMI-CIRCLE GAUGES --------------------------------------------- */
.owner-shell .lm-an-gauges {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px;
}
/* On the analytics detail page the gauge row follows the KPI cards — give it a
   little breathing room above so the two rows read as distinct. */
.owner-shell .lm-analytics-gauges { margin-top: 14px; }
.owner-shell .lm-an-gauge {
  background: #FFFFFF; border: 1px solid var(--lm-line, #E7E3D8); border-radius: 18px;
  padding: 16px 14px 14px; display: flex; flex-direction: column; align-items: center;
  text-align: center; transition: transform .14s ease, box-shadow .14s ease;
}
.owner-shell .lm-an-gauge:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(24,23,15,.08); }
.owner-shell .lm-an-gauge-label {
  font-family: "Inter", system-ui, sans-serif; font-style: normal;
  font-size: 13px; font-weight: 600; color: var(--lm-muted, #6E6A5E); margin-bottom: 4px;
}
.owner-shell .lm-an-gauge-arc { position: relative; width: 100%; max-width: 168px; aspect-ratio: 120 / 66; }
.owner-shell .lm-an-gauge-track { stroke: var(--an-track); }
.owner-shell .lm-an-gauge-fill  { stroke: var(--an-sales); transition: stroke-dasharray .2s ease; }
/* animate the arc drawing in */
.owner-shell .lm-an-gauge-fill { animation: an-gauge-draw .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes an-gauge-draw { from { stroke-dasharray: 0 999; } }
/* per-topic arc color */
.owner-shell [data-topic-gauge="sales"]     .lm-an-gauge-fill { stroke: var(--an-sales); }
.owner-shell [data-topic-gauge="marketing"] .lm-an-gauge-fill { stroke: var(--an-marketing); }
.owner-shell [data-topic-gauge="guests"]    .lm-an-gauge-fill { stroke: var(--an-guests); }
.owner-shell .lm-an-gauge-center {
  position: absolute; left: 0; right: 0; bottom: 2px; display: flex; flex-direction: column; align-items: center;
}
.owner-shell .lm-an-gauge-value {
  font-family: "Inter", system-ui, sans-serif !important; font-style: normal !important;
  font-size: 22px; font-weight: 700; color: var(--lm-ink);
  font-variant-numeric: tabular-nums lining-nums; line-height: 1;
}
.owner-shell .lm-an-gauge-pct { font-size: 10.5px; color: var(--lm-muted, #6E6A5E); margin-top: 3px; }
.owner-shell .lm-an-gauge-goal {
  font-size: 11.5px; color: var(--lm-muted, #6E6A5E); margin-top: 10px; line-height: 1.35; max-width: 200px;
}

/* ---- 3) SLEEK BAR CHART ------------------------------------------------ */
.owner-shell .lm-an-chart--sleek .lm-an-bars {
  height: 150px; gap: 18px; align-items: flex-end;
  border-bottom: 1px solid var(--lm-line, #E7E3D8); padding-bottom: 0;
}
.owner-shell .lm-an-chart--sleek .lm-an-bar-col { justify-content: flex-end; }
.owner-shell .lm-an-chart--sleek .lm-an-bar-val {
  font-size: 11px; font-weight: 600; color: var(--lm-muted, #6E6A5E);
  font-variant-numeric: tabular-nums; margin-bottom: 6px; min-height: 14px;
}
.owner-shell .lm-an-chart--sleek .lm-an-bar {
  width: 100%; max-width: 70px; margin: 0 auto;
  border-radius: 12px 12px 6px 6px !important;
  background: var(--an-track) !important;
  height: var(--bar-h, 6%);
  animation: an-bar-grow .7s cubic-bezier(.22,1,.36,1) both;
  transition: filter .12s ease, transform .12s ease;
}
.owner-shell .lm-an-chart--sleek .lm-an-bar:hover { filter: brightness(.96); transform: scaleY(1.02); transform-origin: bottom; }
@keyframes an-bar-grow { from { height: 0; } }
/* current/highlighted bar takes the topic color */
.owner-shell .lm-an-chart--sleek .lm-an-bar.is-current[data-topic-fill="sales"]     { background: var(--an-sales) !important; }
.owner-shell .lm-an-chart--sleek .lm-an-bar.is-current[data-topic-fill="marketing"] { background: var(--an-marketing) !important; }
.owner-shell .lm-an-chart--sleek .lm-an-bar.is-current[data-topic-fill="guests"]    { background: var(--an-guests) !important; }

/* ---- 4) Reports screen: sleeker horizontal best-seller bars ------------ */
.owner-shell .lm-reports-item-bar {
  border-radius: 999px !important;
  background: var(--an-track) !important;
  overflow: hidden;
}
.owner-shell .lm-reports-item-bar-fill {
  border-radius: 999px !important;
  background: var(--an-sales) !important;
  animation: an-bar-slide .7s cubic-bezier(.22,1,.36,1) both;
  transition: filter .12s ease;
}
.owner-shell .lm-reports-item-bar:hover .lm-reports-item-bar-fill { filter: brightness(.96); }
@keyframes an-bar-slide { from { width: 0 !important; } }

/* ---- 5) M244 reports: bookkeeper reconciliation context ---------------- */
.owner-shell .lm-reports-as-of {
  margin: 6px 0 0;
  color: var(--lm-muted, #6E6A5E);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.owner-shell .lm-reports .lm-kpi-delta-row {
  min-height: 18px;
  margin-top: 2px;
}
.owner-shell .lm-reports .lm-kpi-delta {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}
.owner-shell .lm-reports .lm-kpi-delta--up { color: #7A8B2E; }
.owner-shell .lm-reports .lm-kpi-delta--down { color: var(--lm-ink, #18170F); }
.owner-shell .lm-reports .lm-kpi-delta--flat,
.owner-shell .lm-reports .lm-kpi-delta--empty { color: var(--lm-muted, #6E6A5E); }
.owner-shell .lm-reports-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.owner-shell .lm-reports-context-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--lm-line, #E7E3D8);
  border-radius: 14px;
  background: var(--lm-surface, #fff);
}
.owner-shell .lm-reports-context-lbl {
  color: var(--lm-muted, #6E6A5E);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.owner-shell .lm-reports-context-card strong {
  color: var(--lm-ink, #18170F);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.owner-shell .lm-reports-context-card > span:last-child {
  color: var(--lm-muted, #6E6A5E);
  font-size: 12px;
  line-height: 1.4;
}
.owner-shell .lm-reports-context-card--payments {
  border-color: #FFDA4B;
  background: color-mix(in srgb, #FFDA4B 16%, var(--lm-surface, #fff));
}
.owner-shell .lm-reports-num--memo {
  color: var(--lm-muted, #6E6A5E);
  font-style: italic;
}
.owner-shell .lm-reports-reconciliations {
  display: grid;
  gap: 8px;
  margin: 12px 8px 2px;
}
.owner-shell .lm-reports-reconciliations .lm-reports-foot-note {
  margin: 0;
}
.owner-shell .lm-reports-recon-line {
  margin: 0;
  color: var(--lm-text-2, #5B5647);
  font-size: 12px;
  line-height: 1.5;
}
.owner-shell .lm-reports-refund-formula {
  margin: 2px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #FFDA4B;
  background: color-mix(in srgb, #FFDA4B 13%, var(--lm-surface, #fff));
  color: var(--lm-text-2, #5B5647);
  font-size: 12px;
  font-style: italic;
  line-height: 1.55;
}
.owner-shell .lm-reports-deposits {
  padding-top: 14px;
}
.owner-shell .lm-reports-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 10px;
}
.owner-shell .lm-reports-section-title {
  margin: 0;
  color: var(--lm-ink, #18170F);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}
.owner-shell .lm-reports-section-sub {
  margin: 4px 0 0;
  color: var(--lm-muted, #6E6A5E);
  font-size: 12px;
}
.owner-shell .lm-reports-table--deposits { min-width: 620px; }
.owner-shell .lm-reports-deposits-empty {
  padding: 18px 12px;
  color: var(--lm-muted, #6E6A5E);
  font-size: 13px;
  text-align: center;
}

/* ---- responsive: stack gauges on phones -------------------------------- */
@media (max-width: 720px) {
  .owner-shell .lm-an-gauges { grid-template-columns: 1fr; gap: 10px; }
  .owner-shell .lm-an-gauge-arc { max-width: 200px; }
  .owner-shell .lm-reports-context { grid-template-columns: 1fr; }
}

/* =========================================================================
   Light / dark switch in the dashboard top bar (Aug 20 2026 owner request).
   Lives in the top bar, which is OUTSIDE .owner-shell, so these rules are not
   shell-scoped. Only dashboard.html loads this sheet, so the customer app and
   the public site never see them.
   ========================================================================= */
.lm-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1.5px solid var(--lm-ink, #171512);
  border-radius: 999px;
  background: transparent;
  color: var(--lm-ink, #171512);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.lm-theme-toggle svg { flex: 0 0 auto; }
.lm-theme-toggle:hover { background: var(--lm-accent-2, #FFE85C); transform: translateY(-1px); }
.lm-theme-toggle:active { transform: translateY(0); }
@media (max-width: 560px) {
  /* On a phone the word would crowd the Add-app chip — the icon carries it. */
  .lm-theme-toggle span { display: none; }
  .lm-theme-toggle { padding: 7px 9px; }
}

/* Team screen member cards. Replaced the wide data table, which on a phone
   forced sideways scrolling to reach the role and clock-in-code columns. Each
   person is now one card: initials, name, contact, status chips, then the
   actions. Owner-scoped, so nothing on the customer side is touched. */
.owner-shell .team-avatar {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--lm-ink, #171512);
  background: #FAEEDA; color: #633806;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em;
}
.owner-shell .team-role-select {
  flex: 1; min-width: 120px;
  padding: 7px 10px; font-size: 13px;
  border: 1.5px solid var(--lm-line, #D8D2BC);
  border-radius: 999px;
  background: transparent; color: inherit;
}

/* Settings: a stacked section inside one of the six grouped tabs. Plain div
   label on purpose — .owner-shell headings are forced into display italics. */
.owner-shell .lm-settings-section { margin-bottom: 28px; }
.owner-shell .lm-settings-section:last-child { margin-bottom: 0; }
.owner-shell .lm-settings-section-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.62;
  margin: 0 0 10px;
}

/* Settings tab row — the outlined-pill treatment from the approved mockup:
   a tinted tray holding cream pills with a hard black edge, the active one
   filled solid. Owner shell only; the customer app is untouched. */
.owner-shell .lm-settings-tabs {
  background: var(--lm-cream-2, #EFEADB);
  border: 0;
  padding: 8px;
  gap: 6px;
  border-radius: 14px;
}
.owner-shell .lm-settings-tab {
  background: #FAF6EC;
  border: 1.5px solid var(--lm-ink, #141414);
  color: var(--lm-ink, #141414);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
}
.owner-shell .lm-settings-tab:hover {
  background: var(--lm-butter, #FFE85C);
  color: var(--lm-ink, #141414);
}
.owner-shell .lm-settings-tab--active,
.owner-shell .lm-settings-tab--active:hover {
  background: var(--lm-ink, #141414);
  color: #FAF6EC;
  border-color: var(--lm-ink, #141414);
}
.owner-shell .lm-settings-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 2px;
}

/* Same pill row in dark mode: dark tray, dark pills with a pale edge, and the
   active pill inverted to butter so the selection still reads instantly. */
html[data-lm-theme="dark"] .owner-shell .lm-settings-tabs { background: #201F1D; }
html[data-lm-theme="dark"] .owner-shell .lm-settings-tab {
  background: #171614;
  border-color: #4A4844;
  color: #E6E4E0;
}
html[data-lm-theme="dark"] .owner-shell .lm-settings-tab:hover {
  background: #2A2926;
  color: #FFE85C;
}
html[data-lm-theme="dark"] .owner-shell .lm-settings-tab--active,
html[data-lm-theme="dark"] .owner-shell .lm-settings-tab--active:hover {
  background: #FFE85C;
  border-color: #FFE85C;
  color: #1D1B13;
}

/* Scheduled closures list (Settings ▸ Hours ▸ Close shop). Plain divs, not
   headings, because .owner-shell h1..h4 are forced into Fraunces italic. */
.owner-shell .lm-closures-list { display:flex; flex-direction:column; gap:8px; }
.owner-shell .lm-closure-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1.5px solid #141414; border-radius:10px;
  background:#FFFDF7;
}
.owner-shell .lm-closure-when { font-weight:650; font-size:.95rem; }
.owner-shell .lm-closure-why { font-size:.85rem; margin-top:2px; }
.owner-shell .lm-closure-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.owner-shell .lm-closure-grid .input { width:100%; }
@media (max-width: 520px) {
  .owner-shell .lm-closure-grid { grid-template-columns:1fr; }
  .owner-shell .lm-closure-row { flex-direction:column; align-items:flex-start; }
}
html[data-lm-theme="dark"] .owner-shell .lm-closure-row {
  background:#1C1B19; border-color:#4A4844;
}

/* ===================================================================
   Orders board — styling from the approved mockup, phone and desktop.
   Layout and logic are untouched: the range switcher becomes a segmented
   pill tray and the stage tabs a counter strip with the count above the
   label. Desktop gets the same treatment at a slightly larger scale.
   =================================================================== */
.owner-shell .lm-orders-filter {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: #F4F0E4;
  border-radius: 999px;
  overflow: visible;
}
.owner-shell .lm-orders-filter .lm-orders-chip {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 500;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6E6857;
}
.owner-shell .lm-orders-filter .lm-orders-chip--active {
  background: #F5DD5D;
  color: #3A3410;
}

.owner-shell .lm-orders-stage-tabs {
  display: flex;
  gap: 0;
  margin-top: 12px;
  padding: 0;
  border-top: 0.5px solid #E8E2D4;
  border-bottom: 0.5px solid #E8E2D4;
  background: transparent;
  overflow: visible;
}
.owner-shell .lm-orders-stage-tabs .lm-orders-stage-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;   /* count sits above the label */
  align-items: center;
  gap: 0;
  padding: 10px 0 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
}
.owner-shell .lm-orders-stage-tabs .lm-orders-stage-tab-count {
  font-size: 17px;
  font-weight: 500;
  background: transparent;
  color: #6E6857;
  padding: 0;
  min-width: 0;
  border: 0;
}
.owner-shell .lm-orders-stage-tabs .lm-orders-stage-tab-label {
  font-size: 11.5px;
  color: #8A8474;
}
.owner-shell .lm-orders-stage-tabs .lm-orders-stage-tab--active {
  border-bottom-color: #F5DD5D;
  background: #FBF4D9;
}
.owner-shell .lm-orders-stage-tabs .lm-orders-stage-tab--active .lm-orders-stage-tab-count { color: #201F1B; }
.owner-shell .lm-orders-stage-tabs .lm-orders-stage-tab--active .lm-orders-stage-tab-label {
  color: #3A3410;
  font-weight: 500;
}

html[data-lm-theme="dark"] .owner-shell .lm-orders-filter { background: #201F1D; }
html[data-lm-theme="dark"] .owner-shell .lm-orders-filter .lm-orders-chip { color: #A9A7A2; }
html[data-lm-theme="dark"] .owner-shell .lm-orders-filter .lm-orders-chip--active { background: #FFE85C; color: #1D1B13; }
html[data-lm-theme="dark"] .owner-shell .lm-orders-stage-tabs { border-color: #393836; }
html[data-lm-theme="dark"] .owner-shell .lm-orders-stage-tab--active { background: #1D1B13; }
html[data-lm-theme="dark"] .owner-shell .lm-orders-stage-tab--active .lm-orders-stage-tab-count { color: #FFE85C; }
html[data-lm-theme="dark"] .owner-shell .lm-orders-stage-tab--active .lm-orders-stage-tab-label { color: #E8E2D4; }

/* Desktop: same shapes, roomier. The range tray sizes to its three words
   instead of stretching across the whole board. */
@media (min-width: 641px) {
  .owner-shell .lm-orders-filter {
    display: inline-flex;
    width: auto;
    max-width: 100%;
  }
  .owner-shell .lm-orders-filter .lm-orders-chip {
    flex: 0 0 auto;
    padding: 8px 22px;
    font-size: 13.5px;
  }
  .owner-shell .lm-orders-stage-tabs .lm-orders-stage-tab { padding: 14px 0 12px; }
  .owner-shell .lm-orders-stage-tabs .lm-orders-stage-tab-count { font-size: 22px; }
  .owner-shell .lm-orders-stage-tabs .lm-orders-stage-tab-label { font-size: 12.5px; letter-spacing: .01em; }
}

/* Empty board — soft circle mark, then the message, then one way out. */
.owner-shell .lm-orders-empty {
  border-style: solid;
  border-color: #E8E2D4;
  background: #FDFBF5;
}
.owner-shell .lm-orders-empty-mark {
  width: 48px; height: 48px; border-radius: 50%;
  background: #FBF4D9; color: #B09B2E;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.owner-shell .lm-orders-empty-mark svg { width: 22px; height: 22px; }
.owner-shell .lm-orders-empty-title { color: #201F1B; font-size: 16px; }
html[data-lm-theme="dark"] .owner-shell .lm-orders-empty { background: #1C1B19; border-color: #393836; }
html[data-lm-theme="dark"] .owner-shell .lm-orders-empty-mark { background: #2A2718; color: #E8AF34; }
html[data-lm-theme="dark"] .owner-shell .lm-orders-empty-title { color: #CDCCCA; }