/* Business Ledger screen. Shared pieces come from kit/; this file holds the register,
 * ticket and bill layouts and maps the Ledger's verdicts onto kit status tokens. */

/* Verdict names come from BL.Verdict on the server. */
.pill.healthy { --status: var(--success); --i: var(--icon-check); }
.pill.restock, .pill.thin { --status: var(--warning); --i: var(--icon-warning); }
.pill.losing  { --status: var(--danger);  --i: var(--icon-warning); }
.pill.quiet   { --status: var(--neutral); --i: var(--icon-quiet); }

.btn.grow { flex: 1; }
td:first-child { font-weight: 600; }

/* Register: menu on the left, ticket on the right */
.register { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); gap: var(--sp-3); align-items: start; }
.menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sp-2); }
.menu button {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    text-align: left;
    font: inherit;
    font-stretch: var(--stretch-body);
    color: var(--ink);
    background: var(--surface-2);
    border: var(--border) solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-3);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.menu button:hover { border-color: var(--accent); background: var(--surface-3); }
.menu button:active { transform: translateY(1px); }
.menu button:disabled { opacity: .45; cursor: not-allowed; transform: none; border-color: var(--line); }
.menu .name { font-weight: 650; }
.menu .meta { display: flex; justify-content: space-between; align-items: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.ticket-lines { min-height: 4rem; }
.ticket-line {
    display: grid;
    grid-template-columns: 1fr auto minmax(3.5rem, auto);
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-2) 0;
    font-variant-numeric: tabular-nums;
}
.ticket-line > span:last-child { text-align: right; }
.ticket-line + .ticket-line { border-top: var(--border) solid var(--line); }
.qty { display: inline-flex; gap: var(--sp-2); align-items: center; }
.qty button {
    display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0;
    border-radius: var(--radius); border: var(--border) solid var(--line-strong);
    background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.qty button:hover { background: var(--surface-3); }
.qty .i { width: .85rem; height: .85rem; }
.ticket-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: var(--sp-2); padding-top: var(--sp-3);
    border-top: var(--border) solid var(--line-strong);
    font-size: var(--fs-md);
}
.ticket-total strong { font-size: var(--fs-xl); font-stretch: var(--stretch-display); font-variant-numeric: tabular-nums; }
.ticket .row { margin-top: var(--sp-2); }
.mine { margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }

.balance { font-size: var(--fs-2xl); font-weight: 700; font-stretch: var(--stretch-display); line-height: 1.1; margin: 0 0 var(--sp-2); }
.account { align-items: start; }

/* Customer bill: anchored right so the customer still sees the cashier */
.bill { right: 4vw; top: 0; bottom: 0; margin: auto 0; height: fit-content; }
.bill .ticket-total { margin-bottom: var(--sp-2); }

@media (max-width: 900px) {
    .register { grid-template-columns: 1fr; }
}