/* Food cost comparison dashboard. Series colors validated for color-vision deficiency on the dark surface. */
/* Lines: violet / orange / aqua pass every color-vision check on the dark surface. Sales bars use the brand pink. */
#fc-compare { --fc-s1: #9085e9; --fc-s2: #d95926; --fc-s3: #199e70; --fc-bar: var(--accent, #D98BA5); --fc-grid: #2c2c2a; --fc-axis: #898781; display: grid; gap: 18px; margin-bottom: 24px; }
.fcx-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.fcx-weeks, .fcx-basis { display: flex; flex-wrap: wrap; gap: 6px; }
.fcx-weeks button, .fcx-basis button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.fcx-weeks button[aria-pressed="true"], .fcx-basis button[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fcx-switches { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fcx-example { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .92rem; }
.fcx-example-note { margin: 0; }
.fcx-week-title { margin: 4px 0 0; font-size: 1.1rem; }
.fcx-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.fcx-tile { display: grid; gap: 6px; align-content: start; }
.fcx-tile p { margin: 0; color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.fcx-tile strong { font-size: 2rem; line-height: 1.1; }
.fcx-tile-sales strong { font-size: 1.6rem; }
.fcx-tile span, .fcx-tile small { color: var(--muted); font-size: .88rem; }
.fcx-tile-empty strong { color: var(--muted); }
.fcx-key { display: inline-block; width: 12px; height: 4px; border-radius: 2px; background: currentColor; flex: none; }
.fcx-key.fcx-s1 { color: var(--fc-s1); } .fcx-key.fcx-s2 { color: var(--fc-s2); } .fcx-key.fcx-s3 { color: var(--fc-s3); }
.fcx-delta { font-weight: 600; }
.fcx-delta-up { color: #ec835a !important; }
.fcx-delta-down { color: #0ca30c !important; }
.fcx-differences h3, .fcx-chart-card h3, .fcx-purchases h3, .fcx-products h3 { margin: 0 0 4px; }
.fcx-differences ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.fcx-differences li { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 2px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fcx-differences li:last-child { border-bottom: 0; padding-bottom: 0; }
.fcx-differences small { grid-column: 1 / -1; color: var(--muted); }
.fcx-gap-alert { color: #ec835a; }
.fcx-charts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fcx-chart { position: relative; }
.fcx-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.fcx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; font-size: .88rem; color: var(--muted); }
.fcx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fcx-grid { stroke: var(--fc-grid); stroke-width: 1; }
.fcx-axis { fill: var(--fc-axis); font-size: 11px; }
.fcx-end { fill: var(--text); font-size: 12px; font-weight: 600; }
.fcx-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fcx-line.fcx-s1 { stroke: var(--fc-s1); } .fcx-line.fcx-s2 { stroke: var(--fc-s2); } .fcx-line.fcx-s3 { stroke: var(--fc-s3); }
.fcx-dot { stroke: var(--panel); stroke-width: 2; }
.fcx-dot.fcx-s1 { fill: var(--fc-s1); } .fcx-dot.fcx-s2 { fill: var(--fc-s2); } .fcx-dot.fcx-s3 { fill: var(--fc-s3); }
.fcx-bar { fill: var(--fc-bar); }
.fcx-bar-partial { fill: color-mix(in srgb, var(--fc-bar) 45%, var(--panel)); }
.fcx-crosshair { stroke: var(--fc-axis); stroke-width: 1; }
.fcx-hit { fill: transparent; cursor: crosshair; }
.fcx-tooltip { position: absolute; top: 34px; width: 180px; padding: 10px 12px; border-radius: 10px; background: var(--panel-raised); border: 1px solid var(--line); display: grid; gap: 4px; font-size: .85rem; pointer-events: none; z-index: 2; }
.fcx-tooltip span { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.fcx-empty { padding: 28px 8px; text-align: center; color: var(--muted); }
.fcx-empty p { margin: 0 0 4px; color: var(--text); }
.fcx-purchase-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 12px; }
.fcx-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fcx-hbars li { display: grid; grid-template-columns: 120px 1fr auto auto; gap: 10px; align-items: center; font-size: .9rem; }
.fcx-hbars small { color: var(--muted); min-width: 52px; text-align: right; }
.fcx-hbar { height: 12px; }
.fcx-hbar i { display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--fc-bar); }
.fcx-table-scroll { overflow-x: auto; margin-top: 12px; }
.fcx-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fcx-table th, .fcx-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.fcx-table thead th { color: var(--muted); font-weight: 500; font-size: .82rem; }
.fcx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fcx-share { display: inline-block; width: 40px; height: 4px; margin-right: 8px; vertical-align: middle; background: var(--fc-grid); border-radius: 2px; overflow: hidden; }
.fcx-share i { display: block; height: 4px; background: var(--fc-bar); }
.fcx-flag { color: #ec835a; font-weight: 600; }
.fc-legacy { margin-top: 8px; }
.fc-legacy > summary { cursor: pointer; padding: 12px 0; color: var(--muted); }
.order-receipt-cost { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 12px 0; }
.order-receipt-cost .muted { grid-column: 1 / -1; margin: 0; }
@media (max-width: 600px) { .fcx-hbars li { grid-template-columns: 90px 1fr auto; } .fcx-hbars small { display: none; } .fcx-tile strong { font-size: 1.6rem; } }

/* Product results (menu engineering) in plain words: icon-free labels, color only as support. */
.fcx-result { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.fcx-result-great { color: #0ca30c; } .fcx-result-warn { color: #fab219; } .fcx-result-info { color: #6da7ec; } .fcx-result-bad { color: #e66767; }
.fcx-results-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); color: var(--muted); font-size: .85rem; }
/* Recipes page */
.recipes-summary { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 16px; }
.recipes-summary p { margin: 0; color: var(--muted); font-size: .9rem; }
.recipes-summary strong { display: block; font-size: 1.6rem; margin: 4px 0; }
.recipes-summary span { color: var(--muted); font-size: .85rem; }
.recipes-import, .recipes-products, .recipes-ingredients, .recipe-editor { margin-bottom: 16px; }
.recipes-import { display: grid; gap: 12px; }
.recipes-import-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button-link { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); text-decoration: none; cursor: pointer; }
.recipes-upload input { display: none; }
.recipes-preview ul { margin: 8px 0; padding-left: 18px; }
.recipe-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--line); color: var(--muted); }
.recipe-ok { color: #0ca30c; border-color: currentColor; } .recipe-partial { color: #fab219; border-color: currentColor; white-space: normal; }
.recipe-unpriced th { color: #fab219; }
.recipe-price-form { display: flex; gap: 6px; align-items: center; }
.recipe-price-form input { width: 120px; }
.recipe-lines { display: grid; gap: 10px; margin: 12px 0; }
.recipe-line { display: grid; grid-template-columns: minmax(160px, 2fr) minmax(80px, 1fr) minmax(90px, 1fr) minmax(70px, .8fr) auto; gap: 8px; align-items: end; }
@media (max-width: 700px) { .recipe-line { grid-template-columns: 1fr 1fr; } .recipe-line label:first-child { grid-column: 1 / -1; } }
/* Keep the nine product columns visible on a laptop: headers wrap, cells stay compact. */
.fcx-products .fcx-table thead th { white-space: normal; vertical-align: bottom; }
.fcx-products .fcx-table th, .fcx-products .fcx-table td { padding: 8px 6px; }
.fcx-products .fcx-table tbody th { white-space: normal; min-width: 140px; }
.fcx-products .fcx-share { width: 28px; }

/* Polish: calmer hierarchy, clearer numbers, chips that scroll instead of wrapping on phones. */
.fcx-weeks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.fcx-weeks button { flex: none; }
.fcx-tile { position: relative; overflow: hidden; padding-top: 20px; }
.fcx-tile strong { font-weight: 650; letter-spacing: -.01em; }
.fcx-tile-sales { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--panel)) 0%, var(--panel) 70%); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.fcx-tile-sales strong { color: var(--text); }
.fcx-key { width: 14px; height: 6px; border-radius: 3px; }
.fcx-chart-card { display: grid; align-content: start; gap: 2px; }
.fcx-chart-card h3, .fcx-differences h3, .fcx-purchases h3, .fcx-products h3 { font-size: 1.02rem; letter-spacing: .01em; }
.fcx-tooltip { box-shadow: 0 12px 28px rgba(0,0,0,.45); padding: 12px 14px; }
.fcx-tooltip strong { font-size: .9rem; }
.fcx-end { font-size: 12.5px; }
.fcx-differences li strong { font-variant-numeric: tabular-nums; }
.fcx-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
#fc-compare button:focus-visible, .section-tabs button:focus-visible, .worker-task:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Liquid glass: translucent, blurred cards with a light top edge, so the ambient background shows through. */
#fc-compare .card, #recipes-root .card {
  background: linear-gradient(145deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.025) 55%, rgba(255,255,255,.04) 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.03), 0 18px 44px rgba(0,0,0,.32);
  /* No backdrop blur on large cards: it stopped them from painting while scrolling and slows phones.
     The translucent gradient, light edge and shadow carry the glass look over the smooth background. */
}
#fc-compare .fcx-tile-sales {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.06)) 0%, rgba(255,255,255,.03) 70%);
  border-color: color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,.10));
}
.fcx-tooltip {
  background: rgba(30,28,36,.62);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.fcx-weeks button, .fcx-basis button, .section-tabs button { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.fcx-dot { stroke: rgba(25,25,29,.9); }
.fcx-bar-partial { fill: color-mix(in srgb, var(--fc-bar) 40%, transparent); }
/* Browsers without blur keep a solid, readable tooltip. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .fcx-tooltip { background: var(--panel-raised); } }

/* Glass bars in a vivid pink: gradient body, light edge, reflection and a soft glow. */
#fc-compare { --fc-bar: #ff5aa8; }
.fcx-bar { fill: url(#fcx-bar-glass); stroke: rgba(255,200,228,.55); stroke-width: 1; filter: drop-shadow(0 0 7px rgba(255,79,160,.45)); }
.fcx-bar-partial { fill: url(#fcx-bar-glass); opacity: .45; }
.fcx-bar-shine { fill: url(#fcx-bar-shine); pointer-events: none; }
.fcx-hbar i, .fcx-share i {
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 55%), linear-gradient(90deg, #ff2f8e, #ff8cc6);
  box-shadow: 0 0 10px rgba(255,79,160,.45), inset 0 0 0 1px rgba(255,200,228,.35);
}

/* Calmer glass bars: the brand's dusty pink, softly fading, with a faint edge and almost no glow. */
#fc-compare { --fc-bar: #d98ba5; }
.fcx-bar { stroke: rgba(240,200,215,.28); filter: drop-shadow(0 0 4px rgba(217,139,165,.16)); }
.fcx-hbar i, .fcx-share i {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), linear-gradient(90deg, rgba(196,116,146,.85), rgba(225,160,185,.75));
  box-shadow: inset 0 0 0 1px rgba(240,200,215,.18);
}

/* A product's weekly history, opened from its row. */
.fcx-expand{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:baseline;font-weight:600}
.fcx-expand:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.fcx-expand span{color:var(--accent);font-size:12px}
.fcx-open th,.fcx-open td{border-bottom:0}
.fcx-detail td{background:rgba(255,255,255,.025);padding:14px 16px}
.fcx-history{display:grid;gap:10px;min-width:0}.fcx-history svg{width:100%;height:auto;max-height:240px}
.fcx-history-summary{margin:0;font-weight:600}
.fcx-pbar{fill:var(--accent);opacity:.35}.fcx-pbar-now{opacity:.75}
.fcx-pline{fill:none;stroke:#199e70;stroke-width:2.5}.fcx-pdot{fill:#199e70}
.fcx-plabel{fill:var(--text);font-size:11px;font-weight:600}.fcx-axis-pct{fill:#199e70}
.fcx-pkey-bar{background:var(--accent);opacity:.6}.fcx-pkey-line{background:#199e70}
.fcx-history-table .fcx-now th,.fcx-history-table .fcx-now td{color:var(--accent)}

/* Neutral differences and visible recipe coverage. */
.fcx-delta-neutral{color:var(--muted)}
.fcx-coverage{display:grid;gap:4px;margin-top:6px}.fcx-coverage small{color:var(--muted);font-size:12px}
.fcx-coverage-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.fcx-coverage-bar i{display:block;height:100%;background:#199e70;border-radius:3px}
.fcx-coverage-low .fcx-coverage-bar i{background:#efbf91}.fcx-coverage-low small{color:#efbf91}
.fcx-differences-note{margin:4px 0 10px;font-size:13px}
.fcx-flag-pill{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;border:1px solid currentColor;white-space:nowrap}
.fcx-legends{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px;margin-top:14px}.fcx-legends h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:600}
.fcx-legends p{margin:0;font-size:13px}.fcx-legends .fcx-results-legend{margin:0}
@media (max-width:760px){.fcx-legends{grid-template-columns:minmax(0,1fr)}}
.fcx-flag-low{color:var(--good,#7fd1a8)}

/* Premium table: faint lines, filled translucent pills, alert cards on top, branded bars. */
.fcx-table th,.fcx-table td{border-bottom-color:rgba(255,255,255,.05)}
.fcx-products .fcx-table tbody tr:hover{background:rgba(255,255,255,.025)}
.fcx-result,.fcx-flag-pill{background:color-mix(in srgb,currentColor 13%,transparent);border-color:color-mix(in srgb,currentColor 40%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.fcx-result-great{color:#34d399}.fcx-result-bad{color:#e8735f}.fcx-result-warn{color:#f5b942}
.fcx-alerts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.fcx-alert{display:grid;gap:4px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.fcx-alert span{color:var(--muted);font-size:13px}.fcx-alert strong{font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}.fcx-alert small{color:var(--muted);font-size:12px}
.fcx-alert-warn{border-color:color-mix(in srgb,#f0a46a 45%,transparent)}.fcx-alert-warn strong{color:#f0a46a}
.fcx-alert-bad{border-color:color-mix(in srgb,#e8735f 45%,transparent)}.fcx-alert-bad strong{color:#e8735f}
.fcx-alert-good strong{color:#34d399}
.fcx-pbar{fill:url(#fcx-pbar-glass);opacity:.8}.fcx-pbar-now{opacity:1}
@media (max-width:900px){.fcx-alerts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fcx-alerts{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1200px){.fcx-alerts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.fcx-alerts{grid-template-columns:repeat(2,minmax(0,1fr))}}