/*
 * Global scale
 * ------------
 * At the browser default (16px root) the UI runs large — on a 14" MacBook the
 * admin only fits comfortably at ~80% browser zoom. The theme sizes everything
 * in rem (sidebar width included), so shrinking the root font scales the whole
 * layout the way zoom does, while 1px borders stay crisp and the user's own
 * browser font-size preference is still respected. 80% of 16px ≈ 12.8px.
 */
html {
    font-size: 80%;
}

body {
    --sidebar-width: 18rem;
}

/*
 * Høyer palette
 * -------------
 * The theme shipped with a generic indigo (#3a57e8) that meant nothing: every
 * button, link and active menu item was the same blue, so colour carried no
 * information. The accent is now the ink of the Høyer wordmark itself (sampled
 * from the logo), and colour is reserved for status — selling, expiring,
 * expired, inactive — so that when something is coloured, it means something.
 */
:root {
    --hoyer-ink: #13100d;        /* the wordmark's own near-black */
    --hoyer-ink-soft: #322b25;   /* hover / pressed */
    --hoyer-ink-rgb: 19, 16, 13;

    --hoyer-active: #1a7f5a;     /* selling, valid, in force */
    --hoyer-attention: #a86a1f;  /* expiring, needs a decision */
    --hoyer-stopped: #a8322d;    /* expired, destructive */

    --bs-primary: var(--hoyer-ink);
    --bs-primary-rgb: var(--hoyer-ink-rgb);
    --bs-link-color: var(--hoyer-ink);
    --bs-link-hover-color: var(--hoyer-ink-soft);
}

/* Primary actions: one dark, confident button rather than a field of blue. */
.btn-primary {
    --bs-btn-bg: var(--hoyer-ink);
    --bs-btn-border-color: var(--hoyer-ink);
    --bs-btn-hover-bg: var(--hoyer-ink-soft);
    --bs-btn-hover-border-color: var(--hoyer-ink-soft);
    --bs-btn-active-bg: var(--hoyer-ink-soft);
    --bs-btn-active-border-color: var(--hoyer-ink-soft);
    --bs-btn-disabled-bg: var(--hoyer-ink);
    --bs-btn-disabled-border-color: var(--hoyer-ink);
}

.btn-outline-primary {
    --bs-btn-color: var(--hoyer-ink);
    --bs-btn-border-color: rgba(var(--hoyer-ink-rgb), .35);
    --bs-btn-hover-bg: var(--hoyer-ink);
    --bs-btn-hover-border-color: var(--hoyer-ink);
    --bs-btn-active-bg: var(--hoyer-ink);
    --bs-btn-active-border-color: var(--hoyer-ink);
}

/* Sidebar: the current section reads as ink, not as a blue banner. */
.sidebar .nav-link.active,
.sidebar .nav-link[aria-expanded="true"] {
    background-color: var(--hoyer-ink) !important;
    color: #fff !important;
}

/* Status is the only place colour is allowed to shout. */
.badge.bg-success { background-color: var(--hoyer-active) !important; }
.badge.bg-warning { background-color: var(--hoyer-attention) !important; color: #fff !important; }
.badge.bg-danger  { background-color: var(--hoyer-stopped) !important; }
.text-success { color: var(--hoyer-active) !important; }
.text-danger  { color: var(--hoyer-stopped) !important; }

/*
 * The term-sheet's header cards carry the figures a buyer came for, so the
 * value must be the darkest thing in the card — it was grey on grey.
 */
.agreement-term-value {
    color: var(--hoyer-ink);
}

/*
 * Dark mode inverts the ink: on a dark ground the wordmark's black would
 * disappear, so the accent becomes the paper colour instead. These are written
 * as concrete declarations rather than variables because the bundled dark
 * stylesheet sets .btn-* backgrounds directly and would otherwise win.
 */
body.dark {
    --hoyer-ink: #f0ece7;
    --hoyer-ink-soft: #d8d2ca;
    --hoyer-ink-rgb: 240, 236, 231;
}

body.dark .btn-primary {
    background-color: #f0ece7 !important;
    border-color: #f0ece7 !important;
    color: #13100d !important;
}

body.dark .btn-primary:hover,
body.dark .btn-primary:focus {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

body.dark .btn-outline-primary,
body.dark .btn-outline-secondary {
    color: #e6e1db !important;
    border-color: rgba(240, 236, 231, .45) !important;
}

body.dark .btn-outline-primary:hover,
body.dark .btn-outline-secondary:hover {
    background-color: #f0ece7 !important;
    border-color: #f0ece7 !important;
    color: #13100d !important;
}

body.dark .sidebar .nav-link.active,
body.dark .sidebar .nav-link[aria-expanded="true"] {
    background-color: #f0ece7 !important;
    color: #13100d !important;
}

/* Links and the term-sheet figures need to be light on a dark ground. */
body.dark a:not(.btn),
body.dark .agreement-term-value {
    color: #e6e1db;
}

/*
 * Mobile
 * ------
 * Pre-orders are registered from phones at fairs, so those screens carry the
 * mobile budget: previews sized to the viewport instead of a desktop constant,
 * a dropzone that does not swallow the screen, and finger-sized controls.
 */
.pre-order-dropzone {
    min-height: 240px;
    padding: 2.5rem;
}

.pre-order-preview-img { min-height: 420px; }
.pre-order-preview-embed { min-height: 820px; }

@media (max-width: 767.98px) {
    .pre-order-dropzone {
        min-height: 150px;
        padding: 1.25rem;
    }

    .pre-order-preview-img { min-height: 40vh; }
    .pre-order-preview-embed { min-height: 70vh; }
}

/*
 * Buying-budget sheet
 * -------------------
 * A 20-odd-column planning sheet. Fixed column widths make the sticky offsets
 * exact: Brand and Pool are pinned left so rows never lose their identity, and
 * the budget-season group plus the trend column are pinned right so the cells
 * being edited never leave the screen. History scrolls between the rails.
 */
:root {
    --bb-cell-bg: #ffffff;
    --bb-rule: rgba(19, 16, 13, .25);
}

.bb-sheet.table {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
    /* Sticky cells are unreliable under border-collapse: collapse. */
    border-collapse: separate;
    border-spacing: 0;
    /* The theme gives tables overflow: hidden, which silently makes the table
       itself the sticky containing block — the rails then never engage. */
    overflow: visible;
}

.bb-c-brand { width: 12rem; }
.bb-c-pool { width: 4rem; }
.bb-c-num { width: 6.5rem; }
.bb-c-budget { width: 8rem; }
.bb-c-trend { width: 9rem; }

.bb-sheet td, .bb-sheet th { overflow: hidden; }
.bb-brand { white-space: nowrap; text-overflow: ellipsis; }

/* The rails. Offsets are the summed fixed widths of the columns outside them. */
.bb-pin-l, .bb-pin-l1, .bb-pin-l2,
.bb-pin-r0, .bb-pin-r-budget, .bb-pin-r-group {
    position: sticky;
    /* !important: Bootstrap's table cells carry their own background rule. */
    background-color: var(--bb-cell-bg) !important;
    z-index: 2;
}

.bb-pin-l, .bb-pin-l1 { left: 0; }
.bb-pin-l2 { left: 12rem; }

.bb-pin-r0 { right: 0; }
.bb-pin-r-budget, .bb-pin-r-group { right: 9rem; }

.bb-sheet thead .bb-pin-l, .bb-sheet thead .bb-pin-l1, .bb-sheet thead .bb-pin-l2,
.bb-sheet thead .bb-pin-r0, .bb-sheet thead .bb-pin-r-budget, .bb-sheet thead .bb-pin-r-group {
    z-index: 3;
}

/* Seams where the scrolling middle slides under a rail. */
.bb-pin-l2 { box-shadow: 6px 0 6px -6px rgba(19, 16, 13, .25); }
.bb-pin-r-budget, .bb-pin-r-group { box-shadow: -6px 0 6px -6px rgba(19, 16, 13, .25); }

/* One rule per season group so sixteen columns read as four blocks. */
.bb-sheet .bb-gs { border-left: 2px solid var(--bb-rule); }

/*
 * The column header is the sheet's legend — it reads as a solid band, and
 * every column in it sorts on click. Declared after the rail rules so its
 * background wins on the pinned cells too.
 */
:root {
    --bb-head-bg: #f1eee9;
    --bb-head-fg: #13100d;
    --bb-row-line: rgba(19, 16, 13, .12);
    --bb-row-hover: #f6f3ee;
}

.bb-sheet .bb-colhead th {
    background-color: var(--bb-head-bg) !important;
    color: var(--bb-head-fg);
    font-weight: 600;
    border-bottom: 2px solid var(--bb-rule);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.bb-sheet .bb-colhead th:hover { filter: brightness(.96); }

.bb-sheet .bb-colhead th[aria-sort]::after {
    content: '▲';
    font-size: .6em;
    margin-left: .3rem;
    vertical-align: middle;
}

.bb-sheet .bb-colhead th[aria-sort='descending']::after { content: '▼'; }

/* The turnover header is the one label long enough to need two lines. */
.bb-sheet .bb-colhead th.bb-pin-r0 { white-space: normal; line-height: 1.2; }

/* Cells whose hover splits the figure by period announce it quietly. */
.bb-sheet td.bb-split { cursor: help; text-decoration: underline dotted rgba(19, 16, 13, .35); text-underline-offset: 3px; }
body.dark .bb-sheet td.bb-split { text-decoration-color: rgba(240, 236, 231, .4); }

/* A thin line under every row, and the whole row lit on hover — rails included,
   which needs !important after their background rule. */
.bb-sheet tbody td { border-bottom: 1px solid var(--bb-row-line); }

.bb-sheet tbody tr:hover > td {
    background-color: var(--bb-row-hover) !important;
}

/* The group header of the season being budgeted keeps its ink chip — also
   when pinned, where the rail background rule would otherwise repaint it. */
.bb-sheet thead th.table-dark,
.bb-sheet thead th.table-dark.bb-pin-r-group {
    background-color: var(--hoyer-ink) !important;
    color: #fff !important;
}

.bb-sheet thead .bb-pin-r-group { padding-right: .75rem; }

/* The editable cell: room for six digits, and a tint when the AI wrote it. */
.bb-sheet td.bb-cell-input { padding: .15rem .3rem; overflow: visible; }
.bb-input-wrap { position: relative; }
.js-budget-input { min-width: 6.9rem; }
.js-budget-input.bb-ai {
    border-color: #3a97d4;
    background-color: rgba(58, 151, 212, .08);
}

.bb-ai-dot {
    position: absolute;
    top: -0.45rem;
    left: -0.35rem;
    border: 0;
    border-radius: 999px;
    background: #3a97d4;
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
    line-height: 1;
    padding: .18rem .3rem;
    cursor: pointer;
}

.bb-ai-pop {
    position: fixed;
    z-index: 1080;
    max-width: 22rem;
    background: var(--hoyer-ink);
    color: #fff;
    font-size: .8rem;
    line-height: 1.35;
    padding: .55rem .7rem;
    border-radius: .4rem;
    box-shadow: 0 6px 18px rgba(19, 16, 13, .3);
}

/* Save travels with the buyer instead of waiting below fifty rows. */
.bb-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background-color: var(--bb-cell-bg);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding: .75rem .25rem;
    margin-top: .25rem;
}

/* Dark ground: solid rail cells, no white summary bands, readable chips. */
body.dark {
    --bb-cell-bg: #222738;
    --bb-rule: rgba(240, 236, 231, .35);
    --bb-head-bg: #2f3550;
    --bb-head-fg: #e6e1db;
    --bb-row-line: rgba(240, 236, 231, .14);
    --bb-row-hover: #2a3047;
}

body.dark .bb-sheet thead td,
body.dark .bb-sheet thead th {
    background-color: #222738;
    color: #e6e1db;
}

body.dark .bb-sheet thead th.bg-light { background-color: #2f3550 !important; color: #e6e1db; }
body.dark .bb-sheet thead th.table-dark,
body.dark .bb-sheet thead th.table-dark.bb-pin-r-group {
    background-color: #f0ece7 !important;
    color: #13100d !important;
}
body.dark .badge.bg-light { background-color: rgba(240, 236, 231, .14) !important; color: #e6e1db !important; }

/* Choices reserves a paragraph of air below itself; forms don't need it. */
.choices { margin-bottom: .5rem; }

/* Below the rail budget the pins would eat the viewport — plain scroll. */
@media (max-width: 1199.98px) {
    .bb-pin-r0, .bb-pin-r-budget, .bb-pin-r-group {
        position: static;
        box-shadow: none;
    }
}

@media (max-width: 767.98px) {
    .bb-pin-l2 { position: static; box-shadow: none; }
    .bb-sheet .bb-summary { display: none; }
    /* !important: it must beat the d-flex utility. */
    .bb-actions { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
}

/*
 * The theme's banner block is a positioned element overlaying the top of
 * every page, and the content container (mt-n5) deliberately pulls the page
 * up beneath it — so its empty decorative strip under the navbar silently
 * swallowed clicks on anything in that zone (e.g. "Back to sales" on the
 * sale detail page). Let the banner pass clicks through, but keep the navbar
 * inside it interactive.
 */
.iq-banner {
    pointer-events: none;
}

.iq-banner .iq-navbar {
    pointer-events: auto;
}

/* The e-mail preview on the report pages — the weekly table is wide, so it
   scrolls inside its card instead of stretching the page. */
.report-preview {
    overflow-x: auto;
}

/* ============================================================
   Stock report — the stocktake sheet
   ============================================================ */

.stock-summary {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.stock-summary-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color, #6c757d);
}

.stock-summary-value {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--hoyer-ink);
    font-variant-numeric: tabular-nums;
}

/* The stock table borrows the sale-lines skin with its own column plan. */
.sale-lines.stock-table {
    table-layout: fixed;
    width: 100%;
}

.sale-lines.stock-table th:nth-child(2) { width: 7rem; }
.sale-lines.stock-table th:nth-child(3) { width: 13rem; }
.sale-lines.stock-table th:nth-child(4) { width: 17rem; }

/* Each season's slice of the stock value, drawn in ink. */
.stock-share-cell {
    min-width: 12rem;
}

.stock-share {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 4.5rem);
    height: .5rem;
    background-color: rgba(19, 16, 13, .08);
    border-radius: 2px;
    overflow: hidden;
}

.stock-share-bar {
    height: 100%;
    background-color: var(--hoyer-ink);
}

.stock-share-pct {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5rem;
    font-variant-numeric: tabular-nums;
    font-size: .85em;
    color: var(--bs-secondary-color, #6c757d);
}

.stock-total-row td {
    border-top: 1px dashed rgba(19, 16, 13, .45);
    border-bottom: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

body.dark .stock-share {
    background-color: rgba(240, 236, 231, .12);
}

body.dark .stock-share-bar {
    background-color: #f0ece7;
}

body.dark .stock-total-row td {
    border-top-color: rgba(240, 236, 231, .45);
}

/* ============================================================
   Reporting management
   ============================================================ */

/* Seven columns and a three-button action group: slightly tighter cells so
   the whole row fits the card without a horizontal scroll. */
.sale-lines.rm-table th,
.sale-lines.rm-table td {
    padding: .55rem .5rem;
}

.rm-table .btn-sm {
    padding-left: .55rem;
    padding-right: .55rem;
}

/* Colour is for status: Delete stays quiet until the pointer commits to it. */
.rm-delete {
    text-decoration: none;
}

.rm-delete:hover,
.rm-delete:focus {
    color: var(--hoyer-stopped) !important;
    text-decoration: underline;
}

/* The stored error can be long — keep it to one readable line. */
.rm-error {
    max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Finger-sized targets wherever the pointer is a finger. */
@media (pointer: coarse) {
    table .btn-sm {
        padding-top: .45rem;
        padding-bottom: .45rem;
        min-height: 40px;
    }

    /* The row expander the responsive tables collapse into. */
    table.dataTable > tbody > tr > td.dtr-control::before {
        height: 1.2em;
        width: 1.2em;
    }

    /* The hamburger that opens the collapsed sidebar. */
    .sidebar-toggle {
        padding: .6rem;
        margin: -.35rem;
    }
}

/* ============================================================
   Sale detail — receipt-styled totals and fact lists
   ============================================================ */

.sale-lines th {
    background-color: #f1eee9;
    border-bottom: 2px solid var(--hoyer-ink, #13100d);
    white-space: nowrap;
}

/* The theme's roomy cell padding overflows six columns out of the card. */
.sale-lines th,
.sale-lines td {
    padding: .6rem .65rem;
}

/* Fixed layout with widths cut for the sale detail's item table ONLY — the
   .sale-items modifier keeps them off the other tables wearing this skin
   (the stock report, the reporting-management list). */
.sale-lines.sale-items {
    table-layout: fixed;
    width: 100%;
}

.sale-lines.sale-items th:nth-child(2) { width: 3.2rem; }
.sale-lines.sale-items th:nth-child(3) { width: 7rem; }
.sale-lines.sale-items th:nth-child(4) { width: 8.5rem; }
.sale-lines.sale-items th:nth-child(5) { width: 7.5rem; }

.sale-lines.sale-items td:first-child {
    padding-right: 1rem;
}

/* On phones the fixed layout would crush the product column to nothing;
   let the table keep its natural width and scroll inside .table-responsive. */
@media (max-width: 767.98px) {
    .sale-lines.sale-items,
    .sale-lines.stock-table {
        table-layout: auto;
        min-width: 40rem;
    }
}

.sale-lines td {
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid rgba(19, 16, 13, .08);
}

.sale-lines tbody tr:hover > td {
    background-color: rgba(19, 16, 13, .04);
}

/* The totals block reads like the foot of a till receipt. */
.sale-receipt {
    max-width: 22rem;
    border-top: 1px dashed rgba(19, 16, 13, .45);
    padding-top: .5rem;
    font-variant-numeric: tabular-nums;
}

.sale-receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: .15rem 0;
}

.sale-receipt-total {
    border-top: 1px dashed rgba(19, 16, 13, .45);
    margin-top: .35rem;
    padding-top: .5rem;
    font-weight: 600;
    font-size: 1.05rem;
}

/* Label/value pairs in the customer and sale cards. */
.sale-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: .25rem;
}

.sale-facts dt {
    font-weight: 400;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.sale-facts dd {
    margin-bottom: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

body.dark .sale-lines th {
    background-color: #2a2f45;
    border-bottom-color: #f0ece7;
}

body.dark .sale-lines td {
    border-bottom-color: rgba(240, 236, 231, .12);
}

body.dark .sale-lines tbody tr:hover > td {
    background-color: rgba(240, 236, 231, .06);
}

body.dark .sale-receipt,
body.dark .sale-receipt-total {
    border-top-color: rgba(240, 236, 231, .45);
}

/* The multi-select status line: the all-access state reads as a confirmed
   green state, not as an empty box. */
.choices-status-all {
    display: inline-block;
    padding: .05rem .5rem;
    border-radius: 999px;
    background-color: rgba(26, 127, 90, .12);
    color: var(--hoyer-active);
    font-weight: 600;
}

body.dark .choices-status-all {
    background-color: rgba(26, 127, 90, .3);
    color: #7fd7b4;
}

/* Pool "Ja" hover on the budget sheet: the benefits this membership is worth
   at the budget's store, anchored to the sticky pool cell. */
.bb-pool .bb-pool-card {
    display: none;
    position: absolute;
    left: calc(100% - .25rem);
    top: -.25rem;
    z-index: 40;
    width: 21rem;
    background-color: var(--bb-cell-bg);
    border: 1px solid var(--bb-rule);
    border-radius: .375rem;
    box-shadow: 0 8px 24px rgba(19, 16, 13, .18);
    padding: .65rem .8rem;
    white-space: normal;
    font-size: .82rem;
    text-align: left;
    cursor: default;
}

.bb-pool:hover .bb-pool-card,
.bb-pool-badge:focus ~ .bb-pool-card {
    display: block;
}

.bb-pool-badge { cursor: help; }

.bb-pool-card-title {
    font-weight: 600;
    color: var(--hoyer-ink);
    border-bottom: 2px solid var(--hoyer-ink);
    padding-bottom: .3rem;
    margin-bottom: .45rem;
}

.bb-pool-agreement + .bb-pool-agreement { margin-top: .5rem; }

.bb-pool-agreement-name { font-weight: 600; }

.bb-pool-valid {
    font-weight: 400;
    color: var(--bs-secondary-color, #6c757d);
    margin-left: .35rem;
    font-size: .92em;
}

.bb-pool-items {
    margin: .15rem 0 0;
    padding-left: 1rem;
}

.bb-pool-items li { margin-top: .1rem; }

.bb-pool-item-label { color: var(--bs-secondary-color, #6c757d); }

body.dark .bb-pool .bb-pool-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

/* The sheet clips cell overflow; the hover card must escape its cell and
   float above the sticky cells of the rows below. */
.bb-sheet td.bb-pool {
    overflow: visible;
}

.bb-pool:hover,
.bb-pool:focus-within {
    z-index: 50;
}

/* Log tables: one compact from→to line per changed field. */
.log-change { white-space: nowrap; font-size: .85em; }
.log-field { font-weight: 600; }
.log-from { color: var(--hoyer-stopped); }
.log-to { color: var(--hoyer-active); }
.log-preview { color: var(--bs-secondary-color, #6c757d); cursor: help; }