/* =========================================================
   Lab: La Brasa Grill operations dashboard
   Wears the client's brand: warm cream, charcoal and ember.
   ========================================================= */

.lb-app {
  --lb-bg: #f7f2ea;
  --lb-card: #fffdf9;
  --lb-ink: #2a1d17;
  --lb-text: #4a3a31;
  --lb-muted: #8a776b;
  --lb-line: #eadfd1;
  --lb-ember: #e2572b;
  --lb-saffron: #f2a83b;
  --lb-good: #2f8f5b;
  --lb-warn: #c27a12;
  --lb-bad: #c8402e;
  color-scheme: light;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--lb-text);
  background: var(--lb-bg);
  font-variant-numeric: tabular-nums;
}
.lb-app [hidden] { display: none !important; }
.lb-app button, .lb-app select { font-family: inherit; }
.lb-app :focus-visible { outline: 2px solid var(--lb-ember); outline-offset: 2px; }
.lb-app svg { max-width: none; }

/* Top bar */
.lb-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--lb-ink); color: #f7efe4;
}
.lb-brand { display: flex; align-items: center; gap: 10px; }
.lb-brand svg { width: 28px; height: 28px; }
.lb-brand b { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; }
.lb-brand span { opacity: 0.6; font-size: 0.85rem; margin-left: 4px; }
.lb-live { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; opacity: 0.9; }
.lb-live i { width: 8px; height: 8px; border-radius: 50%; background: #5fd28f; box-shadow: 0 0 0 0 rgba(95, 210, 143, 0.6); animation: lb-beat 2s infinite; }
@keyframes lb-beat { 70% { box-shadow: 0 0 0 8px rgba(95, 210, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 210, 143, 0); } }
.lb-user { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.lb-user span.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lb-saffron); color: var(--lb-ink); font-weight: 800; font-size: 0.8rem; }
@media (max-width: 640px) { .lb-user .who { display: none; } }

.lb-main { padding: 16px; display: grid; gap: 14px; }
@media (min-width: 900px) { .lb-main { padding: 20px 22px 24px; } }

/* Controls */
.lb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.lb-controls h2 { margin: 0 auto 0 0; font-size: 1.25rem; font-weight: 800; color: var(--lb-ink); letter-spacing: -0.01em; line-height: 1.2; }
.lb-controls h2 small { display: block; font-size: 0.82rem; font-weight: 500; color: var(--lb-muted); letter-spacing: 0; }
.lb-select { position: relative; }
.lb-select select {
  appearance: none; -webkit-appearance: none;
  padding: 9px 34px 9px 12px; border: 1.5px solid var(--lb-line); border-radius: 10px;
  background: var(--lb-card); color: var(--lb-ink); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.lb-select::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--lb-muted); border-bottom: 2px solid var(--lb-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lb-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #efe5d8; }
.lb-seg button { padding: 7px 12px; border: 0; border-radius: 8px; background: none; color: var(--lb-muted); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.lb-seg button[aria-pressed="true"] { background: var(--lb-card); color: var(--lb-ink); box-shadow: 0 1px 3px rgba(42, 29, 23, 0.15); }
.lb-chans { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-chans button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border: 1.5px solid var(--lb-line); border-radius: 999px;
  background: var(--lb-card); color: var(--lb-text); font-weight: 600; font-size: 0.82rem; cursor: pointer;
}
.lb-chans button i { width: 9px; height: 9px; border-radius: 3px; }
.lb-chans button[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }

/* Cards */
.lb-card { background: var(--lb-card); border: 1px solid var(--lb-line); border-radius: 14px; min-width: 0; }
.lb-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 16px 0; }
.lb-card-head h3 { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--lb-ink); }
.lb-card-head span { color: var(--lb-muted); font-size: 0.8rem; }

/* KPIs */
.lb-kpis { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 1000px) { .lb-kpis { grid-template-columns: repeat(4, 1fr); } }
.lb-kpi { display: grid; gap: 2px; padding: 14px 16px 10px; background: var(--lb-card); border: 1px solid var(--lb-line); border-radius: 14px; min-width: 0; }
.lb-kpi-label { font-size: 0.8rem; font-weight: 700; color: var(--lb-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.lb-kpi-val { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: var(--lb-ink); letter-spacing: -0.02em; line-height: 1.15; }
.lb-kpi-delta { font-size: 0.8rem; }
.lb-kpi-delta small { color: var(--lb-muted); font-size: 0.76rem; }
.lb-kpi-spark { height: 28px; margin-top: 4px; }
.lb-spark { display: block; width: 100%; height: 28px; }
.lb-spark polyline { fill: none; stroke: var(--lb-ember); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lb-spark.bad polyline { stroke: var(--lb-bad); }
.lb-spark.warn polyline { stroke: var(--lb-warn); }
.lb-spark.ok polyline { stroke: var(--lb-good); }

.lb-delta { font-weight: 800; white-space: nowrap; }
.lb-delta.up { color: var(--lb-good); }
.lb-delta.down { color: var(--lb-bad); }
.lb-delta.flat { color: var(--lb-muted); }

/* Layout grid */
.lb-grid { display: grid; gap: 14px; }
@media (min-width: 1000px) { .lb-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.lb-side { display: grid; gap: 14px; align-content: start; }

/* Chart */
.lb-chart-wrap { position: relative; display: flex; flex-direction: column; }
#lb-chart { position: relative; height: 330px; margin: 6px 6px 8px; touch-action: pan-y; }
#lb-chart svg { display: block; width: 100%; height: 100%; }
#lb-chart .grid line { stroke: var(--lb-line); stroke-width: 1; }
#lb-chart .ylab { fill: var(--lb-muted); font-size: 11px; text-anchor: end; }
#lb-chart .xlab { fill: var(--lb-muted); font-size: 11px; text-anchor: middle; }
#lb-chart .prev { fill: none; stroke: #c4b4a5; stroke-width: 1.6; stroke-dasharray: 4 4; }
#lb-chart .area { fill: url(#lb-grad); }
#lb-chart .cur { fill: none; stroke: var(--lb-ember); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
#lb-chart .end { fill: var(--lb-ember); stroke: #fff; stroke-width: 2; }
#lb-chart .pulse { fill: none; stroke: var(--lb-ember); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: lb-pulse 1.8s ease-out infinite; }
@keyframes lb-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
#lb-chart .hover-line { stroke: var(--lb-ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
#lb-chart .hover-dot { fill: var(--lb-card); stroke: var(--lb-ember); stroke-width: 2.5; }
.lb-legend { display: flex; gap: 14px; padding: 0 16px 14px; font-size: 0.8rem; color: var(--lb-muted); }
.lb-legend i { display: inline-block; width: 18px; height: 0; border-top: 2.6px solid var(--lb-ember); vertical-align: middle; margin-right: 6px; }
.lb-legend i.p { border-top: 1.6px dashed #c4b4a5; }
#lb-tip {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  display: grid; gap: 3px; min-width: 170px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--lb-ink); color: #f7efe4; font-size: 0.8rem;
  box-shadow: 0 12px 30px -12px rgba(42, 29, 23, 0.6);
}
#lb-tip b { font-size: 0.85rem; }
#lb-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--lb-ember); }
#lb-tip i.p { background: #c4b4a5; }
#lb-tip .muted { opacity: 0.7; }
#lb-tip .lb-delta.up { color: #7fdca6; }
#lb-tip .lb-delta.down { color: #ff9a85; }

/* Alerts */
.lb-alerts { display: grid; margin: 0; padding: 8px 10px 10px; list-style: none; }
.lb-alerts li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 10px; position: relative; }
.lb-alerts li + li { border-top: 1px solid var(--lb-line); border-radius: 0; }
.lb-alerts li::before { content: ""; position: absolute; left: 2px; top: 12px; bottom: 12px; width: 3.5px; border-radius: 3px; }
.lb-alerts .bad::before { background: var(--lb-bad); }
.lb-alerts .warn::before { background: var(--lb-saffron); }
.lb-alerts .ok::before { background: var(--lb-good); }
.lb-alerts b { display: block; color: var(--lb-ink); font-size: 0.9rem; }
.lb-alerts span { color: var(--lb-muted); font-size: 0.82rem; }
.lb-alerts button { flex: none; padding: 6px 10px; border: 1.5px solid var(--lb-line); border-radius: 8px; background: var(--lb-card); color: var(--lb-ink); font-weight: 700; font-size: 0.76rem; cursor: pointer; white-space: nowrap; }
.lb-alerts button:hover { border-color: var(--lb-ember); color: var(--lb-ember); }

/* Live feed */
.lb-feed { display: grid; margin: 0; padding: 8px 12px 12px; list-style: none; }
.lb-feed li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px dashed var(--lb-line); }
.lb-feed li:last-child { border-bottom: 0; }
.lb-feed li i { width: 9px; height: 9px; border-radius: 3px; }
.lb-feed b { display: block; font-size: 0.85rem; color: var(--lb-ink); }
.lb-feed span { color: var(--lb-muted); font-size: 0.76rem; }
.lb-feed strong { font-size: 0.9rem; color: var(--lb-ink); }
.lb-feed li.new { animation: lb-in 700ms cubic-bezier(0.16, 1, 0.3, 1); background: linear-gradient(90deg, rgba(242, 168, 59, 0.18), transparent); border-radius: 8px; }
@keyframes lb-in { from { opacity: 0; transform: translateY(-10px); } }

/* Mix and items */
.lb-split { display: grid; gap: 14px; }
@media (min-width: 760px) { .lb-split { grid-template-columns: 1fr 1fr; } }
#lb-mix { padding: 12px 16px 16px; }
.lb-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--lb-line); }
.lb-bar span { transition: flex 600ms cubic-bezier(0.16, 1, 0.3, 1); }
#lb-mix ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 14px 0 0; padding: 0; list-style: none; }
#lb-mix li { display: grid; grid-template-columns: 12px 1fr auto; column-gap: 8px; align-items: center; font-size: 0.85rem; color: var(--lb-ink); font-weight: 600; }
#lb-mix li i { width: 10px; height: 10px; border-radius: 3px; }
#lb-mix li b { font-weight: 800; }
#lb-mix li span { grid-column: 2 / 4; color: var(--lb-muted); font-weight: 500; font-size: 0.78rem; }
#lb-mix li.off { opacity: 0.4; }
.lb-items { display: grid; gap: 8px; margin: 0; padding: 12px 16px 16px; list-style: none; }
.lb-items li { display: grid; grid-template-columns: 18px minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.85rem; }
.lb-items .n { color: var(--lb-muted); font-weight: 700; }
.lb-items .nm { color: var(--lb-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-items .lb-ibar { height: 8px; border-radius: 4px; background: #f1e7da; overflow: hidden; }
.lb-items .lb-ibar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--lb-saffron), var(--lb-ember)); transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.lb-items b { color: var(--lb-ink); font-weight: 800; }

/* Table */
.lb-table-wrap { overflow-x: auto; padding: 4px 4px 8px; }
.lb-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.86rem; }
.lb-table th, .lb-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--lb-line); white-space: nowrap; }
.lb-table thead th { color: var(--lb-muted); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.lb-table thead button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.lb-table thead button:hover { color: var(--lb-ember); }
.lb-table thead th[aria-sort="ascending"], .lb-table thead th[aria-sort="descending"] { color: var(--lb-ink); }
.lb-table .num { text-align: right; }
.lb-table tbody th { font-weight: 400; }
.lb-table tbody th b { display: block; color: var(--lb-ink); font-weight: 700; }
.lb-table tbody th span { color: var(--lb-muted); font-size: 0.76rem; }
.lb-table tbody tr { cursor: pointer; transition: background 150ms; }
.lb-table tbody tr:hover { background: #fbf4ea; }
.lb-table tbody tr.sel { background: #fdeee4; box-shadow: inset 3px 0 0 var(--lb-ember); }
.lb-table tbody tr:last-child th, .lb-table tbody tr:last-child td { border-bottom: 0; }
.lb-table .lb-spark { width: 90px; height: 24px; }
.lb-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.lb-chip.ok { background: #e3f3ea; color: var(--lb-good); }
.lb-chip.warn { background: #fbefd9; color: var(--lb-warn); }
.lb-chip.bad { background: #fbe3de; color: var(--lb-bad); }

#lb-toast {
  position: sticky; bottom: 16px; z-index: 5;
  justify-self: center;
  padding: 10px 16px; border-radius: 10px; background: var(--lb-ink); color: #f7efe4; font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 12px 30px -10px rgba(42, 29, 23, 0.6);
}

/* Kev's Atelier note inside the client dashboard */
.lb-note { display: grid; gap: 14px; padding: 16px 18px; border: 1.5px solid #c9a24b; border-radius: 14px; background: #0e0d0b; color: #f1e9d8; }
@media (min-width: 900px) { .lb-note { grid-template-columns: auto 1fr; align-items: center; gap: 22px; } }
.lb-note .ka-note { justify-self: start; padding: 3px 8px; border-radius: 4px; background: #c9a24b; color: #060606; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lb-note p { margin: 0; color: #cfc6b4; font-size: 0.88rem; }
.lb-note p b { color: #e8c873; font-weight: 700; }
.lb-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.lb-sources span { padding: 4px 10px; border: 1px solid rgba(201, 162, 75, 0.4); border-radius: 999px; font-size: 0.76rem; color: #e8c873; }
.lb-sources em { font-style: normal; color: #a39a86; font-size: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  .lb-live i, #lb-chart .pulse { animation: none; }
}