/*
    Console shell — the desktop-application layout for the working screens (till, catalogue,
    reports).

    The problem this solves: those screens were ordinary web documents, so everything stacked
    vertically and the page grew. On a till that meant scrolling past the product grid to reach
    the tender fields, with the cart pushed off-screen — which is exactly the wrong thing to hide
    while someone is waiting to pay.

    Here the page is exactly the height of the window and never scrolls. Panes scroll
    independently inside it, so a long product list and a long cart can both be long without
    moving anything else. Toolbars and totals stay pinned where the eye expects them.
*/

body.console-mode {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;   /* the window is the frame; only panes scroll */
}

body.console-mode .main-content {
    flex: 1 1 auto;
    min-height: 0;      /* without this a flex child refuses to shrink and the page scrolls */
    display: flex;
    flex-direction: column;
}

.console {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: .6rem .75rem .75rem;
    gap: .6rem;
}

/* ── Toolbar: title, branding, and the actions for this screen ─────────────────────────── */

.console-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    background: #fff;
    border: 1px solid #e2e9e9;
    border-radius: .5rem;
}

.console-toolbar .console-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #14343a;
    margin: 0;
    white-space: nowrap;
}

.console-toolbar .console-logo { height: 1.75rem; width: auto; max-width: 8rem; object-fit: contain; }
.console-toolbar .spacer { flex: 1 1 auto; }
.console-toolbar .console-meta { font-size: .8rem; color: #6b7a7a; white-space: nowrap; }

/* ── Body: the pane grid ───────────────────────────────────────────────────────────────── */

.console-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: .6rem;
}

/* Till: category rail | products | cart. */
.console-body.layout-till { grid-template-columns: 11rem minmax(0, 1fr) minmax(22rem, 26rem); }

/* Catalogue and reports: navigation rail | content. */
.console-body.layout-rail { grid-template-columns: 13rem minmax(0, 1fr); }

@media (max-width: 1200px) {
    .console-body.layout-till { grid-template-columns: 9rem minmax(0, 1fr) minmax(19rem, 22rem); }
}

@media (max-width: 992px) {
    /* Below tablet the shell stops earning its keep — fall back to a normal scrolling page
       rather than three unusably narrow columns. */
    body.console-mode { height: auto; overflow: auto; }
    .console-body.layout-till,
    .console-body.layout-rail { grid-template-columns: 1fr; }
    .pane { max-height: 70vh; }
}

/* ── Pane: header / scrolling body / pinned footer ─────────────────────────────────────── */

.pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border: 1px solid #e2e9e9;
    border-radius: .5rem;
    overflow: hidden;
}

.pane-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    border-bottom: 1px solid #eef2f2;
    background: #f7fafa;
    font-weight: 600;
    font-size: .85rem;
    color: #2c4a4f;
}

.pane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .7rem;
}

.pane-body.flush { padding: 0; }

/* Totals and the pay button live here — always visible, never scrolled past. */
.pane-footer {
    flex: 0 0 auto;
    border-top: 1px solid #eef2f2;
    background: #f7fafa;
    padding: .6rem .7rem;
}

/* ── Vertical rail used for categories and report sections ─────────────────────────────── */

.rail-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: .5rem .7rem;
    border-radius: .35rem;
    font-size: .875rem;
    color: #2c4a4f;
    cursor: pointer;
}

.rail-item:hover { background: #eef4f4; }

.rail-item.active {
    background: #12626c;
    color: #fff;
    font-weight: 600;
}

.rail-item .count {
    float: right;
    opacity: .7;
    font-size: .78rem;
}

/* ── Compact form density: a working screen, not a marketing page ──────────────────────── */

.console .form-label { font-size: .75rem; margin-bottom: .15rem; color: #5b6b6b; }
.console .form-control, .console .form-select { font-size: .875rem; }
.console .table { font-size: .85rem; margin-bottom: 0; }
.console .table > :not(caption) > * > * { padding: .35rem .4rem; }

/* Segmented control — replaces stacked radio buttons for a two-way choice. */
.segmented { display: flex; gap: .25rem; }
.segmented .btn { flex: 1 1 0; font-size: .82rem; }

/* The staff menu sits above the shell. In console mode it loses its rounded, floating look and
   becomes a menu bar, which is both tidier and gives the panes back their vertical space. */
body.console-mode .admin-nav {
    margin-bottom: 0 !important;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    flex: 0 0 auto;
}

body.console-mode .admin-nav .nav-link { padding-block: .3rem; }

/* The cart quantity box. The native number spinner is wide enough to hide a two-digit value in a
   narrow cart column - which is how a line showed arrows and no number. The +/- buttons beside it
   already do the stepping, so the spinner is removed and the digits get the space. */
.cart-line .qty {
    width: 3rem;
    min-width: 3rem;
    text-align: center;
    padding-inline: .2rem;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cart-line .qty::-webkit-outer-spin-button,
.cart-line .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}