/* LaxmiJanardan ERP — teal only (Royal Stag Double Dark box): dark teal, bright teal actions, light teal tints */
:root {
    --field: #163e47;      /* sidebar, headings */
    --field-2: #1f5460;
    --gold: #2a8591;       /* primary actions (bright teal; the name is kept so .btn-gold etc. still work) */
    --gold-soft: #e2eef0;  /* CMR / govt rows */
    --teal-soft: #7fb3b9;  /* second chart colour */
    --paper: #f3f6f5;
    --ink: #1b2a2d;
    --line: #d9e2e2;
    --muted: #5f7173;
}
html, body { height: 100%; }
body { font-family: "Hind Siliguri", system-ui, sans-serif; background: var(--paper); color: var(--ink); font-size: 15px; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }

.shell { display: flex; min-height: 100vh; }
/* Left menu: a teal band with the LJ mark, Collapse menu, Find a page, then one row per group (line icon, name, link count,
   arrow); an open group's pages sit on a darker band, the current page has a bright teal bar */
.side { width: 240px; background: var(--field); color: #cfe0e2; padding: 0 0 1rem; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side a { color: #b9d2d5; text-decoration: none; display: block; }
.side-shade { display: none; }   /* the dimmed page behind the open menu: phones and tablets only (below) */
.ni { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: #7fc2ca; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-collapse { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .5rem 1.05rem; border: 0; border-bottom: 1px solid #1d4b55; background: none;
                 color: #9fc3c8; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.side-collapse .ni { width: 17px; height: 17px; stroke: #9fc3c8; }
.side-collapse:hover { color: #fff; } .side-collapse:hover .ni { stroke: #fff; }
.nav-group > span { display: block; font-size: .78rem; color: #9fc3c8; padding: 0 1rem .2rem; }
/* folding groups (the layout's script makes the names into .nav-head): icon, name, link count and an arrow */
.nav-group { border-bottom: 1px solid #1d4b55; }
.nav-group > .nav-head, .side .dash-link { display: flex; align-items: center; gap: .75rem; padding: .58rem 1rem; cursor: pointer; user-select: none;
                         font-size: .93rem; color: #e6f0f1; border-left: 3px solid transparent; }
.nav-head b { font-weight: 500; flex: 1; }
.nav-head::after { content: ""; width: .4rem; height: .4rem; border: solid #8fb3b8; border-width: 0 2px 2px 0; transform: rotate(-45deg); margin: 0 .15rem 0 .1rem; transition: transform .15s; }
.nav-group:not(.shut) > .nav-head::after { transform: rotate(45deg); margin-top: -.2rem; }
.nav-head:hover, .nav-head:focus-visible, .side .dash-link:hover { background: #1b4954; color: #fff; outline: none; }
.nav-group.here > .nav-head { color: #fff; }
.nav-group.here > .nav-head .ni, .side .dash-link.active .ni { stroke: #5fd0db; }
.nav-group.here.shut > .nav-head { border-left-color: #5fd0db; }   /* the current page is inside this folded group */
.side .dash-link.active { color: #fff; font-weight: 500; border-left-color: #5fd0db; background: #1b4954; }
.side .nav-group > a:not(.dash-link) { background: #123540; padding: .42rem 1rem .42rem 2.9rem; border-left: 3px solid transparent; font-size: .9rem; }
.side .nav-group > a:not(.dash-link):hover { background: #18434d; color: #fff; }
.side .nav-group > a.active:not(.dash-link) { background: #1b4954; color: #fff; font-weight: 600; border-left-color: #5fd0db; }
.side .nav-group:not(.shut) > .nav-head + a { padding-top: .55rem; }   /* a little air above and below the open band */
.side .nav-group:not(.shut) > a:last-child { padding-bottom: .55rem; }
.nav-group.shut > a { display: none; }
.side-find { display: block; width: calc(100% - 1.6rem); margin: .7rem .8rem; padding: .38rem .7rem; border: 0; border-radius: 6px; background: var(--field-2); color: #fff; font-size: .85rem; }
.side-find::placeholder { color: #9fc3c8; }
.side-find:focus { outline: 2px solid var(--gold); }
.side.finding .nav-group.shut > a { display: block; }
.side.finding .nav-group > a.miss, .side.finding .nav-group.nomatch { display: none; }
.side.finding .nav-head::after { visibility: hidden; }
.brand { display: flex !important; gap: .6rem; align-items: center; margin-bottom: 1.2rem; }
.brand:hover { background: none !important; }
.brand b { display: block; color: #fff; font-size: 1.02rem; line-height: 1.1; }
.brand small { color: #9fc3c8; }
.side .brand { margin: 0; padding: .85rem 1rem; background: var(--gold) !important; }
.side .brand small { color: #d6eef0; }
.side .brand-mark { border-radius: 8px; background: #fff; color: var(--gold); width: 34px; height: 34px; flex-shrink: 0; }
/* Collapse menu (computers): only the icons stay, the name shows on mouse-over; a tap on an icon opens the menu again */
@media (min-width: 993px) {
    .side-mini .side { width: 62px; overflow-x: hidden; }
    .side-mini .side .brand { justify-content: center; padding: .85rem 0; }
    .side-mini .side .brand > span:not(.brand-mark), .side-mini .side-find, .side-mini .nav-head b, .side-mini .nav-head::after,
    .side-mini .side-collapse span, .side-mini .side .nav-group > a:not(.dash-link), .side-mini .dash-link span { display: none !important; }
    .side-mini .nav-group > .nav-head, .side-mini .side .dash-link, .side-mini .side-collapse { justify-content: center; padding-left: 0; padding-right: 0; }
    .side-mini .nav-group > .nav-head, .side-mini .side .dash-link { padding-top: .7rem; padding-bottom: .7rem; }
    .side-mini .side-collapse .ni { transform: scaleX(-1); }
    .side-mini .nav-group.here > .nav-head { border-left-color: #5fd0db; }
}
@media (max-width: 992px) { .side-collapse { display: none; } }
.brand-mark { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; font-weight: 700; }
.brand-mark.big { width: 56px; height: 56px; font-size: 1.3rem; margin: 0 auto 1rem; }

.main { flex: 1; min-width: 0; }
.top { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.5rem; border-bottom: 1px solid var(--line); background: #fff; }
.top h1 { font-size: 1.3rem; margin: 0; font-weight: 600; color: var(--field); }
.content { padding: 1.25rem 1.5rem 3rem; }
.lede { color: var(--muted); margin-top: -.25rem; }

.btn-gold { background: var(--gold); color: #fff; border: none; }
.btn-gold:hover { background: #23717c; color: #fff; }
.bg-gold { background: var(--gold) !important; }
.toolbar { display: flex; gap: .5rem; margin-bottom: .75rem; }
.filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.filter label { font-size: .82rem; color: var(--muted); }
.filter .form-control, .filter .form-select { width: auto; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; }
.panel.narrow { max-width: 520px; }
.panel h3, h3.sub { font-size: 1.02rem; font-weight: 600; color: var(--field); margin: 1.25rem 0 .6rem; }
.panel > h3:first-child { margin-top: 0; }
.form-label { font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }

table.grid { background: #fff; border: 1px solid var(--line); }
table.grid thead th { background: #e8f0f1; font-weight: 600; font-size: .85rem; color: var(--field); border-bottom: 1px solid var(--line); }
table.grid tfoot th { background: #f5f8f8; }
.narrow-table { max-width: 640px; }
tr.cmr-row > td { background: var(--gold-soft); }
tr.paid > td { background: #eef5f0; }
.tag { display: inline-block; font-size: .78rem; padding: 0 .45rem; border-radius: 4px; background: #e8eeef; margin-right: .2rem; }
.tag.in { background: #dcefe2; color: #1d5a33; }
.tag.out { background: #f6e3d6; color: #7b3d14; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: .15rem .7rem; font-size: .85rem; }

/* Dashboard: the capacity strip is the one bold element */
.capacity { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; background: var(--field); color: #e6f0f1; border-radius: 12px; padding: 1.5rem 1.75rem; margin-bottom: 1rem; }
.capacity h2 { font-size: .95rem; color: #9fc3c8; font-weight: 500; margin: 0; }
.big-figure { font-size: 2.6rem; font-weight: 700; margin: .1rem 0; line-height: 1.1; color: #fff; }
.big-figure span { font-size: 1rem; font-weight: 400; color: #9fc3c8; }
.capacity .muted { color: #9fc3c8; }
.shift { margin-bottom: .8rem; }
.shift-label { font-size: .9rem; margin-bottom: .25rem; }
.gauge { position: relative; height: 14px; background: #0f2d34; border-radius: 7px; }
.gauge .fill { height: 100%; background: var(--gold); border-radius: 7px; }
.gauge .fill.over { background: #8fd3da; }
.gauge .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; }
.legend { font-size: .78rem; color: #9fc3c8; margin: .4rem 0 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; }
.kpi span { display: block; font-size: .82rem; color: var(--muted); }
.kpi b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); margin-left: .25rem; }
.kpi.accent { border-color: var(--gold); background: var(--gold-soft); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.days { display: flex; gap: .6rem; align-items: end; height: 140px; }
.day { flex: 1; text-align: center; height: 100%; display: flex; flex-direction: column; }
.col-bar { flex: 1; display: flex; align-items: end; }
.col-bar div { width: 100%; background: var(--field-2); border-radius: 4px 4px 0 0; min-height: 2px; }

/* Forms */
.calc-out { padding: .35rem .6rem; background: #eef4f4; border-radius: 6px; line-height: 1.4; }
.yield { margin-top: 1rem; padding: .6rem .9rem; background: #eef4f4; border-radius: 6px; min-height: calc(2.6em + 1.2rem); }   /* space kept: the form never moves */
.lines td { vertical-align: middle; }
.totals { display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: flex-end; align-items: baseline; margin-top: 1rem; font-size: 1rem; }
.totals > div { white-space: nowrap; line-height: 1.2; }
.totals .grand { line-height: 1.2; }
.totals .grand b { font-size: 1.3rem; color: var(--field); }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
.role { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; display: block; cursor: pointer; }
.role input { margin-right: .4rem; }
.role small { display: block; color: var(--muted); margin-left: 1.3rem; }
.att td { vertical-align: middle; }
.report-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }
.report-list a { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1rem; text-decoration: none; color: var(--ink); }
.report-list a:hover { border-color: var(--gold); }
.report-list b { display: block; color: var(--field); }
.report-list span { font-size: .88rem; color: var(--muted); }
.ledger-head { font-size: 1.2rem; color: var(--field); }
.ledger-head small { font-size: .85rem; color: var(--muted); font-weight: 400; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--field); }
.login-card { background: #fff; padding: 2rem; border-radius: 14px; width: min(380px, 92vw); text-align: center; }
.login-card form { text-align: left; }
.login-card h2 { font-size: 1.25rem; color: var(--field); }

/* Invoice */
.invoice { background: #fff; border: 1px solid var(--line); padding: 2rem; max-width: 900px; }
.invoice header { display: flex; justify-content: space-between; border-bottom: 2px solid var(--field); padding-bottom: 1rem; margin-bottom: 1rem; }
.invoice h2 { font-size: 1.35rem; color: var(--field); margin: 0 0 .3rem; }
.invoice header p { margin: 0; font-size: .9rem; }
.inv-title { text-align: right; }
.inv-title h3 { font-size: 1.1rem; margin: 0; }
.bill-to { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; font-size: .92rem; }
.bill-to small, .inv-foot small { color: var(--muted); display: block; }
.inv-foot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; }
.sums { max-width: 320px; margin-left: auto; }
.sign { display: flex; justify-content: space-between; margin-top: 2.5rem; font-size: .9rem; }
.sign span:last-child { text-align: right; }

@media (max-width: 992px) {
    .side { position: fixed; left: -240px; z-index: 50; transition: left .2s; height: 100dvh; overscroll-behavior: contain; }   /* dvh: the screen above the phone's address bar */
    .side.open { left: 0; }
    /* open menu: the page behind is dimmed (a tap on it closes the menu) and does not scroll */
    .side-shade { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(15, 30, 32, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
    .side.open + .side-shade { opacity: 1; pointer-events: auto; }
    .side-lock, .side-lock body { overflow: hidden; overscroll-behavior: none; }   /* on html too: no pull-to-refresh reload while swiping the menu */
    .capacity, .two-col { grid-template-columns: 1fr; }
    .content { padding: 1rem; }
}
@media print {
    .side, .no-print, .toolbar, .top, .alert { display: none !important; }
    body { background: #fff; }
    .content { padding: 0; }
    .panel, .invoice, table.grid { border: none; }
    a { color: inherit; text-decoration: none; }
}

/* Bran oil settlement */
tr.note-dn > td { background: #e2eef0; }
tr.note-cn > td { background: #e9f2ec; }
.settle-result { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 10px; background: #eef4f4; }
.settle-result div span { display: block; font-size: .8rem; color: var(--muted); }
.settle-result div b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.settle-result div small { display: block; color: var(--muted); }
.settle-result .big { margin-left: auto; text-align: right; }
.settle-result .big b { font-size: 1.6rem; }
.settle-result.dn { background: #e2eef0; border: 1px solid var(--gold); }
.settle-result.cn { background: #e9f2ec; border: 1px solid #7fae8f; }

/* Unit picker */
.qu .qu-unit { flex: 0 0 auto; width: auto; max-width: 7rem; background-color: #eef4f4; }
.qu > .form-control { min-width: 8.5rem; }
.qu-hint { display: block; height: 1.1rem; line-height: 1.1rem; font-size: .78rem; color: var(--muted); margin-top: .15rem;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one fixed line: the form never moves */
.lines .unit { min-width: 7.5rem; }

/* Accounts */
.statement { background: #fff; border: 1px solid var(--line); }
.statement thead th { background: #e8f0f1; color: var(--field); }
.group-row td { font-weight: 600; background: #f5f8f8; }
.sub-row td { font-weight: 600; font-style: italic; }
/* rolled-up reports: a row with rows under it opens / folds on a click */
table[data-tree] tr.has-kids { cursor: pointer; }
table[data-tree] tr.has-kids > td:first-child::before { content: "▾"; display: inline-block; width: 1em; color: var(--muted, #6c757d); font-style: normal; }
table[data-tree] tr.has-kids.shut > td:first-child::before { content: "▸"; }
.tree-switch .btn.active { background: var(--field); border-color: var(--field); color: #fff; }
@media print { table[data-tree] tr.has-kids > td:first-child::before { content: none; } }
.daybook tbody.entry { border-bottom: 2px solid var(--line); }
.receipt .receipt-line { font-size: 1.05rem; line-height: 2; margin: 1rem 0; }

/* Popup windows for "+ New ..." */
.quick-dialog { border: none; border-radius: 12px; padding: 0; width: min(560px, 94vw); box-shadow: 0 20px 60px rgba(15, 40, 46, .35); }
.quick-dialog::backdrop { background: rgba(14, 34, 40, .45); }
.qd-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.1rem; background: var(--field); color: #fff; }
.qd-head .btn-close { filter: invert(1); opacity: .8; }
.qd-body { padding: 1.1rem; }
.qd-actions { display: flex; gap: .5rem; margin-top: 1rem; }

/* Sales form: available stock and GST links */
/* Sales lines: fixed columns, one line per item; "Avail" has its own reserved line under Quantity */
.sale-lines { table-layout: fixed; }   /* no minimum width: the columns share the form's width, so it never scrolls sideways */
@media (max-width: 767.98px) {   /* phones: too narrow to share, so the grid keeps its widths and scrolls sideways, like the purchase grid */
    .sale-lines { min-width: 760px; }
    .sale-lines thead th:first-child { min-width: 12rem; }
}
.sale-lines td { vertical-align: top; padding-top: .35rem; padding-bottom: .1rem; }
.sale-lines td.num { padding-top: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sale-lines .form-select, .sale-lines .form-control { min-width: 0; }
.sale-lines td:last-child { padding-left: 0; padding-right: 0; text-align: center; }   /* remove (✕): fits its 2rem column */
.sale-lines .del { padding: .25rem 0; width: 100%; }
.lines .avail { display: block; height: 1.05rem; line-height: 1.05rem; font-size: .74rem; margin-top: .1rem;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lines .avail.ok { color: var(--muted); }
.lines .avail.short { color: #b42318; font-weight: 600; }
.gst-link, #gstAll { color: var(--field); text-decoration: underline dotted; text-underline-offset: 3px; }
.gst-link:hover, #gstAll:hover { color: var(--gold); }
.quick-dialog.wide { width: min(820px, 96vw); }

.more-details summary { cursor: pointer; color: var(--field); font-weight: 600; }

@media print {
    @page { size: A4 portrait; margin: 0.5in; }
    html, body { background: #fff !important; }
    .shell { display: block; }
    .main { width: 100%; }
    .content { padding: 0 !important; }
}

/* Messages in the bottom-right corner (notify.js) */
#lj-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 3000; display: flex; flex-direction: column; gap: .5rem; width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
.lj-t { position: relative; pointer-events: auto; display: flex; gap: .65rem; align-items: flex-start; background: #fff; border-radius: 10px; padding: .7rem .8rem .8rem;
        box-shadow: 0 10px 30px rgba(15,40,46,.25); border-left: 5px solid; font-size: .9rem; overflow: hidden;
        opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.lj-t.in { opacity: 1; transform: none; }
.lj-t.out { opacity: 0; transform: translateX(30px); }
.lj-t-icon { flex: 0 0 24px; height: 24px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.lj-t-body { flex: 1; min-width: 0; }
.lj-t-body b { display: block; margin-bottom: .1rem; }
.lj-t-body ul { margin: .2rem 0 0; padding-left: 1.05rem; }
.lj-t-x { border: 0; background: none; font-size: 1.2rem; line-height: 1; color: var(--muted); padding: 0 .1rem; }
.lj-t-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: lj-t-bar var(--left, 5000ms) linear forwards; }
.lj-t.paused .lj-t-bar { animation-play-state: paused; }
@keyframes lj-t-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.lj-t.ok { border-color: #2f7d4f; } .lj-t.ok .lj-t-icon, .lj-t.ok .lj-t-bar { background: #2f7d4f; }
.lj-t.warn { border-color: #b7791f; } .lj-t.warn .lj-t-icon, .lj-t.warn .lj-t-bar { background: #b7791f; }
.lj-t.err { border-color: #b42318; } .lj-t.err .lj-t-icon, .lj-t.err .lj-t-bar { background: #b42318; }
@media print { #lj-toasts { display: none !important; } }

/* ---------------------------------------------------------------- Dashboard charts (2 x 2) */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.chart-panel { margin-bottom: 0; display: flex; flex-direction: column; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.chart-head h3 { margin-bottom: .4rem; }
.chart-head h3 small { font-weight: 400; font-size: .82rem; }
.chart-legend { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.chart-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 .3rem 0 .7rem; vertical-align: -1px; }
.chart-legend .s1 { background: var(--field-2); }
.chart-legend .s2 { background: var(--teal-soft); }
.chart-empty { padding: 3rem 0; text-align: center; }
.chart-foot { font-size: .78rem; margin-top: .3rem; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; font-family: inherit; }
svg.chart .axis { stroke: var(--line); stroke-width: 1; }
svg.chart .hit { fill: transparent; }
svg.chart .bar { transition: opacity .15s, filter .15s; }
svg.chart .b1 { fill: var(--field-2); }
svg.chart .b2 { fill: var(--teal-soft); }
svg.chart .cb.accent .b1 { fill: var(--gold); }
svg.chart .cb.good .b1 { fill: #2f7d4f; }
svg.chart .cb.cmr .b1 { fill: var(--teal-soft); }
svg.chart .cb.neg .b1 { fill: #b42318; }
svg.chart .val { font-size: 12px; font-weight: 400; fill: #22343a; }            /* always shown, normal */
svg.chart .lbl { font-size: 12px; fill: var(--muted); }
svg.chart .cb.today .lbl { font-weight: 700; fill: var(--ink); }
svg.chart .cb.neg .val { fill: #b42318; }
/* hover: highlight this bar, fade the rest, quantity in bold */
svg.chart .cb { transition: opacity .15s; cursor: default; }
svg.chart:has(.cb:hover) .cb:not(:hover) { opacity: .75; }   /* dim only while the mouse is ON a bar, and only slightly */
svg.chart .cb:hover { opacity: 1; }
svg.chart .cb:hover .bar { filter: brightness(.82); }
svg.chart .cb:hover .val { font-weight: 700; fill: #000; font-size: 13px; }
svg.chart .cb:hover .lbl { font-weight: 700; fill: var(--ink); }
@media (max-width: 992px) { .chart-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Dashboard: fits the window, fixed sizes, no scrolling */
.chart-body { position: relative; }
@media (min-width: 993px) {
    /* the page is exactly the window: top bar + dashboard, nothing to scroll */
    .main:has(.dash) { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
    .main:has(.dash) > .content { flex: 1; min-height: 0; padding-bottom: .75rem; }
    .dash { height: 100%; display: flex; flex-direction: column; gap: .6rem; overflow: hidden; }
    .dash .chart-grid { flex: 1; min-height: 0; grid-template-rows: 1.3fr 1fr; gap: .6rem; }
    .dash .chart-panel { min-height: 0; padding: .6rem .9rem; overflow: hidden; }
    .dash .chart-head h3 { margin: 0 0 .2rem; font-size: .95rem; }
    .dash .chart-body { flex: 1; min-height: 0; }
    .dash .chart-body > svg.chart { position: absolute; inset: 0; width: 100%; height: 100%; }
    .dash .chart-foot { margin-top: .15rem; }
}
/* slim "milling today" strip */
.capacity.slim { display: flex; align-items: center; gap: 1.5rem; padding: .55rem 1.1rem; margin: 0; grid-template-columns: none; }
.capacity.slim .cap-today { display: flex; flex-direction: column; min-width: 15rem; }
.capacity.slim .cap-date { font-size: .78rem; color: #9fc3c8; }
.capacity.slim .cap-fig { font-size: .95rem; color: #e6f0f1; }
.capacity.slim .cap-fig b { font-size: 1.5rem; color: #fff; margin-right: .2rem; }
.capacity.slim .cap-sub { font-size: .8rem; color: #9fc3c8; }
.capacity.slim .shifts { flex: 1; display: flex; gap: 1.2rem; align-items: center; }
.capacity.slim .shift { flex: 1; margin: 0; max-width: 22rem; }
.capacity.slim .shift-label { font-size: .8rem; margin-bottom: .15rem; }
.capacity.slim .gauge { height: 10px; }
/* compact figures */
.kpis.compact { margin: 0; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.kpis.compact .kpi { padding: .35rem .7rem; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.kpis.compact .kpi span { font-size: .75rem; width: 100%; }
.kpis.compact .kpi b { font-size: 1.05rem; }
/* stacked sales */
svg.chart.stacked .seg { stroke: #fff; stroke-width: 1; transition: filter .15s; }
svg.chart.stacked .sel-ring { fill: none; stroke: transparent; stroke-width: 2.5; }
svg.chart.stacked .cb.selected .sel-ring { stroke: transparent; }   /* selected month: bold name and total, no outline */
svg.chart.stacked .cb.selected .lbl { font-weight: 700; fill: var(--ink); }
svg.chart.stacked .cb.selected .val { font-weight: 700; }
svg.chart.stacked .cb:hover .seg { filter: brightness(.85); }
.sales-details { flex: 0 0 auto; height: calc(1.4rem + var(--rows) * 1.02rem); border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .3rem; font-size: .78rem; overflow: hidden; }
.sd-head { margin-bottom: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-row { display: grid; grid-template-columns: 12px minmax(0, 9rem) 1fr 4.6rem 5rem; gap: .5rem; align-items: center; height: 1.02rem; }
.sd-row .sw { width: 10px; height: 10px; border-radius: 2px; }
.sd-row .sd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-bar { height: 8px; background: #ebf1f2; border-radius: 3px; overflow: hidden; }
.sd-bar span { display: block; height: 100%; border-radius: 3px; }
.sd-val { text-align: right; font-weight: 600; white-space: nowrap; }
.sd-qty { text-align: right; color: var(--muted); white-space: nowrap; }
.sd-row.zero { opacity: .45; }

/* Dashboard rows: Stock narrow + Sales wide on top; CMR + milling half and half below */
.chart-grid.two-rows { grid-template-columns: 1fr; }
.row-top, .row-bottom { display: grid; gap: 1rem; grid-template-columns: 1fr; min-height: 0; }
@media (min-width: 993px) {
    .dash .chart-grid.two-rows { display: grid; grid-template-columns: 1fr; grid-template-rows: 1.3fr 1fr; }
    .dash .row-top, .dash .row-bottom { gap: .6rem; }
    .dash .row-top { grid-template-columns: 1fr 2.3fr; }
    .dash .row-bottom { grid-template-columns: 1fr 1fr; }
    .dash .sales-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(19rem, 33%, 27rem); gap: .9rem; }
    .dash .sales-split > .chart-body { position: relative; min-height: 0; }
}
/* Sales details beside the bars */
.sales-details.sd-side { font-size: clamp(.76rem, .56rem + .28vw, .98rem); height: auto; border-top: 0; border-left: 1px solid var(--line);
                         margin: 0; padding: 0 0 0 .8rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sales-details.sd-side .sd-head { font-size: 1.08em; margin-bottom: 0; }
.sales-details.sd-side .sd-total { font-size: .95em; margin-bottom: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sales-details.sd-side .sd-row { grid-template-columns: .7em minmax(0, 1fr) 4.9em 5.4em; column-gap: .45em; height: 1.6em; }
.sales-details.sd-side .sd-row .sd-bar { display: none; }
@media (max-width: 992px) {
    .sales-split { display: block; }
    .sales-details.sd-side { border-left: 0; border-top: 1px solid var(--line); padding: .4rem 0 0; margin-top: .4rem; }
}

/* ---------------------------------------------------------------- Field errors: red border + bubble at the field */
.is-bad, .input-validation-error:not([type=hidden]) { border-color: #b42318 !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .15) !important; }
.field-validation-error, .field-validation-valid { display: none !important; }   /* the bubble shows the message instead */
.lj-bubble { position: absolute; z-index: 2500; background: #fff; border: 1px solid #d3dcdd; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
             padding: .45rem .7rem .45rem .5rem; font-size: .88rem; display: flex; gap: .45rem; align-items: center; max-width: min(420px, 90vw); }
.lj-bubble::before { content: ''; position: absolute; top: -7px; left: 18px; width: 12px; height: 12px; background: #fff;
                     border-left: 1px solid #d3dcdd; border-top: 1px solid #d3dcdd; transform: rotate(45deg); }
.lj-bubble .bi { flex: 0 0 20px; height: 20px; border-radius: 3px; background: #f08c00; color: #fff; display: grid; place-items: center; font-weight: 700; }
@media print { .lj-bubble { display: none !important; } }

/* Number fields: Indian commas, right-aligned */
input.num-in { text-align: right; font-variant-numeric: tabular-nums; }
/* label above a number box sits on the same side as the number */
.lbl-num { display: block; text-align: right; }
/* grid headings: text columns left, number columns right (the invoice print keeps its own centred headings) */
th { text-align: left; }
th.num, td.num { text-align: right; }

/* CMR season tabs on the dashboard */
.chart-head h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.kms-tabs { display: inline-flex; margin-left: .25rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.kms-tabs button { border: 0; border-left: 1px solid var(--line); background: #fff; padding: .14rem .55rem; font-size: .78rem; font-weight: 400; color: var(--muted); cursor: pointer; white-space: nowrap; }
.kms-tabs button:first-child { border-left: 0; }
.kms-tabs button.on { background: var(--field); color: #fff; font-weight: 600; }
.kms-tabs button:hover:not(.on) { background: #e8f0f1; }
.cmr-season { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cmr-season[hidden] { display: none; }
.nodata { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.nodata span { background: rgba(255,255,255,.92); padding: .35rem .7rem; border-radius: 6px; border: 1px dashed var(--line); color: var(--muted); font-size: .88rem; }

/* Production: govt paddy from CPCs, and the fixed "Avail" line under quantities */
.avail2 { display: block; height: 1.05rem; line-height: 1.05rem; font-size: .76rem; margin-top: .15rem; text-align: right; color: var(--muted);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avail2.short { color: #b42318; font-weight: 600; }
.cpc-box { border: 1px solid #c3d9dc; background: #f0f6f7; border-radius: 10px; padding: .8rem 1rem .6rem; margin-top: .9rem; }
.cpc-box[hidden] { display: none; }
.cpc-note { font-size: .85rem; color: #1f5460; padding-bottom: .45rem; }
.cpc-lines { table-layout: fixed; margin-bottom: .3rem; background: transparent; }
.cpc-lines th { border-bottom: 1px solid #c3d9dc; color: var(--field); font-weight: 600; background: transparent; }
.cpc-lines td { vertical-align: top; border: 0; padding: .3rem .4rem .1rem; background: transparent; }
/* production: trucks picked in a popup; older trucks not fully milled are listed in columns (2-3 as fit) */
.tk-warn { background: #fff4d6; border: 1px solid #e0b43a; border-radius: 8px; padding: .45rem .7rem; font-size: .85rem; color: #5c4400; }
.tk-warn[hidden] { display: none; }
.tk-warn-form { max-height: 11rem; overflow: auto; margin: .3rem 0 .4rem; }
.tk-wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem 1rem; list-style: none; margin: .35rem 0 0; padding: 0; }
.tk-wlist li { border-left: 3px solid #e0b43a; padding: .1rem .5rem; font-size: .8rem; line-height: 1.35; }
.tk-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tk-modal[hidden] { display: none; }
.tk-modal-box { background: #fff; border-radius: 12px; padding: 1rem 1.1rem; width: 100%; max-width: 1100px; height: 90vh; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.tk-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
/* the truck list takes 80% of the space, the warning 20%; each scrolls on its own */
.tk-modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
.tk-trucks { flex: 8 1 0; min-height: 0; overflow: auto; border: 1px solid #dee2e6; border-radius: 8px; }
.tk-trucks thead th { position: sticky; top: 0; z-index: 1; background: #fff; white-space: nowrap; }
.tk-warn-pop { flex: 2 1 0; min-height: 0; overflow: auto; }
.tk-modal .lj-modal-btns .btn { flex: 0 0 auto; min-width: 8rem; }
input.locked { background: #ebf1f2; }

/* Available / left quantity lines: whole line bold (production Avail, CPC Left, sales invoice Avail) */
.avail2, .lines .avail { font-weight: 600; font-size: .82rem; }   /* semi-bold, a bit bigger: the dot on "i" in Avail stays clear */

/* Avail line right under a quantity box (unit picker): fixed, bold; grey conversion line under it */
.qu-avail { margin-top: .12rem; }
.qu-avail + .qu-hint { margin-top: 0; font-size: .72rem; color: #93a2a5; }
.qu-hint { text-align: right; }   /* same side as the number and Avail, as in the approved preview */

/* ---------------------------------------------------------------- Clean print of list and report pages */
.print-head { display: none; }
@media print {
    @page { size: A4; margin: 0.5in; }
    .print-head { display: flex !important; justify-content: space-between; align-items: flex-start; border-bottom: 1.5px solid #000;
                  padding-bottom: 4pt; margin-bottom: 8pt; font-size: 9pt; color: #000; }
    .print-head b { font-size: 11pt; }
    .print-head .ph-right { text-align: right; }
    /* everything that is not data */
    .side, .top, .toolbar, .filter, .no-print, .btn, button, select.form-select-sm, .chart-toggle, .kms-tabs button:not(.on),
    form.d-inline, .lj-bubble, #lj-toasts, dialog, .qu-unit { display: none !important; }
    /* action columns (Edit / Delete / Print links) */
    td.text-end:has(> a), td.text-end:has(> form), td.text-nowrap:has(> a), th:empty { display: none !important; }
    a { color: #000 !important; text-decoration: none !important; }
    body, .content { background: #fff !important; }
    .panel, .kpi, table.grid { box-shadow: none !important; border-color: #999 !important; }
    table.grid thead { display: table-header-group; }
    tr { page-break-inside: avoid; }
    .muted.small, p.muted { font-size: 8pt; }
}

/* RDLC report popup (PDF viewer) and the PDF / Excel buttons */
.btn-pdf { background: #b42318; color: #fff !important; border: 0; }
.btn-xls { background: #2f7d4f; color: #fff !important; border: 0; }
.btn-pdf:hover, .btn-xls:hover { filter: brightness(.92); }
dialog.lj-report { border: 0; padding: 0; border-radius: 12px; width: min(1000px, 96vw); height: 92vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
dialog.lj-report::backdrop { background: rgba(14, 34, 40, .5); }
dialog.lj-report[open] { display: flex; flex-direction: column; }
.lr-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--field); color: #fff; padding: .6rem 1rem; }
.lr-actions { display: flex; align-items: center; gap: .45rem; }
.lr-actions button, .lr-actions a { border: 0; border-radius: 6px; padding: .3rem .8rem; background: var(--gold); color: #fff; font-size: .85rem; text-decoration: none; cursor: pointer; }
.lr-actions .lr-x { background: transparent; font-size: 1.4rem; line-height: 1; padding: 0 .3rem; }
.lr-body { position: relative; flex: 1; background: #525659; }
.lr-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.lr-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
@media print { dialog.lj-report { display: none !important; } }
.lr-orient { display: inline-flex; border: 1px solid var(--gold); border-radius: 6px; overflow: hidden; margin-right: .3rem; }
.lr-actions .lr-orient button { background: transparent; border-radius: 0; color: #bfdde1; padding: .28rem .7rem; }
.lr-actions .lr-orient button.on { background: var(--gold); color: #fff; }
.lr-fmt { display: inline-flex; align-items: center; gap: .45rem; margin-right: .3rem; font-size: .85rem; color: #bfdde1; }
.lr-fmt[hidden], .lr-fmt [hidden] { display: none; }
.lr-fmt select { margin-left: .3rem; border: 1px solid var(--gold); border-radius: 6px; padding: .22rem .4rem; background: #fff; color: #222; font-size: .85rem; max-width: 14rem; }
.lr-actions .lr-save { background: #fff; color: var(--field); font-weight: 600; }
.lj-report-m .lr-fmt { display: flex; flex-wrap: wrap; color: inherit; margin: 0 0 .8rem; font-size: .95rem; }
.lj-report-m .lr-fmt[hidden], .lj-report-m .lr-fmt [hidden] { display: none; }
.lj-report-m .lr-fmt select { max-width: none; flex: 1; padding: .5rem; font-size: 1rem; }
.lj-report-m .lr-save { border: 1px solid var(--gold); border-radius: 8px; background: #fff; color: var(--gold); padding: .5rem .8rem; font-weight: 600; width: 100%; }
/* phone: bottom panel instead of the PDF popup */
dialog.lj-report-m { border: 0; margin: auto 0 0; width: 100%; max-width: 100%; box-sizing: border-box; padding: 1.1rem 1rem 1.4rem; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.2); }
dialog.lj-report-m::backdrop { background: rgba(14, 34, 40, .5); }
dialog.lj-report-m b { display: block; font-size: 1.05rem; color: var(--field); }
dialog.lj-report-m p { margin: .1rem 0 1rem; color: var(--muted); font-size: .82rem; }
.lrm-btn { display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 10px; padding: .85rem; margin-bottom: .6rem; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; background: var(--gold); color: #fff; }
.lrm-btn.lrm-wa { background: #25D366; }
.lrm-btn.lrm-x { background: #eee; color: #333; margin-bottom: 0; }
@media print { dialog.lj-report-m { display: none !important; } }

/* Expand / collapse rows (agencies -> centres) */
table.tree { table-layout: fixed; }
.tree-parent td { font-weight: 700; color: var(--field); }
.tree-child td { background: #f9fbfb; }
.tree-child td:first-child { padding-left: 2.2rem; }
.tree-toggle { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: .5rem; padding: 0; border: 1px solid #c5d1d3; border-radius: 4px;
               background: #fff; color: var(--field); font-size: 11px; line-height: 1; vertical-align: middle; cursor: pointer; }
.tree-toggle:hover { background: #e8f0f1; }
/* Purchase list: fixed columns (opening details never moves them); the details sit in a light panel with a teal edge */
@media (min-width: 576px) {   /* phones show cards instead */
    table.pp-list { table-layout: fixed; }
    table.pp-list > tbody > tr.tree-parent > td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
table.pp-list > tbody > tr.tree-parent > td { font-weight: 400; color: inherit; }
table.pp-list > tbody > tr.tree-parent.open > td { background: #eef5f6; }
tr.pp-det-row > td, tr.pp-det-row > td:first-child { background: #fff; padding: .2rem .6rem .7rem 2rem; }
.pp-details { background: #f6f9f9; border-left: 3px solid var(--gold); padding: .55rem .8rem .5rem; }
.pp-items { overflow-x: auto; }
.pp-items td:first-child { padding-left: .5rem; background: #fff; }   /* not the tree row indent */
.pp-items td { background: #fff; }
.pp-items table.grid { font-size: .82rem; margin: 0; }
.pp-items table.grid thead th { font-size: .76rem; }
.pp-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.pp-chips span { font-size: .78rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .05rem .6rem; }
.pp-chips b { font-weight: 600; color: var(--ink); }
.ctag { display: inline-block; font-size: .7rem; padding: 0 .4rem; border-radius: 4px; background: #eceef0; color: #555; font-weight: 400; }
.ctag.cpc { background: #e8f2f3; color: #2a8591; } .ctag.soc { background: #cfe3e6; color: #163e47; }
@media print { .tree-toggle { display: none !important; } }

/* Dashboard CMR box: Overall | Agencies */
.cmr-switch { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cmr-switch button { border: 0; background: #fff; padding: .14rem .55rem; font-size: .78rem; font-weight: 400; color: var(--muted); cursor: pointer; }
.cmr-switch button.on { background: var(--field); color: #fff; font-weight: 600; }
#cmrPanel .cmr-agencies, #cmrPanel .foot-agencies { display: none; }
#cmrPanel[data-view="agencies"] .cmr-agencies { display: flex; }
#cmrPanel[data-view="agencies"] .foot-agencies { display: inline; }
#cmrPanel[data-view="agencies"] .cmr-overall, #cmrPanel[data-view="agencies"] .foot-overall { display: none; }
.cmr-overall { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cmr-agencies { flex: 1; min-height: 0; flex-direction: column; }
.ag-pies { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .3rem; }
.ag-pie { display: flex; flex-direction: column; min-height: 0; }
.ag-title { font-size: .8rem; font-weight: 700; color: var(--field); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-title small { font-weight: 400; }
.ag-row { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: .6rem; }
.ag-svg { flex: 0 0 auto; height: 100%; max-height: 150px; width: auto; aspect-ratio: 1; overflow: visible; }
.ag-svg path { stroke: #fff; stroke-width: 1.2; cursor: default; transform-box: view-box; transform-origin: 60px 60px; transition: opacity .18s ease, transform .18s ease; }
.ag-hl .ag-svg path { opacity: .78; }   /* other slices dim only slightly */
.ag-hl .ag-svg path.on { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1.08); }   /* hovered slice pops out, bigger */
.ag-legend { flex: 0 0 auto; font-size: .74rem; line-height: 1.55; white-space: nowrap; }
.ag-legend div { cursor: default; transition: opacity .15s; }
.ag-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ag-legend span { color: var(--muted); }
.ag-hl .ag-legend div { opacity: .8; }
.ag-hl .ag-legend div.on { opacity: 1; text-shadow: .35px 0 0 currentColor; }   /* looks bold, same width: nothing moves */
.ag-info { height: 2.2rem; font-size: .74rem; color: #444; text-align: center; line-height: 1.3; overflow: hidden; }
.ag-info b { color: #000; }
.ag-none { font-size: .82rem; }

/* Assign existing centres popup */
.assign-dialog { width: min(640px, 94vw); }
.assign-list { max-height: 55vh; overflow: auto; border-top: 1px solid var(--line); }
.assign-row { display: grid; grid-template-columns: 26px 1fr 130px; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line); margin: 0; cursor: pointer; }
.assign-name { font-size: .9rem; }

/* CMR By agency: agency ▸ pool ▸ centre */
table.tree tr.lvl2 td { background: #e8f2f3; font-weight: 600; color: #1f5460; }
table.tree tr.lvl2 td:first-child { padding-left: 1.9rem; }
table.tree tr.lvl3 td { background: #f9fbfb; font-weight: 400; color: inherit; }
table.tree tr.lvl3 td:first-child { padding-left: 3.9rem; }
table.tree td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pool tick boxes on the govt paddy receipt */
.pool-box { display: flex; gap: 1.2rem; align-items: center; min-height: calc(1.5em + .75rem + 2px); padding: .3rem .7rem; border: 1px solid #ced4da; border-radius: .375rem; background: #fff; }
.pool-box label { display: flex; gap: .4rem; align-items: center; margin: 0; cursor: pointer; white-space: nowrap; }

/* Small forms in a popup */
dialog.form-popup { width: min(760px, 95vw); max-height: 92vh; overflow: auto; }
dialog.form-popup .qd-body { position: relative; }
dialog.form-popup .modal-page > form.panel, dialog.form-popup .modal-page > .panel { box-shadow: none; border: 0; padding: 0; margin: 0; max-width: none; }
dialog.form-popup .modal-page .narrow { max-width: none; }
dialog.form-popup .lj-bubble { position: absolute; }
.lr-wait-inline { padding: 1.5rem; text-align: center; color: var(--muted); }

/* Popup forms: every label on one line, so the boxes in a row line up */
dialog.form-popup .form-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Money received: party balance line under the amount (fixed line, never moves the form) */
.bal-line.due { color: #b42318; }
.bal-line.nothing { color: #2f7d4f; }
.bal-line a { font-weight: 600; }

/* CMR box: Overall | Agencies always in the top-right corner */
#cmrPanel .chart-head h3 { width: 100%; flex-wrap: nowrap; }
#cmrPanel .cmr-switch { margin-left: auto; flex-shrink: 0; }
/* every chart: pointing anywhere in a bar's column (or row, for stock) highlights it — even a tiny or zero bar */
svg.chart .cb .hit { pointer-events: all; }

/* ---------------------------------------------------------------- Entry forms: compact columns, fixed width
   .fgrid = 12 narrow columns. A box takes 3 of them (4 in a row) unless told otherwise:
   .sm = a short box (date, qty, rate, phone, a tick): 2 columns, so 6 fit in a row
   .span-2 = half the row, .span-3 = three quarters, .span-all = the whole row.
   Tablet: 6 columns (a box 3, .sm 2). Phone: 2 columns (a box the whole row, .sm half, so short boxes go two in a row).
   .form-fixed = stops at 1100px on wide screens and stays on the left, next to the menu. */
.form-fixed { max-width: 1100px; }
.fgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .55rem 1rem; }
/* no scrolling: nothing in a column may be wider than the column, and number + unit stay on one line */
.fgrid > * { min-width: 0; grid-column: span 3; }
.fgrid .qu { flex-wrap: nowrap; }
.fgrid .qu > .form-control { min-width: 0; }
.fgrid .qu .qu-unit { max-width: 45%; }
/* tighter spacing on entry forms, so a whole form fits one screen */
.panel.form-fixed { padding: 1rem 1.25rem; }
.form-fixed h3.sub { margin: .8rem 0 .35rem; }
.form-fixed .form-label { margin-bottom: .1rem; }
.form-fixed .yield { margin-top: .6rem; padding: .4rem .8rem; min-height: 0; }
.form-fixed .cpc-box { margin-top: .6rem; padding: .6rem .9rem .4rem; }
.form-fixed .more-details { margin-top: .6rem !important; }
.fgrid > .sm { grid-column: span 2; }
.fgrid > .md { grid-column: span 4; }
.fgrid > .span-2 { grid-column: span 6; }
.fgrid > .span-3 { grid-column: span 9; }
.fgrid > .span-all { grid-column: 1 / -1; }
@media (max-width: 991.98px) {
    .fgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .fgrid > .md { grid-column: span 3; }
    .fgrid > .span-2, .fgrid > .span-3 { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .6rem; }
    .fgrid > * { grid-column: 1 / -1; }
    .fgrid > .sm { grid-column: span 1; }
    .fgrid > .md { grid-column: 1 / -1; }
}
/* a tick (Active, IGST...) that sits in a grid cell: in line with the boxes next to it, not on a row of its own */
.fgrid > .ck { display: flex; align-items: flex-end; padding-bottom: 6px; }
.fgrid > .ck .form-check { margin: 0; }
/* a short note or "+ New" link on the label line, at the right, instead of a line under the box */
.form-label .lhint { float: right; font-weight: 400; font-size: .76rem; color: #6c757d; margin-left: .4rem; }
/* phones: 16px text in boxes (no zoom-in on tap), and Save / Cancel stay at the bottom of the screen */
@media (max-width: 575.98px) {
    .form-fixed .form-control, .form-fixed .form-select { font-size: 16px; }
    .form-fixed .form-actions, .form-fixed > .mt-4:last-child { position: sticky; bottom: 0; background: #fff; padding: .5rem 0; margin-top: .75rem !important; border-top: 1px solid #e3e6e8; z-index: 5; }
}

/* every input box and dropdown (not the small ones in line tables / filters): same height as a menu item, 33px.
   Only the space above and below the text shrinks; the text size stays the same. */
.form-control:not(.form-control-sm):not(.form-control-lg):not(textarea),
.form-select:not(.form-select-sm):not(.form-select-lg) { padding-top: 3.5px; padding-bottom: 3.5px; }

/* production: date, shift, godown, paddy item and paddy input on one line;
   date and shift the same small width, godown and paddy item fixed, paddy input takes all that is left */
@media (min-width: 992px) { .fgrid.prod-head { grid-template-columns: 9rem 9rem 11.8rem 14.2rem minmax(0, 1fr); } .fgrid.prod-head > * { grid-column: auto; } }   /* 9rem: the full date shows beside its calendar icon */

/* ---------------------------------------------------------------- Entry forms: smaller spacing (boxes stay 33px) */
.fgrid { row-gap: 6px; }
.panel.form-fixed { padding: 12px 16px; }
.form-fixed .form-label { margin-bottom: 1px; }
.form-fixed h3.sub { margin: 8px 0 3px; }
.form-fixed .cpc-box { padding: 6px 10px; }
.form-fixed .avail2, .form-fixed .qu-hint { height: 14px; line-height: 14px; margin-top: 1px; }
.form-fixed .avail2 { font-size: .76rem; }
/* govt centre rows: "+ Add centre / pool" sits in the free Avail line under the last row (left side; Avail stays right) */
.form-fixed .cpc-lines { margin-bottom: 0; }
.form-fixed #cpcAdd { position: relative; z-index: 1; display: block; margin-top: -17px; line-height: 14px; font-size: .78rem; }

/* selected box: a thin 2px teal outline (not Bootstrap's 4px blue glow), and the line under a box starts 3px below it,
   so the outline never covers "Avail …" or the conversion line */
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(42, 133, 145, .25); }
.form-fixed .avail2, .form-fixed .qu-hint, .lines .avail { margin-top: 3px; }
.form-fixed .qu-avail + .qu-hint { margin-top: 0; }   /* the conversion line under "Avail" needs no extra gap */

/* save check: the label (or line-table column heading) of a wrong box turns red with it */
.is-bad-label { color: #b42318 !important; font-weight: 600; }
.is-bad, .input-validation-error:not([type=hidden]) { box-shadow: 0 0 0 2px rgba(180, 35, 24, .15) !important; }   /* 2px, like the normal highlight */

/* "Saved" message: link to the document just saved (e.g. Print) */
.lj-t-link { font-weight: 600; color: var(--field); text-decoration: underline; }

/* keyboard hint next to Save on entry forms */
.kb-hint { margin-left: 1rem; font-size: .76rem; color: var(--muted); white-space: nowrap; }

/* Dashboard alerts: one thin row of chips (red = act now, amber = keep an eye on it, green = all clear) */
.dash-alerts { display: flex; flex-wrap: wrap; gap: .4rem; flex-shrink: 0; }
.alert-chip { display: inline-block; padding: .18rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.alert-chip.bad { background: #fcebeb; color: #791f1f; }
.alert-chip.warn { background: #faeeda; color: #633806; }
.alert-chip.ok { background: #eaf3de; color: #27500a; }
a.alert-chip:hover { filter: brightness(.95); text-decoration: underline; }

/* Daily summary report: day picker on top, two columns, prints on one page */
.daily-head { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.daily-head input[type=date] { width: auto; }
.daily-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.daily .statement { margin-bottom: .4rem; }
.daily .statement td { padding: .22rem .5rem; }
.print-only { display: none; }
@media (max-width: 767.98px) { .daily-grid { grid-template-columns: minmax(0, 1fr); } }
@media print { .print-only { display: block; } .daily-grid { grid-template-columns: 1fr 1fr; } .panel.form-fixed { max-width: none; border: 0; } }

/* Quick search (Ctrl+K) */
.qs-open { margin-left: auto; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 6px; padding: .22rem .6rem; font-size: .85rem; min-width: 12rem; text-align: left; display: flex; align-items: center; gap: .5rem; }
.qs-open kbd { margin-left: auto; background: var(--paper); color: var(--muted); border: 1px solid var(--line); font-size: .72rem; padding: 0 .3rem; }

/* Account button (all screen sizes): name, Change password and Log out in its list. Phones: menu, title and account button on one line, search full width below */
.top .qs-open + .who-m { margin-left: 1rem; }
.who-m { position: relative; }
.who-av { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--gold); color: #fff; font-size: .8rem; font-weight: 600; }
.who-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; background: #fff;
           border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(15,40,46,.15); }
.who-m.open .who-pop { display: block; }
.who-pop > * { display: block; padding: .6rem .85rem; border-bottom: 1px solid var(--line); }
.who-pop > :last-child { border-bottom: 0; }
.who-pop small { display: block; color: var(--muted); }
.who-pop a { color: var(--ink); text-decoration: none; }
.who-pop button { border: 0; background: none; padding: 0; color: #b02a37; width: 100%; text-align: left; }
@media (max-width: 575.98px) {
    .top { flex-wrap: wrap; gap: .5rem .6rem; padding: .5rem .75rem .6rem; }
    .top-menu { font-size: 1.05rem; line-height: 1; padding: .2rem .55rem; }
    .top h1 { flex: 1; min-width: 0; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .qs-open { order: 3; flex-basis: 100%; margin-left: 0; min-width: 0; padding: .4rem .65rem; font-size: .9rem; }
    .qs-open kbd { display: none; }
}
dialog.qs { width: min(620px, 94vw); margin-top: 10vh; }
.qs-box { padding: .8rem; }
.qs-list { max-height: 60vh; overflow-y: auto; margin-top: .5rem; }
.qs-group { font-size: .74rem; font-weight: 600; color: var(--muted); text-transform: none; margin: .5rem .3rem .15rem; }
.qs-hit { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .55rem; border-radius: 6px; color: var(--ink); text-decoration: none; }
.qs-hit small { color: var(--muted); white-space: nowrap; }
.qs-hit.on, .qs-hit:hover { background: var(--gold-soft); color: var(--field); }
.qs-empty { color: var(--muted); padding: .6rem .4rem; font-size: .9rem; }

/* Weighbridge "Take weight" button: on the label of a weight box, or in a line table's quantity heading */
.weigh-chip { float: right; border: 0; border-radius: 999px; padding: 0 .55rem; font-size: .74rem; font-weight: 600; line-height: 1.35rem; margin-left: .4rem; white-space: nowrap; }
th .weigh-chip { float: none; display: inline-block; vertical-align: middle; }
.weigh-chip.ok { background: var(--gold); color: #fff; cursor: pointer; }
.weigh-chip.ok:hover { background: var(--field-2); }
.weigh-chip.moving { background: #faeeda; color: #633806; }
.weigh-chip.off { background: #eceef0; color: #6b746f; }

/* a worked-out figure on one line, box height: quantity on the left, amount on the right (paddy purchase Net / amount) */
.calc-out.one-line { display: flex; justify-content: space-between; align-items: center; gap: .5rem; height: 33px; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; }

/* Weighbridge page: live weight bar and status pills */
.wb-live { display: flex; align-items: center; gap: .9rem; background: var(--field); color: #fff; border-radius: 10px; padding: .55rem 1rem; margin-bottom: .8rem; }
.wb-live b { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.wb-live .pill { border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; font-weight: 600; }
.wb-live .pill.ok { background: #eaf3de; color: #27500a; }
.wb-live .pill.moving { background: #faeeda; color: #633806; }
.wb-live .pill.off { background: #eceef0; color: #555; }
.wb-manual summary { cursor: pointer; color: var(--muted); }

/* ---- Weigh trucks page (body.wb-screen): fills the screen. The page itself does not scroll, only the grids, up and down;
   columns fit the width (long text ends with …, full text on mouse-over), so nothing scrolls sideways.
   Left: New weighing (compact, 2 columns). Right: Trucks on yard (selectable) over Closed today. */
body.wb-screen .main { height: 100vh; display: flex; flex-direction: column; }
body.wb-screen .content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .8rem 1rem; }
.wb-screen .wb-live { margin-bottom: .6rem; padding: .35rem .9rem; }
.wb-screen .wb-live b { font-size: 1.45rem; }
.wb-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .8rem; }   /* form 40% · grids 60% */
.wb-layout > * { min-height: 0; }
.wb-layout .panel { margin: 0; padding: .7rem .9rem; }
.wb-layout .panel h3 { font-size: .95rem; margin: 0 0 .45rem; }
.wb-form { overflow-y: auto; scrollbar-gutter: stable; font-size: .88rem; }   /* room for the scrollbar kept: the boxes do not narrow when a taller ticket opens */
.wb-form .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .7rem; }
.wb-form .fgrid > :not(.span-all):not(.span-2) { grid-column: auto; }
.wb-form .fgrid > .span-2 { grid-column: 1 / -1; }
.wb-form .form-label { font-size: .8rem; margin-bottom: 0; }
.wb-form .form-control, .wb-form .form-select { font-size: .88rem; padding-top: .25rem; padding-bottom: .25rem; }
.wb-form .btn { font-size: .88rem; padding: .3rem .8rem; }
.wb-form .avail2 { height: .95rem; line-height: .95rem; font-size: .72rem; }
.wb-right { display: grid; grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); gap: .8rem; }
.wb-box { display: flex; flex-direction: column; min-height: 0; }
.wb-bar { display: flex; gap: .45rem; align-items: center; margin-bottom: .45rem; }
.wb-bar h3 { margin: 0 auto 0 0 !important; white-space: nowrap; }
.wb-bar .form-control, .wb-bar .btn { font-size: .82rem; }
.wb-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.wb-scroll table.grid { border: 0; margin: 0; table-layout: fixed; width: 100%; font-size: .84rem; }
.wb-scroll thead th { position: sticky; top: 0; z-index: 1; font-size: .78rem; padding: .3rem .4rem; }
.wb-scroll td { padding: .25rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-box .count { background: var(--field); color: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; }
.wb-yard tbody tr { cursor: pointer; user-select: none; }
.wb-yard tbody tr:hover td { background: #f3f7f7; }
.wb-yard tbody tr.sel td { background: #fdf3dc; box-shadow: inset 0 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
.wb-hint { font-size: .72rem; color: var(--muted); margin-top: .3rem; }
@media (max-width: 1100px), (max-height: 600px) {   /* small screens: one column, the page scrolls as usual */
    body.wb-screen .main { height: auto; display: block; }
    .wb-layout, .wb-right { display: block; }
    .wb-layout > *, .wb-right > * { margin-bottom: .8rem !important; }
    .wb-scroll { max-height: 380px; }
}
.wb-scroll thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-scroll td.wb-act { font-size: .78rem; }
.wb-scroll td.wb-act .btn-link { font-size: .78rem; vertical-align: baseline; }
@media (max-width: 1500px) {   /* 60% of a laptop screen: slightly smaller grid text so every column fits */
    .wb-scroll table.grid { font-size: .78rem; }
    .wb-scroll thead th { font-size: .72rem; padding: .3rem .2rem; }
    .wb-scroll td { padding: .25rem .2rem; }
    .wb-scroll td.wb-act, .wb-scroll td.wb-act .btn-link { font-size: .72rem; }
}
/* weigh trucks: Admin clicks a closed ticket to edit it on the left; the ticket shown on the left is highlighted */
.wb-scroll tbody tr.wb-click { cursor: pointer; }
.wb-scroll tbody tr.wb-click:hover td { background: #f3f7f7; }
.wb-scroll tbody tr.sel td { background: #fdf3dc; box-shadow: inset 0 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
.wb-ticket h3 { border-left: 4px solid var(--gold); padding-left: .5rem; display: flex; align-items: center; gap: .5rem; }   /* the "New weighing" button sits in the heading row (a float would narrow the boxes below) */
/* "+" in a grid column header: a new master entry (item, quality, unit, ledger) loaded into that column's drop-downs */
a.pp-add { margin-left: .35rem; vertical-align: middle; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; line-height: 1; background: #fff; border: 1px solid #c5d1d3; border-radius: 4px; text-decoration: none; font-weight: 700; color: var(--field); }
a.pp-add:hover { background: #e8f0f1; }
/* "+" add-a-row button in the last header cell of a grid (above the ✕ column) */
.btn.grid-add { padding: 0 .35rem; line-height: 1.25; font-weight: 700; }
.pp-lines td { vertical-align: middle; }
@media print { a.pp-add { display: none !important; } }
/* purchase form: under the item grid, the check / hint on the left and the truck deductions (dust, bags) on the right */
.pp-under { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.25rem; align-items: start; margin-top: .25rem; }
.pp-truck { border: 1px solid #d5dfe0; border-radius: 6px; background: #f6f9f9; padding: .4rem .6rem .5rem; }
.pp-truck-head { font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }
.pp-truck-head .muted { font-weight: 400; font-size: .75rem; }
.pp-truck-row { display: flex; gap: .75rem; align-items: flex-start; }
.pp-truck-row label { display: flex; flex-direction: column; font-size: .75rem; color: #4a5a5c; gap: .1rem; }
.pp-truck-row input { width: 6.2rem; }
.pp-truck-out { min-width: 11rem; font-size: .8rem; line-height: 1.25; padding-left: .25rem; }
/* truck deduction lines: Dust, Bags, then added lines (what it is + kg) */
.td-grid { display: flex; flex-direction: column; gap: .25rem; }
.td-lines { display: contents; }
.td-line { display: grid; grid-template-columns: 9rem auto; gap: .4rem; align-items: center; }
.td-lbl { font-size: .8rem; color: #4a5a5c; }
.td-line .td-desc { width: 100%; }
.td-kgbox { display: flex; align-items: center; gap: .3rem; font-size: .8rem; white-space: nowrap; }
.pp-truck-row .td-kgbox input { width: 5.5rem; }
#tdAdd { align-self: flex-start; font-size: .8rem; }
@media (max-width: 900px) { .pp-under { grid-template-columns: 1fr; } .pp-truck-row { flex-wrap: wrap; } }
/* Voucher type: prefix / suffix / restart rows side by side */
.vt-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.vt-rules table { margin-bottom: .2rem; }
@media (max-width: 991.98px) { .vt-rules { grid-template-columns: minmax(0, 1fr); } }
/* Paddy purchase row 3: vehicle, truck weight and bags share two columns; the weight box is as wide as the others, its unit extra */
.fgrid > .pp-row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4.6rem minmax(0, 1fr); column-gap: 1rem; align-content: start; }
.pp-row3 > .pp-truckw { grid-column: span 2; }
.pp-row3 .qu .qu-unit { flex: 0 0 calc(4.6rem + 1rem); max-width: none; }
.pp-row3-hint { grid-column: 1 / -1; text-align: right; font-size: .78rem; }
@media (max-width: 575.98px) { .fgrid > .pp-row3 { grid-template-columns: minmax(0, 1fr); } .pp-row3 > .pp-truckw { grid-column: auto; } }

/* "+ New ..." link at the right end of its box's label line (moved there by site.js) */
.lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; min-width: 0; }
.lbl-row > .form-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbl-row > a { flex: 0 0 auto; white-space: nowrap; font-size: .78rem; line-height: 1.2; }
.lbl-row > .to-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
/* a note under a box takes no room until it has something to say (weigh slip weight, GST mode) */
.fgrid small:empty { display: none; }
.wb-bar #wbFrom { font-size: .82rem; }
.wb-bar .btn { white-space: nowrap; }
@media (max-width: 700px) {   /* phone: the Closed heading on its own line, then three big tap buttons: ‹ 7 days · date · 7 days › */
    #wbClosed .wb-bar { flex-wrap: wrap; }
    #wbClosed .wb-bar h3 { flex: 0 0 100%; margin-bottom: .15rem !important; }
    #wbClosed .wb-bar > .btn, #wbClosed .wb-bar #wbFrom { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
    #wbClosed .wb-bar > .btn { padding: 0 .3rem; }
    #wbClosed .wb-bar #wbFrom { flex: 0 0 9.2rem; width: auto !important; padding: 0 .4rem; }
    #wbClosed .wb-bar .wb-wide { display: none; }
}
/* weigh trucks: New weighing and a ticket have headings of the same height, so the boxes do not move down when a truck opens */
.wb-form h3 { display: flex; align-items: center; gap: .5rem; min-height: 1.6rem; }
.wb-form h3 .btn { padding: .1rem .55rem; font-size: .8rem; line-height: 1.2; }
.wb-form h3 .wb-used { font-size: .75rem; font-weight: 400; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-form h3 .btn { flex: 0 0 auto; }
.wb-form h3 { white-space: nowrap; }   /* one line: a long "used by" is cut with … (full text on mouse-over) */
.wb-form .avail2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* note lines under the boxes stay one line high */
/* weigh trucks: Save with a ▾ for "Save + saved tare as 2nd weight" (the menu opens upwards, above the buttons) */
.wb-save { position: relative; }
.wb-save .wb-more { padding-left: .5rem; padding-right: .5rem; border-left: 1px solid rgba(0, 0, 0, .15); }
.wb-menu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(15, 40, 46, .18); padding: .25rem; white-space: nowrap; }
.wb-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 6px; padding: .4rem .7rem; font-size: .85rem; color: inherit; }
.wb-menu button:hover:not(:disabled) { background: #f3f7f7; }
.wb-menu button:disabled { color: var(--muted); cursor: not-allowed; }
.wb-save > .wb-more { border-top-right-radius: var(--bs-btn-border-radius) !important; border-bottom-right-radius: var(--bs-btn-border-radius) !important; }   /* the menu after it is not a button: keep the round corners */
/* weigh trucks: a weight's date / time (or the "taken" note, red for a problem) inside its box, on the right */
.wb-wt { position: relative; }
.wb-wt > input { padding-right: 6.4rem; }
.wb-wt-at { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); max-width: 60%; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.wb-wt-at.short { color: #b42318; font-weight: 600; }
/* Save (▾) and Take weight: two equal buttons under the two weight boxes; Save keeps that size on a closed ticket */
.wb-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: .3rem .7rem; margin-top: 1.625rem; align-items: center; }   /* the same gap as between the weight boxes (label + row gap) */
.wb-btns .wb-save { display: flex; width: 100%; }
.wb-btns .wb-save > .btn-gold:first-child { flex: 1; }
.wb-btns > .btn { width: 100%; }
.wb-btns > a.btn-link { width: auto; justify-self: start; }
.wb-btns .wb-menu { right: auto; min-width: 100%; }   /* Save is sized to fit this menu: both the same width */
.wb-save > .wb-more { flex: 0 0 25%; padding-left: 0; padding-right: 0; }   /* the ▾ is always a quarter of the Save button; the label part takes the rest */

/* Gate screen (gate guard): one card per truck, big Out button, fits a phone */
.gate { max-width: 860px; }
.gate h3 { font-size: 1.05rem; margin: .75rem 0 .5rem; }
.gate-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.gate-bar input[type=date] { width: 11rem; }
.gate-count { margin-left: auto; border-radius: 999px; padding: .2rem .8rem; font-size: .85rem; font-weight: 600; background: #eceef0; color: #555; }
.gate-count.on { background: #faeeda; color: #633806; }
.gate-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; background: #fff; border: 1px solid #e3e6e8; border-radius: 10px; padding: .7rem .9rem; margin-bottom: .5rem; }
.gate-row.done { background: #fafbfa; }
.gate-veh { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.gate-veh small { display: block; font-size: .8rem; font-weight: 400; color: #6c757d; }
.gate-goods { font-size: .92rem; line-height: 1.45; }
.gate-out { min-width: 6.5rem; padding: .6rem 1rem; font-size: 1.05rem; }
.gate .pill { border-radius: 999px; padding: .15rem .7rem; font-size: .8rem; font-weight: 600; }
.gate .pill.ok { background: #eaf3de; color: #27500a; }
@media (max-width: 575.98px) {
    .gate-row { grid-template-columns: minmax(0, 1fr) auto; }
    .gate-goods { grid-column: 1 / -1; grid-row: 2; }
    .gate-count { margin-left: 0; }
}

/* Plant: operator's machine cards and machine-run form (fits a phone), plant floor */
.plant { max-width: 900px; }
.plant .pill { border-radius: 999px; padding: .15rem .7rem; font-size: .8rem; font-weight: 600; background: #eceef0; color: #555; }
.plant .pill.ok { background: #eaf3de; color: #27500a; }
.plant .pill.warn { background: #faeeda; color: #633806; }
.plant-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.plant-card { display: flex; flex-direction: column; gap: .3rem; background: #fff; border: 1px solid #e3e6e8; border-radius: 10px; padding: .8rem .9rem; }
.plant-card.on { border-color: #e7b46a; background: #fffaf2; }
.plant-card-name { font-size: 1.15rem; font-weight: 700; }
.plant-card .btn { margin-top: auto; align-self: stretch; }
.plant-card.loaded { border-color: #9cc3a5; background: #f4faf5; }
/* plant setup: machines ticked into a stage */
.st-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .3rem 1rem; }
.st-machines .form-check { margin: 0; }
.plant-done { display: block; background: #fafbfa; border: 1px solid #e3e6e8; border-radius: 8px; padding: .5rem .8rem; margin-bottom: .4rem; color: inherit; text-decoration: none; }
.plant-done .muted { display: block; font-size: .88rem; }
.plant-head { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: flex-end; justify-content: space-between; background: #fff; border: 1px solid #e3e6e8; border-radius: 10px; padding: .8rem .9rem; margin-bottom: .5rem; }
.plant-head .pill { margin-left: .4rem; }
.plant-now { display: flex; gap: .4rem; align-items: center; }
.plant-now input { min-width: 0; flex: 1; }
.plant-now > .muted { width: 3.2rem; }
.plant-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 7rem auto; gap: .5rem; align-items: end; background: #fff; border: 1px solid #e3e6e8; border-radius: 10px; padding: .6rem .7rem; margin-bottom: .4rem; }
.plant-step { display: grid; grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; align-items: center; background: #fff; border: 1px solid #e3e6e8; border-radius: 10px; padding: .6rem .7rem; margin-bottom: .4rem; }
.plant-btns { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.plant-btns .btn-lg { min-width: 9rem; }
.plant-bins { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
@media (max-width: 575.98px) {
    .plant-line { grid-template-columns: minmax(0, 1fr) auto; }
    .plant-line .pl-what-box { grid-column: 1 / -1; grid-row: 2; }
    .plant-line .pl-qty-box { grid-column: 1 / -1; grid-row: 3; }
    .plant-line .pl-del { grid-column: 2; grid-row: 1; }
    .plant-step { grid-template-columns: 1fr; }
    .plant-btns .btn-lg { flex: 1; }
    .plant-head { align-items: stretch; flex-direction: column; }
}

/* Confirmation modal (site.js ljModal) */
.lj-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lj-modal-box { background: #fff; border-radius: 12px; padding: 1.1rem 1.25rem; width: 100%; max-width: 380px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.lj-modal-title { font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; }
.lj-modal-title.bad { color: #a32d2d; }
.lj-modal-body { font-size: .95rem; line-height: 1.55; }
.lj-modal-body .muted { color: #6c757d; }
.lj-modal-btns { display: flex; gap: .5rem; margin-top: 1rem; }
.lj-modal-btns .btn { flex: 1; padding: .6rem; font-size: 1rem; }

/* Voucher types: every kind's table has the same fixed columns (long text wraps inside its cell) */
.vt-grid { table-layout: fixed; width: 100%; }
.vt-grid td, .vt-grid th { overflow-wrap: break-word; }   /* numbers break only after a "/" (<wbr> in the view) */
.sale-lines thead th { white-space: nowrap; }   /* headings on one line, like the purchase grid */
.sale-lines tfoot th { padding-top: .45rem; padding-bottom: .45rem; }
.form-fixed .sale-lines .avail { font-size: .76rem; height: 14px; line-height: 14px; margin-top: 1px; }   /* same size as the Avail lines on the other forms */

/* Phones: list tables become one card per row (the parts are marked by site.js; PCs and printing keep the table) */
@media screen and (max-width: 575.98px) {
    table.grid.cards, table.grid.cards > tbody, table.grid.cards > tfoot { display: block; width: 100%; background: transparent; border: none; }
    table.grid.cards > thead { display: none; }
    table.grid.cards > * > tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; background: var(--card-bg, #fff);
                                border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; margin-bottom: .5rem; font-size: .88rem; }
    table.grid.cards > * > tr[hidden] { display: none; }
    table.grid.cards > tfoot > tr { background: #f5f8f8; }
    table.grid.cards > * > tr > * { display: block; border: none; padding: 0; background: transparent; box-shadow: none; text-align: left; white-space: normal; }
    /* line breaks between the groups (flex items of their own) */
    table.grid.cards > * > tr::before, table.grid.cards > * > tr::after { content: ""; flex-basis: 100%; height: 0; }
    table.grid.cards > * > tr::before { order: 45; }
    table.grid.cards > * > tr::after { order: 55; }
    table.grid.cards .c-empty { display: none; }
    table.grid.cards .c-title { order: 10; flex: 1 1 0; min-width: 0; font-weight: 600; color: var(--field); }
    table.grid.cards .c-amt { order: 20; margin-left: auto; font-weight: 700; white-space: nowrap; }
    table.grid.cards .c-sub { order: 30; flex-basis: 100%; margin: .1rem 0; }
    table.grid.cards .c-meta, table.grid.cards .c-lab { order: 40; font-size: .8rem; color: var(--muted); white-space: nowrap; }
    table.grid.cards .c-lab { order: 50; }
    table.grid.cards .c-meta:not(.c-first)::before { content: "·"; margin-right: .5rem; }
    table.grid.cards .c-lab::before { content: attr(data-label) " "; }
    table.grid.cards .c-lab:not(.c-first)::before { content: "· " attr(data-label) " "; }
    table.grid.cards .c-act { order: 60; flex-basis: 100%; margin-top: .4rem; font-size: .85rem; }
    table.grid.cards .c-act a, table.grid.cards .c-act .btn-link { margin: 0 1rem 0 0 !important; }
    /* rows that don't follow the columns (a heading row, the items of a purchase): full width */
    table.grid.cards > tbody > tr.c-plain { display: block; }
    table.grid.cards > tbody > tr.c-plain > * { display: block; }
    /* the date filter: From and To side by side */
    .filter label { flex: 1 1 8rem; }
    .filter label .form-control { width: 100%; }
}

/* Phones: weigh trucks. The bar above a list wraps (heading, then the find box, then the buttons) so nothing runs off
   the screen, and the picked truck colours its whole card instead of every piece of text in it */
@media screen and (max-width: 575.98px) {
    .wb-bar { flex-wrap: wrap; }
    .wb-bar h3 { flex-basis: 100%; margin: 0 0 .1rem 0 !important; }
    .wb-bar #wbFind { width: auto !important; flex: 1 1 100%; }
    .wb-bar #wbOpen { flex: 1 1 auto; }
    .wb-scroll table.grid.cards > tbody > tr > td { background: transparent !important; box-shadow: none !important; }
    .wb-scroll table.grid.cards > tbody > tr.sel { background: #fdf3dc; border: 2px solid var(--gold); padding: calc(.55rem - 1px) calc(.75rem - 1px); }
}

/* Phones: nothing runs off the screen. Long text in a card wraps inside it; a wide table that stays a table (tree tables,
   two header rows) slides inside its own box (site.js wraps it in .tbl-swipe); wide dropdowns and alert chips fit the screen */
@media screen and (max-width: 575.98px) {
    table.grid.cards .c-meta, table.grid.cards .c-lab, table.grid.cards .c-lab * { white-space: normal; overflow-wrap: anywhere; }
    .alert-chip { white-space: normal; }
    .main select.form-select { max-width: 100% !important; }
    .tbl-swipe { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; }
    .tbl-swipe > table { margin-bottom: 0; }
    .tbl-swipe > table.tree { table-layout: auto; width: max-content; min-width: 100%; }
    .tbl-swipe > table.tree th, .tbl-swipe > table.tree td { white-space: nowrap; }
    .side-find { font-size: 16px; }   /* the phone does not zoom in when it is touched */
    .swipe-hint { font-size: .75rem; color: var(--muted); text-align: right; margin: -.8rem 0 .8rem; }
}

/* Phones: entry forms (site.js marks the parts). Bigger boxes, line tables as one card per line, Save at the bottom of
   the screen, popups slide up from the bottom. PCs and printing are unchanged. */
.sb-total { display: none; }
@media screen and (max-width: 575.98px) {
    /* boxes 40px high, 16px text (the phone does not zoom in when a box is touched) */
    .form-control, .form-select, .input-group-text { min-height: 40px; font-size: 16px; }
    .calc-out.one-line { height: 40px; }
    .kb-hint { display: none; }

    /* line tables: each line a card, every box under its heading; Add line and "+ New …" under the cards, then the totals */
    .table-responsive:has(> table.ecards) { overflow: visible; }
    table.ecards { display: flex; flex-direction: column; width: 100%; min-width: 0 !important; background: transparent; border: 0; margin-bottom: .5rem; }
    table.ecards > colgroup { display: none; }
    table.ecards > tbody { display: block; order: 1; }
    table.ecards > thead { display: block; order: 2; }
    table.ecards > tfoot { display: block; order: 3; }
    table.ecards td[hidden], table.ecards th[hidden] { display: none !important; }
    table.ecards > tbody > tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: start;
                                background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem .7rem; margin-bottom: .55rem; }
    table.ecards[data-ec-cols="2"] > tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    table.ecards > tbody > tr > td { display: block; min-width: 0; padding: 0 !important; border: 0; background: transparent; box-shadow: none; text-align: left; white-space: normal; overflow: visible; }
    table.ecards > tbody > tr > td::before { content: attr(data-label); display: block; font-size: .74rem; font-weight: 600; color: var(--muted); margin-bottom: 2px;
                                             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    table.ecards > tbody > tr > td.ec-first { grid-column: 1 / -1; padding-right: 2.2rem; }
    table.ecards > tbody > tr > td.num { font-weight: 600; color: var(--field); line-height: 40px; }   /* worked out (Net, Amount): box height */
    table.ecards > tbody > tr > td.num::before { line-height: 1.5; }
    table.ecards > tbody > tr > td.ec-del { position: absolute; top: .2rem; right: .2rem; }
    table.ecards > tbody > tr > td.ec-del::before { display: none; }
    table.ecards > tbody > tr > td.ec-del:empty { display: none; }
    table.ecards .ec-del .btn { width: auto; font-size: 1.15rem; line-height: 1; padding: .35rem .55rem !important; }
    table.ecards > thead > tr { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; background: transparent; }
    table.ecards > thead th { display: none; }
    table.ecards > thead th:has(.pp-add, .grid-add) { width: auto !important; min-width: 0 !important; white-space: nowrap; display: block; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 0; }
    table.ecards > thead th:has(.grid-add) { order: -1; }
    table.ecards .btn.grid-add { height: 40px; padding: 0 1rem; font-size: 15px; font-weight: 600; border: 1px solid var(--gold); border-radius: 8px; background: #fff; color: var(--gold); }
    table.ecards .btn.grid-add::after { content: " " attr(title); }
    table.ecards a.pp-add { display: inline; width: auto; height: auto; margin: 0; border: 0; background: none; color: var(--gold); font-size: .82rem; font-weight: 600; }
    table.ecards a.pp-add::after { content: " " attr(title); }
    table.ecards > tfoot > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; background: #f5f8f8; border: 1px solid var(--line); border-radius: 10px;
                                padding: .55rem .75rem; margin-top: .6rem; }
    table.ecards > tfoot th { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; white-space: nowrap; }
    table.ecards > tfoot th:empty { display: none; }
    table.ecards > tfoot th[data-label]::before { content: attr(data-label) " "; font-weight: 400; font-size: .8rem; color: var(--muted); }

    /* truck deductions under the paddy / sales lines: fit the phone width */
    .pp-under { grid-template-columns: minmax(0, 1fr); }
    .pp-truck { min-width: 0; }
    .pp-truck-row { flex-direction: column; gap: .4rem; }
    .td-line { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .td-kgbox { min-width: 0; }
    .pp-truck-row .td-kgbox input { width: auto; min-width: 0; flex: 1 1 0; }
    .pp-truck-out { min-width: 0; }

    /* Save row: stays at the bottom of the screen; the form's total on the left, then Cancel, then Save */
    .save-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem;
                background: #fff; padding: .55rem 0 calc(.55rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); box-shadow: 0 -6px 8px -6px rgba(15, 40, 46, .18); }
    .save-bar .sb-total { display: block; order: -1; margin-right: auto; min-width: 0; line-height: 1.2; }
    .sb-total small { display: block; font-size: .72rem; color: var(--muted); }
    .sb-total b { font-size: 1.05rem; color: var(--field); white-space: nowrap; }
    .save-bar .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; font-size: 15px; border-radius: 8px; }
    .save-bar .btn-link { order: 2; border: 1px solid #ced4da; background: #fff; color: var(--ink); text-decoration: none; }
    .save-bar .btn-gold { order: 3; min-width: 7rem; font-weight: 600; }

    /* popups: a sheet from the bottom; the title bar stays on top, the form scrolls, Save / Close stay at the bottom */
    dialog.quick-dialog:not(.qs) { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92vh; border-radius: 14px 14px 0 0; overflow: hidden; }
    dialog.quick-dialog:not(.qs)[open] { display: flex; flex-direction: column; }
    dialog.quick-dialog:not(.qs) > .qd-head { flex: none; padding: .75rem 1rem; }
    dialog.quick-dialog:not(.qs) > .qd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1rem .4rem; }
    .qd-body .qd-actions { position: sticky; bottom: 0; background: #fff; padding: .55rem 0 .8rem; margin-top: .8rem; border-top: 1px solid var(--line); }
    .qd-actions .btn { min-height: 40px; padding: 0 1.2rem; font-size: 15px; margin-left: auto; }
}

/* Day book (Tally style): fixed columns, a long ledger name ends with … */
@media (min-width: 576px) {
    table.daybook-t { table-layout: fixed; }
    table.daybook-t td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* PCs: list pages fit the window, only the grids scroll (site.js puts each list grid in a .grid-fit box) */
@media screen and (min-width: 993px) and (min-height: 600px) {
    body.fit-page .main { height: 100vh; display: flex; flex-direction: column; }
    body.fit-page .content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: .75rem; }
    body.fit-page .content > * { flex-shrink: 0; }
    body.fit-page .content > .grid-fit { flex: 0 1 auto; min-height: 5.5rem; overflow-y: auto; overflow-x: hidden; margin-bottom: .75rem;
        border: 1px solid var(--line); background: #fff; }
    body.fit-page .content > .grid-fit:last-child { margin-bottom: 0; }
    .grid-fit { scrollbar-gutter: stable; }   /* the scrollbar gets its own strip, not drawn over the last column */
    .grid-fit > table.grid { margin: 0; border: 0; }
    .grid-fit > table.grid tr > :last-child { padding-right: 14px; }   /* browsers whose scrollbar floats over the grid */
    .grid-fit > table.grid > thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--line); }
    .grid-fit > table.grid > tfoot th, .grid-fit > table.grid > tfoot td { position: sticky; bottom: 0; z-index: 2; background: #f5f8f8; box-shadow: inset 0 1px 0 var(--line); }
    .grid-fit > table.grid td, .grid-fit > table.grid th { overflow-wrap: break-word; }
    .grid-fit > table.grid .num, .grid-fit > table.grid td:first-child { white-space: nowrap; }
    body.fit-page .content > h3.sub { margin: .4rem 0 .4rem; }
}

/* every box that scrolls up and down: the scrollbar gets its own strip, and the last column keeps room in browsers whose
   scrollbar floats over the content (the list grids are in the PC block above) */
.wb-scroll, .tk-trucks, .tk-warn-pop, .tk-warn-form, .assign-list, .qs-list, dialog.quick-dialog > .qd-body { scrollbar-gutter: stable; }
.wb-scroll table tr > :last-child, .tk-trucks table tr > :last-child, .tk-warn-pop table tr > :last-child,
.assign-list table tr > :last-child { padding-right: 14px; }

/* operator's My entries: kind buttons and the two totals */
.mine-kinds { display: flex; gap: .4rem; margin: .5rem 0; }
.mine-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: .5rem; }
.mine-totals > div { background: #f5f8f8; border-radius: 8px; padding: .4rem .6rem; }
.mine-totals .muted { display: block; font-size: .8rem; }
/* Phone home: tiles made from the menu, in place of the dashboard (phones only; "Show full dashboard" brings it back) */
.ph-home { display: none; }
.top-home { display: inline-flex; align-items: center; padding: .2rem .45rem; }
.top-home .ni { stroke: currentColor; width: 18px; height: 18px; }
@media (max-width: 767.98px) {
    body:not(.ph-full) .ph-home { display: block; margin: -.5rem -.25rem 0; }
    body:not(.ph-full) .dash { display: none; }
    .ph-head { background: var(--field); color: #fff; border-radius: 14px; padding: .8rem .9rem; }
    .ph-head > b { display: block; font-size: 1.1rem; font-weight: 600; }
    .ph-head > small { color: #b9d2d5; }
    .ph-figs { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .6rem; }
    .ph-figs > div { background: rgba(255,255,255,.12); border-radius: 9px; padding: .35rem .55rem; font-size: .78rem; color: #cfe0e2; }
    .ph-figs b { display: block; font-size: 1.05rem; font-weight: 600; color: #fff; }
    .ph-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-top: .6rem; padding: .55rem .6rem .7rem; }
    .ph-card h4 { font-size: .92rem; font-weight: 600; margin: 0 0 .5rem .15rem; color: var(--field); }
    .ph-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem .3rem; }
    .ph-few .ph-tiles > a:nth-of-type(n+4) { display: none; }
    .ph-card:not(.ph-few) .ph-more { display: none; }
    .ph-tile { display: block; text-align: center; font-size: .74rem; line-height: 1.2; color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0; }
    .ph-tile > span { display: flex; width: 44px; height: 44px; margin: 0 auto .3rem; border-radius: 50%; background: var(--gold-soft); align-items: center; justify-content: center;
                      color: var(--field); font-weight: 600; font-size: .85rem; }
    .ph-tile .ni { stroke: var(--gold); width: 22px; height: 22px; }
    .ph-dash { display: block; margin: .8rem auto .4rem; }
}

/* a form being saved in the background (site.js): its buttons wait */
form.bg-saving button { cursor: progress; opacity: .65; }
/* the thin bar at the top while the next page is on its way (site.js): it creeps to 80 %, then fills and fades */
#ljBar { position: fixed; top: 0; left: 0; z-index: 3000; height: 3px; width: 0; background: var(--gold); opacity: 0; pointer-events: none; }
#ljBar.on { width: 80%; opacity: 1; transition: width 6s cubic-bezier(.1, .7, .2, 1), opacity .15s; }
#ljBar.done { width: 100%; opacity: 0; transition: width .2s ease-out, opacity .35s .2s; }
@media print { #ljBar { display: none; } }
/* hints inside capital-letter boxes (vehicle no.) read normally */
.text-uppercase::placeholder { text-transform: none; }
/* item counter prices table */
.cp-grid th, .cp-grid td { vertical-align: middle; white-space: nowrap; }
.cp-grid input { width: 110px; margin-left: auto; }
.cp-grid .cp-head td { font-size: .8rem; color: var(--muted, #6c757d); padding-top: .8rem; border-bottom: 0; }
/* Quick sale (POS): item tiles on the left, the cart on the right */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.pos-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pos-bar label { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.pos-bar #posFind { max-width: 220px; }
.pos-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pos-tile { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.pos-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.pos-sizes button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 8px 4px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.pos-sizes button small { display: block; font-weight: 400; color: var(--muted); }
.pos-sizes button:hover { border-color: var(--gold); }
.pos-sizes button.hit { background: var(--gold); color: #fff; border-color: var(--gold); }
.pos-sizes button.hit small { color: #fff; }
.pos-cart { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 12px; position: sticky; top: 10px; }
.pos-line { display: grid; grid-template-columns: 1fr auto 80px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pos-qty { display: flex; gap: 3px; align-items: center; }
.pos-qty input { width: 56px; }
.pos-total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; margin: 8px 0; }
.pos-sec { border-top: 1px solid var(--line); padding: 8px 0; display: grid; gap: 6px; }
.pos-seg { display: flex; gap: 6px; }
.pos-seg label { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: 6px 4px; cursor: pointer; background: #fff; }
.pos-seg input { position: absolute; opacity: 0; }
.pos-seg label:has(input:checked) { background: var(--gold); color: #fff; border-color: var(--gold); }
.pos-seg label:has(input:focus-visible) { outline: 2px solid var(--field); }
.pos-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; }
.pos-change { font-weight: 600; text-align: right; }
.pos-save { width: 100%; padding: 10px; font-size: 16px; }
.pos-sizes button { position: relative; }
.pos-badge { position: absolute; top: -7px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--field); color: #fff; font-size: 11px; line-height: 20px; font-weight: 700; }
.pos-mbar, .pos-shade, .pos-shead { display: none; }
@media (max-width: 900px) { .pos { grid-template-columns: 1fr; } .pos-cart { position: static; } }
@media (max-width: 767.98px) {   /* phones: items fill the screen; the cart is a sheet opened from the bottom bar */
    .pos-items { padding-bottom: 76px; }
    .pos-bar { flex-wrap: nowrap; }
    .pos-bar label { flex: 1; min-width: 0; }
    .pos-bar .pos-from { display: none; }
    .pos-bar #posFind { max-width: none; flex: 1; min-width: 0; }
    .pos-bar .form-select-sm, .pos-bar .form-control-sm { font-size: 16px; padding-top: 8px; padding-bottom: 8px; }   /* 16px: phones don't zoom in on tap */
    .pos-tiles { grid-template-columns: 1fr; }
    .pos-sizes button { padding: 12px 4px; font-size: 15px; }
    .pos-mbar { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; border: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--field); color: #fff; text-align: left; box-shadow: 0 -2px 10px rgba(0, 0, 0, .2); }
    .pos-mbar #posMsum { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pos-mbar b { font-size: 18px; }
    .pos-mgo { background: var(--gold); border-radius: 6px; padding: 6px 10px; font-weight: 600; }
    .pos-shade { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(15, 30, 32, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
    .pos-cart { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: 14px 14px 0 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .22s; }
    .pos.cart-open .pos-cart { transform: none; }
    .pos.cart-open .pos-shade { opacity: 1; pointer-events: auto; }
    .pos-shead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; }
    .pos-line { grid-template-columns: 1fr auto 72px; }
    .pos-qty .btn { width: 38px; height: 38px; font-size: 18px; }
    .pos-qty input { width: 52px; height: 38px; font-size: 16px; }
    .pos-cart .form-control-sm, .pos-cart .form-select-sm { font-size: 16px; padding-top: 8px; padding-bottom: 8px; }
    .pos-seg label { padding: 10px 4px; }
    .pos-save { padding: 14px; font-size: 18px; }
}

/* who entered / last changed a saved record (under its form), and Admin › Change history */
.audit-stamp { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .75rem 0 0; padding-top: .5rem; border-top: 1px solid var(--line, #e5e7eb); }
.audit-stamp b { font-weight: 600; color: var(--ink, inherit); }
.audit-stamp a { margin-left: auto; }
@media print { .audit-stamp { display: none; } }
.ah-badge { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.ah-added { background: #e7f6ec; color: #1e7b3a; }
.ah-changed { background: #fff4dc; color: #8a5a00; }
.ah-deleted { background: #fde8e8; color: #b42318; }
.ah-diff { margin: 0; padding: 0; list-style: none; }
.ah-diff li { margin: 0 0 .1rem; }
.ah-diff .ah-old { color: var(--muted); text-decoration: line-through; }
.ah-snap { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; margin: .4rem 0 0; }
.ah-snap dt { font-weight: 500; color: var(--muted); }
.ah-snap dd { margin: 0; }