/* DPOS family alignment (2026-08-27): token values brought in line with
   the sibling DPOS Stocktake app's approved design system
   (app/server/public/dpos-design-system.css) - same paper/ink/line/bronze/
   status hex values, same Fraunces+Inter typefaces. Variable names kept
   stable (no renaming) so every existing rule below is unaffected;
   Stocktake-specific component tokens (radius/space scale, --surface vs
   --white naming) were not imported, since Food Cost's own component
   system already covers the same roles under its existing names. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap");
:root {
  --ink:#2b2622; --muted:#6e6459; --paper:#f7f3ec; --white:#fdfbf7; --line:#e1d6c3;
  --brand:#8a6a42; --brand-dark:#2a251e; --brand-soft:#ece4d3; --brand-taupe:#c9bba4;
  --teal:#2d5a54; --teal-soft:#e2ece9;
  --good:#4f6b4c; --warn:#b8862e; --bad:#a34f3f;
  --card-shadow:0 5px 22px rgba(31,27,22,.08);
  --font-editorial:'Fraunces',Georgia,'Iowan Old Style','Palatino Linotype','Book Antiqua',serif;
  --font-operational:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.45 var(--font-operational); }
.topbar { background:var(--paper); color:var(--ink); border-bottom:2px solid var(--brand-taupe); padding:38px clamp(20px,5vw,64px); display:flex; gap:34px; align-items:center; }
.header-dpos-lockup { flex-shrink:0; display:flex; align-items:center; }
.header-dpos-lockup img { display:block; height:78px; width:auto; }
.brand-title-block { flex:1 1 auto; border-left:1px solid var(--brand-taupe); padding-left:30px; }
.brand-title-block h1 { font:600 34px/1.15 var(--font-editorial); letter-spacing:.005em; color:var(--ink); }
.title-mark { height:.76em; width:auto; vertical-align:-.1em; margin:0 5px; }
.brand-product { color:var(--brand); }
/* Screen: the printed-page identity is not part of the working UI. */
.print-brand-footer{display:none;}
/* Module descriptor: says what the surface DOES, under the DPOS module name.
   Quiet enough that it never competes with the operational content. */
.module-descriptor{margin-top:2px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
/* The operating line is identity, not instruction: it stays quiet, and it is
   the first thing to go when the header has to narrow. */
.brand-operating-line { margin-top:6px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-taupe); font-weight:600; }
.brand-title-block .creator-line { margin-top:10px; font-size:12.5px; font-style:italic; color:var(--muted); letter-spacing:.01em; }
h1,h2,h3,p { margin:0; }.context-selectors { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }.context-selectors label { display:grid; gap:3px; font-size:12px; color:var(--muted); }
button,select,input { font:inherit; } button { cursor:pointer; border:0; border-radius:6px; padding:9px 13px; color:var(--white); background:var(--brand-dark); font-weight:650; }button:hover { filter:brightness(1.15); }.secondary { background:var(--brand-soft); color:var(--brand-dark); border:1px solid var(--brand-taupe); }.text-button { background:transparent; color:var(--brand); padding:0; }
/* Header actions (Add restaurant/Add menu) are occasional, secondary
   controls - they must read quieter than the DPOS identity beside them,
   not compete with it at equal visual weight. */
#addRestaurant,#addMenu { background:transparent; color:var(--brand-dark); border:1px solid var(--brand-taupe); font-weight:600; padding:7px 12px; font-size:13px; }
#addRestaurant:hover,#addMenu:hover { background:var(--brand-soft); filter:none; }
select,input { min-height:36px; border:1px solid var(--line); border-radius:5px; padding:6px 8px; background:var(--white); color:var(--ink); }main { max-width:1440px; margin:auto; padding:25px clamp(20px,5vw,64px) 44px; }
/* System/build notice - functional but subordinate, a quiet footnote-style
   line rather than an alert banner competing with the product itself. */
.notice { background:transparent; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-left:none; padding:9px 2px; margin-bottom:26px; color:var(--muted); font-size:12px; }
.notice strong { color:var(--muted); font-weight:600; }
nav { display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line); margin-bottom:24px; }nav button { background:transparent; color:var(--muted); border-radius:0; border-bottom:2px solid transparent; text-transform:uppercase; letter-spacing:.07em; font-size:12px; font-weight:600; padding:11px 18px; border-right:1px solid var(--line); }nav button:last-child { border-right:none; }nav button.active { color:var(--brand-dark); background:transparent; border-bottom:2px solid var(--brand); }.view { display:none; }.view.active { display:block; }.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }.card { background:var(--white); box-shadow:var(--card-shadow); border:1px solid var(--line); border-radius:9px; padding:17px; }.metric { font-size:29px; font-weight:750; color:var(--brand-dark); }.muted { color:var(--muted); font-size:13px; }.status { display:inline-block; padding:3px 8px; font-size:12px; font-weight:700; border-radius:99px; }.status.good { background:#e2f0e5; color:var(--good); }.status.warn { background:#f7ecd8; color:var(--warn); }.status.bad { background:#f7e3e0; color:var(--bad); }
.section-head { display:flex; justify-content:space-between; gap:18px; align-items:center; margin:28px 0 12px; }.section-head:first-child { margin-top:0; }.section-head h2 { font:600 20px var(--font-editorial); letter-spacing:.01em; }.panel { background:var(--white); border:1px solid var(--line); border-radius:9px; overflow:auto; }.toolbar { padding:12px; display:flex; flex-wrap:wrap; gap:9px; border-bottom:1px solid var(--line); }.toolbar input { flex:1 1 260px; } table { width:100%; border-collapse:collapse; white-space:nowrap; }th,td { padding:10px 12px; text-align:left; border-bottom:1px solid #ece5d6; }th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; background:#faf7f0; }td.number,th.number { text-align:right; }.form-grid { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:10px; align-items:end; }.form-grid label { display:grid; gap:4px; font-size:12px; font-weight:700; color:var(--muted); }.wide { grid-column:span 2; }.recipe-layout { display:flex; flex-direction:column; gap:24px; }
.recipe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
.recipe-card { display:flex; flex-direction:column; gap:14px; text-align:left; background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:22px; box-shadow:var(--card-shadow); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.recipe-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(33,27,22,.1); }
.recipe-card.selected { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--card-shadow); }
.recipe-card.archived-row { opacity:.6; }
.rc-header { display:flex; flex-direction:column; gap:3px; }
.rc-header strong { font-family:var(--font-editorial); font-size:17px; line-height:1.25; }
.rc-section { font-size:12px; color:var(--muted); }
.rc-cost-row { padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.rc-label { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.rc-cost { font-size:20px; font-weight:750; letter-spacing:-.01em; }
.rc-cost-incomplete { font-size:13px; font-weight:600; color:var(--bad); line-height:1.4; }
.rc-meta-row { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; }
.rc-footer { display:flex; justify-content:space-between; align-items:center; }
.rc-footer .chevron { color:var(--brand-taupe); font-size:18px; }
.recipe-grid-more { display:flex; justify-content:center; }
.recipe-title { font-family:var(--font-editorial); }
.empty { padding:24px; color:var(--muted); text-align:center; } .right { text-align:right; }
footer { display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:16px clamp(20px,5vw,64px) 26px; color:var(--muted); font-size:13px; }
@media(max-width:800px){.topbar{align-items:start;flex-direction:column}.form-grid{grid-template-columns:repeat(2,1fr)}.wide{grid-column:span 2}
  /* Stacked header: the lockup shrinks and the title block loses its divider,
     so the mark never crowds a narrow screen. */
  .header-dpos-lockup img{height:56px}
  .brand-title-block{border-left:none;padding-left:0}
  .brand-title-block h1{font-size:26px}}
/* Below this width the operating line is the first thing to go: it is identity,
   not information, and the module name has to keep the room. */
@media(max-width:420px){.brand-operating-line{display:none}.header-dpos-lockup img{height:46px}}
@media(max-width:600px){.recipe-grid{grid-template-columns:1fr}}
.search-results{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--white);border:1px solid var(--line);border-radius:0 0 8px 8px;box-shadow:var(--card-shadow);max-height:260px;overflow:auto;}
.search-results.open{display:block;}
.search-result{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0ebdf;display:flex;flex-direction:column;gap:2px;}
.search-result:hover{background:var(--brand-soft);}
.search-result strong{font-size:13px;}
.search-result .muted{font-size:11px;}
.search-empty{padding:10px 12px;color:var(--muted);font-size:13px;}
.print-only-title{display:none;}
.pricing-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:end;padding:12px;border-bottom:1px solid var(--line);}
.pricing-toolbar label{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--muted);}
.price-input{width:100px;text-align:right;}
.price-input.unsaved{border-color:var(--brand);}
td.target-col{background:#f1ece0;font-weight:650;}
th.target-col{background:var(--brand-soft);}
tr.pricing-section-row td{font-weight:750;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-dark);background:var(--brand-soft);border-top:1px solid var(--line);}
.pricing-toolbar label.wide{grid-column:unset;flex:1 1 220px;}

/* Recipe Management Expansion (2026-08-24) */
.status.neutral{background:#eee7d8;color:var(--muted);}
.recipe-form{padding:12px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);}
.recipe-form-section{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px;align-items:end;}
.recipe-form-section label{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--muted);}
.recipe-form-section label.full{grid-column:1/-1;}
.recipe-form textarea{font:inherit;border:1px solid var(--line);border-radius:5px;padding:6px 8px;resize:vertical;}
.method-list{margin:0 14px 14px;padding-left:26px;}
.method-list li{margin-bottom:6px;}
.notes-block{margin:0 14px 14px;white-space:pre-wrap;background:#faf7f0;border:1px solid var(--line);border-radius:6px;padding:10px 12px;}
.recipe-description{color:var(--muted);}
.version-history{width:auto;margin-top:8px;}
.version-history th,.version-history td{padding:6px 10px;font-size:12px;}
.recipe-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:end;padding:12px;background:var(--white);border:1px solid var(--line);border-radius:9px;margin-bottom:14px;}
.recipe-toolbar label{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--muted);}
/* Menu Cost & Pricing Control - UX/bug fixes (2026-08-24) */
#pricingRows tr:not(.pricing-section-row):hover{background:#faf7ef;}
.dish-col{position:sticky;left:0;z-index:1;box-shadow:2px 0 4px -2px rgba(0,0,0,.08);}
th.dish-col{background:#faf7f0;}
#pricingRows tr:not(.pricing-section-row) .dish-col{background:var(--white);}
.fix-cost-btn{margin-left:6px;font-size:12px;font-weight:700;text-decoration:underline;white-space:nowrap;}
@keyframes issueHighlightPulse{0%{background:#fff4d6;}100%{background:transparent;}}
tr.issue-highlight,tr[data-line-issue].issue-highlight{animation:issueHighlightPulse 2.5s ease-out;}
/* The pricing table is genuinely wide (13 columns) - keep it at a readable
   size and let it scroll horizontally inside its own panel rather than
   shrinking text to fit or breaking the page's own width. */
#pricing .panel{overflow-x:auto;}
#pricing table{min-width:1180px;}
.help-icon{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:50%;width:18px;height:18px;line-height:1;padding:0;font-size:12px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;vertical-align:middle;}
.help-icon:hover{background:var(--brand-soft);color:var(--brand-dark);}
.help-modal-overlay{position:fixed;inset:0;background:rgba(7,63,61,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.help-modal{background:var(--white);border-radius:9px;max-width:440px;width:100%;max-height:80vh;overflow:auto;box-shadow:var(--card-shadow);}
.help-modal p{margin:0 0 12px;font-size:14px;line-height:1.5;}
.help-modal p strong{display:block;color:var(--brand-dark);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;}
/* Financial Control block (Change #06, Phase 1) - deliberately plain: no
   charts, no gauges, reuses the same .status pill and metric typography
   already used everywhere else on this card, just grouped under its own
   quiet heading so Food Cost %/Gross Margin %/Target read as the primary
   figures and Selling Price/Cost per Serving/Gross Profit as supporting. */
.recipe-primary{display:grid;grid-template-columns:1.3fr 1fr;gap:0 32px;align-items:start;padding:0 14px;}
.recipe-primary-left,.recipe-primary-right{min-width:0;}
/* Theoretical vs actual food cost: sales table beside the Stock-boundary inputs, stacked on narrow screens. */
.tfc-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start;min-width:0;}
.tfc-grid>*{min-width:0;}
@media (max-width:1040px){.tfc-grid{grid-template-columns:1fr;}}
.tfc-grid .form-grid{grid-template-columns:1fr 1fr;}
.tfc-grid .form-grid input{min-width:0;width:100%;box-sizing:border-box;}
@media (max-width:600px){.tfc-grid .form-grid{grid-template-columns:1fr;}.tfc-grid .form-grid .wide{grid-column:auto;}}
/* Any wide table scrolls inside its own container - the page never scrolls sideways. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.recipe-primary-left .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:6px;}
.recipe-primary-left .table-scroll table{border:0;}
.recipe-primary-right{padding-top:14px;}
@media(max-width:1040px){.recipe-primary{grid-template-columns:1fr;}.recipe-primary-right{padding-top:0;}}
.recipe-primary-left .grid > article{min-width:0;}
@media(max-width:640px){.fc-primary-row,.fc-supporting-row{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.recipe-primary-left .grid{grid-template-columns:1fr;}.fc-primary-row,.fc-supporting-row{grid-template-columns:1fr;}.driver-row{grid-template-columns:1fr 70px 30px;}}
.financial-control-block{margin:20px 0 14px;padding-top:20px;border-top:1px solid var(--line);}
.fc-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;color:var(--muted);margin:14px 0;}
.fc-meta .k{text-transform:uppercase;letter-spacing:.05em;font-size:10px;color:var(--brand-taupe);display:block;margin-bottom:3px;}
.fc-primary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.fc-primary-item .metric{font-size:22px;}
.fc-foodcost .metric{font-size:25px;}
.fc-target-line{font-size:11.5px;margin-top:4px;}
.fc-target-line strong{color:var(--ink);}
.fc-supporting-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-size:13px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.fc-supp-value{font-weight:650;font-size:15px;}
.fc-supporting{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;padding-top:10px;border-top:1px solid var(--line);}
.fc-subsection{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.fc-subhead{font-family:var(--font-editorial);font-size:13px;font-weight:700;margin-bottom:10px;}
.fc-vat-note{font-size:11px;margin:10px 0 0;line-height:1.5;}
.fc-cost-history{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;}
.fc-history-row{display:flex;flex-wrap:wrap;gap:4px 14px;padding:3px 0;}
.fc-cost-history-empty{font-size:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
/* DEMO illustration (Change #06B) - visually separated with a dashed
   border and a bronze tag so it reads unmistakably as sample data, never
   confusable with the real figures above it. */
.fc-demo{margin-top:12px;padding:10px 12px;border:1px dashed var(--brand-taupe);border-radius:6px;background:var(--paper);}
.fc-demo-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--brand);margin-bottom:6px;}
.fc-demo-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;color:var(--brand);background:var(--brand-soft);border-radius:3px;padding:1px 5px;margin-left:4px;vertical-align:middle;}
.completion-list{list-style:none;margin:0 14px 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 14px;font-size:13px;}
.completion-list li{padding-left:20px;position:relative;}
.completion-list li.ok::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700;}
.completion-list li.pending::before{content:"○";position:absolute;left:0;color:var(--warn);}
.driver-row{display:grid;grid-template-columns:160px 1fr 40px;gap:10px;align-items:center;font-size:13px;margin-bottom:6px;}
.driver-bar{background:#eee7d8;border-radius:6px;height:10px;overflow:hidden;}
.driver-bar-fill{background:var(--brand);height:100%;}
/* Reports (Phase 04). An editorial stat band, not a KPI card grid - fine
   rules and integrated typography instead of bordered/shadowed boxes. */
.report-summary-strip{display:flex;flex-wrap:wrap;margin:20px 0 30px;padding-top:16px;border-top:1px solid var(--brand-taupe);border-bottom:1px solid var(--line);}
.report-summary-item{flex:1 1 0;min-width:150px;padding:0 20px 16px 0;margin-right:20px;border-right:1px solid var(--line);}
.report-summary-item:last-child{border-right:none;margin-right:0;padding-right:0;}
.report-section-intro{font-size:12.5px;margin:2px 0 12px;max-width:70ch;}
.report-driver-block{margin-bottom:10px;}
.report-empty-block{padding:16px;font-size:13px;color:var(--muted);line-height:1.6;border-style:dashed;}
.report-empty-block strong{color:var(--ink);}
.report-end{margin-top:30px;padding-top:14px;border-top:1px solid var(--brand-taupe);text-align:center;}
.report-end-mark{font-family:var(--font-editorial);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:4px;}
@media(max-width:768px){.report-summary-strip{flex-direction:column;}.report-summary-item{border-right:none;border-bottom:1px solid var(--line);padding:0 0 14px;margin:0 0 14px;}.report-summary-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}}
@media(max-width:800px){.recipe-form-section{grid-template-columns:repeat(2,1fr)}}
/* Menu Cost & Pricing Control's table has many columns - too wide for
   portrait. CSS named page ("page: pricing-landscape") switches only that
   print job to landscape; every other print job (recipes, one at a time)
   stays default/portrait. Applied to #pricing itself (not just
   .printable-area) - naming it only on the inner element forced a page-break
   at the point the name changed, producing a blank leading page. */
#pricing{page:pricing-landscape;}
@page pricing-landscape{size:landscape;margin:8mm;}
@media print{
  body *{visibility:hidden;}
  .printable-area,.printable-area *{visibility:visible;}
  .printable-area{position:absolute;top:0;left:0;width:100%;}
  .print-only-title{display:block;margin-bottom:14px;}
  .print-only-title h2{font-size:22px;display:flex;align-items:center;gap:7px;}
  .print-mark{flex-shrink:0;vertical-align:middle;}
  /* Printed identity: quiet, text-only, and legible in greyscale. It sits under
     the sheet rather than floating over it, so it can never cover a figure. */
  .print-brand-footer{visibility:visible!important;display:flex!important;justify-content:space-between;gap:12px;
    position:absolute;left:0;right:0;padding-top:7px;margin-top:16px;border-top:1px solid #c9bba4;
    font-size:9pt;letter-spacing:.04em;color:#6e6459;}
  .print-brand-footer strong{letter-spacing:.1em;color:#2b2622;}
  .no-print,.no-print *{display:none!important;}
  .card-shadow,.panel{box-shadow:none;border:none;}
  .recipe-primary{display:block;}
  .recipe-primary-right{padding-top:0;}
  table{page-break-inside:avoid;}
  /* The Menu Cost & Pricing Control table can be 45+ rows - it can never fit
     "whole" on one page. The blanket avoid-splitting rule above (meant for
     small recipe-ingredient tables) was making the browser defer the entire
     table to the next page rather than split it, leaving page 1 almost
     empty under the title. Override just for this table: let it paginate
     row-by-row, only keeping each individual row intact. */
  #pricing .printable-area table{page-break-inside:auto;}
  #pricing .printable-area tr{page-break-inside:avoid;}
  #pricing .printable-area thead{display:table-header-group;}
  /* Collapse the LAYOUT SPACE (not just visibility) of everything that is
     not the printable area itself. visibility:hidden alone still reserves
     each hidden element's full box height, which was producing leading and
     trailing blank pages (the app's whole normal-flow height, including the
     nav/header/toolbars/recipe list sidebar/stat cards, was still being
     paginated even though none of it was visible). */
  header.topbar, main > nav, .notice, footer,
  #recipes > .section-head, #recipes > .recipe-toolbar, .recipe-grid, .recipe-grid-more,
  #pricing > .section-head, #pricing > .grid,
  #reports > .section-head { display:none!important; }
  #pricing .printable-area table{font-size:9.5px;table-layout:auto;}
  #pricing .printable-area th, #pricing .printable-area td{padding:4px 5px;white-space:normal;}
}

/* Dashboard greeting + supplier price alert (2026-09-06) */
.dash-greeting { margin:0 0 12px; }
.dash-status { margin-bottom:16px; border-left:4px solid var(--brand); }
.dash-status.ok { border-left-color:#2e7d32; }
.dash-status.warn { border-left-color:#ef6c00; }
.dash-status.bad { border-left-color:#c62828; }
.dash-status p { margin:4px 0; }
/* Master Ingredients table navigation (2026-09-06): the 522-row table scrolls
   inside its own box so the column headings stay visible and the horizontal
   scrollbar is always within reach; the page header, search and filters
   scroll away normally. */
.mi-table-scroll{max-height:calc(100vh - 120px);overflow:auto;-webkit-overflow-scrolling:touch;}
.mi-table-scroll table{border-collapse:separate;border-spacing:0;}
.mi-table-scroll thead th{position:sticky;top:0;z-index:2;background:#faf7f0;box-shadow:inset 0 -1px 0 #ece5d6;}

/* --- DPOS Simple Food Cost v1 (2026-09-15) -------------------------------
   Kitchen-first recipe card. Existing DPOS visual language; no new colours,
   no decoration - fewer things, larger, in plain language. */
.simple-card{padding:16px 14px 6px;border-bottom:1px solid var(--line)}
.simple-figures{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.simple-figure{display:flex;flex-direction:column;gap:3px;min-width:0}
.simple-label{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.simple-value{font-size:22px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.simple-value input{font:inherit;font-size:22px;font-weight:700;width:100%;max-width:180px;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:transparent;color:inherit;font-variant-numeric:tabular-nums}
.simple-value input:focus{outline:2px solid var(--accent,#8a6a3b);outline-offset:1px}
.simple-status-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.simple-status{font-size:12px;letter-spacing:.05em}
.simple-attention{margin:10px 0 4px}
.simple-attention-head{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.simple-attention ul{margin:0;padding-left:18px}
.simple-attention li{font-size:13.5px;line-height:1.55;margin:2px 0}
/* Progressive disclosure: everything advanced stays, but closed by default. */
.adv-block{border-top:1px solid var(--line);margin:0}
.adv-block>summary{cursor:pointer;padding:10px 14px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--muted);list-style:none}
.adv-block>summary::-webkit-details-marker{display:none}
.adv-block>summary::before{content:"▸ ";display:inline-block;transition:transform .12s ease}
.adv-block[open]>summary::before{content:"▾ "}
.adv-block>summary:hover{color:inherit}
@media(max-width:760px){
  .simple-figures{grid-template-columns:repeat(2,1fr);gap:12px}
  .simple-value{font-size:19px}
  .simple-value input{font-size:19px;max-width:100%}
}
@media(max-width:420px){
  .simple-figures{grid-template-columns:1fr}
  .simple-card{padding:14px 12px 6px}
}
@media print{.adv-block>summary{display:none}.adv-block{border-top:none}}

/* Primary recipe workflow on a phone: the ingredient rows stack instead of
   scrolling sideways. Main rows carry data-line-issue; the relink/price
   sub-rows do not, so they keep their normal full-width layout. */
@media(max-width:560px){
  #ingredientLinesTable{min-width:0;width:100%;display:block}
  #ingredientLinesTable thead{display:none}
  #ingredientLinesTable tbody,#ingredientLinesTable tr{display:block;width:100%}
  #ingredientLinesTable tr[data-line-issue]{display:grid;grid-template-columns:1fr auto auto;gap:2px 8px;align-items:baseline;padding:10px 12px;border-bottom:1px solid var(--line)}
  #ingredientLinesTable tr[data-line-issue]>td{display:block;border:none;padding:0}
  #ingredientLinesTable tr[data-line-issue]>td:nth-child(1){grid-column:1;grid-row:1;font-weight:600;overflow-wrap:anywhere}
  #ingredientLinesTable tr[data-line-issue]>td:nth-child(2){grid-column:2;grid-row:1;text-align:right;font-variant-numeric:tabular-nums}
  #ingredientLinesTable tr[data-line-issue]>td:nth-child(3){grid-column:3;grid-row:1;color:var(--muted)}
  #ingredientLinesTable tr[data-line-issue]>td:nth-child(4){grid-column:1/-1;grid-row:2;text-align:left;margin-top:4px}
  #ingredientLinesTable tr[data-line-issue]>td:nth-child(5){grid-column:1/-1;grid-row:3;margin-top:6px}
  #ingredientLinesTable tr:not([data-line-issue])>td{display:block;width:100%}
  #recipes .table-scroll{overflow-x:visible}
}
@media(max-width:560px){
  #recipes .recipe-primary-left .table-scroll{overflow-x:visible}
  #ingredientLinesTable tr:not([data-line-issue]) input,
  #ingredientLinesTable tr:not([data-line-issue]) select{max-width:100%;box-sizing:border-box}
  #ingredientLinesTable tr:not([data-line-issue]) .toolbar,
  #ingredientLinesTable tr:not([data-line-issue]) form{flex-wrap:wrap;gap:6px}
  #ingredientLinesTable *{max-width:100%;box-sizing:border-box}
}

/* --- Invoice Intelligence v1: the review screen the kitchen reads -------- */
.invoice-read { margin-bottom: 14px; }
.invoice-review { margin: 14px 0; }
.invoice-warning {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 6px;
  background: #fdf3e3; border: 1px solid #e6c98d; color: #6d4c14; font-size: 13px;
}
.invoice-review-list { list-style: none; margin: 10px 0 0; padding: 0; }
.invoice-review-list li {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--line);
}
.invoice-review-list li strong { font-weight: 600; }
.invoice-review-list li .muted { font-size: 12.5px; }
.invoice-movements { margin-top: 12px; }
.invoice-movements h4 {
  margin: 0 0 4px; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.invoice-movements ul { margin: 0; padding-left: 18px; font-size: 13px; }
.invoice-movements li { padding: 2px 0; }

@media (max-width: 560px) {
  /* On a phone the state badge leads and the sentence wraps beneath it. */
  .invoice-review-list li { flex-direction: column; gap: 3px; }
  .invoice-read input[type=file] { max-width: 100%; }
}

/* --- In-page dialogs and toasts (Product Completion, 27 Sep 2026) ---------
   One calm dialog replaces the browser's alert/confirm/prompt. Same paper,
   ink and bronze as everything else; the only emphasis is the primary action. */
.dpos-dialog-overlay{position:fixed;inset:0;z-index:200;background:rgba(43,38,34,.42);display:flex;align-items:center;justify-content:center;padding:16px;animation:dposFade .12s ease-out}
@keyframes dposFade{from{opacity:0}to{opacity:1}}
.dpos-dialog{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 48px rgba(31,27,22,.22);width:100%;max-width:520px;max-height:min(92vh,720px);display:flex;flex-direction:column;overflow:hidden}
.dpos-dialog.danger{border-top:3px solid var(--bad)}
.dpos-dialog-title{font:600 18px/1.3 var(--font-editorial);padding:18px 20px 0;margin:0}
.dpos-dialog-title:empty{display:none}
.dpos-dialog-body{padding:14px 20px 4px;overflow:auto;font-size:14.5px;line-height:1.55}
.dpos-dialog-body p{margin:0 0 10px}
.dpos-dialog-body p:last-child{margin-bottom:0}
.dpos-dialog-actions{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px 18px;border-top:1px solid var(--line);margin-top:10px;flex-wrap:wrap}
.dpos-dialog-actions button{min-height:42px;padding:9px 16px}
.dpos-dialog.danger .dpos-dialog-primary{background:var(--bad)}
.dpos-dialog-field{display:grid;gap:5px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--muted)}
.dpos-dialog-field span:empty{display:none}
.dpos-dialog-field input,.dpos-dialog-field select,.dpos-dialog-field textarea{font:inherit;font-weight:400;font-size:15px;color:var(--ink);width:100%;min-height:42px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--white)}
.dpos-dialog-field textarea{resize:vertical}
.dpos-dialog-field small{font-weight:400;color:var(--muted);font-size:12px;line-height:1.45}
.dpos-dialog-field.check{grid-template-columns:auto 1fr;align-items:center}
.dpos-dialog-field.check input{width:auto;min-height:0}
.dpos-dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.dpos-dialog-grid .full{grid-column:1/-1}
@media(max-width:560px){.dpos-dialog-grid{grid-template-columns:1fr}.dpos-dialog-overlay{align-items:flex-end;padding:0}.dpos-dialog{border-radius:14px 14px 0 0;max-height:94vh}}
.dpos-choices{display:grid;gap:8px;margin-top:12px}
.dpos-choice{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:11px 13px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--white)}
.dpos-choice:hover{background:var(--brand-soft)}
.dpos-choice input{margin-top:3px;min-height:0}
.dpos-choice strong{display:block;font-weight:600;font-size:14.5px}
.dpos-choice small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.45}
.dpos-choice:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.dpos-toast-host{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:210;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.dpos-toast-host.show{opacity:1;transform:translate(-50%,0)}
.dpos-toast{background:var(--brand-dark);color:var(--white);padding:10px 16px;border-radius:8px;font-size:14px;box-shadow:0 8px 24px rgba(31,27,22,.25);max-width:min(90vw,520px)}
.dpos-toast.warn{background:var(--warn)}
.dpos-toast.bad{background:var(--bad)}
@media print{.dpos-dialog-overlay,.dpos-toast-host{display:none!important}}

/* --- Welcome / setup and Settings (Product Completion, 27 Sep 2026) ------- */
.dpos-setup-overlay{position:fixed;inset:0;z-index:150;background:var(--paper);overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:clamp(16px,5vh,56px) 16px}
.dpos-setup{width:100%;max-width:640px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--card-shadow);padding:clamp(20px,4vw,36px)}
.dpos-setup-brand{display:flex;align-items:center;gap:10px;font:600 13px var(--font-operational);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:18px}
.dpos-setup h1{font:600 clamp(22px,3.4vw,30px)/1.2 var(--font-editorial);margin:0 0 8px;text-wrap:balance}
.dpos-setup-intro{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 6px;max-width:60ch}
.dpos-setup .dpos-dialog-field{margin-top:14px}
.dpos-setup-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.dpos-setup-actions .dpos-dialog-primary{min-height:46px;padding:10px 20px;font-size:15px}
.dpos-setup-foot{margin-top:18px;font-size:12.5px;color:var(--muted);line-height:1.5}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.settings-panel{padding:18px 20px;overflow:visible}
.settings-panel h3{font:600 16px var(--font-editorial);margin:0 0 10px}
.settings-panel .dpos-dialog-field{margin-top:10px}
.settings-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;margin:12px 0 0;padding:0}
.settings-facts div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:4px 0;font-size:13.5px}
.settings-facts dt{color:var(--muted)}.settings-facts dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.settings-panel.danger-zone{border-color:#e6c1b9}
@media print{.dpos-setup-overlay{display:none!important}}
/* While the welcome screen is up the application behind it is not merely
   covered but removed from the page, so it cannot be reached by keyboard or
   seen below the fold on a phone. The overlay then sits in normal flow. */
body.dpos-setup-active > :not(.dpos-setup-overlay):not(.dpos-dialog-overlay):not(.dpos-toast-host){display:none!important}
body.dpos-setup-active .dpos-setup-overlay{position:static;min-height:100vh}

/* --- Global search, Suppliers, Price review, Attention (27 Sep 2026) ------ */
.global-search-label{flex:1 1 220px;max-width:360px}
.global-search-wrap{position:relative;display:block}
#globalSearch{width:100%;min-height:36px}
.global-search-results{max-height:min(70vh,520px);z-index:60}
.search-group-title{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);padding:8px 12px 2px;background:var(--paper)}
.pr-list{display:grid;gap:14px}
.pr-card{padding:16px 18px}
.pr-card.pr-focus{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--card-shadow)}
.pr-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.pr-head a{color:inherit;text-decoration:none}
.pr-head a:hover{text-decoration:underline}
.pr-figures{display:flex;flex-wrap:wrap;gap:8px 28px}
.pr-figures>div{display:grid;gap:2px;font-size:15px}
.pr-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pr-up{color:var(--bad)}.pr-down{color:var(--good)}
.pr-impact{margin-top:10px;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:6px;font-size:13.5px;line-height:1.5}
.pr-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.pr-actions button{min-height:40px}
.attention-group{background:var(--white);border:1px solid var(--line);border-radius:9px;margin-bottom:12px;padding:0 16px}
.attention-group>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font:600 16px var(--font-editorial)}
.attention-group>summary::-webkit-details-marker{display:none}
.attention-count{font:700 13px var(--font-operational);color:var(--brand-dark);background:var(--brand-soft);border-radius:99px;padding:3px 10px}
.attention-count .muted{font-weight:500}
.attention-intro{font-size:13px;margin:-4px 0 8px;max-width:70ch}
.attention-list{list-style:none;margin:0 0 6px;padding:0}
.attention-list li{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.attention-list li.quiet{opacity:.72}
.attention-list li .muted{font-size:12.5px;line-height:1.45;margin-top:2px}
.attention-list li button{flex-shrink:0;min-height:38px}
@media(max-width:600px){.attention-list li{flex-direction:column;align-items:stretch}.pr-actions button{flex:1 1 auto}}
/* The toolbar row: search on the left, which kitchen and menu on the right.
   Out of the masthead so the DPOS identity keeps its room. */
.app-toolbar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:end;justify-content:space-between;margin:-8px 0 18px}
.app-toolbar .context-selectors{margin-left:auto}
.topbar{padding-top:26px;padding-bottom:26px}
.header-dpos-lockup img{height:64px}
@media(max-width:800px){.app-toolbar{flex-direction:column;align-items:stretch}.app-toolbar .context-selectors{margin-left:0}.global-search-label{max-width:none}}
/* On a phone the section tabs are one scrollable strip, not a five-row block. */
@media(max-width:800px){
  nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding:0 20px}
  nav::-webkit-scrollbar{display:none}
  nav button{flex:0 0 auto;white-space:nowrap;padding:12px 14px;min-height:44px}
  .section-head{flex-wrap:wrap}
  .form-grid,.recipe-form-section{grid-template-columns:1fr}
  button,select,input{min-height:44px}
  .text-button{min-height:0}
}

/* --- Accessibility (27 Sep 2026) ------------------------------------------
   Keyboard focus is always visible, on every control, in the brand colour;
   motion is reduced for people who ask for it; status is never colour alone
   (every .status carries its word). */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
button:focus-visible,.recipe-card:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shop-done td{opacity:.5;text-decoration:line-through}
/* In-place line editing on the recipe: the inputs are the screen; the plain
   figures are the print. */
.print-only-qty{display:none}
.line-qty-edit{width:88px;text-align:right;min-height:34px}
.line-unit-edit{width:74px;min-height:34px}
.line-actions{white-space:nowrap}
.line-actions .move-line{padding:0 6px;font-size:14px;min-height:0}
.line-actions .move-line:disabled{opacity:.3;cursor:default}
@media print{
  .print-only-qty{display:inline}
  /* KITCHEN COPY: no money anywhere on the sheet. */
  body.print-kitchen #ingredientLinesTable th:nth-child(4),body.print-kitchen #ingredientLinesTable td:nth-child(4),
  body.print-kitchen .simple-card,body.print-kitchen .recipe-primary-right,body.print-kitchen .adv-block,
  body.print-kitchen .financial-control-block,body.print-kitchen .fc-demo{display:none!important}
}
/* Recipe photo: quiet, bounded, printable. */
.recipe-photo-block{margin:10px 14px 0}
.recipe-photo-block img{display:block;max-width:100%;max-height:320px;border-radius:8px;border:1px solid var(--line);object-fit:cover}
.recipe-photo-actions{display:flex;gap:14px;margin-top:6px;font-size:12.5px}
.recipe-photo-actions label{cursor:pointer}
@media print{.recipe-photo-block img{max-height:70mm}}
@media print{
  /* KITCHEN COPY, continued: the readiness and completion blocks are
     commercial control, not cooking instructions. */
  body.print-kitchen .completion-list,body.print-kitchen .simple-attention,body.print-kitchen .simple-status-row,
  body.print-kitchen .section-head:has(+ .completion-list),body.print-kitchen .section-head:has(+ .simple-attention){display:none!important}
}
@media print{
  /* KITCHEN COPY, final rule: on the recipe sheet only the ingredient lines
     table, the photo and the method print. Every other table (suggested
     selling prices, cost summaries, version history) and the price-movement
     note are commercial and stay off the kitchen's paper. */
  body.print-kitchen #printableRecipe table:not(#ingredientLinesTable),
  body.print-kitchen #printableRecipe .section-head:has(+ table:not(#ingredientLinesTable)),
  body.print-kitchen #printableRecipe .section-head:has(+ p.muted),
  body.print-kitchen #printableRecipe .section-head + p.muted,
  body.print-kitchen #printableRecipe p.muted:has(.status),
  body.print-kitchen #printableRecipe .cost-change-block,
  body.print-kitchen #printableRecipe .section-head:has(+ .cost-change-block){display:none!important}
}