/* Loading Bay — the app's design tokens.
 *
 * One accent, one grey family, four radii, two elevations. Everything in
 * consignment.css is built from these; nothing below should ever be
 * hard-coded again. Light mode only, deliberately: the app is used in a
 * van and a warehouse office, and a second theme is a second thing to keep
 * correct for no asked-for benefit.
 */
:root {
    /* One accent. If a blue appears anywhere that is not one of these three,
       it is a bug. */
    --accent: #1B4DE4;
    --accent-press: #1540BE;
    --accent-wash: #EAF0FE;
    --accent-wash-press: #DCE6FD;

    /* One grey family, cool. Named by weight so the ramp stays legible. */
    --ink-900: #0F1729;
    --ink-700: #33405C;
    --ink-500: #62708C;
    --ink-400: #8593AD;
    --ink-200: #D5DBE7;
    --ink-100: #E9EDF4;
    --ink-50: #F4F6FA;

    --paper: #FFFFFF;
    --ground: #F0F3F8;

    /* Consignment status only. Never borrowed for anything else. */
    --ok: #0E7C4A;
    --ok-wash: #E4F4EB;
    --warn: #A8620A;
    --warn-wash: #FBF0E0;
    --stop: #C0322B;
    --stop-wash: #FBEAE9;
    /* The scanner status sits on --ink-900; --stop is unreadable there. */
    --stop-on-dark: #FCA5A5;

    /* Shape lock: 8 marks, 12 controls, 20 surfaces, 999 pills. Nothing else. */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Two elevations. Resting and lifted; there is no third. */
    --e1: 0 1px 2px rgba(15, 23, 41, .06);
    --e2: 0 6px 20px rgba(15, 23, 41, .09);

    /* The pinned action bar sits above the home indicator. */
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* The app header (general.css .app-header): 60px bar, 1px border, plus the
       notch inset it pads itself down by. Everything pinned or sized against the
       viewport measures from this, never from AdminLTE's old 3.5rem navbar. */
    --app-header-h: calc(61px + env(safe-area-inset-top, 0px));

    /* The app footer (general.css .main-footer): 36px bar, 1px border, plus the
       home-indicator inset it pads itself up by. It is pinned to the bottom of
       every screen, so anything else pinned to the bottom sits on top of it. */
    --app-footer-h: calc(37px + var(--safe-bottom));

    /* AdminLTE's side padding around every page: .content's .5rem plus
       .container-fluid's 7.5px. A full-bleed screen pulls itself out by this. */
    --page-gutter: calc(.5rem + 7.5px);
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Codes are data, not prose. Monospaced and tabular so a driver can match the
   screen against a carton label glyph by glyph, and so scanned rows line up.
   Chivo Mono, not IBM Plex Mono: Plex's zero carries a dot in the counter that
   no OpenType feature can switch off. Chivo's is a plain ring. */
.mono {
    font-family: 'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.num {
    font-variant-numeric: tabular-nums;
}

.lbl {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-500);
}

/* Bootstrap 4 ships #007bff and AdminLTE does not override it, so the wizard's
   own blue used to sit next to a second one on the scanner screen. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--accent-press);
    border-color: var(--accent-press);
}

.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:focus-visible,
.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent);
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--accent-press);
}