/* =============================================================================
   PROPERGRAM SUBSCRIPTION DASHBOARD  ·  Stylesheet
   =============================================================================
   Every visual rule for the app lives in this one file, organised into the
   numbered sections below (search "==== N." to jump to one). This file does
   not need editing to add new data or customers — see js/config.js for the
   things you're most likely to want to change (firm details, gravy list,
   delivery zone prices).
   ========================================================================== */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --ink:#0C2718; --ink2:#163A24; --cream:#FEE7D4; --orange:#E98624;
  --paper:#FBF9F6; --card:#fff; --line:#E6E0D6; --muted:#6E6559;
  --red:#B8402B; --ok:#3E7D4F; --warn:#B07A11;
  --display:'Poppins',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:10px;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
nav button:focus-visible{outline-offset:-2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   3. UTILITY CLASSES  (used everywhere — do not delete)
   ============================================================ */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.r{text-align:right}
.c{text-align:center}
.hidden{display:none!important}
.muted{color:var(--muted)}
.mono-sm{font-family:var(--mono);font-size:12px}
.section-title{font-family:var(--display);font-size:14px;margin:0 0 2px;font-weight:700}
.section-sub{margin:0 0 4px;color:var(--muted);font-size:12px}
.row-flex{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.stack-14{display:flex;flex-direction:column;gap:14px}
.gap-8{gap:8px}
.gap-10{gap:10px}
.mt-14{margin-top:14px}
.mb-10{margin-bottom:10px}

/* ============================================================
   4. LAYOUT SHELL
   ============================================================ */
#shell{display:flex;min-height:100vh}

/* -- sidebar -- */
#side{width:228px;flex:0 0 228px;background:var(--ink);color:var(--cream);
      display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
#brand{padding:20px 18px 16px;display:flex;align-items:center;gap:11px;
       border-bottom:1px solid rgba(254,231,212,.14)}
#brand img{width:38px;height:38px;border-radius:8px;display:block}
#brand b{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.02em;line-height:1.15;display:block}
#brand span{font-size:10px;opacity:.62;letter-spacing:.09em;text-transform:uppercase}
nav{padding:12px 10px;flex:1;overflow-y:auto}
nav button{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;
           color:var(--cream);opacity:.72;padding:10px 12px;border-radius:8px;
           cursor:pointer;text-align:left;font-weight:500;margin-bottom:2px}
nav button:hover{opacity:1;background:rgba(254,231,212,.08)}
nav button.on{opacity:1;background:rgba(233,134,36,.16);box-shadow:inset 2px 0 0 var(--orange)}
nav button svg{width:16px;height:16px;flex:0 0 16px}
#sidefoot{padding:12px 16px;font-size:11px;opacity:.5;
          border-top:1px solid rgba(254,231,212,.14);line-height:1.5}

/* -- main + views -- */
#main{flex:1;min-width:0;padding:26px 30px 60px}
.head{display:flex;align-items:flex-end;justify-content:space-between;
      gap:18px;margin-bottom:20px;flex-wrap:wrap}
.head h1{font-family:var(--display);font-weight:700;font-size:23px;margin:0 0 3px;letter-spacing:-.01em}
.head p{margin:0;color:var(--muted);font-size:13px}
.view{display:none}
.view.on{display:block}

/* ============================================================
   5. COMPONENTS  (button, card, form control, pill, table)
   ============================================================ */
.btn{background:var(--ink);color:var(--cream);border:0;padding:9px 15px;
     border-radius:8px;cursor:pointer;font-weight:600;font-size:13px}
.btn:hover{background:var(--ink2)}
.btn.pri{background:var(--orange);color:#2A1600}
.btn.pri:hover{filter:brightness(1.06)}
.btn.gh{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.gh:hover{background:#fff;border-color:var(--ink)}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:6px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.danger{color:var(--red);border-color:#E4C4BC}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card-flush{padding:0}
.card-hd{padding:16px 18px 8px}
.card-body{padding:0 18px 16px}

.grid{display:grid;gap:14px}

label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;
      text-transform:uppercase;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
                     border-radius:8px;background:#fff;outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(233,134,36,.15)}
textarea{resize:vertical;min-height:60px}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
   color:var(--muted);font-weight:600;padding:9px 10px;
   border-bottom:1px solid var(--line);white-space:nowrap}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th.sortable .arr{margin-left:3px;opacity:.4;font-size:9px}
th.sortable.sorted-asc .arr,
th.sortable.sorted-desc .arr{opacity:1;color:var(--orange)}
td{padding:9px 10px;border-bottom:1px solid #F2EEE7;vertical-align:middle}
tbody tr:hover{background:#FDFBF8}

.pill{display:inline-block;padding:2.5px 8px;border-radius:20px;font-size:11px;font-weight:600}
.pill.ok{background:#E7F1E9;color:var(--ok)}
.pill.warn{background:#FBF0D8;color:var(--warn)}
.pill.bad{background:#F8E4E0;color:var(--red)}
.pill.mute{background:#EFEBE4;color:var(--muted)}

.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty b{display:block;font-family:var(--display);font-size:15px;color:var(--ink);margin-bottom:6px}

/* ============================================================
   6. DASHBOARD — KPIs, charts, drilldown, gravy analytics
   ============================================================ */
#kpis{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px}
.kpi .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .v{font-family:var(--display);font-weight:700;font-size:25px;margin:7px 0 1px;letter-spacing:-.02em}
.kpi .s{font-size:11.5px;color:var(--muted)}
.kpi.alert{border-color:#EBC9C1;background:#FEF8F6}
.kpi.alert .v{color:var(--red)}
.kpi.click{cursor:pointer;transition:border-color .15s,transform .1s}
.kpi.click:hover{border-color:var(--ink)}
.kpi.picked{border-color:var(--orange);box-shadow:0 0 0 2px rgba(233,134,36,.15)}

/* monthly chart */
#chart{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px}
#chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
            align-items:center;gap:6px;min-width:0;cursor:pointer}
#chart .bx{width:100%;background:var(--ink);border-radius:4px 4px 0 0;min-height:2px}
#chart .col:hover .bx,#chart .col.on .bx{background:var(--orange)}
#chart .lb{font-size:10.5px;color:var(--muted);white-space:nowrap}
#chart .vl{font-family:var(--mono);font-size:10.5px;font-weight:600}

/* daily chart (with Y axis + gridlines) */
.chart-with-axis{display:flex;gap:8px;height:170px;padding:6px 0 4px}
.y-axis{display:flex;flex-direction:column;justify-content:space-between;
        width:44px;text-align:right;flex-shrink:0}
.y-axis span{font-size:10px;color:var(--muted);font-family:var(--mono);line-height:1}
.chart-body{position:relative;flex:1;display:flex;align-items:flex-end;gap:2px}
.gridlines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.gl{height:1px;background:#EFEBE4}
.dcol{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0;height:100%}
.dbx{width:100%;background:var(--ink);border-radius:2px 2px 0 0;min-height:2px;position:relative}
.dcol:hover .dbx{background:var(--orange)}
.dcol .dtip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
            background:var(--ink);color:var(--cream);padding:6px 10px;border-radius:6px;
            font-size:11px;white-space:nowrap;z-index:5;pointer-events:none;
            opacity:0;transition:opacity .12s;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.dcol:hover .dtip{opacity:1}
.dtip b{font-family:var(--mono)}
.dlb{font-size:9px;color:var(--muted);font-family:var(--mono);position:absolute;bottom:-16px;left:50%;transform:translateX(-50%)}

/* drilldown panel (shared: active list, expiring list, meals-this-month list) */
.ddhd{display:flex;justify-content:space-between;align-items:center;
      margin-bottom:12px;gap:12px}
.ddhd h3{font-family:var(--display);font-size:14px;margin:0;font-weight:700}
.ddhdsub{font-weight:400;color:var(--muted);font-size:13px}

/* gravy analytics */
.date-range{display:flex;gap:8px;align-items:flex-end}
.date-range label{margin-bottom:3px}
.date-range input{padding:6px 9px;font-size:12.5px}
.gvbar{display:grid;grid-template-columns:130px 1fr 60px;gap:12px;
       align-items:center;padding:6px 0}
.gvbar.top .gvname{color:var(--orange);font-weight:700}
.gvname{font-size:12.5px;font-weight:500}
.gvtrack{height:14px;background:#F1EEE7;border-radius:3px;overflow:hidden}
.gvfill{height:100%;background:var(--ink);transition:width .3s}
.gvbar.top .gvfill{background:var(--orange)}
.gvcount{text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--muted)}

/* subs table progress bars */
.seg{display:flex;gap:1.5px;height:9px;margin-top:6px}
.seg i{flex:1;background:#E9E3DA;border-radius:1px;min-width:1px}
.seg i.f{background:var(--orange)}
.bar{height:9px;background:#E9E3DA;border-radius:5px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--orange)}
.alertrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #F2EEE7}
.alertrow:last-child{border:0}

/* ============================================================
   7. LOG MEALS — filters, search-with-submit, pagination
   ============================================================ */
#logfilter{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
           gap:10px;padding:0 18px 12px;border-bottom:1px solid var(--line)}
/* The search cell (always first) is twice the width of any other filter,
   so it stands out as the primary way to narrow a large table — the
   remaining columns share the rest of the row, proportionately smaller
   than before now that the base minmax has shrunk from 150px to 112px. */
#logfilter>div:first-child{grid-column:span 2;min-width:236px}
.search-row{display:flex;gap:6px}
.search-row input{flex:1}

/* The log-meal entry form has exactly 10 fields — a fixed 5-column grid
   gives 2 completely full rows with nothing left dangling on its own
   line. If a field is ever added or removed here, pick a new column
   count that still divides the field count evenly. */
/* The log form holds 12 fields, so 4 columns gives 3 completely full
   rows. Roti and Salad joined Gravy in Sep 2026, taking the form from ten
   fields to twelve. If a field is ever added or removed, revisit this
   column count so the grid keeps dividing evenly. */
.logform-grid{grid-template-columns:repeat(4,1fr)}
#logpag{padding:12px 18px;display:flex;justify-content:space-between;
        align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line)}
.pagelabel{font-family:var(--mono);font-size:12.5px;padding:0 8px}
.pagesize{display:flex;align-items:center;gap:6px}
.pagesize label{margin:0;text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:12.5px}
.pagesize select{padding:6px 10px}

/* ============================================================
   8. MODAL
   ============================================================ */
#veil{position:fixed;inset:0;background:rgba(12,39,24,.5);display:none;
      align-items:flex-start;justify-content:center;padding:34px 16px;overflow-y:auto;z-index:50}
#veil.on{display:flex}
.modal{background:#fff;border-radius:14px;width:100%;max-width:774px;padding:22px}
.modal h2{font-family:var(--display);font-size:18px;margin:0 0 16px}
.mrow{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.mh{font-family:var(--display);font-size:12px;margin:16px 0 8px;color:var(--orange);
    text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.mhs{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;font-size:11px;margin-left:6px}

/* ============================================================
   9. TOAST
   ============================================================ */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);
       background:var(--ink);color:var(--cream);padding:11px 20px;border-radius:9px;
       font-weight:500;opacity:0;transition:.24s;z-index:99;max-width:90vw;text-align:center}
#toast.on{transform:translateX(-50%) translateY(0);opacity:1}
#toast.bad{background:var(--red)}

/* ============================================================
   10. INVOICE
   ============================================================ */
#inv{background:#fff;border:1px solid var(--line);border-radius:var(--r);
     padding:34px;max-width:820px;margin:0 auto}
.ihead{display:flex;justify-content:space-between;gap:20px;border-bottom:2.5px solid var(--ink);padding-bottom:15px}
.ihead img{width:62px;height:62px;border-radius:8px}
.ico h2{font-family:var(--display);font-size:19px;margin:0;letter-spacing:-.01em}
.ico .tn{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);font-weight:700;margin:2px 0 7px}
.ico p{margin:1.5px 0;font-size:11.5px;color:var(--muted);line-height:1.45}
.ir{text-align:right}
.ifirm{display:flex;gap:14px}
.ir .tt{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ir p{margin:2px 0;font-size:11.5px}
.ibox{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0}
.ibox h4{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.ibox p{margin:1.5px 0;font-size:12px;line-height:1.5}
.commit{background:#F7F4EF;border:1px solid var(--line);border-left:3px solid var(--orange);
        border-radius:7px;padding:12px 14px;margin-bottom:16px}
.commit h4{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.commit dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px 16px;margin:0}
.commit dt{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.commit dd{margin:1px 0 0;font-size:12.5px;font-weight:600}
.plansec{margin:14px 0 8px}
.plansec h4{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
table.plan{width:auto;min-width:280px;border:1px solid var(--line);border-radius:7px;overflow:hidden}
table.plan td{padding:6px 14px;font-size:12px;border-bottom:1px solid #F0ECE5}
table.plan tr:last-child td{border-bottom:0}

/* Morning + evening plan blocks sit side by side on the invoice; on a
   narrow screen they wrap onto separate rows automatically. */
.planblocks{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.planblock{flex:0 1 auto}
.planblockhd{font-size:11px;font-weight:600;color:var(--ink);margin:0 0 5px;text-transform:none;letter-spacing:0}
.planeq{font-size:12px;color:var(--muted);padding:6px 10px;background:#F7F4EF;border-radius:6px;align-self:center}
.planeq b{color:var(--ink);font-weight:600}

/* Small labels used INSIDE the customer edit modal for the
   plan-detail subsections and the Custom Bowl auto-price display. */
.planh{font-size:11px;font-weight:600;color:var(--ink);margin:12px 0 8px;text-transform:none;letter-spacing:0}
.planprice{font-size:11.5px;color:var(--muted);margin-top:8px;padding:6px 10px;background:#F7F4EF;border-radius:6px;min-height:0}
.planprice b{color:var(--ink)}

#ilines{font-size:11.5px}
#ilines th{background:var(--ink);color:var(--cream);padding:7px 8px;border:0;font-size:9.5px}
#ilines td{padding:5.5px 8px;border-bottom:1px solid #F0ECE5}
/* "05 Sep'26 (M)" is the widest this ever gets. Fixed width + nowrap so
   the date can never wrap onto a second line, whatever the item text
   beside it does. */
#ilines th.datecell,#ilines td.datecell{width:104px;min-width:104px;white-space:nowrap}
/* The totals row: whatever the invoice wants to show on the left (the
   Add-on code key, today) beside the money ladder on the right. When
   there is nothing on the left the aside is simply empty and the ladder
   sits where it always did. */
.totrow{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:14px}
.totaside{flex:1;min-width:0}
.totrow .tot{margin-top:0;flex:none}
.addonkey{font-size:11px;max-width:270px}
.addonkey h4{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
             color:var(--muted);margin:0 0 6px}
.addonkey>div{display:flex;gap:9px;padding:2px 0;line-height:1.35}
.addonkey .code{min-width:32px;color:var(--ink)}
.addonkey .keynote{margin:7px 0 0;font-size:10px;color:var(--muted);line-height:1.4}
.addonkey>div span:last-child{color:var(--muted)}
.tot{margin-left:auto;width:320px;margin-top:14px;font-size:12.5px}
.tot div{display:flex;justify-content:space-between;padding:5px 0}
.tot .sub{border-top:1px solid var(--line);font-weight:600;margin-top:3px;padding-top:7px}
.tot .gt{border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
         font-family:var(--display);font-weight:700;font-size:15.5px;margin-top:6px;padding:9px 0}
.words{background:#F7F4EF;border-radius:7px;padding:10px 13px;margin-top:14px;font-size:11.5px}
.words b{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);display:block;margin-bottom:2px}
.ifoot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:32px;gap:20px}
.sign{text-align:right}
.note{font-size:10.5px;color:var(--muted);line-height:1.55;max-width:330px}

/* ============================================================
   11. PRINT
   ============================================================ */
@media print{
  @page{size:A4;margin:11mm}
  body{background:#fff}
  #side,.head,#invctl,#toast,#veil,.noprint{display:none!important}
  #main{padding:0}
  #inv,.invpane{border:0;padding:0;max-width:100%;border-radius:0}
  #ilines th,.commit,.words,table.plan.ratebuild tr.rbtot td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tbody tr,.tot,.words,.ifoot,.commit{page-break-inside:avoid}
  #ilines thead{display:table-header-group}
  .ihead{page-break-after:avoid}
}

/* ============================================================
   12. RESPONSIVE (mobile)
   ============================================================ */
@media(max-width:860px){
  #shell{flex-direction:column}
  #side{width:100%;flex:none;height:auto;position:static}
  nav{display:flex;overflow-x:auto;padding:8px}
  nav button{width:auto;white-space:nowrap;margin:0 2px 0 0}
  #sidefoot{display:none}
  #main{padding:18px 15px 50px}
  .ibox{grid-template-columns:1fr}
  .tot,.calcsummary{width:100%}
  .invpane{padding:18px}
  #loggrid{grid-template-columns:1fr!important}
  .modal .grid{grid-template-columns:1fr!important}
  .logform-grid{grid-template-columns:repeat(2,1fr)!important}
  #inv{padding:18px}
  .ihead{flex-direction:column}
  .ir{text-align:left}
  table{font-size:12.5px}
  .gvbar{grid-template-columns:100px 1fr 40px;gap:8px}
}
/* ============================================================
   13. LOGIN SCREEN
   ============================================================ */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
              background:var(--ink);padding:20px}
.login-card{background:var(--card);border-radius:16px;padding:36px 34px;
            width:100%;max-width:360px;box-shadow:0 30px 60px rgba(0,0,0,.28)}
.login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;
             margin-bottom:26px}
.login-brand img{width:56px;height:56px;border-radius:12px;margin-bottom:12px}
.login-brand b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.02em}
.login-brand span{font-size:11.5px;color:var(--muted);margin-top:2px}
.login-card label{margin-top:14px}
.login-card label:first-of-type{margin-top:0}
#login-error{display:none;background:#F8E4E0;color:var(--red);border-radius:8px;
             padding:9px 12px;font-size:12.5px;margin-top:14px;font-weight:500}
#login-error.on{display:block}
.login-card .btn{width:100%;margin-top:18px;padding:11px;font-size:13.5px}
.login-note{text-align:center;font-size:11px;color:var(--muted);margin-top:16px;line-height:1.5}
.login-connecting{text-align:center;color:var(--muted);font-size:12.5px;margin-top:14px;display:none}
.login-connecting.on{display:block}

/* ============================================================
   14. SYNC STATUS  (sidebar indicator showing whether the last
       save actually reached the server)
   ============================================================ */
#syncstatus{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:8px}
#syncstatus .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 7px}
#syncstatus.saved .dot{background:#6FBE86}
#syncstatus.saving .dot{background:var(--orange);animation:pulse 1s ease-in-out infinite}
#syncstatus.error .dot{background:#E37B65}
#syncstatus.saved span.txt{color:#8FD1A2}
#syncstatus.saving span.txt{color:var(--cream);opacity:.8}
#syncstatus.error span.txt{color:#E37B65}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================
   15. CONNECTION ERROR BANNER (shown when the server can't be
       reached at all — helps tell "not logged in" apart from
       "server unreachable" while debugging a fresh deployment)
   ============================================================ */
#conn-error{position:fixed;top:0;left:0;right:0;background:var(--red);color:#fff;
            text-align:center;padding:10px 16px;font-size:12.5px;font-weight:500;
            z-index:100;display:none}
#conn-error.on{display:block}


/* ============================================================
   16. ADVANCE + QUICK INVOICE TABS
       Shared UI for the two newer invoice builders. The printed
       invoice itself reuses section 10 above — only the form
       chrome around it is new.
   ============================================================ */

/* A printable invoice pane that sits inside a normal tab. Same look as
   #inv (section 10) so all three invoice tabs print identically. */
.invpane{background:#fff;border:1px solid var(--line);border-radius:var(--r);
         padding:34px;max-width:820px;margin:0 auto}

/* Small explanatory line under a group of form fields. */
.fieldnote{font-size:11.5px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.fieldnote a{color:var(--orange);font-weight:600;text-decoration:none}
.fieldnote a:hover{text-decoration:underline}

/* Checkbox + wrapped label, used for the "record as advance" opt-out.
   The checkbox keeps its natural size instead of the 100%-width rule
   that applies to every other input. */
.checkline{display:flex;align-items:flex-start;gap:9px;text-transform:none;
           letter-spacing:0;font-weight:400;font-size:12.5px;color:var(--ink);
           line-height:1.5;margin:0}
.checkline input[type=checkbox]{width:16px;height:16px;flex:0 0 16px;margin-top:1px;padding:0}

/* The live "what this line costs" readout under the Quick tab composer. */
.linepreview{margin-top:14px;padding:10px 13px;background:#F7F4EF;border-radius:7px;
             font-size:12.5px;line-height:1.55;min-height:40px}
.linepreview b{font-family:var(--mono)}

/* The running-total block under a preview table. Mirrors the printed
   totals ladder (section 10) but sized for on-screen scanning. */
.calcsummary{margin-left:auto;width:290px;margin-top:14px;font-size:12.5px}
.calcsummary div{display:flex;justify-content:space-between;padding:4px 0}
.calcsummary .tot-line{border-top:2px solid var(--ink);margin-top:5px;padding-top:8px;
                       font-family:var(--display);font-weight:700;font-size:15px}

/* The per-meal rate build-up printed on an advance invoice: same plan
   table as section 10, with a third money column and a total row. */
table.plan.ratebuild{min-width:390px}
table.plan.ratebuild td:last-child{text-align:right;min-width:76px}
table.plan.ratebuild tr.rbtot td{border-top:1px solid var(--ink);font-weight:600;
                                 border-bottom:0;background:#FBF9F6}
.planfoot{font-size:10.5px;color:var(--muted);margin:6px 0 0;line-height:1.5;max-width:390px}


/* ============================================================
   17. RATE WORKING + ADD-ON BLOCK
   The shared "here is how this rate was reached" panel, drawn by
   rateBuildupHtml() in js/helpers.js and used identically by the
   customer modal and the Log meals form, plus the Add-on block that
   sits under the log form.
   ============================================================ */

/* The headline above a build-up: what is actually being charged. */
.pricehd{font-size:12.5px;color:var(--ink);margin-bottom:6px}
.pricehd b{font-family:var(--mono)}
.pricehd a{color:var(--orange);font-weight:600;margin-left:6px;font-size:11.5px}

/* The build-up table itself: component · quantity @ rate · amount. */
table.ratecalc{width:100%;max-width:430px;border-collapse:collapse;background:#fff;
               border:1px solid var(--line);border-radius:7px;overflow:hidden}
table.ratecalc td{padding:5px 10px;font-size:11.5px;border-bottom:1px solid #F0ECE5}
table.ratecalc td:last-child{text-align:right;min-width:74px;font-family:var(--mono)}
table.ratecalc tr:last-child td{border-bottom:0}
table.ratecalc tr.rctot td{border-top:1px solid var(--ink);background:#FBF9F6;font-weight:600}

/* The Add-on section of the log form. Set apart from the meal fields
   above it, because an add-on is a second billed line, not a variation
   of the meal — see the file header in js/log.js. */
.addonblock{margin-top:16px;padding:13px 14px;border:1px dashed var(--line);
            border-radius:9px;background:#FCFAF7}
.addonblock .checkline{margin:0}
.addonblock .planprice{background:#fff}

/* An Add-on's items, printed under the item name on an invoice line. */
.linedetail{display:block;font-size:10px;line-height:1.4;color:var(--muted);margin-top:2px}


/* -- invoice presentation (Sep 2026) ------------------------------------
   A small caption under a printed table — the (M)/(E) slot legend on the
   delivered-meals invoice — and the sign-off, which replaces the old
   "authorised signatory" block with a first-person note voiced by the
   founder, signed inline rather than on its own bordered line. */
.tablenote{font-size:10.5px;color:var(--muted);margin:6px 0 0}
.ifoot .thanks{font-size:11.5px;color:var(--ink);line-height:1.5;margin-bottom:0;
               max-width:250px;margin-left:auto}
.ifoot .thanks .founder{display:block;margin-top:9px;font-style:italic;color:var(--muted);font-size:11px}


/* ============================================================
   DRAFT INVOICES
   ============================================================
   A draft is a real, printable invoice that has not been issued. The
   banner is deliberately loud and deliberately DOES print: if one gets
   sent or filed by mistake, whoever receives it should be able to see
   at a glance that it is not a tax invoice.
   ============================================================ */
.draftbanner{background:#FFF4E0;border:1px solid #E8B45A;border-left:3px solid #E8B45A;
             border-radius:7px;padding:10px 13px;margin:14px 0 0;
             font-size:11.5px;line-height:1.5;color:#7A5312;
             -webkit-print-color-adjust:exact;print-color-adjust:exact}
.draftbanner b{letter-spacing:.09em;text-transform:uppercase;font-size:10.5px}

.pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;padding:3px 8px;border-radius:99px;white-space:nowrap}
.pill.draft{background:#FFF4E0;color:#7A5312;border:1px solid #E8B45A}
.pill.final{background:#EAF5EC;color:#256B36;border:1px solid #A9D3B4}
.pill.credit{background:#F0ECFA;color:#4A3785;border:1px solid #BFB0E0}
.pill.credited{background:#F4F2EF;color:#6B6257;border:1px solid #CFC7BB}
tr.isdraft td{background:#FFFCF5}
tr.iscredit td{background:#FBFAFE}
tr.iscredited td{opacity:.72}
tr.iscredited td:first-child{text-decoration:line-through;text-decoration-color:#B9AFA2}
.fromdraft{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.listnote{margin:0;padding:9px 14px;font-size:11.5px;color:#7A5312;background:#FFF4E0;
          border-bottom:1px solid var(--line)}
.nowrap{white-space:nowrap}
.nowrap .btn+.btn{margin-left:5px}

/* ============================================================
   MEAL STICKER POPUP  (see js/stickers.js)
   ============================================================
   The Stickers button in the advance invoice list opens the shared
   modal (#veil / #modal) showing this preview. The preview is the
   printable sticker document itself, in an iframe scaled down with a
   transform; the wrapper is sized in JS to the scaled dimensions,
   because a transform does not shrink the space the element occupies.
   ============================================================ */
.modsub{font-family:var(--body);font-weight:500;font-size:10px;color:var(--muted);margin-left:8px}
.stkprev{overflow:hidden;margin-top:12px;max-width:100%;border-radius:6px}
.stkprev iframe{border:0;display:block;transform-origin:0 0;pointer-events:none}

/* ============================================================
   14. PRINT LAYOUT RESETS  (must stay AFTER the 860px block)
   ============================================================
   A4 portrait with 11mm margins is about 710px of content at 96dpi —
   comfortably under the 860px phone breakpoint above, so every rule
   written for a narrow phone ALSO applied to the printed page. That is
   why "Billed to" / "Supply details" and the letterhead came out
   stacked on paper while looking correct on screen.

   These rules put the invoice's own blocks back into rows for print.
   They are deliberately in their own block at the end of the file:
   same specificity as the 860px rules, so the later one wins and no
   !important is needed. If a new side-by-side block is added to an
   invoice and stacks when printed, add its reset here.
   ============================================================ */
@media print{
  .ibox{grid-template-columns:1fr 1fr}
  .ihead{flex-direction:row}
  .ir{text-align:right}
  .totrow{flex-direction:row}
  .tot,.calcsummary{width:320px}
}