/*
 * The only stylesheet in this application, and it is deliberately short.
 *
 * Bootstrap 5 does the layout, the components and the spacing. What is here is the small
 * set of things Bootstrap has no opinion about: hiding empty validation summaries, the
 * htmx loading indicator convention, and the till-specific affordances a shop floor needs
 * (a scan box you cannot miss, numbers that line up in a column).
 *
 * Resist growing this. A rule added here applies to every screen ever written, and the
 * next person cannot tell which screen it was for.
 */

/* ---------------------------------------------------------------------------
 * Validation
 * ------------------------------------------------------------------------ */

/* The validation-summary tag helper always emits its container. Without this a page with
   no errors shows an empty coloured box. */
.validation-summary-valid {
    display: none;
}

/* ---------------------------------------------------------------------------
 * htmx loading state
 *
 * The convention: put `hx-indicator="#some-id"` on the element that triggers the request
 * and give the target element class `htmx-indicator`. htmx adds `htmx-request` for the
 * duration of the call and these two rules do the rest — no per-screen CSS, no spinner
 * markup beyond one element.
 * ------------------------------------------------------------------------ */

.htmx-indicator {
    opacity: 0;
    transition: opacity 120ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* A swapping region dims rather than disappearing, so the operator keeps their place. */
.htmx-swapping {
    opacity: 0.5;
}

/* ---------------------------------------------------------------------------
 * Till affordances
 * ------------------------------------------------------------------------ */

/* The scan box is the one control a cashier looks at all day. */
.scan-input {
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Money and quantities line up only if their digits are the same width. */
.numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* A line whose product carries no price in the selected currency. */
.line-unpriced {
    background-color: var(--bs-warning-bg-subtle);
}

/* ---------------------------------------------------------------------------
 * Stock grid
 *
 * A product-by-location table is wider than the layout container once a tenant
 * has more than two stores. Horizontal scroll is the pattern; these rules only
 * make a quantity cell a whole clickable target and keep zeroes quiet.
 * ------------------------------------------------------------------------ */

.stock-grid {
    min-width: 36rem;
}

.stock-grid .qty-cell a {
    display: block;
    text-align: right;
    text-decoration: none;
    color: inherit;
    padding: 0.15rem 0.35rem;
    margin: -0.15rem -0.35rem;
    border-radius: 0.2rem;
}

.stock-grid .qty-cell a:hover {
    background-color: var(--bs-secondary-bg);
}

.stock-grid .qty-zero,
.stock-grid .qty-zero a {
    color: var(--bs-secondary-color);
}