/*
 * SR Engineering Works — interface theme ("soft modern")
 * Navy blueprint sidebar (unchanged) + an airy content area: white cards with soft layered
 * shadows, generous radius, coloured icon tiles, calm sentence-case headings.
 * Brand colours come from the logo.
 */
:root {
    --ink: #0b1526;            /* sidebar, headings */
    --ink-2: #16233a;
    --brand: #0048a8;          /* logo royal blue */
    --brand-dark: #08357a;
    --brand-bright: #4a8cf5;   /* blue on dark backgrounds */
    --brand-wash: #eaf1fb;
    --brand-50: #f3f7fd;
    --canvas: #f5f7fb;
    --panel: #ffffff;
    --rule: #eaecf0;
    --rule-strong: #d0d5dd;
    --text: #182230;
    --muted: #667085;
    --faint: #98a2b3;
    --ok: #067647;   --ok-wash: #ecfdf3;   --ok-line: #abefc6;
    --warn: #b54708; --warn-wash: #fffaeb; --warn-line: #fedf89;
    --bad: #b42318;  --bad-wash: #fef3f2;  --bad-line: #fecdca;
    --info: #026aa2; --info-wash: #f0f9ff; --info-line: #b9e6fe;
    --violet: #6941c6; --violet-wash: #f4ebff;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .04);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05);
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Montserrat', var(--font);

    --bs-body-font-family: var(--font);
    --bs-body-font-size: .875rem;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--canvas);
    --bs-border-color: var(--rule);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--radius);
    --bs-primary: var(--brand);
    --bs-primary-rgb: 0, 72, 168;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 0, 72, 168;
    --bs-link-hover-color: var(--brand-dark);
    --bs-link-hover-color-rgb: 8, 53, 122;
    --bs-secondary-color: var(--muted);
    --bs-focus-ring-color: rgba(0, 72, 168, .14);
}

body { background: var(--canvas); color: var(--text); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv05' 1; letter-spacing: -.006em; }
b, strong, .fw-semibold { font-weight: 600 !important; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.text-muted { color: var(--muted) !important; }
.num, .money, .font-monospace, code, .stat .value, .kpi .value { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.font-monospace, code { font-family: var(--font) !important; letter-spacing: .02em; font-weight: 500; color: inherit; }
.small, small { font-size: .8125rem; }
.text-success { color: var(--ok) !important; }
.text-danger { color: var(--bad) !important; }

/* ---------- Sidebar (unchanged) ---------- */
.sidebar {
    width: 248px; height: 100vh; position: fixed; inset: 0 auto 0 0; z-index: 1030;
    display: flex; flex-direction: column; color: #c5cfdd;
    background-color: var(--ink);
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 22px 22px;
}
/* Full logo on navy: the logo's own royal blue, black parts shown white (images/logo-ondark.png) */
.sidebar .brand { display: block; padding: 1.35rem 2.1rem .9rem; text-decoration: none; }
.sidebar .brand img { display: block; width: 100%; max-width: 172px; height: auto; margin: 0 auto; }
.sidebar .nav { flex: 1 1 auto; flex-wrap: nowrap; min-height: 0; overflow-y: auto; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: #2a3a55 transparent; }
.sidebar .nav-section {
    display: flex; align-items: center; gap: .5rem;
    color: #6f7f97; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
    padding: 1.1rem 1.25rem .4rem;
}
.sidebar .nav-section::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .07); }
.sidebar a.nav-link {
    display: flex; align-items: center; gap: .7rem; color: #c5cfdd;
    margin: 1px .6rem; padding: .44rem .65rem; border-radius: 6px; font-size: .86rem; position: relative;
}
.sidebar a.nav-link i { font-size: 1rem; color: #7d8ca3; width: 1.1rem; text-align: center; }
.sidebar a.nav-link:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.sidebar a.nav-link:hover i { color: #c5cfdd; }
.sidebar a.nav-link.active { background: rgba(74, 140, 245, .14); color: #fff; font-weight: 500; }
.sidebar a.nav-link.active i { color: var(--brand-bright); }
.sidebar a.nav-link.active::before { content: ''; position: absolute; left: -.6rem; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-bright); }
.sidebar .sidebar-foot { padding: .8rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, .07); font-size: .72rem; color: #6f7f97; }

/* ---------- Shell ---------- */
.main { margin-left: 248px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 1020; height: 68px;
    display: flex; align-items: center; gap: .9rem; padding: 0 2rem;
    background: rgba(245, 247, 251, .82); backdrop-filter: saturate(1.6) blur(10px);
}
.topbar.scrolled { box-shadow: 0 1px 0 var(--rule); }
.topbar h1 { font-size: 1.2rem; font-weight: 650; margin: 0; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.topbar .crumb { font-size: .75rem; color: var(--faint); font-weight: 500; line-height: 1; margin-bottom: 4px; }
.topbar .search { position: relative; width: 300px; }
.topbar .search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: .9rem; }
.topbar .search input { width: 100%; height: 40px; border: 1px solid transparent; background: #fff; border-radius: var(--radius-sm); padding: 0 2.6rem 0 2.25rem; font-size: .86rem; box-shadow: var(--shadow-xs); outline: 0; transition: border-color .15s, box-shadow .15s; }
.topbar .search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0, 72, 168, .12); }
.topbar .search kbd { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font: 500 .7rem var(--font); color: var(--faint); background: var(--canvas); border: 1px solid var(--rule); border-radius: 5px; padding: .05rem .4rem; }
.fy-switch { position: relative; display: flex; align-items: center; background: #fff; border-radius: 999px; box-shadow: var(--shadow-xs); padding-left: .85rem; }
.fy-switch i { color: var(--brand); font-size: .85rem; }
.fy-switch select { border: 0; background: transparent; font: 600 .8rem var(--font); color: var(--ink); padding: .5rem 1.9rem .5rem .5rem; appearance: none; cursor: pointer; outline: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 10px; }
.fy-banner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--warn-wash); border: 1px solid var(--warn-line); color: #93370d; border-radius: 12px; padding: .65rem 1rem; margin-bottom: 1.25rem; font-size: .86rem; }
.topbar .fy { font-size: .78rem; font-weight: 500; color: var(--muted); background: #fff; border-radius: 999px; padding: .4rem .8rem; box-shadow: var(--shadow-xs); white-space: nowrap; }
.topbar .user { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--text); background: #fff; border-radius: 999px; padding: .25rem .9rem .25rem .25rem; box-shadow: var(--shadow-xs); }
.topbar .user .who { line-height: 1.15; }
.topbar .user .who small { display: block; color: var(--faint); font-size: .7rem; }
.topbar .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #0048a8, #0b1526); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .76rem; letter-spacing: .02em; order: -1; }
.topbar .icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 0; background: #fff; color: var(--muted); box-shadow: var(--shadow-xs); }
.topbar .icon-btn:hover { color: var(--bad); }
main.content { padding: .5rem 2rem 2.5rem; flex: 1; }
.app-foot { padding: 1.1rem 2rem 1.4rem; font-size: .76rem; color: var(--muted); text-align: center; line-height: 1.7; border-top: 1px solid var(--rule, #e3e8ef); margin-top: 1rem; }
.app-foot a { color: var(--ink); text-decoration: none; }
.app-foot a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Cards ---------- */
.card {
    --bs-card-bg: var(--panel); --bs-card-border-color: transparent; --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: var(--radius); --bs-card-cap-bg: transparent;
    border: 0; box-shadow: var(--shadow);
}
.card-header {
    display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; background: transparent !important;
    border-bottom: 1px solid #f2f4f7; font-size: .95rem !important; font-weight: 600 !important; color: var(--ink);
    text-transform: none; letter-spacing: -.01em;
}
.card-header > a.ms-auto, .card-header > .ms-auto { margin-left: auto; }
.card-header.stack { flex-direction: column; align-items: flex-start; gap: .1rem; }
.card-header a { font-size: .82rem; font-weight: 500; }
.card-header .text-muted, .card-header .fw-normal { font-weight: 400 !important; font-size: .82rem; }
.card-body { padding: 1.15rem 1.25rem; }
.card-footer { background: #fcfcfd !important; border-top: 1px solid #f2f4f7; padding: .85rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius) !important; }
.card.border-warning { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--warn-line); }
.card.border-danger-subtle { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--bad-line); }
.card > .table-responsive:last-child, .card > .table-responsive:last-child .table { border-radius: 0 0 var(--radius) var(--radius); }

/* KPI tiles */
.stat { padding: 1.25rem !important; height: 100%; position: relative; }
.stat .label { font-size: .82rem; font-weight: 500; color: var(--muted); margin-bottom: .35rem; }
.stat .value { font-size: 1.6rem; font-weight: 650; color: var(--ink); letter-spacing: -.03em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .value.text-success { color: var(--ok) !important; }
.stat .value.text-danger { color: var(--bad) !important; }
.stat .small { margin-top: .4rem; font-size: .8rem; }
.ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; margin-bottom: .9rem; flex: none; }
.ic.blue { background: var(--brand-wash); color: var(--brand); }
.ic.green { background: var(--ok-wash); color: var(--ok); }
.ic.amber { background: #fff4e5; color: var(--warn); }
.ic.violet { background: var(--violet-wash); color: var(--violet); }
.ic.grey { background: #f2f4f7; color: #475467; }
.delta { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: .1rem .5rem; }
.delta.up { background: var(--ok-wash); color: var(--ok); }
.delta.down { background: var(--bad-wash); color: var(--bad); }
.delta.flat { background: #f2f4f7; color: var(--muted); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f9fafb; --bs-table-border-color: #f2f4f7; margin-bottom: 0; font-size: .86rem; }
.table > :not(caption) > * > * { padding: .75rem .9rem; }
.table-sm > :not(caption) > * > * { padding: .55rem .75rem; }
.table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
.table th, .table thead th, .table-light th {
    font-size: .76rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0;
    background: #fcfcfd !important; border-bottom: 1px solid var(--rule) !important; white-space: nowrap;
}
.table-light { --bs-table-bg: #fcfcfd; --bs-table-color: var(--text); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.num { white-space: nowrap; }
.table td a { font-weight: 500; }
.table td:first-child > a, .table td a.fw-semibold { white-space: nowrap; }
.table tr.fw-semibold td, .table tr.fw-bold td, .table tfoot td { border-top: 1px solid var(--rule); background: #fcfcfd; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-success { --bs-table-bg: var(--ok-wash); --bs-table-color: var(--ok); }
.table-danger { --bs-table-bg: var(--bad-wash); --bs-table-color: var(--bad); }
.table-warning { --bs-table-bg: var(--warn-wash); --bs-table-color: var(--warn); }
.table-bordered > :not(caption) > * > * { border-color: #f2f4f7; }

/* ---------- Status chips ---------- */
.badge {
    font-family: var(--font); font-weight: 500; font-size: .74rem; letter-spacing: 0;
    padding: .22rem .6rem .22rem .5rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid transparent; vertical-align: middle; line-height: 1.3;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.text-bg-success { background: var(--ok-wash) !important; color: var(--ok) !important; border-color: var(--ok-line); }
.text-bg-warning { background: var(--warn-wash) !important; color: var(--warn) !important; border-color: var(--warn-line); }
.text-bg-danger { background: var(--bad-wash) !important; color: var(--bad) !important; border-color: var(--bad-line); }
.text-bg-info { background: var(--info-wash) !important; color: var(--info) !important; border-color: var(--info-line); }
.text-bg-secondary { background: #f2f4f7 !important; color: #344054 !important; border-color: var(--rule); }
.text-bg-light { background: #fff !important; color: #344054 !important; border-color: var(--rule-strong); }
.text-bg-dark { background: var(--ink) !important; color: #fff !important; }
.badge.fs-6 { font-size: .82rem !important; padding: .32rem .8rem .32rem .65rem; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .86rem; --bs-btn-border-radius: var(--radius-sm); letter-spacing: -.005em; transition: all .15s ease; }
.btn-sm { --bs-btn-padding-y: .38rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .8rem; --bs-btn-border-radius: 9px; }
.btn i { margin-right: .2rem; }
.btn-dark, .btn-primary {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 0, 72, 168;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px rgba(0, 72, 168, .22);
}
.btn-dark:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 72, 168, .28); }
.btn-outline-dark, .btn-outline-primary, .btn-outline-secondary {
    --bs-btn-color: #344054; --bs-btn-bg: #fff; --bs-btn-border-color: var(--rule-strong);
    --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: #f9fafb; --bs-btn-hover-border-color: var(--rule-strong);
    --bs-btn-active-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-50); --bs-btn-active-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 0, 72, 168;
    box-shadow: var(--shadow-xs);
}
.btn-outline-danger { --bs-btn-color: var(--bad); --bs-btn-bg: #fff; --bs-btn-border-color: var(--bad-line); --bs-btn-hover-bg: var(--bad-wash); --bs-btn-hover-color: var(--bad); --bs-btn-hover-border-color: var(--bad-line); box-shadow: var(--shadow-xs); }
.btn-outline-success { --bs-btn-color: var(--ok); --bs-btn-bg: #fff; --bs-btn-border-color: var(--ok-line); --bs-btn-hover-bg: var(--ok-wash); --bs-btn-hover-color: var(--ok); --bs-btn-hover-border-color: var(--ok-line); box-shadow: var(--shadow-xs); }
.btn-success { --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-hover-bg: #05603a; --bs-btn-hover-border-color: #05603a; }
.btn-link { text-decoration: none; font-weight: 500; }

/* ---------- Forms ---------- */
.form-label { font-size: .82rem; font-weight: 500; color: #344054; margin-bottom: .35rem; }
.form-control, .form-select { background-color: #fff; border-color: var(--rule-strong); font-size: .875rem; padding: .55rem .8rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }
.form-control-sm, .form-select-sm { font-size: .82rem; padding: .38rem .65rem; border-radius: 9px; }
.form-control::placeholder { color: var(--faint); }
.form-control:focus, .form-select:focus { border-color: #84adff; box-shadow: 0 0 0 4px rgba(0, 72, 168, .12); }
.form-control[readonly], .form-control.bg-light { background: #f9fafb !important; }
.form-check-input { border-color: var(--rule-strong); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(0, 72, 168, .12); }
.form-text { color: var(--muted); font-size: .76rem; }
.input-group-text { background: #f9fafb; border-color: var(--rule-strong); color: var(--muted); font-weight: 600; border-radius: var(--radius-sm); }
.input-group-sm > .input-group-text { padding: .25rem .55rem; font-size: .8rem; border-radius: 9px; }
.input-group .form-control { box-shadow: none; }
.input-group { box-shadow: var(--shadow-xs); border-radius: var(--radius-sm); }
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '\203A'; display: inline-block; margin-right: .4rem; transition: transform .15s; color: var(--faint); }
details[open] > summary::before { transform: rotate(90deg); }

/* ---------- Feedback ---------- */
.alert { border-radius: 12px; border-width: 1px; font-size: .86rem; padding: .8rem 1rem; box-shadow: var(--shadow-xs); }
.alert-success { background: var(--ok-wash); border-color: var(--ok-line); color: #05603a; }
.alert-danger { background: var(--bad-wash); border-color: var(--bad-line); color: #912018; }
.alert-warning { background: var(--warn-wash); border-color: var(--warn-line); color: #93370d; }
.pagination { --bs-pagination-color: #344054; --bs-pagination-border-color: var(--rule); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-font-size: .82rem; --bs-pagination-hover-color: var(--brand); --bs-pagination-border-radius: 9px; }
.list-group-item { border-color: #f2f4f7; background: transparent; padding: .85rem 1.25rem; }
.list-group-flush > .list-group-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.progress { background: #f2f4f7; border-radius: 99px; }
.progress-bar.bg-success { background-color: var(--brand) !important; }
.dropdown-menu, .modal-content, .popover { background-color: #fff; border: 0; border-radius: 12px; box-shadow: var(--shadow-lg); }

/* ---------- Page header block ---------- */
.block-title { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 0 0 1.25rem; }
.block-title h2 { font-size: 1.05rem; font-weight: 650; color: var(--ink); margin: 0; letter-spacing: -.02em; }
.block-title .sub { font-size: .84rem; color: var(--muted); }
.block-title .actions { margin-left: auto; display: flex; gap: .5rem; }
.block-title .actions .btn { white-space: nowrap; }

/* ---------- Sparkline + meter ---------- */
.spark { display: block; width: 100%; height: 38px; margin-top: .75rem; overflow: visible; }
.meter { height: 8px; border-radius: 99px; background: #f2f4f7; overflow: hidden; margin-top: .65rem; position: relative; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.meter.ok > span { background: #17b26a; } .meter.bad > span { background: #f04438; } .meter.warn > span { background: #f79009; }

/* ---------- Yard-flow pipeline ---------- */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.flow .stage { position: relative; display: block; background: #fff; border-radius: var(--radius); padding: 1.2rem 1.25rem; box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.flow .stage:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
.flow .stage:not(:last-child)::after {
    content: '\F285'; font-family: 'bootstrap-icons'; position: absolute; right: -1.05rem; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; font-size: .7rem; color: var(--brand);
}
.flow .stage .step { display: flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 500; color: var(--muted); }
.flow .stage .step i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; }
.flow .stage:nth-child(1) .step i { background: var(--brand-wash); color: var(--brand); }
.flow .stage:nth-child(2) .step i { background: var(--violet-wash); color: var(--violet); }
.flow .stage:nth-child(3) .step i { background: #fff4e5; color: var(--warn); }
.flow .stage:nth-child(4) .step i { background: var(--ok-wash); color: var(--ok); }
.flow .stage .big { font-size: 1.75rem; font-weight: 650; letter-spacing: -.03em; margin-top: .8rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.flow .stage .big small { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: .15rem; }
.flow .stage .note { font-size: .8rem; color: var(--muted); margin-top: .1rem; }

/* ---------- Composition bar ---------- */
.split { display: flex; height: 28px; border-radius: 8px; overflow: hidden; background: #f2f4f7; gap: 2px; }
.split > span { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; min-width: 3px; }
.split .waste { background: repeating-linear-gradient(135deg, #d0d5dd 0 6px, #e4e7ec 6px 12px); color: #475467; }
.split-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .7rem; font-size: .8rem; color: var(--muted); }
.split-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .4rem; }
.split-legend b { color: var(--text); font-weight: 600; }

/* ---------- Progress track ---------- */
.track { display: flex; align-items: flex-start; padding: 1.25rem; }
.track .node { flex: 1; position: relative; }
.track .node:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 38px; right: 8px; height: 2px; border-radius: 2px; background: #eaecf0; }
.track .node.done:not(:last-child)::after { background: var(--brand); }
.track .dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; background: #f2f4f7; color: var(--faint); position: relative; z-index: 1; }
.track .done .dot { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-wash); }
.track .warn .dot { background: #fff4e5; color: var(--warn); box-shadow: 0 0 0 4px var(--warn-wash); }
.track .bad .dot { background: var(--bad-wash); color: var(--bad); box-shadow: 0 0 0 4px #fff1f0; }
.track .t { font-size: .84rem; font-weight: 600; color: var(--ink); margin-top: .6rem; }
.track .d { font-size: .78rem; color: var(--muted); }

/* ---------- Hero figure ---------- */
.hero-figure { padding: 1.25rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .75rem; }
.hero-figure .lbl { font-size: .82rem; font-weight: 500; color: var(--muted); }
.hero-figure .fig { font-size: 2rem; font-weight: 650; color: var(--ink); letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-figure .side { text-align: right; font-size: .82rem; color: var(--muted); line-height: 1.6; }
.hero-figure .side b { color: var(--text); }

/* ---------- Summary band ---------- */
.band-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.band-stats > div { background: #fff; border-radius: 14px; padding: 1rem 1.15rem; box-shadow: var(--shadow); }
.band-stats .l { font-size: .8rem; font-weight: 500; color: var(--muted); }
.band-stats .v { font-size: 1.3rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: .2rem; letter-spacing: -.02em; }
.band-stats .v.warn { color: var(--warn); } .band-stats .v.bad { color: var(--bad); } .band-stats .v.ok { color: var(--ok); }
/* inside a card the band becomes a flat ruled strip */
.card .band-stats { gap: 0; margin: 0; border-top: 1px solid #f2f4f7; }
.card .band-stats > div { box-shadow: none; border-radius: 0; border-left: 1px solid #f2f4f7; margin-left: -1px; }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.toolbar form { display: flex; flex-wrap: wrap; gap: .5rem; margin-right: auto; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty i { font-size: 1.3rem; color: var(--brand); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-wash); margin: 0 auto .8rem; box-shadow: 0 0 0 8px var(--brand-50); }
.empty b { display: block; color: var(--ink); font-weight: 600; margin-bottom: .2rem; font-size: .95rem; }

/* ---------- Item avatar ---------- */
.thumb { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--brand-wash); color: var(--brand); font-size: 1rem; flex: none; }
.thumb.scrap { background: #f2f4f7; color: #475467; }

/* ---------- Search results ---------- */
.result-group { margin-bottom: 1.25rem; }
.result-row { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.25rem; border-bottom: 1px solid #f2f4f7; color: inherit; }
.result-row:last-child { border-bottom: 0; }
.result-row:hover { background: #f9fafb; text-decoration: none; }
.result-row mark { background: #fef0c7; padding: 0 .1em; border-radius: 3px; }

/* ---------- Responsive & print ---------- */
@media (max-width: 1199px) { .topbar .search { width: 220px; } .fy-switch { position: relative; display: flex; align-items: center; background: #fff; border-radius: 999px; box-shadow: var(--shadow-xs); padding-left: .85rem; }
.fy-switch i { color: var(--brand); font-size: .85rem; }
.fy-switch select { border: 0; background: transparent; font: 600 .8rem var(--font); color: var(--ink); padding: .5rem 1.9rem .5rem .5rem; appearance: none; cursor: pointer; outline: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 10px; }
.fy-banner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--warn-wash); border: 1px solid var(--warn-line); color: #93370d; border-radius: 12px; padding: .65rem 1rem; margin-bottom: 1.25rem; font-size: .86rem; }
.topbar .fy { display: none; } }
@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
    .sidebar.show { transform: none; }
    .main { margin-left: 0; }
    .topbar, main.content, .app-foot { padding-left: 1rem; padding-right: 1rem; }
    .topbar .user .who, .topbar .search { display: none; }
    .topbar .user { padding: .25rem; }
    .flow { grid-template-columns: 1fr 1fr; gap: .85rem; }
    .flow .stage::after { display: none; }
}
@media (max-width: 575px) { .block-title .actions { margin-left: 0; width: 100%; } }
@media print {
    .sidebar, .topbar, .no-print, .app-foot { display: none !important; }
    .main { margin-left: 0; }
    main.content { padding: 0; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}
summary.btn::before { display: none; }
summary.btn { list-style: none; }
details[open] > summary.btn { background: var(--brand-50); border-color: var(--brand); color: var(--brand-dark); }

/* Reports Centre */
.report-tile { transition: transform .15s ease, box-shadow .15s ease; color: inherit; }
.report-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
.report-table tr.row-opening td, .report-table tr.row-closing td, .report-table tr.row-subtotal td { font-weight: 600; background: #f9fafb; }
.report-table tr.row-closing td { border-top: 1px solid var(--rule); }
.report-table tr.row-muted td { color: var(--faint); }
.report-table tfoot td { background: #f9fafb; border-top: 1px solid var(--rule); }
.pf-custom[hidden] { display: none !important; }

/* =====================================================================
   Shared page building blocks (components/*) — every page uses these
   ===================================================================== */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; min-height: 38px; }
.page-head-text { color: var(--muted); font-size: .86rem; margin-right: auto; }
.page-head-text b { color: var(--ink); }
.page-head-actions, .toolbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-left: auto; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.toolbar-filters .form-control, .toolbar-filters .form-select { width: auto; min-width: 150px; }
.toolbar-filters .form-control[type=search], .toolbar-filters .search-input { min-width: 240px; }

/* Record (detail page) header */
.record { margin-bottom: 1.25rem; }
.record-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; padding: 1.15rem 1.25rem; }
.record-icon { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 12px; }
.record-title { margin-right: auto; min-width: 0; }
.record-name { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.record-meta { color: var(--muted); font-size: .84rem; margin-top: .15rem; }
.record-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.record > .band-stats { border-top: 1px solid #f2f4f7; }
.record > .record-body { padding: 1rem 1.25rem 1.15rem; border-top: 1px solid #f2f4f7; }

/* Cards */
.card { margin-bottom: 1.25rem; }
.row > [class*="col"] > .card:last-child, .row > [class*="col"] > form > .card:last-child { margin-bottom: 0; }
.row.g-3 { --bs-gutter-y: 1.25rem; --bs-gutter-x: 1.25rem; }
.card-header .card-icon { color: var(--brand); font-size: 1rem; }
.card-header .card-title-text { color: var(--ink); }
.card-header .card-sub { color: var(--muted); font-weight: 400; font-size: .82rem; }
.card-header .card-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.card-warning { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--warn-line); }
.card-danger { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--bad-line); }
.band-stats .s { font-size: .76rem; color: var(--muted); margin-top: .15rem; }

/* One table density everywhere */
.table > :not(caption) > * > *, .table-sm > :not(caption) > * > * { padding: .7rem .9rem; }
.table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
.table td.actions { text-align: right; white-space: nowrap; width: 1%; }
.table td.actions > * + * { margin-left: .25rem; }
.table .cell-sub { display: block; font-size: .78rem; color: var(--muted); }
.table-scroll { overflow-x: auto; }

/* Buttons */
.btn-icon { width: 32px; height: 32px; padding: 0 !important; display: inline-grid; place-items: center; }
.btn-icon i { margin: 0 !important; }
.btn-sm.btn-icon { width: 30px; height: 30px; }

/* Forms: one width, one rhythm, sticky actions */
.form-page { max-width: 1080px; }
.form-page .form-section { margin-bottom: 1.25rem; }
.form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: .5rem; align-items: center; padding: .9rem 0; background: linear-gradient(to top, var(--canvas) 70%, transparent); }
.field .req { color: var(--bad); margin-left: .15rem; }
.form-switch .form-check-input { width: 2.2em; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.inline-form .field { flex: 1 1 140px; }
.side-form .card-body .row { --bs-gutter-y: .75rem; }
/* Key / value panel (details) */
.table.kv td:first-child { color: var(--muted); width: 45%; }
.table.kv tr.total td { font-weight: 600; color: var(--ink); background: #fcfcfd; border-top: 1px solid var(--rule); }
/* Add-row form at the foot of a card */
.card-form { border-top: 1px solid #f2f4f7; background: #fcfcfd; padding: 1rem 1.25rem 1.1rem; border-radius: 0 0 var(--radius) var(--radius); }
.card-form .card-form-title { font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem; }
.card-form .row { --bs-gutter-y: .6rem; --bs-gutter-x: .75rem; }
.card-form .form-label { font-size: .76rem; margin-bottom: .2rem; }
.card-scroll { max-height: 340px; overflow-y: auto; }
.table > :not(caption) > * > *, .table-sm > :not(caption) > * > * { padding: .68rem .7rem; }
.table td .text-truncate, .table td.text-truncate { max-width: 280px; }
.table .cell-sub { white-space: normal; }
.table td:has(> .cell-sub) { min-width: 210px; }
.link-button { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-weight: 500; }
.link-button:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Grid input widths (inputs inside data tables) */
.input-xs { width: 5rem !important; } .input-sm { width: 6.5rem !important; } .input-md { width: 8rem !important; }
/* Status toggles (attendance P/A/HD/L/H/WO) — same colours as the status chips */
.status-toggle { --tone: #475467; --wash: #f2f4f7; border: 1px solid var(--rule-strong); background: #fff; color: var(--muted); font-weight: 600; font-size: .74rem; padding: .25rem .5rem; border-radius: 7px; min-width: 2.2rem; }
.status-toggle.s-P { --tone: var(--ok); --wash: var(--ok-wash); }
.status-toggle.s-A { --tone: var(--bad); --wash: var(--bad-wash); }
.status-toggle.s-HD { --tone: var(--warn); --wash: var(--warn-wash); }
.status-toggle.s-L { --tone: var(--brand); --wash: var(--brand-wash); }
.status-toggle.s-H { --tone: var(--info); --wash: var(--info-wash); }
.status-toggle:hover { color: var(--tone); border-color: var(--tone); }
.btn-check:checked + .status-toggle { background: var(--wash); color: var(--tone); border-color: var(--tone); box-shadow: inset 0 0 0 1px var(--tone); }

.record .record-body .track { padding: 0; }
.band-stats .v .unit { font-size: .75em; color: var(--muted); font-weight: 500; }
.text-upper input, input.text-upper { text-transform: uppercase; }
/* Utilities (no inline styles in views) */
.text-ink { color: var(--ink) !important; } .text-brand { color: var(--brand) !important; } .text-warn { color: var(--warn) !important; }
.text-bad { color: var(--bad) !important; } .text-ok { color: var(--ok) !important; } .min-w-0 { min-width: 0; } .pre-line { white-space: pre-line; }
.text-upper { text-transform: uppercase; }
.form-section[id], .card[id] { scroll-margin-top: 84px; }
.split.thin { height: 8px; } .split-legend.tight { font-size: .7rem; gap: .2rem .7rem; }
.split-legend .waste-swatch { background: repeating-linear-gradient(135deg, #c9d2de 0 3px, #dfe5ec 3px 6px); }
.list-row { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid #f2f4f7; color: inherit; }
.list-row:hover { background: #f9fafb; text-decoration: none; }
.list-row-end { width: 52px; text-align: right; white-space: nowrap; font-size: .8rem; color: var(--muted); }
.list-row-end small { font-size: .68rem; }
.mini-meter { display: inline-flex; width: 60px; height: 6px; vertical-align: middle; }
.dropzone { border: 2px dashed var(--rule-strong); background: var(--brand-50); border-radius: 16px; padding: 1.5rem; text-align: center; margin-bottom: 1rem; }
.dropzone > i { font-size: 2rem; color: var(--brand); }
.dropzone .form-control { max-width: 300px; }
.file-diff { max-height: 180px; overflow: auto; font-family: ui-monospace, Menlo, monospace; font-size: .75rem; }
.thumb.lg { width: 48px; height: 48px; font-size: 1.3rem; }
.thumb.bad { background: var(--bad-wash); color: var(--bad); } .thumb.muted { background: #f2f4f7; color: #475467; }
.report-filter { max-width: 260px; }
/* Pop-up form attached to a button (x-popover) */
.popover-wrap { position: relative; display: inline-block; }
.popover-wrap > summary { list-style: none; }
.popover-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 340px; max-width: calc(100vw - 2rem); max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 1rem; text-align: left; white-space: normal; }
.popover-panel.sm { width: 260px; }
.popover-panel .popover-title { font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.popover-panel .popover-text { font-size: .8rem; color: var(--muted); margin-bottom: .6rem; }
/* Document numbers (lot, invoice, voucher, serial) never break across lines */
.table td a[href*="/lots/"], .table td a[href*="/invoices/"], .table td a[href*="/payments/"], .table td a[href*="/units/"], .table td a[href*="/payroll/"] { white-space: nowrap; }
.table tbody td:first-child:not(.num) { min-width: 9.5rem; }
@media (max-width: 575px) {
    .topbar { gap: .5rem; }
    .topbar .user { display: none; }
    .fy-switch { padding-left: .6rem; }
    .fy-switch select { max-width: 9.5rem; padding-right: 1.6rem; font-size: .76rem; }
    .topbar h1 { font-size: 1rem; max-width: 45vw; }
}
@media (max-width: 575px) {
    .topbar .crumb { display: none; }
    .topbar h1 { max-width: 38vw; }
    .fy-switch select { max-width: 7.6rem; }
    .topbar .icon-btn { width: 34px; height: 34px; flex: none; }
}
.table.kv tbody td:first-child { min-width: 0; }
.table.kv td { overflow-wrap: anywhere; }
.topbar > .me-auto { min-width: 0; flex: 1 1 auto; }
.topbar h1, .topbar .crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575px) { .topbar h1 { max-width: none; } }
.card-header { flex-wrap: wrap; row-gap: .5rem; }
/* Wide tables that host pop-ups scroll only on small screens */
@media (max-width: 767px) { .table-scroll-sm { overflow-x: auto; } }
.card-header .card-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 575px) { .card-header .card-actions { margin-left: 0; justify-content: flex-start; } }
.table-scroll, .card-scroll { position: relative; }
@media (max-width: 991px) { .table-scroll-sm { overflow-x: auto; position: relative; } }
/* Documents & photos (x-attachments) */
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; padding: 1rem 1.25rem; }
.attach-thumb { margin: 0; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: #fcfcfd; }
.attach-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f2f4f7; }
.attach-thumb figcaption { display: flex; align-items: center; gap: .4rem; padding: .35rem .45rem; font-size: .76rem; color: var(--muted); }
.attach-thumb figcaption span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-grid + .table { border-top: 1px solid #f2f4f7; }
/* Activity log and record history (x-activity) */
.activity-table td { white-space: normal; }
.activity-table .activity-changes { text-align: right; white-space: nowrap; }
.activity-table .activity-summary { font-size: .8rem; color: var(--muted); margin-right: .4rem; white-space: normal; }
.popover-panel.wide { width: 380px; max-width: 86vw; }
.table.kv.diff td:first-child { width: 38%; }
.table.kv.diff del { color: var(--muted); }
.fy-locked { margin-left: .35rem; }

/* ---------- Guided tours (driver.js, public/js/tours.js) ---------- */
.driver-popover.yms-tour { font-family: var(--bs-body-font-family, Inter, sans-serif); border-radius: 14px; padding: 1.1rem 1.15rem .9rem; max-width: 360px; box-shadow: 0 18px 50px rgba(11, 21, 38, .28); color: var(--ink); }
.driver-popover.yms-tour .driver-popover-title { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.driver-popover.yms-tour .driver-popover-description { font-size: .875rem; color: #3b4a5e; line-height: 1.5; margin-top: .35rem; }
.driver-popover.yms-tour .driver-popover-description ul { padding-left: 1.1rem; margin: .4rem 0 0; }
.driver-popover.yms-tour .driver-popover-description b { color: var(--ink); }
.driver-popover.yms-tour .tour-count { font-size: .74rem; font-weight: 600; color: var(--brand); margin-bottom: .45rem; }
.driver-popover.yms-tour .driver-popover-footer { margin-top: .9rem; }
.driver-popover.yms-tour .driver-popover-footer button { text-shadow: none; font: 500 .8rem/1 var(--bs-body-font-family, Inter, sans-serif); border-radius: 8px; padding: .5rem .8rem; border: 1px solid #d6dde7; background: #fff; color: var(--ink); }
.driver-popover.yms-tour .driver-popover-next-btn { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.driver-popover.yms-tour .driver-popover-footer button:disabled { opacity: .35; }
.driver-popover.yms-tour .driver-popover-close-btn { color: #8a96a6; }
.tour-hint {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1090; max-width: 380px;
    display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; align-items: start;
    background: #fff; border-radius: 14px; padding: .9rem 1rem; box-shadow: 0 14px 40px rgba(11, 21, 38, .22); border: 1px solid #e3e8ef; font-size: .86rem;
}
.tour-hint > i { font-size: 1.25rem; color: var(--brand); grid-row: span 2; }
.tour-hint-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.help-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; font-size: .86rem; }
.guide-card { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: .95rem 1.05rem; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; }
.guide-card:hover { border-color: #c9d6ea; box-shadow: 0 4px 14px rgba(11, 21, 38, .06); }
.guide-card .guide-meta { font-size: .76rem; color: var(--muted); }
.guide-card .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 576px) { .tour-hint { left: 1rem; right: 1rem; max-width: none; } }
.pre-wrap { white-space: pre-wrap; word-break: break-word; font-family: var(--mono, ui-monospace, monospace); }

/* ---------- Phone & tablet layout (applies to every page) ---------- */
@media (max-width: 991px) {
    /* Flow arrows sit between cards in a row of four only */
    .flow .stage:not(:last-child)::after { display: none; }
    .page-head-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
}
@media (max-width: 575px) {
    /* Top bar: menu · year · help · sign out on one row, the page title on its own row below */
    .topbar { height: auto; flex-wrap: wrap; row-gap: .4rem; padding-top: .6rem; padding-bottom: .55rem; }
    .topbar > .me-auto { order: 10; flex: 1 1 100%; }
    .topbar .crumb { display: block; margin-bottom: 2px; }
    .topbar h1 { white-space: normal; font-size: 1.1rem; line-height: 1.25; }
    .topbar .fy-switch { flex: 1 1 auto; min-width: 0; }
    .topbar .fy-switch select { max-width: none; width: 100%; }
    .topbar .icon-btn { width: 38px; height: 38px; }

    /* Filter bars: search and period full width, other filters two per row, buttons sized to content */
    .toolbar { align-items: stretch; }
    .toolbar form, .toolbar-filters { margin-right: 0; width: 100%; }
    .toolbar-filters > :not(.btn):not(button):not(a) { flex: 1 1 calc(50% - .25rem); min-width: 0 !important; width: auto !important; }
    .toolbar-filters > input[type=search], .toolbar-filters > .search-input, .toolbar-filters > .period-filter { flex-basis: 100%; }
    .toolbar-filters > .btn, .toolbar-filters > button, .toolbar-filters > a { flex: 0 0 auto; }
    .toolbar-filters > .btn-icon { min-width: 38px; justify-content: center; display: inline-flex; align-items: center; }
    .period-filter .input-group { flex: 1 1 100%; width: 100% !important; }
    .period-filter .input-group > select { flex: 1 1 auto; width: 1% !important; min-width: 0; }
    .period-filter input[type=date] { width: 100% !important; min-width: 0; }
    .period-filter .pf-custom { flex: 1 1 100%; }
    .period-filter .pf-custom input[type=date] { flex: 1 1 auto; }
    .toolbar-actions { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
    .toolbar-actions > *, .toolbar-actions > form > .btn { flex: 1 1 auto; }
    .toolbar-actions .btn, .page-head-actions .btn { justify-content: center; display: inline-flex; align-items: center; gap: .35rem; }
    .toolbar-actions > .btn-group > .btn { flex: 1 1 auto; }

    /* Page head and record buttons: a full-width row of equal buttons */
    .page-head { align-items: stretch; }
    .page-head-text { flex: 1 1 100%; }
    .page-head-actions { width: 100%; }
    .page-head-actions > .btn, .page-head-actions > form, .page-head-actions > details { flex: 1 1 auto; }
    .record-head { padding: 1rem; gap: .75rem; }
    .record-actions { width: 100%; }
    .record-actions > .btn, .record-actions > form, .record-actions > details, .record-actions > a { flex: 1 1 calc(50% - .25rem); }
    .record-actions > form > .btn, .record-actions > details > summary { width: 100%; justify-content: center; }
    .record-actions .btn, .page-head-actions .btn, .toolbar-actions .btn { white-space: nowrap; }
    /* Icon-only buttons (delete, print…) keep their own size at the end of the row */
    .record-actions > .btn-icon, .record-actions > form:has(> .btn-icon), .page-head-actions > form:has(> .btn-icon), .toolbar-actions > form:has(> .btn-icon) { flex: 0 0 auto; }
    .record-actions > form:has(> .btn-icon) > .btn { width: 42px; }

    /* Figures: amounts never split mid-number; an odd last figure spans the row */
    .band-stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .band-stats > div { padding: .85rem .95rem; min-width: 0; }
    .band-stats .v { font-size: 1.05rem; white-space: nowrap; }
    .band-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .card .band-stats, .record > .band-stats { gap: 0; }
    .flow .stage { padding: 1rem; }
    .flow .stage .big { font-size: 1.4rem; }
    .stat .value { font-size: 1.3rem; }

    /* Cards and forms */
    .card-header { padding-left: 1rem; padding-right: 1rem; }
    .card-body { padding: 1rem; }
    .form-actions { gap: .5rem; }
    .form-actions .btn { flex: 1 1 auto; justify-content: center; }
    .popover-panel { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 1rem; width: auto !important; max-width: none; max-height: 70vh; z-index: 1080; }
    .app-foot { font-size: .72rem; }
    .tour-hint { bottom: .75rem; }
}
.activity-changes { min-width: 240px; }
/* Tables that hold pop-ups scroll sideways up to laptop width; their pop-ups float bottom-right so they aren't clipped */
@media (max-width: 1199px) {
    .table-scroll-sm { overflow-x: auto; position: relative; }
    .table-scroll-sm .popover-panel { position: fixed; top: auto; left: auto; right: 1rem; bottom: 1rem; max-height: 70vh; z-index: 1080; }
}

/* ---------- Web installer ---------- */
.install-body { background: var(--canvas, #f5f7fb); min-height: 100vh; }
.install-wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.install-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.install-brand img { height: 64px; width: auto; }
.install-brand b { display: block; color: var(--ink); font-size: 1.05rem; }
.install-brand span { color: var(--muted); font-size: .85rem; }
.install-steps { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: .85rem; color: var(--muted); }
.install-steps li { display: flex; align-items: center; gap: .45rem; }
.install-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #e4e8ef; color: var(--muted); font-weight: 600; font-size: .75rem; }
.install-steps li.now { color: var(--ink); font-weight: 600; }
.install-steps li.now span { background: var(--brand); color: #fff; }
.install-steps li.done span { background: var(--ok, #067647); color: #fff; }
.table tbody td.install-check { width: 2.5rem; min-width: 0; text-align: center; }
.install-foot { text-align: center; font-size: .75rem; color: var(--muted); margin-top: 2rem; }
.install-wrap .card { margin-bottom: 1rem; }
.install-or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin: .25rem 0 1rem; }
.install-or::before, .install-or::after { content: ''; flex: 1; height: 1px; background: #dfe4ec; }