/* ==========================================================================
   KindStock shared components. Each block styles one macro from
   app/templates/macros/ (ui.html, tables.html, money.html).
   Consumes tokens only - no raw hexes except the proven AA chip pairs.
   ========================================================================== */

/* --- Page header (macros/ui.html: page_header) --------------------------- */

.page-header {
    padding-bottom: var(--ks-sp-3);
    border-bottom: 1px solid var(--ks-rule);
}

.page-header-title {
    font-size: var(--ks-fs-2xl);
    color: var(--ks-ink);
}

.page-header-title .bi {
    color: var(--ks-sage);
    font-size: 0.85em;
}

.page-header-subtitle {
    color: var(--ks-ink-muted);
    font-size: var(--ks-fs-sm);
}

/* --- The till tape (macros/money.html) -----------------------------------
   A money summary set like the thermal receipt in every KindStock box.
   Sawtooth tear at top and bottom, dotted leaders, a double rule above the
   total, gold reserved for the Gift Aid line. */

.tape {
    position: relative;
    background: var(--ks-paper);
    font-family: var(--ks-font-money);
    font-variant-numeric: tabular-nums lining-nums;
    padding: var(--ks-sp-4) var(--ks-sp-5);
    margin: 8px 0;
    max-width: 460px;
    box-shadow: var(--ks-shadow-sm);
}

.tape::before,
.tape::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background-size: 12px 6px;
    background-repeat: repeat-x;
}

.tape::before {
    top: -6px;
    background-image:
        linear-gradient(-45deg, var(--ks-paper) 4px, transparent 0),
        linear-gradient(45deg, var(--ks-paper) 4px, transparent 0);
}

.tape::after {
    bottom: -6px;
    background-image:
        linear-gradient(-135deg, var(--ks-paper) 4px, transparent 0),
        linear-gradient(135deg, var(--ks-paper) 4px, transparent 0);
}

.tape-title {
    font-size: var(--ks-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ks-ink-muted);
    text-align: center;
    padding-bottom: var(--ks-sp-2);
    margin-bottom: var(--ks-sp-2);
    border-bottom: 1px solid var(--ks-rule);
}

.tape-row {
    display: flex;
    align-items: baseline;
    gap: 0.5ch;
    padding: 0.28rem 0;
    font-size: var(--ks-fs-sm);
}

.tape-label {
    color: var(--ks-ink-muted);
    flex-shrink: 0;
}

.tape-dots {
    flex: 1;
    min-width: 2ch;
    border-bottom: 2px dotted var(--ks-rule-strong);
    transform: translateY(-0.28em);
}

.tape-total {
    border-top: 3px double var(--ks-ink);
    margin-top: 0.45rem;
    padding-top: 0.5rem;
    font-size: var(--ks-fs-base);
}

.tape-total .tape-label {
    color: var(--ks-ink);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--ks-fs-sm);
}

/* --- Receipt-DNA tables (macros/tables.html: data_table) ------------------ */

.table-ks thead th {
    font-family: var(--ks-font-body);
    font-size: var(--ks-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--ks-ink-muted);
    border-bottom: 2px solid var(--ks-rule-strong);
    white-space: nowrap;
}

.table-ks tbody td {
    border-bottom: 1px solid var(--ks-rule);
    vertical-align: middle;
}

.table-ks tbody tr:last-child td {
    border-bottom: 0;
}

/* --- Status chips (macros/ui.html: status_badge) --------------------------
   Static pairs are the Bootstrap-subtle AA combinations the system area
   already proved; one vocabulary everywhere now. */

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: var(--ks-fs-xs);
    font-weight: 600;
    line-height: 1.4;
}

.status-chip--success { background-color: #d1e7dd; color: #0a5132; }
.status-chip--warn    { background-color: #fff3cd; color: #664d03; }
.status-chip--danger  { background-color: #f8d7da; color: #842029; }
.status-chip--neutral { background-color: #e2e3e5; color: #41464b; }

.status-chip-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

/* The Gift Aid chip: eligibility/HMRC markers only - part of the gold law. */
.chip-ga {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: var(--ks-fs-xs);
    font-weight: 600;
    background-color: var(--ks-gift-aid-wash);
    color: var(--ks-gift-aid);
}

/* --- Empty states (macros/ui.html: empty_state) --------------------------- */

.empty-state-icon {
    font-size: 2rem;
    color: var(--ks-ink-faint);
}

.empty-state-title {
    color: var(--ks-ink);
}

.empty-state-hint {
    max-width: 46ch;
    margin-inline: auto;
}

/* ---- On-screen keyboard (touch kiosks only; see js/onscreen_keyboard.js) ----
   Chromium-on-Wayland won't trigger the compositor OSK, so touch tills render
   this in-page keyboard for text fields. Numeric till entry keeps its keypads. */
.osk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;               /* above Bootstrap modals (1055) */
    background: #1f2937;
    padding: 0.4rem 0.5rem 0.6rem;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
    transition: transform 0.15s ease-out;
    touch-action: manipulation;
    user-select: none;
}
.osk.osk-visible { transform: translateY(0); }
.osk-bar { display: flex; justify-content: flex-end; padding: 0 0.2rem 0.35rem; }
.osk-hide {
    background: transparent;
    color: #cbd5e1;
    border: 0;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
}
.osk-hide:active { background: rgba(255, 255, 255, 0.12); }
.osk-keys { display: flex; flex-direction: column; gap: 0.55rem; }
.osk-row { display: flex; gap: 0.55rem; justify-content: center; }
.osk-key {
    flex: 1 1 0;
    min-width: 0;
    /* Taller keys so they aren't flat/squished on a wide landscape till. */
    min-height: clamp(56px, 8.5vh, 82px);
    padding: 0.75rem 0;
    font-size: clamp(1.15rem, 3.4vh, 1.9rem);
    font-weight: 600;
    color: #f8fafc;
    background: #374151;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.osk-key:active { background: #4b5563; }
.osk-key-wide { flex: 1.5 1 0; }
.osk-key-space { flex: 4 1 0; }
.osk-key-mod { background: #475569; font-size: clamp(0.85rem, 2vh, 1.1rem); }
.osk-key-active { background: #2563eb; color: #fff; }
.osk-key-done { background: var(--gs-primary, #1A3C34); }
/* Give scrolling pages room to lift a bottom field above the keyboard. */
body.osk-open { padding-bottom: 360px; }