/* DCK Energies -- station operations system. Light, mobile-first. */
:root{
  /* DCK Energies — Total-inspired palette. NB var names kept (--petrol = brand red now). */
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#EAECEF;
  --ink:#1E242B; --ink-2:#39424B; --muted:#626C77;
  --line:#E1E4E8; --line-strong:#CBD0D6;
  --accent:#0A6FA6; --accent-ink:#075A88; --accent-soft:#E4F1F9;   /* Total blue (secondary) */
  --petrol:#E2001A; --petrol-dark:#B00016; --petrol-soft:#FCE3E6;  /* Total red (primary brand) */
  --good:#1F7A54; --good-soft:#E3F1EA;
  --warn:#9A6A0B; --warn-soft:#F7ECD5;
  --bad:#B3261E; --bad-soft:#F6E1DD;
  --shadow:0 1px 2px rgba(20,26,32,.05), 0 8px 24px -14px rgba(20,26,32,.18);
  --radius:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif; line-height:1.15; margin:0}
a{color:var(--accent-ink); text-decoration:none}
.wrap{max-width:940px; margin:0 auto; padding:0 18px}
.muted{color:var(--muted)}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}

/* ---- Top bar / nav ---- */
.topbar{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.bar{max-width:940px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px; position:relative}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:600}
.brand-mark{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:none}
.brand-mark img{width:100%; height:100%; display:block}
.brand-wm{font-family:"Archivo"; line-height:.92; display:inline-block}
.brand-wm-n{display:block; font-weight:900; font-size:1.12rem; letter-spacing:-.01em; color:var(--ink)}
.brand-wm-n em{font-style:normal; color:var(--petrol)}
.brand-wm-s{display:block; font-weight:600; font-size:.52rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.brand-name{font-family:"Archivo"; font-weight:700; font-size:1.02rem}
.nav{display:flex; align-items:center; gap:4px; flex:1; min-width:0; margin-left:6px}
.nav-group{display:flex; align-items:center; gap:2px; position:relative}
.nav-label{display:none}
.nav a{padding:7px 12px; border-radius:8px; color:var(--ink-2); font-size:.9rem; font-weight:500; white-space:nowrap}
.nav a:hover{background:var(--surface-2)}
.nav a.active{background:var(--petrol-soft); color:var(--petrol)}
.nav-sep{width:1px; height:22px; background:var(--line-strong); margin:0 6px; flex:0 0 auto}
.navbtn{display:inline-flex; align-items:center; gap:4px; width:auto; cursor:pointer; font-family:inherit;
  font-size:.9rem; font-weight:500; color:var(--ink-2); background:transparent; border:0;
  padding:7px 10px; border-radius:8px; white-space:nowrap}
.navbtn:hover{background:var(--surface-2)}
.navbtn.active{background:var(--petrol-soft); color:var(--petrol)}
.navbtn .ico-chevron{transition:transform .15s}
.has-menu.open .navbtn .ico-chevron{transform:rotate(180deg)}
.dropdown{display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:190px; z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:6px}
.has-menu.open .dropdown{display:block}
.dropdown a{display:block; padding:8px 11px; border-radius:7px}
.dropdown-right{left:auto; right:0}
.dropdown-sep{display:block; height:1px; background:var(--line); margin:5px 6px}
.dropdown .signout{color:var(--bad)}
.dropdown .signout:hover{background:var(--bad-soft)}
.navtoggle{display:none}
.userbox{margin-left:auto; position:relative; display:flex; align-items:center; flex:0 0 auto}
.userbtn{display:inline-flex; align-items:center; gap:8px; width:auto; cursor:pointer; font-family:inherit;
  color:inherit; background:transparent; border:1px solid transparent; border-radius:9px; padding:5px 8px}
.userbtn:hover{background:var(--surface-2)}
.userbox.open .userbtn{background:var(--surface-2); border-color:var(--line)}
.userbtn .ico-chevron{color:var(--muted); flex:0 0 auto; transition:transform .15s}
.userbox.open .userbtn .ico-chevron{transform:rotate(180deg)}
.who{display:flex; flex-direction:column; line-height:1.1; text-align:right}
.who b{font-size:.85rem; font-weight:600}
.who em{font-style:normal; font-size:.7rem; color:var(--muted); font-family:"IBM Plex Mono",monospace}

/* Nav on phones -- everything behind the hamburger, groups shown as labelled sections */
@media(max-width:760px){
  .navtoggle{display:inline-flex; align-items:center; justify-content:center; margin-left:auto; flex:0 0 auto;
    width:40px; height:40px; padding:0; border:1px solid var(--line-strong); border-radius:9px;
    background:transparent; color:var(--ink); cursor:pointer}
  .navtoggle .ico-close{display:none}
  .navtoggle[aria-expanded="true"] .ico-menu{display:none}
  .navtoggle[aria-expanded="true"] .ico-close{display:block}
  .nav{display:none; position:absolute; top:100%; left:0; right:0; margin:0; padding:8px 12px 14px;
    flex-direction:column; align-items:stretch; gap:1px;
    background:var(--surface); border-top:1px solid var(--line); box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav-group{flex-direction:column; align-items:stretch; gap:1px; position:static}
  .nav-label{display:block; font-family:"IBM Plex Mono",monospace; font-size:.65rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); padding:12px 11px 5px}
  .nav a{padding:11px}
  .nav-sep{display:none}
  .navbtn{display:none}
  .dropdown{display:block; position:static; min-width:0; padding:0; background:transparent; border:0; box-shadow:none}
  .dropdown-sep{display:none}
  /* Account section: label, then the signed-in person as a static row, then the links */
  .userbox{display:flex; flex-direction:column; align-items:stretch; position:static; flex:1 1 auto;
    margin:8px 0 0; padding-top:4px; border-top:1px solid var(--line)}
  .userbox .nav-label{order:1}
  .userbtn{order:2; display:flex; width:100%; padding:4px 11px 8px; border:0; background:transparent;
    pointer-events:none}
  .userbox .dropdown{order:3}
  .userbtn .ico-chevron{display:none}
  .who{text-align:left}
}

/* ---- Flash ---- */
.flash{margin:16px 0 0; padding:11px 15px; border-radius:10px; font-size:.9rem; border:1px solid}
.flash-ok{background:var(--good-soft); border-color:color-mix(in srgb,var(--good) 35%,transparent); color:var(--good)}
.flash-warn{background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 40%,transparent); color:var(--warn)}
.flash-error{background:var(--bad-soft); border-color:color-mix(in srgb,var(--bad) 40%,transparent); color:var(--bad)}

/* ---- Page scaffold ---- */
main{padding:26px 0 60px}
.page-head{margin-bottom:20px; position:relative}
.page-head h1{font-size:1.55rem; font-weight:800; letter-spacing:-.01em}
.page-head p{margin:6px 0 0; color:var(--muted); font-size:.92rem; max-width:60ch}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); font-weight:500}
.eyebrow a{color:inherit}
.grid{display:grid; gap:16px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.cols-2,.cols-3{grid-template-columns:1fr}}

/* ---- Card ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-h{padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.card-h h2{font-size:1.02rem; font-weight:700}
.card-h .sub{color:var(--muted); font-size:.82rem}
.card-b{padding:16px 18px}
.card-b.tight{padding:6px 8px}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  font-family:inherit; font-size:.92rem; font-weight:600; padding:10px 16px; border-radius:9px;
  border:1px solid transparent; background:var(--petrol); color:#fff; transition:filter .15s, background .15s}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.5; cursor:not-allowed; filter:none}
.btn-sm{padding:6px 11px; font-size:.82rem}
.btn-accent{background:var(--accent)}
.btn-ghost{background:transparent; color:var(--ink-2); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2); filter:none}
.btn-danger{background:transparent; color:var(--bad); border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.btn-danger:hover{background:var(--bad-soft); filter:none}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ---- Forms ---- */
form .field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
label{font-size:.82rem; font-weight:600; color:var(--ink-2)}
label .hint{font-weight:400; color:var(--muted)}
input, select{font-family:inherit; font-size:.95rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:9px; padding:10px 12px; width:100%}
input:focus, select:focus{outline:2px solid color-mix(in srgb,var(--petrol) 45%,transparent); outline-offset:1px; border-color:var(--petrol)}
.inline-form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.inline-form .field{margin-bottom:0}
.form-narrow{max-width:420px}
.ops-grid{display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:16px; align-items:start; margin-top:16px}
.ops-grid.form-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}  /* wider form, tighter side table (deliveries) */
.ops-grid form .grid.cols-2{gap:0 16px}  /* paired form fields: column gap only; field margins handle rows */
@media(max-width:860px){.ops-grid,.ops-grid.form-wide{grid-template-columns:1fr}}

/* ---- Table ---- */
.table-wrap{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:.9rem}
table.data th{text-align:left; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:9px 12px; border-bottom:1px solid var(--line)}
table.data td{padding:11px 12px; border-bottom:1px solid var(--line); color:var(--ink-2)}
table.data tbody tr:last-child td{border-bottom:none}
table.data td.num, table.data th.num{text-align:right; font-variant-numeric:tabular-nums; font-family:"IBM Plex Mono",monospace}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:20px;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.03em}
.pill-on{background:var(--good-soft); color:var(--good)}
.pill-off{background:var(--surface-2); color:var(--muted)}
.pill-petrol{background:var(--petrol-soft); color:var(--petrol)}
.pill-accent{background:var(--accent-soft); color:var(--accent-ink)}
.empty{padding:24px 18px; text-align:center; color:var(--muted); font-size:.9rem}

/* ---- Dashboard tiles ---- */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.tile .k{font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-family:"IBM Plex Mono",monospace}
.tile .v{font-family:"Archivo"; font-weight:800; font-size:1.5rem; margin-top:4px; letter-spacing:-.01em}
.tile .n{font-size:.78rem; color:var(--muted); margin-top:2px}
.checklist{display:flex; flex-direction:column}
.ci{display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line)}
.ci:first-child{border-top:none}
.ci .dot{width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:.7rem; font-weight:700}
.ci .dot.done{background:var(--good); color:#fff}
.ci .dot.todo{background:var(--surface-2); color:var(--muted); border:1px solid var(--line-strong)}
.ci .ct{flex:1}
.ci .ct b{font-size:.92rem; font-weight:600; display:block}
.ci .ct span{font-size:.8rem; color:var(--muted)}

/* ---- Login ---- */
.login-shell{min-height:calc(100vh - 0px); display:grid; place-items:center; padding:32px 18px;
  background:radial-gradient(120% 90% at 50% -10%, var(--petrol-soft) 0%, transparent 55%), var(--bg)}
.login-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:30px 28px}
.login-card .brand{justify-content:center; margin-bottom:6px}
.login-card h1{text-align:center; font-size:1.3rem; font-weight:800; margin-bottom:2px}
.login-card .tag{text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:22px}
.login-card .remember{display:flex; align-items:center; gap:9px; font-weight:400; font-size:.88rem; color:var(--ink-2); margin:2px 0 16px; cursor:pointer}
.login-card .remember input{width:auto; margin:0; accent-color:var(--petrol)}
.login-card .btn{width:100%; margin-top:4px}

/* ---- Phase 2: shifts, meters, cash-up ---- */
.pos{color:var(--good)}
.neg{color:var(--bad)}
table.data tfoot td{padding:11px 12px; border-top:1.5px solid var(--line-strong); background:var(--surface-2); color:var(--ink)}
.totrow td{background:var(--surface-2)}
.cashrow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0}
.cashrow span{color:var(--ink-2); font-size:.9rem}
.cashrow.tot{border-top:1.5px solid var(--line-strong); margin-top:10px; padding-top:12px}
.cashrow.tot > span{font-weight:600; color:var(--ink); font-size:1rem}
.cashrow.tot b{font-family:"Archivo"; font-weight:800; font-size:1.2rem}
.foot{border-top:1px solid var(--line); background:var(--surface); padding:18px 0; margin-top:auto; flex-shrink:0; font-size:.82rem; color:var(--muted)}
.foot-inner{display:flex; align-items:center; justify-content:space-between; gap:8px 28px; flex-wrap:wrap}
.foot-brand{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap}
.foot-platform{font-family:"Archivo",sans-serif; font-weight:700; color:var(--ink-2); letter-spacing:.01em}
.foot-dot{color:var(--line-strong)}
.foot-built b{color:var(--ink-2); font-weight:600}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Sortable tables (platform-wide) — click a header to sort ---------- */
table.data th.sortable{cursor:pointer; user-select:none; white-space:nowrap}
table.data th.sortable::after{content:"\2195"; margin-left:.4em; font-size:.85em; opacity:.3}
table.data th.sortable:hover{color:var(--ink)}
table.data th.sort-asc::after{content:"\2191"; opacity:.85}
table.data th.sort-desc::after{content:"\2193"; opacity:.85}

/* Icons + icon buttons ------------------------------------------------ */
.icon{display:inline-block; width:1em; height:1em; vertical-align:-0.125em; flex:none}
.btn-icon{padding:6px; line-height:0; display:inline-flex; align-items:center; justify-content:center}
.btn-icon .icon{width:16px; height:16px}

/* Chart readability — hover-zoom on mouse devices + click/tap to open a big modal.
   Screen-sensitive: hover only where there's a mouse; the modal fills the viewport. */
svg.chart{transition:transform .18s ease, box-shadow .18s ease; transform-origin:center center; position:relative; border-radius:8px; cursor:zoom-in}
@media (hover:hover) and (pointer:fine){
  svg.chart:hover{transform:scale(1.18); box-shadow:0 14px 34px -10px rgba(20,32,27,.30); background:var(--surface); z-index:20}
}
@media (max-width:860px){ svg.chart:hover{transform:none} }

/* Enlarged-chart modal (opens on click/tap of any chart) */
.chart-modal{position:fixed; inset:0; background:rgba(20,32,27,.55); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px}
.chart-modal.open{display:flex}
.chart-modal-box{background:var(--surface); border-radius:14px; box-shadow:0 24px 60px -20px rgba(0,0,0,.5); max-width:min(960px,96vw); width:100%; padding:16px 18px 22px; position:relative}
.chart-modal-cap{font-weight:600; color:var(--ink); margin:0 6px 10px 2px; font-size:.95rem}
.chart-modal-x{position:absolute; top:6px; right:10px; border:none; background:transparent; font-size:1.7rem; line-height:1; color:var(--muted); cursor:pointer}
.chart-modal-x:hover{color:var(--ink)}
.chart-modal-body svg{width:100%; height:auto; display:block}


/* ---- per-page Help (slide-in panel) ---------------------------------- */
.help{position:absolute; top:2px; right:0}
.help-open{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:.8rem; font-weight:600;
  color:var(--petrol); background:var(--petrol-soft); border:1px solid var(--line); border-radius:999px;
  padding:5px 12px 5px 9px; cursor:pointer; line-height:1}
.help-open:hover{filter:brightness(.98)}
.help-open:focus-visible{outline:2px solid var(--petrol); outline-offset:2px}
.help-scrim{position:fixed; inset:0; z-index:80; background:rgba(15,25,20,.42);
  display:flex; justify-content:flex-end; opacity:0; transition:opacity .18s ease}
.help-scrim[hidden]{display:none}   /* actually hide it: .help-scrim{display:flex} otherwise beats UA [hidden] */
.help-scrim.open{opacity:1}
.help-panel{background:var(--surface); color:var(--ink); width:min(430px,100%); height:100%;
  display:flex; flex-direction:column; box-shadow:-14px 0 46px -22px rgba(0,0,0,.5);
  transform:translateX(26px); transition:transform .22s ease}
.help-scrim.open .help-panel{transform:none}
.help-head{position:sticky; top:0; background:var(--surface); display:flex; align-items:center; gap:10px;
  padding:15px 18px; border-bottom:1px solid var(--line)}
.help-head h2{font-size:1.14rem; font-weight:800; margin:0; flex:1; letter-spacing:-.01em}
.help-close{font-size:1.7rem; line-height:1; background:transparent; border:0; color:var(--muted); cursor:pointer; padding:0 2px}
.help-close:hover{color:var(--ink)}
.help-body{padding:18px; overflow-y:auto}
.help-body .lead{color:var(--muted); font-size:.92rem; margin:0 0 15px}
.help-body h3{font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:20px 0 9px}
.help-body h3:first-of-type{margin-top:0}
.help-body ol{list-style:none; counter-reset:hs; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.help-body ol>li{counter-increment:hs; position:relative; padding-left:31px; font-size:.95rem; line-height:1.5}
.help-body ol>li::before{content:counter(hs); position:absolute; left:0; top:1px; width:22px; height:22px;
  border:1.5px solid var(--line-strong); border-radius:50%; color:var(--muted); font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; font-weight:600; display:grid; place-items:center}
.help-note{margin-top:15px; border-radius:10px; padding:11px 13px; font-size:.87rem;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.help-note b{color:var(--ink)}
.help-note.warn{background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 35%,transparent); color:var(--warn)}
.help-note.warn b{color:var(--warn)}
.help-ui{font-family:"IBM Plex Mono",monospace; font-size:.82em; font-weight:600; background:var(--surface-2);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; white-space:nowrap; color:var(--ink)}
.help-ui.act{background:var(--petrol); border-color:var(--petrol-dark); color:#fff}
@media (max-width:600px){
  .help-open .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .help-open{padding:6px 9px}
  .help-scrim{align-items:flex-end}
  .help-panel{width:100%; height:auto; max-height:88vh; border-radius:16px 16px 0 0; transform:translateY(30px)}
  .help-scrim.open .help-panel{transform:none}
}
@media (prefers-reduced-motion:reduce){ .help-scrim,.help-panel{transition:none} }


/* ---- Setup: list beside its 'add' form ---- */
.setup-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:16px; align-items:start; margin-top:16px}
@media(max-width:860px){ .setup-split{grid-template-columns:1fr} }

/* ============================================================
   PRINT  —  professional, compact, paper-friendly reports.
   Screen output is untouched; every rule here is print-only.
   Added 2026-09 (Imara Systems) — see feedback_deployment memory.
   ============================================================ */
.print-head{display:none}   /* shown only on paper (below) */

@media print{
  @page{size:A4 portrait; margin:11mm 11mm 13mm}

  html,body{background:#fff !important; color:#000 !important; font-size:10pt}
  body{margin:0}
  *{box-shadow:none !important; text-shadow:none !important}
  a{color:#000 !important; text-decoration:none !important}

  /* ---- drop all screen chrome & interactivity ---- */
  .topbar,.foot,.nav,.navtoggle,.flash,
  .help,.help-open,.help-scrim,.chart-modal,
  form,.inline-form,.btn,.btn-row,.pagination,
  .page-head,                              /* title/intro — repeated in the print header */
  .no-print,.noprint,.col-actions{display:none !important}

  main,.wrap{max-width:none !important; margin:0 !important; padding:0 !important}

  /* ---- print-only report header ---- */
  .print-head{display:flex !important; align-items:baseline; justify-content:space-between;
    gap:14px; border-bottom:1.4pt solid #000; padding-bottom:5px; margin:0 0 11px}
  .print-head .ph-station{font-family:"Archivo",sans-serif; font-weight:800; font-size:13pt; color:#000}
  .print-head .ph-title{font-weight:600; font-size:10.5pt; color:#000; margin-left:auto}
  .print-head .ph-date{font-size:8.5pt; color:#333}

  /* ---- cards flatten into clean report sections ---- */
  .card{background:#fff !important; border:0 !important; border-radius:0 !important;
    margin:0 0 9px !important; break-inside:avoid; page-break-inside:avoid}
  .card-h{padding:0 0 3px !important; border-bottom:.9pt solid #000 !important; display:block}
  .card-h h2{font-size:10.5pt !important; color:#000 !important; display:inline}
  .card-h .sub{color:#333 !important; font-size:8.5pt !important; margin-left:6px}
  .card-b,.card-b.tight{padding:4px 0 !important}
  .muted{color:#333 !important}

  /* ---- stat tiles: tight strip ---- */
  .tiles{display:flex !important; gap:6px !important; flex-wrap:wrap}
  .tile{flex:1 1 0; border:.8pt solid #999 !important; border-radius:0 !important;
    background:#fff !important; padding:5px 8px !important; break-inside:avoid}
  .tile .v{font-size:11pt !important}

  /* ---- tables: dense, repeat header, keep rows whole ---- */
  table.data{font-size:8.6pt !important; width:100% !important}
  table.data thead{display:table-header-group}
  table.data th{padding:3px 6px !important; color:#000 !important; font-size:6.6pt !important;
    border-bottom:.9pt solid #000 !important}
  table.data td{padding:2.5px 6px !important; color:#000 !important; border-bottom:.4pt solid #bbb !important}
  table.data tr{break-inside:avoid; page-break-inside:avoid}
  table.data tbody tr:nth-child(even) td{background:#f2f2f2 !important}
  table.data tfoot td,.totrow td{background:#e6e6e6 !important; color:#000 !important;
    border-top:1pt solid #000 !important}
  .pill{border:.6pt solid #999 !important; background:#fff !important; color:#000 !important; padding:0 4px}

  /* ---- GRAPHICS separated from the text (tables) report ---- */
  .print-graphics{break-before:page; page-break-before:always; break-inside:avoid}
  .print-graphics::before{content:"Charts"; display:block; font-family:"Archivo",sans-serif;
    font-weight:800; font-size:12pt; color:#000; border-bottom:1pt solid #000;
    padding-bottom:4px; margin-bottom:10px}
  .print-graphics.grid{display:grid !important}
  svg.chart{max-width:100% !important; height:auto !important; transform:none !important}
  svg.chart:hover,.card:hover svg.chart{transform:none !important}
}

@media print{
  .ops-grid{display:block !important}   /* form card is .no-print; summary card goes full width */
}

@media print{
  /* text (tables) first, graphics last & on their own page — no orphaned pages */
  main > .wrap{display:flex; flex-direction:column}
  .print-graphics{order:100}
  .print-graphics.cols-2{grid-template-columns:1fr 1fr !important}  /* keep charts 2-up on paper */
  .print-graphics svg.chart{max-height:72mm}
  .table-wrap{overflow:visible !important}     /* never clip a wide table on paper */
}

@media print{
  .print-graphics::before{grid-column:1 / -1}   /* "Charts" heading spans both columns */
}

@media print{
  /* shift detail: let its header block print (attendant · date · closed time), 2-up expenses+cash-up */
  .print-detail .page-head{display:block !important; margin:0 0 8px !important}
  .print-detail .page-head .eyebrow{display:none !important}
  .print-detail .page-head h1{font-size:13pt !important; margin:0}
  .print-detail .page-head p{font-size:9pt !important; color:#333 !important; margin:2px 0 0}
  .print-2col{display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important}
}