:root {
    /* surfaces & lines */
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --line: #e2e8f0;
    --line-soft: #f1f5f9;

    /* text ramp */
    --heading: #0f172a;
    --text: #334155;
    --text-strong: #1e293b;
    --muted: #64748b;
    --muted-faint: #94a3b8;

    /* brand (indigo) */
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-tint: #eef2ff;
    --accent-tint-text: #4338ca;

    /* semantic */
    --danger: #be123c;
    --ok-bg: #ecfdf5;     --ok-text: #047857;
    --warn-bg: #fffbeb;   --warn-text: #b45309;
    --danger-bg: #fff1f2; --danger-text: #be123c;
    --info-bg: #eef2ff;   --info-text: #4338ca;

    /* type */
    --font-display: "Sora", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

    /* form fields — outline and placeholder read black rather than pale slate,
       which is what makes a form legible on a bright workshop screen. Both are
       tokens so the whole app's field contrast moves from one place. */
    --field-line: #000000;
    --field-placeholder: #000000;
    /* Typed values go black alongside the placeholder — left at slate they would
       read fainter than the hint they replace. */
    --field-ink: #000000;

    /* shape & elevation */
    --radius-card: 14px;
    --radius-control: 10px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .05);
    --shadow-card-hover: 0 12px 30px rgba(15, 23, 42, .12);
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

body.quick-create-open {
    overflow: hidden;
}

.app-header {
    background: var(--surface);
    color: var(--heading);
    padding: 10px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.app-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--heading);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.brand::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--accent);
    margin-right: 9px;
}

.brand:hover {
    color: var(--accent);
}

.subtitle {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 0 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
}

.tabs a {
    color: var(--text);
    padding: 10px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.tabs a:hover {
    background: var(--surface-2);
}

.login-status {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    text-align: right;
}

.login-status a {
    color: var(--accent);
    text-decoration: none;
}

.login-status a:hover {
    text-decoration: underline;
}

.link-button {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: 7px 12px;
    font-weight: 500;
}

.link-button:hover {
    background: var(--surface-2);
    border-color: var(--muted-faint);
}

.nav-collapse-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: none;
}

.nav-collapse-toggle:hover,
.nav-collapse-toggle:focus-visible {
    color: var(--accent);
    background: var(--accent-tint);
    border-color: var(--accent);
    box-shadow: none;
}

.nav-collapse-icon {
    display: grid;
    gap: 4px;
}

.nav-collapse-icon span {
    display: block;
    width: 15px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

.app-body {
    display: flex;
    align-items: stretch;
}

.app-shell {
    flex: 1;
    min-width: 0;
    padding: 18px 26px 34px;
}

.page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--heading);
    letter-spacing: -0.02em;
}

h1 {
    font-size: 20px;
}

h2 {
    font-size: 15px;
    margin-bottom: 8px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.metric, .panel {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
}

.metric {
    padding: 18px;
    box-shadow: var(--shadow-card);
}

.metric span {
    display: block;
    color: var(--muted-faint);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 7px;
}

.metric strong {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--heading);
}

.work-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.auth-grid {
    max-width: 460px;
}

.panel {
    padding: 12px 16px;
    overflow: auto;
}

.form-panel {
    display: grid;
    gap: 12px;
}

.purchase-batch-form {
    max-width: none;
    gap: 18px;
}

.purchase-header-fields,
.purchase-lines-section {
    display: grid;
    gap: 8px;
}

.purchase-header-fields h2,
.purchase-lines-section h2 {
    margin: 0;
    font-size: 16px;
}

.field-summary {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 44px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
}

.purchase-supplier-control {
    display: grid;
    grid-template-columns: minmax(260px, 520px) auto;
    gap: 10px;
    align-items: start;
}

.section-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.section-heading-row .field-hint {
    margin: 4px 0 0;
}

.purchase-lines-wrap {
    overflow-x: auto;
}

.purchase-lines-table {
    min-width: 980px;
}

.purchase-lines-table th,
.purchase-lines-table td {
    vertical-align: top;
}

.purchase-lines-table th:first-child,
.purchase-lines-table td:first-child {
    min-width: 260px;
}

.purchase-lines-table td:nth-child(2) {
    min-width: 190px;
}

.purchase-lines-table td:nth-child(3) {
    min-width: 130px;
}

.purchase-lines-table td:nth-child(4) {
    min-width: 170px;
}

.purchase-lines-table td:nth-child(4) input + input {
    margin-top: 6px;
}

.transfer-lines-table th:first-child,
.transfer-lines-table td:first-child {
    min-width: 320px;
    width: 42%;
}

.transfer-lines-table th:nth-child(2),
.transfer-lines-table td:nth-child(2) {
    min-width: 150px;
    width: 18%;
}

.transfer-lines-table th:nth-child(3),
.transfer-lines-table td:nth-child(3) {
    min-width: 260px;
    width: 32%;
}

/* Issue rows carry a fifth column the transfer rows do not — the stock coming
   back — so they re-cut the widths above rather than living on what is left over.
   Availability and both number boxes are trimmed to what a quantity actually
   needs, which is what buys the disposition pair room to sit beside its own
   quantity instead of wrapping underneath it. */
.issue-lines-table {
    min-width: 1060px;
}

.issue-lines-table th:first-child,
.issue-lines-table td:first-child {
    min-width: 230px;
    width: 27%;
}

.issue-lines-table th:nth-child(2),
.issue-lines-table td:nth-child(2) {
    min-width: 128px;
    width: 11%;
}

.issue-lines-table th:nth-child(3),
.issue-lines-table td:nth-child(3) {
    min-width: 148px;
    width: 14%;
}

.issue-lines-table th:nth-child(4),
.issue-lines-table td:nth-child(4) {
    min-width: 340px;
    width: 38%;
}

.issue-lines-table th:nth-child(5),
.issue-lines-table td:nth-child(5) {
    min-width: 96px;
    width: 10%;
}

/* Quantities here are three digits in practice, so the box is sized to three
   digits rather than stretched to fill its cell — a full-width box is what shoved
   everything after it onto another line.

   The unit caption goes with it. On this table the unit is already spelled out in
   the availability cell and again in the holding note, and repeating it beside
   every box left the boxes themselves barely wider than a cursor. The phone card
   puts it back, where there is room and no availability column beside it. */
.issue-lines-table .quantity-unit {
    display: none;
}

.issue-lines-table .quantity-input-control > .stepper {
    flex: 0 0 auto;
}

.issue-lines-table .stepper input {
    flex: 0 0 auto;
    width: 68px;
}

/* "+ Add item" sits below the line table so the next line is always one tap away
   after finishing the previous one. */
.lines-add-row {
    margin-top: 8px;
}

.purchase-row-total {
    white-space: nowrap;
    font-family: var(--font-mono);
    font-weight: 600;
}

.purchase-remove-line {
    min-height: 40px;
    padding: 8px 10px;
    color: var(--danger);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

.purchase-grand-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    color: var(--text-strong);
}

.purchase-grand-total strong {
    color: var(--heading);
    font-family: var(--font-mono);
    font-size: 20px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.purchase-price-advice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--accent-tint);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

.purchase-price-advice[hidden] {
    display: none;
}

.purchase-line-total {
    margin: 0;
    color: var(--text-strong);
}

.purchase-line-total strong {
    color: var(--heading);
    font-family: var(--font-mono);
}

label {
    display: grid;
    gap: 5px;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 500;
}

/* `hidden` is only `display: none` in the browser's own stylesheet, and the author
   rule above beats it whatever the specificity. Without this, every label given the
   attribute stays on screen — which is how the manager PIN field ended up showing
   for destinations that are never asked for one. */
label[hidden] {
    display: none;
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-control);
    padding: 8px 10px;
    color: var(--field-ink);
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: 14px;
}

input::placeholder, textarea::placeholder {
    color: var(--field-placeholder);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

textarea {
    min-height: 76px;
}

button {
    width: fit-content;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--accent);
    color: white;
    padding: 8px 13px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .05s;
}

button:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-card);
}

button:active {
    transform: scale(.985);
}

/* Mobile-app scan button (hidden in a browser; revealed by the native bridge). */
.scan-btn {
    width: auto;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--accent);
    margin-top: 6px;
}

.scan-btn:hover {
    background: var(--accent-tint);
    box-shadow: none;
}

/* Product photos: list thumbnail + edit-screen preview. */
.thumb {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--line-soft);
    vertical-align: middle;
    margin-right: 8px;
}

.photo-preview {
    display: block;
    max-width: 220px;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
}

.label-hint {
    color: var(--muted);
    font-weight: 400;
}

/* App-styled photo picker (one button -> take photo / choose file). */
.photo-picker {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.btn-soft {
    width: auto;
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
}

.btn-soft:hover {
    background: var(--accent-tint);
    box-shadow: none;
}

.photo-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.photo-chosen {
    margin: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
}

.link-btn {
    width: auto;
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
}

.link-btn:hover {
    background: none;
    box-shadow: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

th, td {
    border-bottom: 1px solid var(--line-soft);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted-faint);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-2);
}

tbody tr:hover {
    background: var(--surface-2);
}

.pin-holders-table {
    min-width: 800px;
}

.pin-holders-table th,
.pin-holders-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.inventory-table {
    min-width: 1120px;
}

.inventory-table th,
.inventory-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.mobile-table-hint {
    display: none;
}

.inventory-table-region:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: 2px;
}

.num {
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-mono);
}

.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

.check-row input {
    width: auto;
}

.filter-row {
    display: flex;
    gap: 8px;
    align-items: end;
    margin-bottom: 10px;
}

.filter-row input {
    max-width: 170px;
}

.date-range-filter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.date-range-fields,
.date-range-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.date-range-fields {
    align-items: flex-start;
    flex-wrap: nowrap;
}

.date-range-filter > .date-range-presets {
    display: grid;
    grid-template-columns: repeat(8, max-content);
    align-items: end;
    justify-content: start;
    min-width: 0;
}

.date-range-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.date-range-field input {
    width: 160px;
    max-width: 100%;
}

.date-range-preset {
    min-height: 34px;
    padding: 7px 8px;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.date-range-preset:hover,
.date-range-preset:focus-visible,
.date-range-preset.active {
    color: var(--accent);
    background: var(--accent-tint);
    border-color: var(--accent);
}

.purchase-history-panel {
    padding: 8px 12px 10px;
}

.purchase-history-filter {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 4px;
}

.purchase-history-title {
    flex: 0 0 auto;
    margin: 0 6px 0 0;
    white-space: nowrap;
}

.purchase-history-filter .date-range-fields {
    flex: 0 0 auto;
    gap: 6px;
}

.purchase-history-filter .date-range-field input {
    width: 138px;
    padding: 6px 8px;
}

.purchase-history-filter .date-range-field .message:empty {
    display: none;
}

.purchase-history-filter > .date-range-presets {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 4px;
}

.purchase-history-filter .date-range-preset {
    min-height: 34px;
    padding: 6px 7px;
}

.table-controls {
    display: flex;
    align-items: end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.table-controls-summary {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    white-space: nowrap;
}

.purchase-history-panel .table-controls {
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.purchase-history-panel .table-search {
    max-width: 340px;
}

.purchase-history-panel th,
.purchase-history-panel td {
    padding: 6px 8px;
}

.table-search {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 360px;
}

.table-sort-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.table-sort-select {
    min-width: 140px;
}

.table-sort-direction,
.table-sort-button {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    font-weight: 700;
    line-height: 1;
}

.table-sort-button {
    margin-left: 5px;
    vertical-align: middle;
}

.table-sort-direction:hover:not(:disabled),
.table-sort-button:hover {
    background: var(--accent-tint);
    border-color: var(--accent);
}

.table-sort-direction:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.table-result-count {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.table-empty-state {
    color: var(--muted);
    margin: 8px 0 0;
}

/* ---------------------------------------------------------------------------
   DataTable layer — column visibility menu, pagination footer, status badges.
--------------------------------------------------------------------------- */

.table-columns {
    position: relative;
}

.table-columns-button {
    min-height: 40px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

.table-columns-button:hover {
    background: var(--accent-tint);
    border-color: var(--accent);
}

.table-columns-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 25;
    min-width: 180px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-card-hover);
}

.table-columns-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}

.table-columns-item:hover {
    background: var(--surface-2);
}

.table-columns-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.table-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 7px 0 0;
    border-top: 1px solid var(--line-soft);
    margin-top: 4px;
}

.table-page-button {
    min-height: 34px;
    padding: 4px 12px;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

.table-page-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.table-page-label {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.status-badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}

/* Count of deliveries owing a signature, sitting beside its nav link. */
.nav-badge {
    display: inline-block;
    min-width: 18px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.status-badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.status-badge-warn { background: var(--warn-bg); color: var(--warn-text); }
.status-badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.status-badge-muted { background: var(--line-soft); color: var(--muted); }

/* Dense desktop presentation for every opted-in data table: ~35px rows, 13px
   text, sticky sortable header, stable striping, hover and selected states,
   compact toolbar. Phone card layouts below 561px are untouched. */
@media (min-width: 561px) {
    table[data-table-controls] {
        font-size: 13px;
    }

    table[data-table-controls] thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface);
        box-shadow: 0 1px 0 var(--line);
        font-size: 12px;
        color: var(--muted);
        white-space: nowrap;
    }

    table[data-table-controls] th,
    table[data-table-controls] td {
        padding: 7px 10px;
        line-height: 1.35;
    }

    table[data-table-controls] th.dt-sortable {
        cursor: pointer;
        user-select: none;
    }

    table[data-table-controls] tbody tr.dt-even {
        background: var(--surface-2);
    }

    table[data-table-controls] tbody tr:hover {
        background: var(--accent-tint);
    }

    table[data-table-controls] tbody tr.dt-selected {
        background: var(--accent-tint);
        box-shadow: inset 2px 0 0 var(--accent);
    }

    /* The frozen cell paints above its row, so it repeats every row state the
       row itself carries — striping, hover, selection, and the selected bar. */
    table[data-table-controls] tbody tr.dt-even .dt-sticky-col {
        background: var(--surface-2);
    }

    table[data-table-controls] tbody tr:hover .dt-sticky-col,
    table[data-table-controls] tbody tr.dt-selected .dt-sticky-col {
        background: var(--accent-tint);
    }

    table[data-table-controls] tbody tr.dt-selected .dt-sticky-col {
        box-shadow: inset 2px 0 0 var(--accent), inset 0 -1px 0 var(--line-soft),
                    var(--dt-sticky-edge, 0 0 transparent);
    }

    /* Sticky headers already carry the bottom rule as a shadow; the frozen
       heading has to redraw it alongside its own edge. The extra `th` keeps this
       ahead of the base heading rule further down the sheet. */
    table[data-table-controls] thead th.dt-sticky-col {
        box-shadow: 0 1px 0 var(--line), var(--dt-sticky-edge, 0 0 transparent);
    }

    table[data-table-controls] tbody tr[tabindex]:focus {
        outline: none;
    }

    table[data-table-controls] .row-action {
        min-height: 0;
        padding: 3px 10px;
        font-size: 12.5px;
    }

    table[data-table-controls] .inline-form button {
        min-height: 30px;
        padding: 3px 10px;
        font-size: 12.5px;
    }

    /* Header-click sorting covers desktop; the dropdown remains for phone
       cards where the headers are hidden. */
    .table-sort-label,
    .table-sort-direction {
        display: none;
    }

    .table-search {
        max-width: 240px;
    }

    .table-controls {
        gap: 8px;
        margin-bottom: 6px;
    }
}

/* Frozen first column. A wide table pushes its later columns off the right of
   the panel, so the column that names each row stays pinned to the left edge
   while the rest scrolls under it. table-controls.js picks the column and marks
   its cells, so hiding columns moves the frozen edge instead of losing it. The
   cell needs its own opaque background because a sticky cell paints above the
   row behind it, and the lift-off shadow only appears once the table is
   actually scrolled sideways. */
table[data-table-controls] .dt-sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: var(--dt-sticky-edge, 0 0 transparent);
}

/* Collapsed table borders are painted by the table itself, below the positioned
   frozen cell, so the row separator is redrawn here rather than lost under it. */
table[data-table-controls] tbody .dt-sticky-col {
    background: var(--surface);
    box-shadow: inset 0 -1px 0 var(--line-soft), var(--dt-sticky-edge, 0 0 transparent);
}

/* Above the sticky heading row's own z-index so the two corners agree, with the
   same redrawn separator the body cells need. */
table[data-table-controls] thead .dt-sticky-col {
    z-index: 3;
    box-shadow: inset 0 -1px 0 var(--line-soft), var(--dt-sticky-edge, 0 0 transparent);
}

table[data-table-controls].dt-scrolled-x {
    --dt-sticky-edge: 6px 0 8px -6px rgba(15, 23, 42, .28);
}

.message {
    min-height: 18px;
    color: var(--danger);
}

.success-message {
    padding: 12px 14px;
    color: var(--ok-text);
    background: var(--ok-bg, rgba(34, 197, 94, 0.08));
    border: 1px solid var(--ok-text);
    border-radius: var(--radius-control);
    font-weight: 600;
    margin-bottom: 12px;
}
.success-message:empty { display: none; }

/* Quiet secondary control (e.g. Remove a line): present but never the loudest
   thing in the card. */
.btn-quiet {
    background: transparent;
    border: 1px solid var(--line-soft);
    color: var(--muted);
}

/* A batch line rejected by the server gets the same whole-row tint as
   adjustment rows, so the failing line is findable on a long phone form. */
tr.line-row-error {
    background: var(--danger-bg);
}
table.cards-sm tr.line-row-error {
    border-color: var(--danger);
}

.adjustment-workspace {
    overflow: hidden;
}

.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.adjustment-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}

.adjustment-toolbar h2 {
    margin-bottom: 4px;
}

.field-hint {
    margin: 0;
    color: var(--muted);
}

.location-filter {
    display: grid;
    grid-template-columns: auto minmax(220px, 320px);
    align-items: center;
    gap: 8px 10px;
    flex: 0 0 auto;
}

.location-filter label {
    font-weight: 600;
    color: var(--text);
}

.adjustment-table th:nth-child(1) { width: 36%; }
.adjustment-table th:nth-child(2) { width: 14%; }
.adjustment-table th:nth-child(3) { width: 25%; }
.adjustment-table th:nth-child(4) { width: 25%; }

.adjustment-table td {
    vertical-align: middle;
}

.adjustment-table tr.adjustment-row-error {
    background: var(--danger-bg);
}

.adjustment-table tr.adjustment-row-error input[aria-invalid="true"],
.adjustment-table tr.adjustment-row-error select[aria-invalid="true"] {
    border-color: var(--danger);
}

.adjustment-table .item-name {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

.adjustment-input-cell input,
.reason-input-cell select {
    min-width: 150px;
}

.quantity-input-control {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.quantity-input-control > input,
.quantity-input-control > .stepper {
    flex: 1 1 auto;
    min-width: 0;
}

.quantity-unit {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.quantity-guidance {
    display: block;
    margin-top: 0.35rem;
}

.adjustment-input-cell .message,
.reason-input-cell .message {
    display: block;
    margin-top: 4px;
}

.bulk-adjustment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 16px;
    color: var(--muted);
}

.bulk-adjustment-actions button {
    min-width: 130px;
}

@media (max-width: 860px) {
    .adjustment-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .location-filter {
        grid-template-columns: 1fr;
    }

    .bulk-adjustment-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .bulk-adjustment-actions button {
        width: 100%;
    }

    .adjustment-table,
    .adjustment-table tbody,
    .adjustment-table tr,
    .adjustment-table td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .adjustment-workspace .table-scroll .adjustment-table {
        min-width: 0;
    }

    .adjustment-table thead {
        display: none;
    }

    .adjustment-table tr {
        margin-bottom: 14px;
        padding: 12px;
        border: 1px solid var(--line-soft);
        border-radius: var(--radius-control);
    }

    .adjustment-table td {
        padding: 9px 0;
        border: 0;
        text-align: left;
    }

    .adjustment-table td:not(:last-child) {
        border-bottom: 1px solid var(--line-soft);
    }

    .adjustment-table td::before {
        display: block;
        margin-bottom: 6px;
        color: var(--muted-faint);
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .adjustment-input-cell input,
    .reason-input-cell select {
        width: 100%;
        min-width: 0;
    }
}

.inline-form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.inline-form select {
    min-width: 110px;
}

.report-filter-form {
    display: grid;
    gap: 16px;
}

.report-filter-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
    align-items: start;
}

.report-filter-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.report-filter-field > select,
.report-filter-field > input,
.report-filter-field > .ss-wrap {
    width: 100%;
    min-width: 0;
}

.report-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.report-filter-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
}

/* Acceptance summary. The storeman turns the phone around and the employee reads
   who is receiving and exactly what, then types their PIN — so this stays a real
   table at every width rather than collapsing into cards, and never scrolls
   sideways. Two short columns fit a phone comfortably. */
.issue-acceptance {
    display: grid;
    gap: 8px;
}

.issue-acceptance h2 {
    margin: 0;
    font-size: 14px;
}

.issue-acceptance-table {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    overflow: hidden;
}

.issue-acceptance-table th,
.issue-acceptance-table td {
    vertical-align: middle;
}

.issue-acceptance-table tr:last-child th,
.issue-acceptance-table tr:last-child td {
    border-bottom: 0;
}

.issue-acceptance-employee {
    font-weight: 600;
    color: var(--heading);
}

/* "Issued" / "Returned" sit on the box itself, so the two lists can never be read
   as one continuous table when they stack on a phone. */
.issue-acceptance-caption {
    caption-side: top;
    padding: 8px 10px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    color: var(--heading);
    text-align: left;
}

.issue-acceptance-returned .issue-acceptance-caption {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.issue-acceptance-empty {
    color: var(--muted);
}

/* Take-back inside an issue row: the worn pair coming back as the fresh pair goes
   out. Only rendered for rows whose employee actually holds the item, so the column
   is usually the "Nothing held" note and costs the storeman no attention. */
.issue-line-take-back {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.issue-line-take-back .quantity-input-control,
.issue-line-take-back .segmented {
    flex: 0 1 auto;
    margin-top: 0;
}

/* The holding note and any validation each claim a whole row, so they settle
   under the quantity-and-disposition pair rather than splitting it apart. */
.issue-line-take-back [data-issue-line-holding],
.issue-line-take-back .message {
    flex: 1 0 100%;
    margin: 0;
}

.issue-line-take-back[hidden],
[data-issue-no-holding][hidden] {
    display: none;
}

[data-issue-no-holding] {
    color: var(--muted);
}

/* The row is already a cramped column on desktop and a card on a phone, so the
   two choices sit tighter here than the full-width control on the single-item
   form. They never wrap: "Return to stock" broken across two lines is what made
   the pair taller than the row it belongs to. */
.segmented-compact > label {
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
}

/* Worklist tabs: one screen that used to stack four long tables now shows one at
   a time. Each tab is a plain link carrying the active manager filter, so the
   view is bookmarkable and works with no JavaScript. */
.worklist-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.worklist-tab {
    padding: 9px 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
    /* Sits on the strip's own border so the active tab joins the panel below. */
    margin-bottom: -1px;
}

.worklist-tab:hover {
    color: var(--accent);
    background: var(--accent-tint);
}

.worklist-tab.is-active {
    color: var(--heading);
    background: var(--surface);
    border-color: var(--line);
    border-bottom: 1px solid var(--surface);
}

.worklist-tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.worklist-filter {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.worklist-filter-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    flex: 0 1 320px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.worklist-filter-field > select,
.worklist-filter-field > .ss-wrap {
    width: 100%;
    min-width: 0;
}

.worklist-filter .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
}

.report-date-range-presets {
    grid-column: span 4;
    align-self: end;
    min-width: 0;
}

@media (max-width: 1200px) and (min-width: 561px) {
    .date-range-filter {
        grid-template-columns: 1fr;
    }

    .purchase-history-filter {
        flex-wrap: wrap;
    }

    .purchase-history-title {
        flex-basis: 100%;
    }
}

@media (max-width: 560px) {
    .date-range-filter {
        grid-template-columns: 1fr;
    }

    .date-range-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .date-range-field input {
        width: 100%;
    }

    .date-range-presets {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .date-range-filter > .date-range-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .purchase-history-filter {
        display: grid;
    }

    .purchase-history-filter > .date-range-presets {
        display: grid;
    }

    .report-date-range-presets {
        grid-column: 1 / -1;
    }

    .date-range-preset {
        min-height: 48px;
        width: 100%;
    }

    .report-filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-filter-actions button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .report-filter-actions .btn-secondary {
        width: 100%;
        min-height: 48px;
    }
}

/* List/form "screen" split: list pages carry an Add button + per-row Edit;
   add/edit forms live on their own screen reached by those buttons. */
.row-action {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    text-decoration: none;
}

.row-action:hover {
    background: var(--accent-tint);
    border-color: var(--accent);
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[data-return-full-holding][hidden] {
    display: none;
}

.form-screen {
    max-width: 620px;
}

.form-screen.purchase-batch-form,
.form-screen.stock-take-form,
.form-screen.bulk-adjustment-form {
    width: 100%;
    max-width: none;
}

.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.form-back-action,
.form-quiet-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--radius-control);
    font-weight: 600;
    text-decoration: none;
}

.form-back-action {
    color: var(--text-strong);
    background: var(--surface);
    border: 1px solid var(--line);
}

.form-quiet-action {
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
}

.form-back-action:hover,
.form-quiet-action:hover {
    color: var(--accent);
    background: var(--accent-tint);
}

.form-back-action:focus-visible,
.form-quiet-action:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Paired fields (e.g. Date + Time) share one compact row instead of stacking. */
.field-inline {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.field-inline > label {
    flex: 1 1 0;
    min-width: 0;
}

/* Collapsible optional-field group ("More…"). Keeps the default form short. */
.more-fields {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    padding: 0 12px;
    margin: 4px 0;
    background: var(--surface);
}
.more-fields > summary {
    cursor: pointer;
    padding: 13px 0;
    font-weight: 600;
    color: var(--accent);
    list-style: none;
}
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary::before { content: "＋  "; }
.more-fields[open] > summary::before { content: "–  "; }
.more-fields[open] > summary {
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 10px;
}
.movement-date-time > summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.movement-date-time > summary .details-summary-value {
    margin-left: auto;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

/* Stock Take fast path: one bounded toolbar keeps search, progress, and the
   explicit record action together while the table remains the source of truth. */
.stock-take-work-grid {
    grid-template-columns: 320px minmax(0, 1fr);
    min-width: 0;
}

.stock-take-work-grid > * {
    min-width: 0;
}

.stock-take-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    overflow: visible;
}

.stock-take-toolbar {
    position: sticky;
    top: 8px;
    z-index: 6;
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-card);
}

.stock-take-search {
    display: grid;
    gap: 5px;
}

.stock-take-search-row,
.stock-take-toolbar-status,
.stock-take-toolbar-actions,
.stock-take-count-entry {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stock-take-search-row input {
    min-width: 0;
    flex: 1 1 240px;
}

.stock-take-toolbar-status {
    justify-content: space-between;
    flex-wrap: wrap;
}

.stock-take-toolbar-actions {
    flex-wrap: wrap;
}

.stock-take-progress {
    margin: 0;
    color: var(--text-strong);
    font-weight: 600;
}

.stock-take-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.stock-take-table {
    min-width: 640px;
}

.stock-take-count-entry {
    justify-content: flex-end;
    min-width: 0;
}

.stock-take-count-content {
    display: grid;
    gap: 4px;
    min-width: 0;
    text-align: right;
}

.stock-take-count-cell {
    min-width: 0;
    white-space: normal;
    font-family: var(--font-sans);
}

.stock-take-count-entry .quantity-input-control {
    flex: 1 1 150px;
    min-width: 140px;
}

.stock-take-match {
    flex: 0 0 auto;
    padding: 8px 11px;
}

.stock-take-row {
    scroll-margin-top: 190px;
}

.stock-take-row[hidden] {
    display: none;
}

/* Desktop stock take: location picker on top, then a dense one-line-per-item
   count table in the PIN-screen mould — no stacked hints, no clipped columns. */
@media (min-width: 561px) {
    .stock-take-work-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    form[data-stock-take-location-form] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 24px;
    }

    form[data-stock-take-location-form] h2 {
        flex: 0 0 100%;
        margin: 0;
    }

    form[data-stock-take-location-form] > label {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
    }

    form[data-stock-take-location-form] select {
        width: auto;
        min-width: 280px;
    }

    .stock-take-toolbar {
        top: 0;
        padding: 8px 10px;
    }

    .stock-take-table {
        min-width: 0;
        width: 100%;
    }

    .stock-take-table th,
    .stock-take-table td {
        vertical-align: middle;
        font-size: 13px;
        padding: 5px 10px;
    }

    .stock-take-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface-2);
        box-shadow: 0 1px 0 var(--line);
        white-space: nowrap;
    }

    .stock-take-table tbody tr:hover {
        background: var(--accent-tint);
    }

    .stock-take-count-content {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .stock-take-table .quantity-guidance {
        display: none;
    }

    .stock-take-table .message:empty {
        display: none;
    }

    .stock-take-count-entry .quantity-input-control {
        flex: 0 0 auto;
        min-width: 0;
    }

    .stock-take-count-entry input[data-stock-take-count] {
        width: 110px;
    }

    .stock-take-match {
        min-height: 0;
        padding: 4px 10px;
        font-size: 12.5px;
    }

    /* Batch entry line tables (Purchases, Transfers, bulk Issues) share the
       dense presentation: middle-aligned compact rows under a sticky header,
       with empty validation placeholders reclaiming their reserved height. */
    .purchase-lines-table th,
    .purchase-lines-table td {
        vertical-align: middle;
        font-size: 13px;
        padding: 6px 10px;
    }

    .purchase-lines-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface-2);
        box-shadow: 0 1px 0 var(--line);
        white-space: nowrap;
    }

    .purchase-lines-table .message:empty {
        display: none;
    }

    .purchase-lines-table .quantity-guidance {
        display: none;
    }

    /* Row actions stay on one compact line; the panel scrolls sideways instead
       of the buttons stacking the row taller. */
    table[data-table-controls] .row-actions {
        flex-wrap: nowrap;
    }

    /* The tools list wraps long descriptions into tall rows — clamp cells to
       one line and let the panel scroll sideways like the PIN table. */
    .tools-table th,
    .tools-table td {
        white-space: nowrap;
        max-width: 280px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    /* The bulk-adjustment worklist gets the same one-line density. */
    .adjustment-table th,
    .adjustment-table td {
        vertical-align: middle;
        font-size: 13px;
        padding: 5px 10px;
    }

    .adjustment-table .quantity-guidance {
        display: none;
    }

    .adjustment-table .message:empty {
        display: none;
    }

    .adjustment-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface-2);
        box-shadow: 0 1px 0 var(--line);
        white-space: nowrap;
    }
}

/* Feature-gated item-first transaction launcher. Existing movement pages stay
   authoritative; these controls are navigation only. */
.quick-transaction-panel,
.quick-transaction-actions {
    max-width: 920px;
    overflow: visible;
}

.quick-transaction-actions {
    margin-top: 16px;
}

.quick-transaction-picker {
    display: grid;
    gap: 10px;
}

.quick-transaction-picker > label {
    margin: 0;
}

.quick-transaction-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.quick-transaction-search-row select,
.quick-transaction-search-row .searchable-select {
    flex: 1 1 auto;
    min-width: 0;
}

.quick-transaction-picker > .btn-secondary {
    justify-self: start;
}

.quick-transaction-item {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.quick-transaction-item h2 {
    margin: 3px 0 0;
    font-size: 20px;
}

.quick-transaction-code {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.quick-action-link {
    display: grid;
    gap: 4px;
    min-height: 76px;
    padding: 14px;
    color: var(--text);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

.quick-action-link strong {
    color: var(--accent);
    font-family: var(--font-display);
}

.quick-action-link span {
    color: var(--muted);
    font-size: 13px;
}

.quick-action-link:hover,
.quick-action-link:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--shadow-card);
}

@media (max-height: 620px) {
    .stock-take-toolbar {
        position: static;
    }
}
.more-fields > label,
.more-fields > fieldset { margin-bottom: 10px; }

/* Searchable-select combobox (progressive enhancement over <select data-searchable>). */
.ss-wrap { position: relative; }
.ss-native { display: none; }
.ss-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    /* Above the phone tab bar (z-index 30) so the end of a long option list is
       never painted behind it. */
    z-index: 35;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    -webkit-overflow-scrolling: touch;
}
.ss-list.ss-overlay {
    position: fixed;
    right: auto;
    z-index: 1000;
}
.ss-option {
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.ss-option:hover,
.ss-option.ss-active { background: var(--accent-tint); }
.ss-option[aria-selected="true"] { font-weight: 600; color: var(--accent); }
.ss-empty { padding: 11px 12px; color: var(--muted); }

/* Segmented control: a 2-3 option radio group styled as one-tap buttons. */
.segmented {
    display: flex;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    overflow: hidden;
    margin-top: 6px;
}
.segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.segmented > label {
    flex: 1 1 0;
    margin: 0;
    padding: 12px 10px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    border-left: 1px solid var(--line-soft);
}
.segmented > label:first-of-type { border-left: 0; }
.segmented input:checked + label { background: var(--accent); color: #fff; }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Filter box above a long checkbox list. */
.filter-box { width: 100%; margin-bottom: 8px; }
.check-row[hidden] { display: none; }

/* Who signs for a transfer into a store somebody answers for. */
.handover-choice {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    background: var(--surface-muted, var(--surface));
}
/* The grid above beats the browser's own [hidden] rule outright — specificity never
   enters into it — so the attribute has to be restored explicitly, exactly as
   .check-row[hidden] and label[hidden] already are. Without this the choice is on
   screen for destinations that have nobody to sign. */
.handover-choice[hidden] { display: none; }
.handover-choice legend {
    padding: 0 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}
/* The label holds a heading and a hint, so the radio lines up with the first line
   rather than floating against the middle of a two-line block. */
.handover-choice .check-row {
    align-items: flex-start;
    gap: 10px;
}
.handover-choice .check-row input {
    margin-top: 3px;
}
.handover-choice .check-row > span {
    display: grid;
    gap: 1px;
}

/* Quantity stepper: −/+ buttons flanking a numeric input. */
.stepper { display: flex; align-items: stretch; margin-top: 6px; }
.stepper input {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    border-radius: 0;
}
.stepper-btn {
    flex: 0 0 auto;
    width: 52px;
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    cursor: pointer;
}
.stepper-btn:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.stepper-btn:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.stepper-btn:hover { background: var(--accent-tint); }

/* Inline quick-create: "+ New…" link beside a select + its bottom sheet. */
.quick-create-btn {
    display: inline-block;
    width: fit-content;
    margin-top: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
    text-decoration: none;
}
.quick-create-btn:hover { background: var(--accent-tint); border-color: var(--accent); }
.quick-create-status {
    display: block;
    margin-top: 6px;
    color: var(--ok-text);
    font-size: 13px;
}
.quick-create-status:empty { display: none; }

.sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 42, .45);
}
.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    max-width: 560px;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    margin: 0 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .18);
    padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
    animation: sheet-up .18s ease-out;
}
@keyframes sheet-up {
    from { transform: translateY(24px); opacity: .6; }
    to { transform: translateY(0); opacity: 1; }
}
.sheet-handle {
    width: 36px;
    height: 4px;
    margin: 6px auto 10px;
    border-radius: 2px;
    background: var(--line);
}
.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.sheet h2 { font-size: 17px; margin: 0; }
.sheet-close {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    font-size: 24px;
    line-height: 1;
}
.sheet-close:hover {
    color: var(--heading);
    background: var(--surface-2);
    border-color: var(--line-soft);
    box-shadow: none;
}
.sheet-close:focus-visible { box-shadow: var(--focus-ring); }
.sheet-close:disabled { opacity: .45; cursor: wait; }
.sheet form { display: grid; gap: 10px; }
.sheet .form-actions { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .sheet { animation: none; }
}

.reset-form {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    max-width: 220px;
}

.admin-user-actions {
    width: min(100%, 280px);
    min-width: 180px;
    margin: 0;
}

.admin-user-actions > summary {
    box-sizing: border-box;
    min-height: 40px;
    padding: 9px 12px;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    font-weight: 600;
    cursor: pointer;
}

.admin-user-actions > summary:hover {
    background: var(--accent-tint);
    border-color: var(--accent);
}

.admin-user-actions > summary:focus-visible,
.admin-password-action > summary:focus-visible,
.admin-user-action-form button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.admin-user-action-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin-top: 8px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-control);
}

.admin-user-action-errors {
    min-height: 0;
    margin: 0;
}

.admin-user-action-errors ul {
    margin: 0;
    padding-left: 18px;
}

.admin-user-action-form {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.admin-user-action-form + .admin-user-action-form,
.admin-password-action {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.admin-user-action-form select,
.admin-user-action-form input,
.admin-user-action-form button {
    min-width: 0;
}

.admin-user-action-form button {
    width: fit-content;
}

.admin-user-action-label {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 500;
}

.admin-password-action {
    margin: 0;
}

.admin-password-action > summary {
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
}

.admin-password-action .reset-form {
    max-width: none;
    margin-top: 10px;
}

details {
    margin-top: 8px;
}

.total-line {
    margin: 4px 0 8px;
}

/* ---------------------------------------------------------------------------
   Grouped site navigation
--------------------------------------------------------------------------- */

.site-nav {
    background: var(--surface);
    border-right: 1px solid var(--line-soft);
    padding: 12px 10px;
    width: 214px;
    flex-shrink: 0;
    overflow: hidden;
    transition: width .16s ease, padding .16s ease, border-color .16s ease;
}

html.nav-collapsed body.authed .site-nav {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right-color: transparent;
}

html.nav-collapsed body.authed .nav-groups {
    visibility: hidden;
}

.nav-toggle-input {
    display: none;
    width: auto;
}

.nav-toggle {
    display: none;
    padding: 10px 0;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

.nav-groups {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    padding: 0;
}

.nav-group + .nav-group {
    border-top: 1px solid var(--line-soft);
    margin-top: 8px;
    padding-top: 8px;
}

.nav-group-label {
    display: block;
    color: var(--muted-faint);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 10px;
    margin: 0 0 4px;
}

.nav-group a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    padding: 5px 10px;
    font-size: 13.5px;
    text-decoration: none;
    border-radius: var(--radius-control);
    font-weight: 500;
    transition: background .12s, color .12s;
}

.nav-group a:hover {
    background: var(--surface-2);
    color: var(--text-strong);
}

.nav-group a.active {
    color: var(--accent-tint-text);
    font-weight: 600;
    background: var(--accent-tint);
}

/* ---------------------------------------------------------------------------
   Page headers and panels
--------------------------------------------------------------------------- */

.page-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
}

.empty-state {
    color: var(--muted);
    background: var(--surface-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-card);
    padding: 22px 16px;
    margin: 0;
    text-align: center;
}

.content-panel {
    max-width: 760px;
}

.content-panel h2 {
    margin-top: 16px;
}

.content-panel h2:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Dashboard KPI cards
--------------------------------------------------------------------------- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    padding: 18px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kpi span {
    color: var(--muted-faint);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi strong {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--heading);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kpi small {
    color: var(--muted);
}

.kpi-alert {
    border-color: #fecdd3;
    background: var(--danger-bg);
}

.kpi-alert strong {
    color: var(--danger);
}

.kpi-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    margin-top: 4px;
}

.kpi-link:hover {
    text-decoration: underline;
}

.badge {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--badge-ring, transparent);
}

.badge-ok {
    background: var(--ok-bg);
    color: var(--ok-text);
    --badge-ring: rgba(5, 150, 105, .2);
}

.badge-info {
    background: var(--info-bg);
    color: var(--info-text);
    --badge-ring: rgba(79, 70, 229, .2);
}

.badge-warn {
    background: var(--warn-bg);
    color: var(--warn-text);
    --badge-ring: rgba(217, 119, 6, .2);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
    --badge-ring: rgba(225, 29, 72, .2);
}

.dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* ---------------------------------------------------------------------------
   Anonymous landing
--------------------------------------------------------------------------- */

.hero {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 16px;
}

.hero-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-tint);
    padding: 5px 13px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.hero h1 {
    font-size: 32px;
    line-height: 1.15;
    margin: 0 auto 14px;
    max-width: 660px;
}

.hero-lead {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 24px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-trust {
    color: var(--muted);
    font-size: 13px;
    margin: 18px 0 0;
}

.btn-secondary {
    display: inline-block;
    background: var(--surface);
    color: var(--text-strong);
    font-weight: 600;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: var(--radius-control);
    border: 1px solid var(--line);
}

.btn-secondary:hover {
    background: var(--surface-2);
    border-color: var(--muted-faint);
}

.btn-cta {
    display: inline-block;
    background: var(--accent);
    color: white;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-card);
}

.btn-cta:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-card-hover);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.feature {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 22px;
}

.feature h2 {
    font-size: 15px;
    margin-bottom: 8px;
}

.feature p {
    color: var(--muted);
    margin: 0;
    line-height: 1.55;
}

.cta-band {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 36px 32px;
    text-align: center;
}

.cta-band h2 {
    font-size: 21px;
    margin: 0 0 8px;
}

.cta-band p {
    color: var(--muted);
    margin: 0 0 20px;
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

.app-footer {
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    padding: 16px 26px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.app-footer a {
    color: var(--muted);
    text-decoration: none;
}

.app-footer a:hover {
    color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .summary-grid, .work-grid, .feature-grid {
        grid-template-columns: 1fr;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 860px) {
    .app-body {
        display: block;
    }

    .nav-collapse-toggle {
        display: none;
    }

    html.nav-collapsed body.authed .site-nav {
        width: auto;
        padding: 0 20px 10px;
        border-right-color: transparent;
    }

    html.nav-collapsed body.authed .nav-groups {
        visibility: visible;
    }

    .site-nav {
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--line-soft);
        padding: 0 20px 10px;
    }

    .app-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .nav-toggle {
        display: block;
    }

    .nav-groups {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 10px;
    }

    .nav-toggle-input:checked ~ .nav-groups {
        display: flex;
    }

    .nav-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 4px 0 0;
    }

    .nav-group + .nav-group {
        border-left: 0;
        border-top: 1px solid var(--line-soft);
        padding-left: 0;
        margin-top: 4px;
    }

    .nav-group-label {
        margin: 6px 0 2px;
    }

    .nav-group a.active {
        border-bottom-color: transparent;
        border-left: 3px solid var(--accent);
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Native-app safe areas + phone-sized screens
--------------------------------------------------------------------------- */

/* Keep content clear of the status bar / notch / home indicator inside the
   Capacitor shell (viewport-fit=cover). env() resolves to 0 in a browser, so
   desktop spacing is unchanged. */
.app-header { padding-top: max(14px, env(safe-area-inset-top)); }
.app-header,
.app-shell,
.app-footer {
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
}
.app-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* Wide data tables scroll horizontally inside their panel instead of squashing
   every column into an unreadable width. */
@media (max-width: 720px) {
    .panel { -webkit-overflow-scrolling: touch; }
    .panel table { min-width: max-content; }
    th, td { padding: 8px 10px; }
}

/* Phone layout: tighter chrome, full-width stacked actions, 16px inputs so iOS
   doesn't zoom on focus. */
@media (max-width: 560px) {
    .app-shell { padding: 16px 14px 28px; }
    .app-footer { flex-wrap: wrap; gap: 10px 16px; }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .page-header .btn-cta,
    .page-header .btn-secondary {
        display: block;
        text-align: center;
    }
    .form-page-header .form-back-action {
        align-self: flex-start;
    }

    input, select, textarea { font-size: 16px; }

    .purchase-supplier-control {
        grid-template-columns: 1fr;
    }
    .section-heading-row {
        align-items: stretch;
        flex-direction: column;
    }
    .section-heading-row .btn-secondary {
        width: 100%;
    }
    .lines-add-row .btn-secondary {
        width: 100%;
    }
    /* In the app, scanning is the fastest gloved-hand path — give it real presence. */
    .section-heading-row .scan-btn {
        width: 100%;
        min-height: 56px;
        font-weight: 600;
        color: var(--accent);
        background: var(--accent-tint);
    }
    .purchase-lines-table {
        min-width: 0;
    }
    /* The desktop column min-widths (320px item cell etc.) otherwise clip each line
       card's quantity and Remove controls behind a per-card horizontal scrollbar.
       :nth-child(n) matches the specificity of the desktop :first-child/:nth-child
       column rules so this later block wins the cascade. */
    .purchase-lines-table th:nth-child(n),
    .purchase-lines-table td:nth-child(n),
    .transfer-lines-table th:nth-child(n),
    .transfer-lines-table td:nth-child(n) {
        min-width: 0;
        width: auto;
    }
    .purchase-lines-table td {
        align-items: stretch;
        flex-direction: column;
        text-align: left;
    }
    .purchase-lines-table td::before {
        margin-bottom: 2px;
    }
    /* Remove stays a 48px target but quiet and right-aligned — not a full-width
       danger bar sitting where the next card's item picker begins. */
    .purchase-remove-line {
        width: auto;
        min-height: 48px;
        align-self: flex-end;
        padding: 8px 22px;
    }

    /* Compact issue/transfer line cards: the picker and quantity ARE the card.
       The field labels, cell dividers, and increment hint were tripling the
       height of every line on a phone. */
    table.cards-sm.transfer-lines-table td::before { display: none; }
    table.cards-sm.transfer-lines-table td {
        padding: 3px 0;
    }
    table.cards-sm.transfer-lines-table td:not(:last-child) { border-bottom: 0; }
    table.cards-sm.transfer-lines-table tr { padding: 10px 12px 8px; }
    .transfer-lines-table td [data-issue-available],
    .transfer-lines-table td [data-transfer-available] {
        font-weight: 500;
        font-size: 13px;
        color: var(--muted);
    }
    .transfer-lines-table .quantity-guidance { display: none; }
    table.cards-sm.transfer-lines-table .message:empty { display: none; }

    /* An issue card stacks two identical steppers — one going out, one coming
       back. Stripped of their headings the way a transfer card strips its own,
       they are indistinguishable, and the storeman is typing quantities into a
       column he cannot name. These two cells keep their labels and get room to
       breathe; the picker and availability above them stay compact. */
    table.cards-sm.issue-lines-table td[data-label="Quantity to issue"],
    table.cards-sm.issue-lines-table td[data-label="Old stock back"] {
        display: block;
        padding: 10px 0 4px;
        text-align: left;
    }

    table.cards-sm.issue-lines-table td[data-label="Quantity to issue"]::before,
    table.cards-sm.issue-lines-table td[data-label="Old stock back"]::before {
        display: block;
        content: attr(data-label);
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--heading);
    }

    /* A rule across the card where issuing ends and taking back begins. */
    table.cards-sm.issue-lines-table td[data-label="Old stock back"] {
        margin-top: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
    }

    /* Full width on a phone: the pair will not fit beside a quantity box at
       375px, and half-width tap targets are worse than a second line. */
    .issue-line-take-back .segmented { flex: 1 0 100%; }

    /* The card has the width for a full-size box and no availability column to
       read the unit off, so both come back here. */
    table.cards-sm.issue-lines-table .quantity-unit { display: block; }

    table.cards-sm.issue-lines-table .stepper input {
        flex: 1 1 auto;
        width: auto;
    }

    table.cards-sm.issue-lines-table tr { padding: 12px 12px 10px; }

    /* Paired selects are unreadable at ~131px each — stack them. Date/time pairs
       inside the collapsed disclosure keep their compact single row. */
    .field-inline {
        flex-direction: column;
        gap: 8px;
    }
    details .field-inline {
        flex-direction: row;
        gap: 12px;
    }
    .purchase-grand-total {
        justify-content: space-between;
    }

    /* Comfortable ≥48px touch targets (Apple 44 / Material 48 / WCAG AAA 44). */
    button, .btn-cta, .btn-secondary, .row-action { min-height: 48px; }
    .row-action { display: inline-flex; align-items: center; justify-content: center; }
    th, td { padding-top: 13px; padding-bottom: 13px; }

    /* Inputs, selects, and the searchable-combobox input were ~37px — below every
       touch-target floor. Checkboxes/radios keep native sizing (handled below). */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .ss-input { min-height: 48px; }
    .segmented > label {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Combobox option rows: readable 16px text and a full-height touch row. */
    .ss-option {
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 16px;
    }
    /* Bare checkbox rows (~20px native): give the row a touch-height and the box a
       visible 22px hit area. */
    .check-row { min-height: 48px; }
    .check-row input[type="checkbox"] {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
    }
    /* The 32px sort controls out-rank the generic button floor at (0,1,0) — restate
       them here so the cascade resolves to 48px on phones. */
    .table-sort-direction,
    .table-sort-button {
        min-width: 48px;
        min-height: 48px;
    }
    /* The compact desktop purchase-history filter (34px presets, 138px/33px dates)
       out-ranks the generic phone rules — restate touch sizes at equal specificity. */
    .purchase-history-filter .date-range-field input {
        width: 100%;
        min-height: 48px;
        padding: 8px 10px;
    }
    .purchase-history-filter > .date-range-presets {
        flex-wrap: wrap;
    }
    .purchase-history-filter .date-range-preset {
        min-height: 48px;
        padding: 10px;
    }

    /* Thumb-reachable sticky Save bar on add/edit screens. */
    .form-screen { overflow: visible; }
    .form-screen .form-actions,
    .form-screen .bulk-adjustment-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin-top: 8px;
        padding: 10px 0 calc(6px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--line-soft);
    }

    .form-screen button[type="submit"],
    .form-actions .btn-secondary { width: 100%; }
    .sheet .form-actions button { width: 100%; }
    .form-actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .form-actions-prioritized {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 12px;
    }
    .form-actions-prioritized .form-primary-action {
        grid-column: 1 / -1;
        width: 100%;
    }
    .form-actions-prioritized .form-repeat-action {
        grid-column: 1;
        width: 100%;
    }
    .form-actions-prioritized .form-quiet-action {
        grid-column: 2;
        justify-self: end;
    }
    .quick-create-btn { min-height: 48px; }
}

@media (max-width: 560px) and (max-height: 620px) {
    .form-screen .form-actions.form-actions-prioritized,
    body.authed .form-screen .form-actions.form-actions-prioritized {
        position: static;
        bottom: auto;
    }
}

/* Master-data list tables collapse into stacked, labelled cards on phones
   (rows-to-blocks). Numeric history tables keep horizontal scroll instead. */
@media (max-width: 560px) {
    .mobile-table-hint {
        display: block;
        margin: 0 0 10px;
        color: var(--muted);
        font-size: 13px;
    }

    .inventory-table {
        min-width: 1120px;
    }

    .inventory-table th:first-child,
    .inventory-table td:first-child {
        width: 172px;
        max-width: 172px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .inventory-table th:nth-child(2),
    .inventory-table td:nth-child(2) {
        width: 118px;
        max-width: 118px;
    }

    .inventory-table .thumb {
        display: none;
    }

    /* Keep Edit/Restore reachable without swiping past eleven data columns:
       the Actions column stays pinned to the right edge of the scroll region. */
    .inventory-table th:last-child,
    .inventory-table td:last-child {
        position: sticky;
        right: 0;
        background: var(--surface);
        box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.18);
    }

    .stock-take-toolbar {
        top: calc(62px + env(safe-area-inset-top));
        padding: 10px;
    }
    .stock-take-toolbar-status,
    .stock-take-toolbar-actions {
        width: 100%;
    }
    .stock-take-section-heading {
        margin: 14px 0 8px;
    }
    /* Only the non-posting fill-all shortcut remains in the toolbar; the submit
       moved to the sticky bottom bar away from mis-taps. */
    .stock-take-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .stock-take-toolbar-actions button {
        width: 100%;
    }
    .stock-take-table-scroll {
        overflow: visible;
    }
    .stock-take-table {
        min-width: 0;
    }
    table.stock-take-table td.stock-take-count-cell {
        display: grid;
        justify-items: stretch;
        align-items: start;
        gap: 8px;
        text-align: left;
    }
    .stock-take-count-content {
        width: 100%;
        text-align: left;
    }
    .stock-take-count-entry {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
    }
    .stock-take-match {
        min-height: 48px;
    }
    .quick-transaction-search-row {
        align-items: stretch;
    }
    .quick-transaction-picker > .btn-secondary,
    .quick-action-grid {
        width: 100%;
    }
    .quick-action-grid {
        grid-template-columns: 1fr;
    }
    .table-controls {
        align-items: stretch;
    }
    .table-search {
        flex-basis: 100%;
        max-width: none;
    }
    .table-sort-label {
        flex: 1 1 auto;
    }
    .table-sort-select {
        flex: 1 1 auto;
        min-width: 0;
    }
    table.cards-sm,
    table.cards-sm tbody { display: block; min-width: 0; }
    table.cards-sm thead { display: none; }
    /* `display: block` above beats the UA's [hidden] rule, which silently breaks the
       injected table search on phones — restore it explicitly (same fix as
       .stock-take-row[hidden] and .check-row[hidden]). */
    table.cards-sm tr[hidden] { display: none; }
    table.cards-sm tr {
        display: block;
        border: 1px solid var(--line-soft);
        border-radius: var(--radius-control);
        background: var(--surface);
        padding: 2px 12px;
        margin-bottom: 10px;
    }
    table.cards-sm td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 10px 0;
        border: 0;
        text-align: right;
    }
    table.cards-sm td:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
    table.cards-sm td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        text-align: left;
        white-space: nowrap;
    }
    table.cards-sm td:empty { display: none; }
    /* Nothing scrolls sideways once the rows are cards, so the frozen column
       goes back to being an ordinary line in the card. */
    table[data-table-controls].cards-sm tbody .dt-sticky-col {
        position: static;
        background: transparent;
        box-shadow: none;
    }
    table.cards-sm td .thumb { display: none; }
    table.cards-sm td .row-action,
    table.cards-sm td .inline-form button { width: 100%; }
    table.cards-sm td .row-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }
    table.admin-users-table td[data-label="Actions"] {
        align-items: stretch;
        flex-direction: column;
        text-align: left;
    }
    .admin-user-actions {
        width: 100%;
        min-width: 0;
    }
    .admin-user-actions > summary,
    .admin-password-action > summary,
    .admin-user-action-form select,
    .admin-user-action-form input,
    .admin-user-action-form button {
        min-height: 48px;
    }
    .admin-password-action > summary {
        display: flex;
        align-items: center;
    }
    .admin-user-action-form button {
        width: 100%;
    }
    table.tool-loans-table td[data-label="Return"] {
        align-items: flex-start;
    }
    table.tool-loans-table td[data-label="Return"] .inline-form {
        width: min(100%, 260px);
        display: grid;
        grid-template-columns: minmax(80px, 1fr) auto;
    }
    table.tool-loans-table td[data-label="Return"] .inline-form input {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 360px) {
    .stock-take-toolbar-actions {
        grid-template-columns: 1fr;
    }
    table.stock-take-table td.stock-take-count-cell {
        display: grid;
        justify-items: stretch;
        gap: 8px;
        text-align: left;
    }
    .stock-take-count-content {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Dashboard greeting + "items needing attention" list
--------------------------------------------------------------------------- */

.dash-greeting {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.dash-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 16px;
}

.dash-quick-actions .btn-cta,
.dash-quick-actions .btn-secondary {
    padding: 9px 14px;
}

.attention-panel {
    padding: 0;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.panel-head h2 {
    margin: 0;
    font-size: 14px;
}

.view-all {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
}

.view-all:hover {
    text-decoration: underline;
}

.attention-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.attention-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.attention-row:last-child {
    border-bottom: 0;
}

.attention-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attention-name {
    font-weight: 600;
    color: var(--text-strong);
}

.attention-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted-faint);
}

.attention-qty {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
}

.attention-action {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.attention-action:hover,
.attention-action:focus-visible {
    text-decoration: underline;
}

.attention-panel .empty-state {
    margin: 16px;
}

/* ---------------------------------------------------------------------------
   Split-panel sign-in
--------------------------------------------------------------------------- */

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    max-width: 860px;
    margin: 8px auto 0;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.auth-brand {
    background: var(--accent);
    color: #fff;
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
}

.auth-brand-mark {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
}

.auth-brand-mark::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.18);
}

.auth-brand-title {
    font-family: var(--font-display);
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 10px;
}

.auth-brand-sub {
    margin: 0;
    color: #e0e7ff;
    font-size: 14px;
    line-height: 1.55;
}

.auth-brand-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-brand-points li {
    position: relative;
    padding-left: 24px;
    color: #e0e7ff;
    font-size: 13px;
}

.auth-brand-points li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #fff;
    font-weight: 700;
}

.auth-form {
    display: grid;
    gap: 12px;
    align-content: center;
    padding: 34px 30px;
}

.auth-form-title {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0;
}

.auth-form-sub {
    margin: -4px 0 8px;
    color: var(--muted);
    font-size: 13px;
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
}

/* The way back to sign-in from a sign-up form. A full control rather than a text
   link, because on a phone this is the tap most people arriving here actually
   want and a sentence-sized link is easy to miss under a long form. */
.auth-alt-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

.auth-alt-action .btn-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.auth-links a {
    color: var(--accent);
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .auth-split {
        grid-template-columns: 1fr;
        max-width: 440px;
    }

    .auth-brand {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Phone app shell (<=560px): compact top bar, bottom tab bar, full-screen
   menu sheet. Every rule is scoped to phones; desktop and tablet keep the
   existing header, sidebar/hamburger and footer untouched. The tab-bar,
   nav-close and nav-group-phone elements exist only for this shell.
--------------------------------------------------------------------------- */

.tab-bar,
.nav-close,
.nav-group-phone {
    display: none;
}

/* Phone-only current-organisation label in the header (desktop shows the full
   login status instead). */
.tenant-current-name {
    display: none;
}

.nav-account-identity {
    display: block;
    padding: 6px 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.nav-account-logout .link-button {
    width: 100%;
    text-align: left;
}

@media (max-width: 560px) {
    * { -webkit-tap-highlight-color: transparent; }

    .purchase-price-advice {
        align-items: stretch;
        flex-direction: column;
    }
    .purchase-price-advice .btn-secondary {
        width: 100%;
    }

    .dash-quick-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .dash-quick-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .attention-row {
        flex-wrap: wrap;
    }
    .attention-main {
        flex-basis: calc(100% - 92px);
    }

    /* Compact single-row top bar: brand left, sign-out right. */
    .app-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 16px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        position: sticky;
        top: 0;
        z-index: 15;
    }
    .subtitle { display: none; }
    .login-status > span,
    .login-status .tenant-switch { display: none; }
    /* The header's prime slot goes to the current organisation, not Logout —
       Logout and organisation switching live in the drawer's Account group. */
    .login-status > .tenant-current-name {
        display: inline-block;
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
        color: var(--muted);
    }
    .login-status > form { display: none; }
    .app-header .link-button { min-height: 40px; padding: 7px 14px; }

    /* The inline hamburger strip is replaced by the bottom tab bar. */
    .site-nav { padding: 0; border-bottom: 0; }
    .nav-toggle { display: none; }

    /* The nav drawer opens as a full-screen menu sheet that stops above the
       tab bar, so the Menu tab stays visible and closes it again. */
    .nav-toggle-input:checked ~ .nav-groups {
        position: fixed;
        z-index: 25;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(58px + env(safe-area-inset-bottom));
        margin: 0;
        padding: max(12px, env(safe-area-inset-top)) 18px 24px;
        background: var(--surface);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-toggle-input:checked ~ .nav-groups .nav-close {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 700;
        color: var(--heading);
        padding: 12px 2px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--line-soft);
        cursor: pointer;
    }
    .nav-toggle-input:checked ~ .nav-groups .nav-group-phone { display: flex; }
    .nav-toggle-input:checked ~ .nav-groups .nav-group a {
        padding: 13px 12px;
        font-size: 16px;
    }

    /* Bottom tab bar. Sits under the quick-create sheet (z 40) on purpose. */
    .tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        background: var(--surface);
        border-top: 1px solid var(--line-soft);
        padding: 5px 2px calc(5px + env(safe-area-inset-bottom));
        padding-left: max(2px, env(safe-area-inset-left));
        padding-right: max(2px, env(safe-area-inset-right));
    }
    .tab-bar a,
    .tab-bar label {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--muted);
        text-decoration: none;
        cursor: pointer;
    }
    .tab-bar svg { width: 23px; height: 23px; }
    .tab-bar .active { color: var(--accent); }
    .tab-bar .tab-primary {
        min-height: 54px;
        margin: -10px 2px 0;
        color: white;
        background: var(--accent);
        border-radius: var(--radius-control);
        box-shadow: var(--shadow-card-hover);
    }
    .tab-bar .tab-primary.active { color: white; }
    body:has(.nav-toggle-input:checked) .tab-bar .tab-menu { color: var(--accent); }
    /* The tab is a column flex, so a third child would stack under the label and push
       the tab taller. Lift it out of flow and pin it over the icon's top-right. */
    .tab-bar .tab-menu { position: relative; }
    .tab-bar .tab-badge {
        position: absolute;
        top: 2px;
        right: 50%;
        transform: translateX(22px);
        min-width: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--danger-text, #b3261e);
        color: white;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    /* Keep scrolling content, the sticky Save bar and the footer clear of
       the fixed tab bar. Signed-out pages keep their footer. */
    body.authed .app-shell { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
    body.authed .app-footer { display: none; }
    body.authed .form-screen .form-actions,
    body.authed .form-screen .bulk-adjustment-actions { bottom: calc(58px + env(safe-area-inset-bottom)); }

    /* -- App feel: every touch visibly reacts the instant it lands. ------- */
    a, button, label, select, input { touch-action: manipulation; }
    .tab-bar a, .tab-bar label { transition: transform .06s ease, color .12s ease; }
    .tab-bar a:active, .tab-bar label:active { transform: scale(.9); }
    button:active, .btn-cta:active, .btn-secondary:active, .row-action:active,
    .nav-group a:active, .link-button:active { transform: scale(.97); }

    /* Thin loading bar while the next page is on the wire (app-feel.js
       toggles body.navigating on link clicks and form submits). */
    .nav-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 0;
        background: var(--accent);
        z-index: 100;
        opacity: 0;
        pointer-events: none;
    }
    body.navigating .nav-progress {
        opacity: 1;
        width: 85%;
        transition: width 1.6s cubic-bezier(.15, .6, .3, 1), opacity .1s;
    }

    /* Crossfade page navigations instead of flashing white while the next
       page renders (Chromium 126+; ignored where unsupported). */
    @view-transition { navigation: auto; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: .18s; }
}