/* ---------------------------------------------------------------------------------------
   AccuRound application styles.

   Design target from section 8 of the specification: a responsive application optimised for
   1366x768 and usable at 1024x768, with a compact left navigation and a top contextual
   toolbar. Grids have sticky headings, visible focus and accessible validation (NFR-007).

   The look is deliberately quiet. This is software somebody uses for several hours every
   morning, often in a hurry, so the page gives its weight to the data: one accent colour,
   restrained borders, shadows soft enough to separate surfaces without decorating them, and
   generous spacing so a long grid stays readable. Colour is reserved for meaning — money
   overdue, a status, an incident — and never spent on ornament.

   Everything is set in a system font stack. A shop on a domestic broadband line should not
   wait on a font CDN, and the application must look the same offline.
   --------------------------------------------------------------------------------------- */

:root {
    /* Ink */
    --ink: #0f172a;
    --ink-soft: #475569;
    --ink-faint: #6b7a90;
    --ink-inverse: #ffffff;

    /* Surfaces and lines */
    --surface: #ffffff;
    --surface-sunken: #f8fafc;
    --canvas: #f1f4f9;
    --line: #e2e8f0;
    --line-soft: #f1f5f9;
    --line-strong: #cbd5e1;

    /* Brand */
    --brand: #2a5bd7;
    --brand-dark: #1e46ab;
    --brand-deep: #16328a;
    --brand-tint: #eaf0fe;
    --brand-tint-strong: #d7e3fd;

    /* Navigation */
    --nav-bg-top: #101c35;
    --nav-bg-bottom: #16284a;
    --nav-ink: #c3cfe2;
    --nav-ink-dim: #7d8ca6;

    /* Grid heading bar. A shade lighter than the navigation so the two dark areas read as
       different things rather than one continuous slab. */
    --grid-head-top: #22334f;
    --grid-head-bottom: #1a2940;
    --grid-head-ink: #cfdbed;
    --grid-head-accent: #8ab0ff;

    /* Semantic */
    --ok: #0f7a4d;
    --ok-tint: #e7f6ee;
    --ok-line: #bfe3ce;
    --warn: #96600a;
    --warn-tint: #fdf4e3;
    --warn-line: #f0dcae;
    --danger: #b42318;
    --danger-tint: #fdeceb;
    --danger-line: #f4c7c3;

    /* Shape */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Depth. Kept shallow: these separate layers, they are not decoration. */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .05);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .10);

    --ring: 0 0 0 3px rgba(42, 91, 215, .28);

    --nav-width: 232px;
    --topbar-height: 60px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    margin: 0 0 .4rem;
    font-weight: 620;
    letter-spacing: -.012em;
    color: var(--ink);
}

h1 { font-size: 1.3rem; }
h2 { font-size: 1.02rem; }
h3 { font-size: .9rem; }
p { margin: 0 0 .75rem; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

.mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    font-size: .9em;
    letter-spacing: -.01em;
}

.lead { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.1rem; }
.text-warn { color: var(--warn); font-weight: 600; }
.text-danger { color: var(--danger); font-weight: 600; }

/* Keyboard focus must always be visible (NFR-007). */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* =======================================================================================
   Shell
   ======================================================================================= */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.6rem;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.app-topbar-title h1 { margin: 0; }

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.app-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: .8rem;
    margin-left: .25rem;
    border-left: 1px solid var(--line);
}

.app-user-name { font-size: .86rem; color: var(--ink-soft); font-weight: 550; }
.app-user form { margin: 0; }

.app-content {
    flex: 1;
    padding: 1.5rem 1.6rem 3rem;
    max-width: 1680px;
    width: 100%;
}

.app-anonymous { min-height: 100vh; }

/* =======================================================================================
   Navigation
   ======================================================================================= */

.app-nav {
    width: var(--nav-width);
    flex: none;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--nav-bg-top), var(--nav-bg-bottom));
    color: var(--nav-ink);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 1.1rem;
    min-height: var(--topbar-height);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.app-brand-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    background: linear-gradient(145deg, #3b74ff, #1e46ab);
    box-shadow: 0 2px 8px rgba(42, 91, 215, .45);
    color: #ffffff;
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .02em;
}

.app-brand-text {
    font-weight: 620;
    font-size: 1rem;
    color: #ffffff;
    letter-spacing: -.01em;
}

.nav-list { list-style: none; margin: .7rem 0 2rem; padding: 0 .6rem; }

.nav-group {
    padding: 1.1rem .6rem .3rem;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--nav-ink-dim);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    margin-bottom: 1px;
    border-radius: var(--radius);
    color: var(--nav-ink);
    text-decoration: none;
    font-size: .89rem;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}

.nav-item:hover { background: rgba(255, 255, 255, .07); color: #ffffff; }

.nav-item.active {
    background: linear-gradient(90deg, rgba(59, 116, 255, .32), rgba(59, 116, 255, .14));
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 2px 0 0 #6f9bff;
}

/* The markup carries a small glyph; it reads better as a quiet dot than as a character. */
.nav-icon {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    font-size: 0;
    flex: none;
}

.nav-item.active .nav-icon { opacity: 1; background: #8ab0ff; }

/* Planned modules with no screen yet: present, legible, and plainly not clickable. */
.nav-item-pending { color: var(--nav-ink-dim); cursor: default; }
.nav-item-pending:hover { background: transparent; color: var(--nav-ink-dim); }

.nav-soon {
    margin-left: auto;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .1rem .35rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
}

/* =======================================================================================
   Buttons
   ======================================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .46rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: .875rem;
    font-weight: 550;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.btn:hover:not(:disabled) { background: var(--surface-sunken); border-color: #b6c2d2; }
.btn:active:not(:disabled) { box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
    background: linear-gradient(180deg, #3568e0, var(--brand));
    border-color: var(--brand-dark);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--brand), var(--brand-dark));
    border-color: var(--brand-deep);
}

.btn-link {
    border: none;
    background: none;
    box-shadow: none;
    color: var(--brand);
    padding: .3rem .25rem;
    font-weight: 550;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link:hover:not(:disabled) { background: none; color: var(--brand-dark); }

/* Destructive, and styled to say so. Used only where the action cannot be undone. */
.btn-danger {
    background: var(--danger);
    border-color: #96201a;
    color: #ffffff;
}

.btn-danger:hover:not(:disabled) { background: #96201a; border-color: #7a1c15; }

.confirm-prompt {
    align-self: center;
    font-size: .85rem;
    font-weight: 600;
    color: var(--danger);
}

.btn-block { width: 100%; }
.btn-small { padding: .25rem .55rem; font-size: .78rem; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    flex: none;
    color: var(--ink-soft);
}

.btn-icon:hover:not(:disabled) { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.btn-icon svg { width: 1.05rem; height: 1.05rem; }

.btn-arrow {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-faint);
    font-size: .72rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: .12s ease;
}

.btn-arrow:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.btn-arrow:disabled { opacity: .3; cursor: default; }

/* =======================================================================================
   Panels and cards
   ======================================================================================= */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.1rem;
}

.panel h2 {
    margin: 0 0 .7rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--line-soft);
}

.panel h3 { margin: 0 0 .6rem; color: var(--ink-soft); }
.panel-note { margin: .65rem 0 0; font-size: .83rem; color: var(--ink-faint); }
.form-panel h2 { margin-bottom: .9rem; }

/* =======================================================================================
   Toolbar and filters
   ======================================================================================= */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.toolbar-field { min-width: 160px; }
.toolbar-grow { flex: 1 1 300px; }
.toolbar-check { display: flex; align-items: center; min-height: 2.3rem; }

/* Beats the uppercase field-label rule below, which would otherwise shout at a tick box. */
.toolbar-field.toolbar-check label,
.field.toolbar-check label {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-weight: 500;
    font-size: .875rem;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

/* =======================================================================================
   Forms
   ======================================================================================= */

.field { margin-bottom: .85rem; }

.field label,
.toolbar-field label {
    display: block;
    margin-bottom: .28rem;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.input {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: .9rem;
    line-height: 1.35;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.input::placeholder { color: #9aa7b8; }
.input:hover:not(:disabled) { border-color: #b6c2d2; }

.input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.input:disabled { background: var(--line-soft); color: var(--ink-faint); cursor: not-allowed; }
textarea.input { resize: vertical; min-height: 2.6rem; }
select.input { cursor: pointer; }

.field-hint { display: block; margin-top: .25rem; font-size: .75rem; color: var(--ink-faint); }
.static-value { padding: .5rem 0; font-weight: 550; }

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1rem;
    align-items: flex-start;
}

.form-row .field { min-width: 150px; }
.field-grow { flex: 1 1 240px; }
.field-action { display: flex; align-items: flex-end; gap: .4rem; padding-bottom: .85rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0; }

/* A title the customer pays for with vouchers, beside its name on the standing orders list. */
.voucher-tag {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border: 1px solid var(--warn-line);
    border-radius: var(--radius-sm);
    background: var(--warn-tint);
    color: var(--warn);
    font-size: .72rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Shop details: the form beside a paper-coloured preview of the 40-column bill. */
.shop-layout { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-top: 1rem; }
.shop-fields { flex: 1 1 420px; min-width: 0; }
.shop-preview { flex: 0 0 auto; max-width: 100%; }

.receipt-preview {
    width: calc(40ch + 2rem);
    max-width: 100%;
    overflow-x: auto;
    padding: 1rem;
    background: #fffef8;
    color: #111;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.35;
}

.receipt-line { white-space: pre; min-height: 1.35em; }
/* Double width and height: 20 characters at twice the size fill the same 40 columns. */
.receipt-double { font-size: 2em; line-height: 1.15; font-weight: 700; }
.receipt-placeholder { color: #8a8a8a; font-style: italic; padding: .4rem 0; }

/* A small create form sitting below the grid it adds to. */
.inline-form {
    margin-top: 1.1rem;
    padding-top: .95rem;
    border-top: 1px dashed var(--line);
}

.inline-form h3 { margin: 0 0 .75rem; font-size: .92rem; color: var(--ink); }

.inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1rem;
    align-items: flex-start;
}

.inline-fields .field { min-width: 140px; }

/* Type-ahead results under a search box. */
.picker {
    position: relative;
    z-index: 5;
    margin-top: .25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    max-height: 17rem;
    overflow-y: auto;
}

.picker-option {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    width: 100%;
    padding: .5rem .7rem;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    font: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
}

.picker-option:last-child { border-bottom: 0; }
.picker-option:hover { background: var(--brand-tint); }

/* =======================================================================================
   Grids
   ======================================================================================= */

.grid-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .55rem;
}

.grid-toolbar .pager { flex: 1; margin: 0; }

/* No overflow:hidden here, however tempting for the rounded corners: it makes the table a
   clipping context and the sticky heading then sits on top of the first row instead of
   above it. The corners are rounded on the cells themselves instead. */
.grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    font-size: .9rem;
}

.grid thead th:first-child { border-top-left-radius: var(--radius-lg); }
.grid thead th:last-child { border-top-right-radius: var(--radius-lg); }
.grid tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.grid tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }

/* The heading bar is dark so it reads as a fixed rail the data runs under, and because it
   stays stuck below the topbar while the page scrolls it needs to look like it is above
   the rows rather than part of them. The shadow does that; it is cast downwards only, so
   it reads as depth and not as a border. */
.grid thead th {
    position: sticky;
    top: var(--topbar-height);
    z-index: 2;
    padding: .7rem .85rem;
    background: linear-gradient(180deg, var(--grid-head-top), var(--grid-head-bottom));
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 8px 16px -8px rgba(15, 23, 42, .55);
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--grid-head-ink);
    white-space: nowrap;
}

.grid tbody td {
    padding: .62rem .85rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: #f7faff; }

.grid tfoot td {
    padding: .62rem .85rem;
    border-top: 1px solid var(--line);
    background: var(--surface-sunken);
    font-size: .88rem;
}

.grid .num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }

.row-link { cursor: pointer; }
.row-inactive { color: var(--ink-faint); background: var(--surface-sunken); }
.row-current { background: var(--brand-tint); }
.row-current:hover { background: var(--brand-tint-strong); }

.cell-primary { font-weight: 550; }
.cell-secondary { font-size: .82rem; color: var(--ink-faint); }
.amount-overdue { color: var(--danger); font-weight: 650; }

.grid-meta { margin-bottom: .5rem; font-size: .83rem; color: var(--ink-faint); }

/* Sortable column headings. */
.sort-header {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Against the dark heading bar the accent has to be a light blue; the mid blue used
   everywhere else disappears into the navy. */
.sort-header:hover { color: #ffffff; }
.sort-active { color: var(--grid-head-accent); }
.sort-arrow { font-size: .6rem; }

/* The sort marker carries its position when more than one column is sorted. */
.sort-mark { margin-left: .3rem; color: var(--grid-head-accent); font-size: .66rem; }

.sort-mark b {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    margin-left: .15rem;
    border-radius: 999px;
    background: var(--grid-head-accent);
    color: #13203a;
    font-size: .6rem;
}

/* =======================================================================================
   Paging
   ======================================================================================= */

.pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .83rem;
    color: var(--ink-faint);
}

.pager-compact { margin-top: .7rem; justify-content: flex-end; }
.pager-count { white-space: nowrap; }
.pager-controls { display: flex; align-items: center; gap: .3rem; }
.pager-position { padding: 0 .45rem; white-space: nowrap; color: var(--ink-soft); font-weight: 550; }
.pager-size { display: flex; align-items: center; gap: .4rem; margin-left: auto; }

.pager-size label {
    margin: 0;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.pager-size .input { width: auto; padding: .22rem 1.6rem .22rem .5rem; font-size: .83rem; }

/* =======================================================================================
   Badges and chips
   ======================================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .5rem;
    margin-left: .35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .01em;
    white-space: nowrap;
    vertical-align: middle;
}

.badge:first-child { margin-left: 0; }

.badge-ok { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-line); }
.badge-warn { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-line); }
.badge-muted { background: var(--line-soft); color: var(--ink-faint); border-color: var(--line); }
.badge-neutral { background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand-tint-strong); }

.account-code {
    font-size: .95rem;
    font-weight: 650;
    letter-spacing: .02em;
    color: var(--ink);
}

/* =======================================================================================
   Dashboard figures
   ======================================================================================= */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: .9rem;
    margin-bottom: 1.2rem;
}

.kpi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* A hairline of accent along the top edge, so a wall of cards still has a rhythm. */
.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), #6f9bff);
    opacity: .85;
}

.kpi-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.kpi-note { font-size: .78rem; color: var(--ink-faint); }

.kpi-warn::before { background: linear-gradient(90deg, var(--warn), #e0a93a); }
.kpi-warn .kpi-value { color: var(--warn); }

/* =======================================================================================
   Customer balance block
   ======================================================================================= */

.balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: .75rem;
}

.balance-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .7rem .8rem;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.balance-label { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.balance-value { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.balance-note { font-size: .74rem; color: var(--ink-faint); }

.balance-total { background: var(--brand-tint); border-color: var(--brand-tint-strong); }
.balance-total .balance-value { color: var(--brand-dark); }
.balance-warn { background: var(--warn-tint); border-color: var(--warn-line); }
.balance-warn .balance-value { color: var(--warn); }

/* =======================================================================================
   Profile headers and detail lists
   ======================================================================================= */

.profile-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: .95rem 1.25rem;
    margin-bottom: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.profile-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    font-size: .86rem;
    color: var(--ink-soft);
}

.profile-facts strong {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Actions belonging to the record, shown with its header. They live here rather than in
   the top bar because the bar is part of the statically rendered layout and cannot carry a
   working button. */
.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.detail-list {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    gap: .45rem 1.2rem;
    margin: 0;
}

.detail-list dt { font-size: .8rem; color: var(--ink-faint); font-weight: 550; }
.detail-list dd { margin: 0; }

/* =======================================================================================
   Alerts, empty states and messages
   ======================================================================================= */

.alert {
    display: flex;
    gap: .6rem;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: var(--radius);
    font-size: .88rem;
    background: var(--surface);
}

.alert-error { background: var(--danger-tint); border-color: var(--danger-line); border-left-color: var(--danger); color: #7a1c15; }
.alert-warn { background: var(--warn-tint); border-color: var(--warn-line); border-left-color: var(--warn); color: #6f4707; }
.alert-info { background: var(--brand-tint); border-color: var(--brand-tint-strong); border-left-color: var(--brand); color: var(--brand-deep); }

.empty-state,
.page-message {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.empty-state h2,
.page-message h1 {
    margin: 0 0 .4rem;
    border: 0;
    padding: 0;
}

.empty-state p,
.page-message p {
    max-width: 34rem;
    margin: 0 auto 1rem;
    color: var(--ink-faint);
}

/* =======================================================================================
   Publishing days
   ======================================================================================= */

.day-pattern { font-size: .8rem; letter-spacing: .02em; white-space: nowrap; color: var(--ink-soft); }

.day-strip, .day-picker, .day-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.day-presets { margin-top: .8rem; }

.day-chip {
    min-width: 2.7rem;
    padding: .28rem .45rem;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .78rem;
    font-weight: 550;
    background: var(--surface-sunken);
    color: var(--ink-faint);
}

.day-on {
    background: var(--brand-tint);
    border-color: var(--brand-tint-strong);
    color: var(--brand-dark);
    font-weight: 650;
}

.day-off { background: var(--surface-sunken); color: #a9b4c4; }

.day-option {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .33rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-size: .85rem;
    user-select: none;
    transition: .12s ease;
}

.day-option:hover { border-color: var(--brand); }
.day-option-on { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }

/* One panel per title on a standing order. The left rule ties the title, its days and its
   price together visually, so two titles' days are never read as one set. */
.title-line { border-left: 4px solid var(--brand); }

.title-line-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .9rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--line-soft);
}

.title-line-head h2 { margin: 0; padding: 0; border: 0; }

.title-line-days { margin: .2rem 0 1rem; }

/* Styled like a field label, but not inside .field: that rule would also catch the day
   tick boxes, which are labels themselves. */
.title-line-days > .days-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.add-title { margin: 0 0 1.1rem; }

/* Several orders inside one account row. Every stacked line has the same height so a
   title's days, copies and status sit level with it in the neighbouring columns. */
.stack-line {
    display: flex;
    align-items: center;
    min-height: 2rem;
    white-space: nowrap;
}


.cell-action { width: 1%; white-space: nowrap; text-align: right; }

/* The figure the row adds up to, so it reads first. */
.cell-total { font-weight: 650; white-space: nowrap; }

/* Read by screen readers, not drawn: a column heading for a column of buttons. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* =======================================================================================
   Round sheet
   ======================================================================================= */

.stop-card { padding: .9rem 1.1rem; }

.stop-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.stop-number {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
    font-weight: 700;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.stop-instruction {
    margin: 0 0 .6rem;
    padding: .45rem .7rem;
    background: var(--warn-tint);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    color: #6f4707;
}

.stop-qty { width: 3rem; font-weight: 700; font-size: 1rem; color: var(--brand-dark); }

.fee-amount { font-size: 1.2rem; font-weight: 650; }

/* =======================================================================================
   Modal dialog
   ======================================================================================= */

.overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(3px);
    z-index: 60;
}

.overlay-open { display: flex; animation: overlay-in .14s ease-out; }

@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
    display: flex;
    flex-direction: column;
    width: min(62rem, 100%);
    max-height: 90vh;
    overflow: hidden;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    animation: modal-in .16s ease-out;
}

@keyframes modal-in {
    from { transform: translateY(10px) scale(.985); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.4rem .9rem;
    border-bottom: 1px solid var(--line);
}

.modal-head h2 { margin: 0; padding: 0; border: 0; font-size: 1.08rem; }
.modal-head p { margin: .3rem 0 0; font-size: .84rem; color: var(--ink-faint); max-width: 46rem; }

.modal-close {
    border: 0;
    background: none;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--ink-faint);
    padding: .1rem .4rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.modal-close:hover { background: var(--line-soft); color: var(--ink); }

.modal-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    padding: .65rem 1.4rem;
    font-size: .82rem;
    color: var(--ink-soft);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
}

.modal-hint { color: var(--ink-faint); font-style: italic; }
.modal-body { overflow: auto; padding: .4rem 0 .6rem; }

.modal-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.4rem;
    border-top: 1px solid var(--line);
    background: var(--surface-sunken);
}

.modal-foot-spacer { flex: 1; }

/* =======================================================================================
   Column customiser
   ======================================================================================= */

.customizer-legend,
.customizer-row {
    display: grid;
    grid-template-columns: 6rem 3.2rem 1fr 12rem 7rem;
    gap: .65rem;
    align-items: center;
    padding: .3rem 1.4rem;
}

.customizer-legend {
    padding-top: .65rem;
    padding-bottom: .35rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom: 1px solid var(--line-soft);
}

.customizer-legend div:nth-child(2),
.customizer-legend div:nth-child(4),
.customizer-legend div:nth-child(5) { text-align: center; }

.customizer-row {
    padding-top: .3rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--line-soft);
}

.customizer-row:last-child { border-bottom: 0; }
.customizer-row:hover { background: var(--surface-sunken); }
.customizer-row.is-hidden .customizer-name { color: var(--ink-faint); }

.customizer-move { display: flex; align-items: center; gap: .25rem; }

.customizer-seq {
    min-width: 1.5rem;
    text-align: center;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

.customizer-visible { display: flex; justify-content: center; }
.customizer-name { font-weight: 550; display: flex; align-items: center; gap: .4rem; }
.customizer-priority { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.priority-none { color: var(--line-strong); }

.priority-badge {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: .74rem;
    font-weight: 700;
}

/* A switch rather than a tick box: this is an on/off state, not a form field to submit. */
.switch {
    position: relative;
    width: 2.2rem;
    height: 1.25rem;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: #c3cdda;
    cursor: pointer;
    transition: background .15s ease;
}

.switch::after {
    content: "";
    position: absolute;
    top: .13rem;
    left: .13rem;
    width: .99rem;
    height: .99rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .3);
    transition: left .15s ease;
}

.switch-on { background: var(--brand); }
.switch-on::after { left: 1.08rem; }
.switch:disabled { cursor: not-allowed; background: #d4dbe4; }
.switch-on:disabled { background: #9db9f0; }

.segmented {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    justify-self: center;
    box-shadow: var(--shadow-xs);
}

.segmented button {
    border: 0;
    border-right: 1px solid var(--line);
    background: none;
    padding: .28rem .55rem;
    font: inherit;
    font-size: .78rem;
    font-weight: 550;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

.segmented button:last-child { border-right: 0; }
.segmented button:hover { background: var(--surface-sunken); }
.segmented button.active { background: var(--brand); color: #ffffff; }

/* =======================================================================================
   Sign in
   ======================================================================================= */

.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 520px at 12% -8%, rgba(59, 116, 255, .22), transparent 60%),
        radial-gradient(900px 480px at 100% 110%, rgba(23, 50, 138, .30), transparent 60%),
        linear-gradient(160deg, #0e1a31, #16284a 55%, #1b3058);
}

.login-card {
    width: min(25rem, 100%);
    padding: 1.9rem 1.8rem 1.6rem;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 70px rgba(5, 12, 28, .45);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.4rem;
}

.login-brand h1 { margin: 0; font-size: 1.3rem; }
.login-subtitle { margin: 0; font-size: .82rem; color: var(--ink-faint); }
.login-card .btn-block { margin-top: .35rem; padding: .58rem 1rem; font-size: .92rem; }
.login-help { margin: 1.1rem 0 0; font-size: .8rem; color: var(--ink-faint); line-height: 1.5; }

/* =======================================================================================
   Framework error bar
   ======================================================================================= */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: .7rem 1.2rem;
    background: #2a1a05;
    color: #ffe9bf;
    font-size: .88rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .3);
}

#blazor-error-ui .reload { color: #ffd98a; margin-left: .5rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; font-size: 1.1rem; color: #ffd98a; }

/* =======================================================================================
   Narrow screens
   ======================================================================================= */

@media (max-width: 1100px) {
    :root { --nav-width: 60px; }

    .app-brand-text,
    .nav-group,
    .nav-soon,
    .nav-item span:not(.nav-icon) { display: none; }

    .nav-item { justify-content: center; padding: .55rem 0; }
    .nav-icon { width: 7px; height: 7px; }
    .app-content { padding: 1.1rem; }
    .app-topbar { padding: .6rem 1.1rem; }
}

@media (max-width: 820px) {
    .customizer-legend { display: none; }
    .customizer-row { grid-template-columns: 6rem 3.2rem 1fr; row-gap: .45rem; }
    .customizer-row .segmented,
    .customizer-row .customizer-priority { grid-column: 2 / 4; justify-self: start; }
    .kpi-value { font-size: 1.5rem; }
    .app-user-name { display: none; }
}