/* Essential UI — original components with shared foundations and responsive patterns. */
:root {
  --paper: #f3eadc; --surface: #fffdf9; --surface-raised: #fff; --surface-soft: #f8f4ed;
  --ink: #2d2c2a; --muted: #716b60; --line: #e5dccf; --line-strong: #cfc2af;
  --green: #725e38; --gold: #947d51; --amber: #886321;
  --brand-hover: #5b492b; --brand-soft: #eee4d1;
  --success-bg: #e8f0e3; --success-ink: #36552f;
  --warning-bg: #fbefd3; --warning-ink: #76561c;
  --danger-bg: #fae6df; --danger-ink: #963f2f;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-control: 8px; --radius-card: 12px; --control-height: 44px;
  --shadow-card: 0 1px 3px #40301908; --shadow-popover: 0 12px 28px #40301920;
  --font: 'Segoe UI', Arial, sans-serif; --sidebar-width: 232px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 var(--font); }
[hidden] { display: none !important; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--brand-hover); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid #947d5180; outline-offset: 3px; }
h1, h2, h3 { color: var(--ink); font-family: var(--font); font-weight: 600; }
h1 { margin: 6px 0 12px; font-size: 32px; line-height: 1.2; letter-spacing: -.8px; }
h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; letter-spacing: -.2px; }
h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.4; }
p { margin: 0 0 16px; line-height: 1.65; color: var(--muted); }
small { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; }
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 1.3px; }
.dot { color: var(--gold); }
.muted, .reference-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.numeric, .stats strong, .dashboard-kpis strong, .cost-summary strong { font-variant-numeric: tabular-nums; }
/* Application shell */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); padding: 24px 16px; background: #efe6d8; border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; }
.brand { display: block; text-align: center; color: var(--ink); }
.brand img { display: block; width: 168px; max-width: 100%; height: auto; margin: auto; }
.brand span { display: block; margin-top: 12px; font-size: 9px; font-weight: 600; letter-spacing: 2px; color: var(--muted); }
.workspace { display: flex; gap: 12px; align-items: center; margin: 24px 0 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); font-weight: 600; }
.workspace>span { font-size: 12px; }.workspace small { font-size: 10px; font-weight: 400; margin-top: 2px; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: var(--radius-control); font-size: 13px; font-weight: 500; color: #655e51; }
.sidebar nav a:hover { background: #f8f2e8; }.sidebar nav a.selected { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-card); font-weight: 600; }
.nav-icon { width: 19px; height: 19px; flex: 0 0 19px; color: var(--green); }
.sidebar-bottom { margin-top: auto; padding: 32px 12px 0; font-size: 12px; }.admin-links { display: grid; gap: 12px; }.admin-links a { color: var(--muted); }.admin-links a:hover { color: var(--ink); }
.sidebar-bottom p { margin: 24px 0 16px; font: italic 13px/1.8 Georgia, serif; }
.nav-toggle, .mobile-workspace-menu { display: none; }
main { margin-left: var(--sidebar-width); min-height: 100vh; min-width: 0; }
.topbar { height: 64px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: #fffdf980; font-size: 11px; color: var(--muted); }
.topbar i { padding: 0 16px; font-style: normal; color: var(--gold); }.live { color: #5a6549; font-size: 11px; }
.content { max-width: 1600px; padding: 24px 32px 40px; margin: auto; }
.heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 24px 0; }.heading p { max-width: 780px; margin: 0; }.heading .actions { margin: 0; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 20px 32px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); letter-spacing: .8px; }footer span { letter-spacing: 0; }
.back { display: inline-flex; margin: 20px 0 0; font-size: 12px; }
/* Shared surfaces and layout */
.panel, .table-wrap, .stats article, .dashboard-kpis article, .login-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.panel { padding: 24px; margin: 20px 0; }.panel>.table-wrap { box-shadow: none; }.panel>p { font-size: 13px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }.section-head p { margin: 4px 0 0; font-size: 13px; }.text-link { font-size: 12px; }
.two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; }.two-col>.panel { margin-top: 0; }
.stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0 32px; }.stats article { padding: 20px 24px; }.stats article>span { font-size: 11px; font-weight: 500; color: var(--muted); }.stats strong { display: block; font-size: 32px; font-weight: 600; margin: 12px 0 4px; overflow-wrap: anywhere; }.stats em { font-size: 22px; font-style: normal; }.amber { color: var(--amber); }
.count { display: inline-block; padding: 3px 8px; margin-left: 8px; border-radius: 6px; background: var(--brand-soft); color: var(--green); font: 600 11px/18px var(--font); vertical-align: middle; }
.notice, .local-banner, .insight { background: #f3ead6; border: 1px solid #ded0b4; border-radius: var(--radius-control); padding: 16px 20px; margin: 16px 0; font-size: 12px; color: #665333; }
.notice.error { background: var(--danger-bg); border-color: #e4beb1; color: var(--danger-ink); }
.local-banner { margin: 0 0 20px; padding: 0 16px; }.local-banner summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; color: #665333; }.local-banner summary strong { font-size: 10px; letter-spacing: .7px; }.local-banner summary span { font-size: 11px; font-weight: 400; }.local-banner p { margin: 0; padding: 0 0 14px; font-size: 12px; color: #665333; }
.insight { display: flex; align-items: center; gap: 20px; padding: 24px; }.insight p { margin: 0; font-size: 13px; }.insight a { margin-left: auto; flex-shrink: 0; font-size: 12px; }.insight-icon { color: var(--gold); font-size: 28px; }
.footnote { display: flex; justify-content: space-between; gap: 20px; margin: 20px 0; font-size: 11px; color: var(--muted); }
/* One control family: primary, secondary, quiet and compact */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-height); padding: 11px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-raised); color: #5a492e; font: 600 13px/20px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .button:hover { background: var(--surface-soft); border-color: #b9a78b; }.primary { background: var(--green); border-color: var(--green); color: #fff; }.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.quiet { background: transparent; border-color: transparent; padding: 8px 0; min-height: 36px; font-size: 12px; color: var(--muted); }.quiet:hover { background: transparent; border-color: transparent; color: var(--ink); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; }.actions>form { margin: 0; }
label { display: block; font-size: 12px; font-weight: 500; color: #655e52; }
input, select, textarea { width: 100%; max-width: 100%; min-width: 0; min-height: var(--control-height); margin-top: 8px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--ink); font: 14px/20px var(--font); }
input::placeholder, textarea::placeholder { color: #80796e; }
input:focus, select:focus, textarea:focus { outline: 3px solid #947d5138; outline-offset: 0; border-color: var(--gold); }
select { appearance: none; padding-right: 46px; background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23655e52' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center; }
input[type=date] { padding-right: 18px; }input[type=file] { padding: 6px; min-height: 46px; }input::file-selector-button { border: 0; border-radius: 5px; padding: 8px 12px; margin-right: 12px; background: var(--brand-soft); color: var(--ink); font: 600 12px var(--font); cursor: pointer; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--green); flex-shrink: 0; }
textarea { min-height: 120px; resize: vertical; }button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: default; }
form>label { margin-bottom: 16px; }.form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: start; }.form-grid>label { margin: 0; }.form-grid>button { align-self: end; }.panel .form-grid { margin-top: 16px; }.wide { grid-column: span 2; }.two-col .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 24px 0 20px; }.toolbar label { flex: 1; min-width: 170px; max-width: 280px; }.toolbar .search { flex: 1; min-width: 200px; margin: 0; }.toolbar>.button { flex-shrink: 0; }.search { margin-top: 0; }
.filters { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-soft); padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-control); }.filter { min-height: 36px; padding: 8px 12px; background: transparent; border-color: transparent; font-size: 12px; color: var(--muted); }.filter.active { background: var(--surface-raised); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-card); }
.invoice-search { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 16px 0 20px; }.invoice-search label { flex: 1; min-width: 180px; margin: 0; }.invoice-search button { flex-shrink: 0; }
.badge { display: inline-block; justify-self: start; width: max-content; max-width: 100%; padding: 4px 8px; margin: 2px 4px 4px 0; border-radius: 6px; background: #eee8dc; color: #665e4e; font-size: 11px; font-weight: 500; line-height: 1.5; white-space: normal; }
.good, .health-green { background: var(--success-bg); color: var(--success-ink); }.warn, .health-yellow { background: var(--warning-bg); color: var(--warning-ink); }.danger, .health-red { background: var(--danger-bg); color: var(--danger-ink); }
/* Lists and reusable page navigation */
.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; text-align: left; }th, td { padding: 16px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }th { background: var(--surface-soft); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .5px; }td { font-size: 13px; }tbody tr:last-child td { border-bottom: 0; }tbody tr:hover { background: #faf7f1; }
.dish { color: var(--ink); font-weight: 600; }.dish span { color: var(--gold); margin-left: 4px; }.status { margin-top: 6px; }.wrap-text { overflow-wrap: anywhere; white-space: normal; }
.responsive-list { table-layout: fixed; }.responsive-list th, .responsive-list td { min-width: 0; overflow-wrap: anywhere; }.responsive-list td:first-child { font-weight: 500; }.responsive-list td small { margin-top: 5px; }.responsive-list svg { max-width: 100%; }.responsive-list details { margin-top: 0; }
.list-sizebar, .list-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 0; }.list-pagination { padding-bottom: 4px; }.list-sizebar label, .list-pagination label { display: flex; align-items: center; gap: 10px; white-space: nowrap; }.list-sizebar select, .list-pagination select { width: auto; min-width: 86px; min-height: 40px; margin: 0; padding: 9px 46px 9px 12px; }.page-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.page-buttons button { min-height: 40px; padding: 9px 12px; }.page-status, .top-status { font-size: 12px; color: var(--muted); }
.empty { padding: 32px; text-align: center; color: var(--muted); }
/* Recipes, references and invoice review */
.recipe-line { display: grid; grid-template-columns: minmax(170px,2fr) .8fr .9fr 1.1fr 1fr 36px; align-items: start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }.recipe-line .field-label { display: block; min-height: 36px; }.recipe-line .remove { padding: 0; width: 36px; min-height: 44px; margin-top: 44px; }.row-result { min-width: 0; }.row-result strong { display: block; font-size: 18px; line-height: 44px; }.row-result small { font-size: 11px; }.usage-hint { margin-top: 8px; font-size: 11px; }.trace { grid-column: 1/-1; font-size: 12px; color: var(--muted); line-height: 1.7; }.trace>a { margin-left: 8px; }
.cost-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 24px; padding: 24px; margin: 20px 0; border-radius: var(--radius-card); background: var(--ink); color: #fff; }.cost-summary span { color: #dfd2bc; font-size: 10px; font-weight: 500; }.cost-summary strong { display: block; font-size: 25px; font-weight: 600; margin-top: 12px; overflow-wrap: anywhere; }
details { margin-top: 16px; }summary { cursor: pointer; color: var(--green); font-size: 13px; font-weight: 500; padding: 8px 0; }details[open]>form { margin-top: 16px; }
.conversion { padding: 12px 0; border-bottom: 1px solid var(--line); margin-bottom: 12px; font-size: 13px; }.conversion span { color: var(--gold); padding: 0 12px; }.history { padding: 20px 0; border-bottom: 1px solid var(--line); }.history p { margin: 8px 0; font-size: 13px; }
.reference-summary { white-space: normal; min-width: 0; }.reference-summary strong { display: block; font-size: 13px; }.reference-summary a { font-size: 12px; }.reference-samples { display: grid; gap: 12px; }.reference-sample { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); overflow-wrap: anywhere; }.reference-sample p { font-size: 12px; margin: 8px 0; }.price-guide-summary { display: flex; flex-wrap: wrap; gap: 12px; }.price-guide-summary span { padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); font-size: 13px; }.planning-estimate { margin-bottom: 12px; }.planning-estimate small { color: var(--amber); }
.quote-action { position: relative; display: inline-block; }.quote-trigger { min-height: 36px; padding: 7px 12px; text-align: left; font-size: 12px; }.quote-menu { display: none; position: fixed; z-index: 40; min-width: 180px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); box-shadow: var(--shadow-popover); }.quote-action.open .quote-menu { display: block; }.quote-menu a { display: block; padding: 12px; border-radius: 5px; color: var(--ink); font-size: 13px; }.quote-menu a:hover { background: var(--surface-soft); }
.scan-text { max-height: 400px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }.include-control { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }.import-line.excluded { opacity: .55; }.price-sparkline { width: 200px; height: 60px; color: var(--green); }.preserve-lines { white-space: pre-wrap; }pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 monospace; color: var(--muted); }
/* Purchasing dashboard */
.dashboard-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 20px 0 24px; }.dashboard-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }.dashboard-kpis article { padding: 20px; background: var(--surface-raised); }.dashboard-kpis span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 12px; }.dashboard-kpis strong { font-size: 26px; font-weight: 600; letter-spacing: -.4px; }.dashboard-summary { margin: 0 0 20px; color: var(--muted); font-size: 12px; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 24px; align-items: start; }.chart-stage { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-soft); min-width: 0; }.chart-highlights h3 { margin-bottom: 4px; }.chart-highlights>p { font-size: 12px; margin-bottom: 16px; }.dashboard-top-items { display: grid; gap: 12px; }.dashboard-top-items button { display: block; text-align: left; white-space: normal; width: 100%; padding: 16px; }.dashboard-top-items button[aria-pressed=true] { border-color: var(--gold); box-shadow: inset 3px 0 var(--gold); background: #fbf7ee; }.dashboard-top-items strong { display: block; font-size: 14px; margin: 8px 0; }.dashboard-top-items small, .dashboard-top-items span { font-size: 11px; font-weight: 400; color: var(--muted); }
.invoice-chart { min-height: 260px; width: 100%; }.invoice-chart svg { display: block; width: 100%; height: auto; }.chart-tooltip { padding: 10px 12px; min-height: 42px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); font-size: 12px; }.chart-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }.chart-legend button { min-height: 36px; padding: 7px 12px; white-space: normal; text-align: left; justify-content: flex-start; font-weight: 400; font-size: 12px; }.chart-series-swatch { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; }.chart-no-data { text-align: center; padding: 48px 16px; }
.chart-picker { padding: 16px 0; border-top: 1px solid var(--line); }.chart-picker input { margin: 12px 0; }#chart-item-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 250px; overflow-y: auto; gap: 8px; }#chart-item-options label { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-control); }#chart-item-options input { margin: 0; }
/* Authentication and printable documents use the same foundations. */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }.login-card { width: min(460px,100%); padding: 40px; }.login-brand { margin-bottom: 32px; }.login-brand img { width: 200px; }.login-card h1 { font-size: 30px; }.login-card form { margin: 24px 0; }.login-card .primary { width: 100%; }
.print-sheet { max-width: 1000px; margin: 40px auto; padding: 24px; }.print-sheet table { table-layout: auto; }.print-sheet p { margin-top: 16px; }
/* Tablet */
@media (max-width:1200px) {
  :root { --sidebar-width: 200px; }.sidebar { padding: 24px 12px; }.brand img { width: 158px; }.content { padding: 24px; }.topbar { padding: 0 24px; }
  .two-col { grid-template-columns: 1fr; }.dashboard-controls { grid-template-columns: 1fr 1fr; }.dashboard-layout { grid-template-columns: minmax(0,1fr) 210px; gap: 16px; }
  .recipe-line { grid-template-columns: minmax(170px,2fr) 1fr 1fr; gap: 16px; }.recipe-line>label:first-child { grid-column: 1/-1; }.recipe-line>.remove { margin-top: 0; }.recipe-line>.row-result .field-label { min-height: 20px; }.cost-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width:951px) { .invoice-register th:nth-child(3) { width: 116px; }.invoice-register th:nth-child(4) { width: 100px; }.invoice-register td:nth-child(3) { white-space: nowrap; } }
@media (max-width:950px) {
  .responsive-list thead { display: none; }.responsive-list, .responsive-list tbody, .responsive-list tr { display: block; width: 100%; }.responsive-list tr { padding: 16px; border-bottom: 1px solid var(--line); }.responsive-list tr:last-child { border: 0; }
  .responsive-list td { display: grid; width: 100%; border: 0; padding: 8px 0; grid-template-columns: 120px minmax(0,1fr); gap: 12px; }.responsive-list td::before { content: attr(data-label); grid-column: 1; grid-row: 1/10; font-size: 10px; font-weight: 500; letter-spacing: .3px; color: var(--muted); }.responsive-list td>* { grid-column: 2; }.responsive-list td[colspan] { display: block; }.responsive-list td[colspan]::before { display: none; }
  .table-wrap:has(.responsive-list) { overflow: visible; }.dashboard-layout { grid-template-columns: 1fr; }.dashboard-top-items { grid-template-columns: repeat(3,minmax(0,1fr)); }.dashboard-kpis { grid-template-columns: 1fr 1fr; }#chart-item-options { grid-template-columns: 1fr 1fr; }
}
/* Phone */
@media (max-width:720px) {
  .sidebar { position: sticky; inset: auto; top: 0; z-index: 30; width: 100%; padding: 14px 18px; overflow: visible; border: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
  .brand { text-align: left; }.brand img { width: 128px; margin: 0; }.brand span { display: none; }.workspace, .sidebar-bottom { display: none; }.nav-toggle { display: inline-flex; gap: 8px; min-height: 40px; padding: 9px 12px; }
  .sidebar nav { display: none; flex-basis: 100%; grid-template-columns: 1fr 1fr; gap: 8px; }.sidebar.nav-open nav { display: grid; }.sidebar nav a { padding: 12px; font-size: 12px; }.sidebar.nav-open .mobile-workspace-menu { display: block; flex-basis: 100%; margin: 0; }.mobile-workspace-menu .admin-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
  main { margin: 0; }.topbar { height: 48px; padding: 0 18px; font-size: 10px; }.topbar i { padding: 0 8px; }.live { font-size: 10px; }.content { padding: 18px; }.heading { align-items: flex-start; flex-direction: column; gap: 16px; margin: 20px 0; }h1 { font-size: 28px; }.heading p { font-size: 13px; }
  .panel { padding: 18px; margin: 18px 0; }.section-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; }.section-head h2 { font-size: 17px; }.local-banner { padding: 0 12px; }.local-banner summary { align-items: start; flex-direction: column; gap: 4px; }.local-banner summary span { font-size: 10px; }
  .stats { grid-template-columns: 1fr; gap: 12px; margin: 20px 0; }.stats article { padding: 18px; }.stats strong { font-size: 28px; }.form-grid, .two-col .form-grid { grid-template-columns: 1fr; gap: 16px; }.wide { grid-column: auto; }
  .toolbar { align-items: stretch; gap: 12px; }.toolbar label { flex: 1 1 100%; max-width: none; min-width: 0; }.toolbar .search { flex: 1 1 100%; min-width: 0; width: 100%; }.toolbar>.button { flex: 1; }.filters { width: 100%; }.filter { flex: 1; padding: 8px; }
  .actions { gap: 10px; }.heading .actions { width: 100%; }.actions>.button { flex: 1; }.invoice-search label { flex-basis: 100%; }.invoice-search button { flex: 1; }
  .responsive-list td { grid-template-columns: 100px minmax(0,1fr); }.responsive-list tr { padding: 14px; }.list-sizebar, .list-pagination { align-items: flex-start; }.page-buttons { gap: 6px; }.list-pagination .page-buttons { width: 100%; }.page-buttons button { padding: 9px 10px; }
  .recipe-line { grid-template-columns: 1fr 1fr; gap: 16px; }.recipe-line>label:first-child { grid-column: 1/-1; }.recipe-line .field-label { min-height: 20px; }.recipe-line>label:nth-child(4) { grid-column: 1/-1; }.recipe-line>.row-result { grid-column: 1; }.recipe-line>.remove { grid-column: 2; justify-self: end; margin-top: 8px; }
  .cost-summary { grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; }.cost-summary strong { font-size: 23px; }.trace .actions { align-items: stretch; }.trace .actions a { white-space: normal; }
  .dashboard-controls { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.dashboard-controls label { min-width: 0; }.dashboard-kpis { gap: 12px; }.dashboard-kpis article { padding: 16px; }.dashboard-kpis strong { font-size: 22px; }.dashboard-top-items { grid-template-columns: 1fr; }.chart-stage { padding: 10px; }#chart-item-options { grid-template-columns: 1fr; }.invoice-chart { min-height: 220px; }.chart-legend button { max-width: 100%; }
  .price-guide-summary span { flex: 1 1 100%; }.footnote { flex-direction: column; gap: 8px; }.insight { align-items: flex-start; flex-wrap: wrap; padding: 20px; }.insight-icon { display: none; }.insight a { margin: 0; }footer { padding: 18px; }footer span { display: none; }.login-card { padding: 28px; }.print-sheet { margin: 0; padding: 18px; }
}
@media (max-width:380px) {
  .dashboard-controls, .dashboard-kpis { grid-template-columns: 1fr; }
  button, .button { white-space: normal; max-width: 100%; }
  .responsive-list td { grid-template-columns: 80px minmax(0,1fr); }
}
@media print {
  .sidebar, .topbar, footer, .local-banner, .list-sizebar, .list-pagination, .no-print { display: none !important; }
  body { background: #fff; font-size: 11px; }main { margin: 0; }.content, .print-sheet { padding: 0; margin: 0; max-width: none; }.panel, .table-wrap { box-shadow: none; }.table-wrap { overflow: visible; }h1 { font-size: 26px; }tr { break-inside: avoid; }
}
@media (prefers-reduced-motion:no-preference) { button, .button, .sidebar nav a, input, select, textarea { transition: background-color .12s, border-color .12s, box-shadow .12s; } }

/* Compact recipe cards and operational lists. */
.recipe-line { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 36px; gap: 12px 16px; padding: 16px; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); }
.recipe-line>label:first-child { grid-column: 1/3; grid-row: 1; }
.recipe-line>label:nth-child(2) { grid-column: 1; grid-row: 2; }
.recipe-line>label:nth-child(3) { grid-column: 2; grid-row: 2; }
.recipe-line>label:nth-child(4) { grid-column: 1; grid-row: 3; }
.recipe-line>.row-result { grid-column: 2; grid-row: 3; }
.recipe-line>.remove { grid-column: 3; grid-row: 1/4; margin: 0; width: 36px; height: 100%; align-self: stretch; }
.recipe-line .field-label { min-height: 0; font-size: 11px; }.recipe-line input,.recipe-line select { margin-top: 6px; }
.recipe-line .usage-hint,.recipe-line>label:nth-child(4)>small,.recipe-line .row-result small { display: none; }
.recipe-line .row-result strong { font-size: 18px; line-height: 44px; margin-top: 6px; }.recipe-line .trace { grid-column: 1/-1; margin: 0; }.trace summary { padding: 4px 0; font-size: 11px; }.trace .actions { margin: 12px 0 0; }
.recipe-finder { margin: 16px 0; }#saved-recipe-results { max-height: 240px; overflow-y: auto; padding-top: 12px; }#saved-recipe-results a { display: block; padding: 10px 12px; border-radius: 6px; }#saved-recipe-results a:hover { background: var(--surface-soft); }
dialog { width: min(440px,calc(100% - 32px)); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-popover); }dialog::backdrop { background: #2d2c2a70; }dialog .actions { justify-content: flex-end; margin-bottom: 0; }
.price-info-trigger { display: inline; text-align: left; padding: 0; border: 0; min-height: 32px; background: transparent; color: var(--ink); white-space: normal; font-size: 13px; }.price-info-trigger:hover { background: transparent; }.price-tooltip { display: none; position: fixed; width: min(280px,calc(100vw - 16px)); padding: 14px; z-index: 45; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); box-shadow: var(--shadow-popover); color: var(--muted); font-size: 12px; font-weight: 400; }.price-info.open .price-tooltip { display: block; }.quote-menu small { padding: 8px 12px; max-width: 230px; }.ingredient-units { margin: 4px 0 0; }.ingredient-units summary { padding: 0; font-size: 11px; }.ingredient-list .reference-summary>a { display: block; margin-top: 6px; }.ingredient-list td small:empty { display: none; }
.date-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }.date-presets button { min-height: 36px; padding: 7px 12px; }.date-presets button[aria-pressed=true] { background: var(--brand-soft); border-color: var(--gold); }.section-toggle { min-height: 36px; padding: 7px 12px; font-size: 12px; margin-left: auto; }.collapsed .section-head { margin-bottom: 0; }
@media (max-width:950px) {
 .menu-list tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 14px; }
 .menu-list td { display: block; padding: 2px 0; font-size: 12px; }
 .menu-list td:first-child { grid-column: 1/-1; }.menu-list td:last-child { grid-column: 1/-1; }
 .menu-list td::before { font-size: 10px; display: inline; margin-right: 6px; }
 .menu-list td:first-child::before,.menu-list td:last-child::before { display: none; }.menu-list .status { margin-top: 3px; font-size: 10px; }
 .menu-list td:last-child small,.menu-list td:last-child>.badge:not(:first-child) { display: none; }.menu-list td:last-child .badge { margin: 0; padding: 2px 6px; }
 .recipe-line { gap: 10px; padding: 12px; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 30px; }.recipe-line>.remove { width: 30px; }.recipe-line .field-label { font-size: 10px; }.recipe-line input,.recipe-line select { font-size: 12px; padding-left: 10px; }.recipe-line select { padding-right: 36px; background-position: right 12px center; }
}

.recipe-info-trigger { min-height: 28px; padding: 0 4px; font-size: 12px; color: var(--muted); }.recipe-name-info { display: inline; }
.health-indicator { display: inline-flex; width: 36px; height: 36px; min-height: 36px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; font-weight: 700; font-size: 16px; }
.health-indicator.health-red,.health-indicator.health-red:hover { background: var(--danger-bg); color: var(--danger-ink); }
.health-indicator.health-yellow,.health-indicator.health-yellow:hover { background: var(--warning-bg); color: var(--warning-ink); }
.health-indicator.health-green,.health-indicator.health-green:hover { background: var(--success-bg); color: var(--success-ink); }
.menu-list td { vertical-align: middle; }.menu-list td:last-child { text-align: center; }.menu-list th:last-child { text-align: center; }
@media (max-width:950px) { .menu-list td:last-child { text-align: left; }.menu-list td:last-child::before { display: inline; content: 'Cost status'; }.menu-list .health-indicator { width: 30px; height: 30px; min-height: 30px; font-size: 14px; }.menu-list .price-tooltip { text-align: left; } }

.info-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex-shrink: 0; }.recipe-info-trigger { display: inline-flex; align-items: center; vertical-align: middle; padding: 0 3px; }.price-info-trigger .info-icon { margin-left: 3px; }
.summary-count { display: block; text-align: left; padding: 0; border: 0; background: transparent; color: var(--muted); min-height: 0; }.summary-count strong { margin: 12px 0 4px; }.summary-count span { font-size: 11px; font-weight: 400; }.summary-count:hover { background: transparent; }.summary-setup { min-height: 28px; border: 0; padding: 4px 0; margin-top: 6px; background: transparent; font-size: 11px; color: var(--muted); }.summary-setup:hover { background: transparent; text-decoration: underline; }

.review-items-button { margin-top: 12px; min-height: 36px; padding: 7px 12px; }