/* ---- V1.64 production accounting (pa-): Client\Apps\Accounting (AccountingPage and its tabs). Design system tokens only (--os-*), full
   page width. ---- */

.pa-page { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.pa-page > * { min-width: 0; max-width: 100%; }
.pa-page .os-pagehead > * { min-width: 0; }

.pa-date { width: auto; min-width: 150px; }

.pa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--os-space-4); align-items: start; }
@media (min-width: 1200px) {
    .pa-grid { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
}
.pa-main, .pa-side { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }

/* The balance: figures on the right, an adjusted figure marked */
.pa-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-adjusted { background: var(--os-warn-soft); }
.pa-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--os-space-3); padding: var(--os-space-3); }

.pa-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--os-space-3); padding: var(--os-space-3); }
.pa-form .pa-wide { grid-column: 1 / -1; }
.pa-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--os-space-2); padding: 0 var(--os-space-3) var(--os-space-3); }
.pa-text { margin: var(--os-space-2) 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ---- V1.69 the premium pass (mockup 22): the overview (PaOverviewTab and its parts), the phone's summary (PaPhone), the Adjustments
   and Reconciliation tabs, the plan versions. Semantic tokens only, full page width. ---- */

.pa-pad { padding: 0 var(--os-space-3); margin: var(--os-space-2) 0 0; }
.pa-clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pa-bad-text { color: var(--os-bad-text); }
.pa-good-text { color: var(--os-good-text); }
.pa-warn-text { color: var(--os-warn-text); }
.pa-click { cursor: pointer; }
.pa-linkbtn { border: 0; padding: 0; background: none; color: var(--os-accent-text); font: inherit; cursor: pointer; text-decoration: underline; }
.pa-range { display: inline-flex; align-items: center; gap: var(--os-space-1); color: var(--os-text-2); }
.pa-range .os-input { width: auto; min-width: 0; max-width: 150px; }
.pa-monthname { font: var(--os-type-body-strong); color: var(--os-text); min-width: 9rem; text-align: center; }
@media (max-width: 639.98px) { .pa-hide-xs { display: none !important; } }
@media (max-width: 1279.98px) { .pa-hide-md { display: none; } }

/* The overview grid: 8 + 4 (the right column stretches to the left column height), 6 + 6 */
.pa-col { --span: 4; display: flex; flex-direction: column; gap: var(--os-gutter); min-width: 0; }
.pa-col.pa-col--8 { --span: 8; }
.pa-col.pa-col--6 { --span: 6; }
.pa-page .os-grid.pa-ovgrid { align-items: stretch; }
.pa-ovgrid > .pa-col > * { flex: 1 1 auto; }

/* The days closed tile: one mark per day, the colour of its state */
.pa-strip { display: flex; gap: 2px; margin-bottom: var(--os-space-1); }
.pa-strip__d { flex: 1 1 0; max-width: 8px; height: 10px; border-radius: 1px; background: var(--os-good); }
.pa-strip__d--open { background: var(--os-info); }
.pa-strip__d--late { background: var(--os-warn); }
.pa-strip__d--outsidetolerance { background: var(--os-bad); }
.pa-strip__d--running { background: var(--os-border); }

/* The SVG charts (Razor): the chart tokens */
.pa-svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--os-font-ui); }
.pa-grid-line { stroke: var(--os-chart-grid); stroke-width: 1; }
.pa-axis { stroke: var(--os-chart-axis); stroke-width: 1.5; }
.pa-tick { fill: var(--os-chart-label); font-size: var(--os-chart-font); font-variant-numeric: tabular-nums; }
.pa-tick--strong { fill: var(--os-text); font-weight: 600; }
.pa-label { fill: var(--os-text); font-size: var(--os-chart-font); font-weight: 600; font-variant-numeric: tabular-nums; }
.pa-label--muted { fill: var(--os-text-2); font-weight: 400; }
.pa-future { fill: var(--os-surface-sunken); }
.pa-today { stroke: var(--os-chart-event); stroke-width: 1; stroke-dasharray: 3 3; }
.pa-bar { fill: var(--os-chart-1); }
.pa-bar--open { fill: var(--os-chart-1); opacity: .55; }
.pa-line { fill: none; stroke-width: 2; }
.pa-line--plan { stroke: var(--os-chart-target); stroke-dasharray: 5 4; stroke-width: 1.5; }
.pa-line--target { stroke: var(--os-chart-line); stroke-width: 1.5; }
.pa-line--cum { stroke: var(--os-chart-2); }
.pa-line--proj { stroke: var(--os-chart-2); stroke-dasharray: 2 4; }
.pa-dot { fill: var(--os-chart-2); stroke: var(--os-surface); stroke-width: 2; }
.pa-band { fill: var(--os-chart-band); }
.pa-fit { stroke: var(--os-chart-2); stroke-width: 2; }
.pa-pt { fill: var(--os-chart-1); stroke: var(--os-surface); stroke-width: 1.5; }
.pa-pt--open { fill: var(--os-warn); }
.pa-fbar--1 { fill: var(--os-chart-1); }
.pa-fbar--2 { fill: var(--os-chart-2); }
.pa-fbar--3 { fill: var(--os-chart-3); }
.pa-fbar.is-out { stroke: var(--os-bad); stroke-width: 1.5; }

/* The figures under a chart */
.pa-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--os-space-3); margin: 0; width: 100%; }
.pa-figures > div { display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.pa-figures dt { font: var(--os-type-caption); color: var(--os-text-2); overflow-wrap: anywhere; }
.pa-figures dd { margin: 0; font: var(--os-type-kpi-sm); color: var(--os-text); font-variant-numeric: tabular-nums; }

/* Needs attention now */
.pa-attn { list-style: none; margin: 0; padding: 0; }
.pa-attn__i { display: flex; align-items: flex-start; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.pa-attn__i:first-child { border-top: 0; }
.pa-attn__ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--os-radius-md); }
.pa-attn__i--bad .pa-attn__ic { background: var(--os-bad-soft); color: var(--os-bad-text); }
.pa-attn__i--warn .pa-attn__ic { background: var(--os-warn-soft); color: var(--os-warn-text); }
.pa-attn__i--info .pa-attn__ic, .pa-attn__i--neutral .pa-attn__ic { background: var(--os-info-soft); color: var(--os-info-text); }
.pa-attn__t { flex: 1; min-width: 0; display: grid; gap: var(--os-space-1); overflow-wrap: anywhere; }
.pa-attn__t p { margin: 0; color: var(--os-text-2); font: var(--os-type-small); }
.pa-attn__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.pa-attn__i > .os-btn { flex: 0 0 auto; }

/* The balance mine to concentrate (a Sankey in SVG) */
.pa-link { opacity: .45; }
.pa-link--mine { fill: var(--os-chart-1); }
.pa-link--rom { fill: var(--os-chart-5); }
.pa-link--product { fill: var(--os-chart-2); }
.pa-link--tail { fill: var(--os-chart-3); }
.pa-link--lost { fill: var(--os-bad); opacity: .3; }
.pa-node--mine, .pa-node--feed { fill: var(--os-chart-1); }
.pa-node--rom { fill: var(--os-chart-5); }
.pa-node--product { fill: var(--os-chart-2); }
.pa-node--tail { fill: var(--os-chart-3); }
.pa-node--lost { fill: var(--os-bad); }
.pa-node-label { fill: var(--os-text); font-size: var(--os-chart-font); font-weight: 600; }
.pa-flow { min-width: 0; }
/* The balance chart keeps its proportions (never stretched to the panel); its figures table under it uses the panel's height */
.pa-svg.pa-sankey { height: auto; aspect-ratio: 900 / 320; }
.pa-flowtable { margin-top: var(--os-space-3); }
.pa-aibox { display: flex; align-items: flex-start; gap: var(--os-space-2); margin-top: var(--os-space-3); padding: var(--os-space-3); border-radius: var(--os-radius-md);
    background: var(--os-surface-sunken); border-left: var(--os-border-w-strong) solid var(--os-accent); }
.pa-aibox p { margin: 0; font: var(--os-type-small); color: var(--os-text); overflow-wrap: anywhere; }
.pa-aimark { flex: 0 0 auto; padding: 0 var(--os-space-2); border-radius: var(--os-radius-pill); background: var(--os-ai-soft); color: var(--os-ai-text); font: var(--os-type-label); }
.pa-brief { display: grid; gap: var(--os-gutter); align-content: start; }

/* The production days */
.pa-daytable td, .pa-daytable th { white-space: nowrap; }
.pa-daycell { display: grid; gap: 2px; white-space: normal; min-width: 12rem; }
.pa-row--bad td { background: var(--os-bad-soft); }
.pa-unacc { display: inline-flex; align-items: center; gap: var(--os-space-2); }
.pa-tol { position: relative; display: inline-block; width: 64px; height: 8px; border-radius: var(--os-radius-xs);
    background: linear-gradient(90deg, var(--os-bad-soft) 0 25%, var(--os-good-soft) 25% 75%, var(--os-bad-soft) 75% 100%); }
.pa-tol i { position: absolute; top: -2px; width: 3px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--os-text); }
.pa-tol i.is-bad { background: var(--os-bad); }
.pa-days tfoot td { border-top: var(--os-border-w-strong) solid var(--os-border); background: var(--os-surface-sunken); }

/* Adjustments */
.pa-adjlist { list-style: none; margin: 0; padding: 0; }
.pa-adj { display: flex; flex-wrap: wrap; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.pa-adj:first-child { border-top: 0; }
.pa-adj__main { flex: 1 1 420px; min-width: 0; display: grid; gap: var(--os-space-1); }
.pa-adj__head, .pa-adj__change { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.pa-adj__decide { flex: 0 1 340px; display: grid; gap: var(--os-space-2); align-content: start; }
.pa-adj__decide .pa-actions { padding: 0; }
.pa-old { color: var(--os-text-3); text-decoration: line-through; }
.pa-plantable .os-input { min-width: 6rem; }

/* The phone: the manager summary first, the overview one tap away (the switch shows below 640 px only) */
.pa-phone-only { display: none; }
.pa-hidden { display: none; }
@media (max-width: 639.98px) {
    .pa-phone-only { display: block; }
    .pa-phone-only.pa-hidden { display: none; }
    .pa-phone-hide { display: none; }
}
.pa-phone-switch { margin-bottom: var(--os-space-3); }
.pa-phone { display: grid; gap: var(--os-space-3); }
.pa-ycard, .pa-ptile, .pa-pcard { display: grid; gap: var(--os-space-2); padding: var(--os-space-3) var(--os-space-4); border: var(--os-border-w) solid var(--os-border);
    border-radius: var(--os-radius-lg); background: var(--os-surface); min-width: 0; }
.pa-ycard__top, .pa-pcard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--os-space-2); }
.pa-ycard__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-ycard__figs > div { display: grid; gap: 2px; padding: 0 var(--os-space-2); border-left: var(--os-border-w) solid var(--os-border-subtle); }
.pa-ycard__figs > div:first-child { padding-left: 0; border-left: 0; }
.pa-big { font: var(--os-type-kpi); color: var(--os-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-big small { font: var(--os-type-body); color: var(--os-text-2); margin-left: 2px; }
/* The yesterday card's three figures share a phone's width: one size down, never overlapping (Cerro Alto mills 140,000 t a day) */
.pa-ycard .pa-big { font: var(--os-type-h2); overflow: hidden; text-overflow: ellipsis; }
.pa-ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--os-space-3); }
.pa-delta { display: inline-flex; align-items: center; gap: 2px; width: fit-content; padding: 0 var(--os-space-2); border-radius: var(--os-radius-pill); font: var(--os-type-small); }
.pa-delta--good { background: var(--os-good-soft); color: var(--os-good-text); }
.pa-delta--bad { background: var(--os-bad-soft); color: var(--os-bad-text); }
.pa-delta--flat { background: var(--os-surface-sunken); color: var(--os-text-2); }
.pa-full { width: 100%; justify-content: center; }
.pa-pbtns { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--os-space-3); padding: var(--os-space-3) 0;
    background: var(--os-surface-sunken); }
.pa-pbtns .os-btn { justify-content: center; min-height: 48px; }
/* A flush panel's footer sits inside it (os.css pulls a footer out by the padding a flush panel does not have) */
.pa-page .os-panel--flush > .os-panel__foot { margin: 0; }