/* ==========================================================================
   Custom application styles
   Loaded after the Tailwind CDN, so these class names are deliberately kept
   distinct from Tailwind utilities to avoid specificity fights.
   ========================================================================== */

:root {
    --brand: #4f46e5;
    --brand-dark: #4338ca;
    --brand-soft: #eef2ff;
    --ink: #0f172a;
    --ink-muted: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --canvas: #f1f5f9;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --success: #047857;
    --success-soft: #ecfdf5;
    --radius: 14px;
    --shadow: 0 20px 45px -25px rgb(15 23 42 / 35%);

    /*
       Inter has no Bangla glyphs, so Bangla text falls through to Hind
       Siliguri automatically. Latin stays on Inter either way, which keeps
       mixed English/Bangla strings looking right without extra markup.
    */
    --font-en: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-bn: Hind Siliguri, Noto Sans Bengali, Kalpurush, SolaimanLipi, sans-serif;
    --font-sans: Inter, Hind Siliguri, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Opt in explicitly when a block should be typeset entirely in one language. */
.font-en {
    font-family: var(--font-en);
}

.font-bn {
    font-family: var(--font-bn);
    line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Auth layout — one centred card
   -------------------------------------------------------------------------- */

.auth-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1.25rem;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.auth-card-head {
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-brand {
    margin: 0.85rem 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brand);
}

.auth-title {
    margin: 0.35rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.auth-subtitle {
    margin: 0.45rem 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-muted);
}

.auth-card-foot {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: 0.875rem;
    color: var(--ink-muted);
    text-align: center;
}

.auth-legal {
    margin: 1.75rem 0 0;
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.auth-link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.auth-link:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 0 1.25rem;
    font-size: 0.875rem;
}

.auth-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-family: var(--font-en);
    font-size: 1.35rem;
    font-weight: 700;
    flex: none;
    box-shadow: 0 10px 20px -10px rgb(79 70 229 / 65%);
}

.auth-mark-sm {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    font-size: 1rem;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.field {
    margin-bottom: 1.1rem;
}

.field-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: #334155;
}

.field-control {
    position: relative;
    display: flex;
    align-items: center;
}

.field-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-input::placeholder {
    color: #94a3b8;
}

.field-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgb(79 70 229 / 15%);
}

.field-input:disabled {
    background: #f8fafc;
    cursor: not-allowed;
}

.field-input-invalid {
    border-color: var(--danger);
}

.field-input-invalid:focus {
    box-shadow: 0 0 0 3px rgb(220 38 38 / 14%);
}

.field-control:has(.field-toggle) .field-input {
    padding-right: 4.25rem;
}

.field-toggle {
    position: absolute;
    right: 0.5rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.field-toggle:hover {
    color: var(--brand);
    background: var(--brand-soft);
}

.field-error,
.field-hint {
    margin: 0.4rem 0 0;
    font-size: 0.775rem;
    line-height: 1.45;
}

.field-error {
    color: var(--danger);
    font-weight: 500;
}

.field-hint {
    color: var(--ink-muted);
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

.checkbox input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    font-size: 0.925rem;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-primary {
    width: 100%;
    color: #fff;
    background: var(--brand);
}

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

.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(79 70 229 / 30%);
}

.btn-ghost {
    color: #334155;
    background: transparent;
    border-color: var(--line);
}

.btn-ghost:hover:not(:disabled) {
    background: #f8fafc;
    color: var(--ink);
}

.spinner {
    width: 0.95rem;
    height: 0.95rem;
    border: 2px solid rgb(255 255 255 / 45%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
    margin-bottom: 1.15rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: 10px;
}

.alert-error {
    color: #991b1b;
    background: var(--danger-soft);
    border-color: #fecaca;
}

.alert-success {
    color: var(--success);
    background: var(--success-soft);
    border-color: #a7f3d0;
}

/* --------------------------------------------------------------------------
   Wide viewports
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .auth-card {
        max-width: 27rem;
        padding: 2.25rem;
    }
}

@media (max-width: 420px) {
    .auth-card {
        padding: 1.5rem 1.25rem;
    }

    .auth-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}

/* ==========================================================================
   Application shell — sidebar, topbar, dashboard
   ========================================================================== */

:root {
    --g50: #ecfdf5;
    --g100: #d1fae5;
    --g500: #10b981;
    --g600: #059669;
    --g700: #047857;

    --sidebar-w: 250px;
    --topbar-h: 54px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.layout {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    background: var(--canvas);
}

.layout-body {
    flex: 1 1 auto;
    min-width: 0;
}

.layout-main {
    padding: 1.5rem 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    flex: none;
    width: var(--sidebar-w);
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border-right: 3px solid var(--g500);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.sidebar::-webkit-scrollbar {
    width: 7px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 99px;
}

.sidebar-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: var(--topbar-h);
    padding: 0 0.75rem 0 1rem;
    background: var(--surface);
}

.sidebar-brand {
    font-size: 0.975rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-collapse {
    display: inline-flex;
    padding: 0.3rem;
    color: var(--g600);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    flex: none;
}

.sidebar-collapse:hover {
    background: var(--g50);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.25rem 0.5rem 1.5rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1f2937;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.nav-item:hover {
    background: #f1f5f9;
}

.nav-item-active,
.nav-item-active:hover {
    color: #fff;
    background: linear-gradient(95deg, var(--g500) 0%, var(--g600) 100%);
    box-shadow: 0 8px 16px -8px rgb(5 150 105 / 65%);
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex: none;
    color: #374151;
}

.nav-item-active .nav-icon {
    color: #fff;
}

.nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-badge {
    flex: none;
    padding: 0.1rem 0.4rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
    background: var(--g500);
    border-radius: 99px;
}

.nav-item-active .nav-badge {
    color: var(--g700);
    background: #fff;
}

.nav-chevron {
    width: 16px;
    height: 16px;
    flex: none;
    color: #cbd5e1;
}

.nav-item-active .nav-chevron {
    color: rgb(255 255 255 / 80%);
}

/* Collapsed state: the sidebar slides away and a floating button brings it back. */
.layout-collapsed .sidebar {
    display: none;
}

.sidebar-reopen {
    position: fixed;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 40;
    display: inline-flex;
    padding: 0.4rem;
    color: var(--g600);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.layout-collapsed .layout-body .topbar {
    padding-left: 3.25rem;
}

/* The scrim only does anything on narrow viewports, where the sidebar overlays. */
.sidebar-scrim {
    display: none;
    border: 0;
}

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--topbar-h);
    padding: 0.5rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 99px;
    cursor: pointer;
}

.theme-toggle:hover {
    background: #f8fafc;
}

.theme-icon-sun {
    color: #f59e0b;
}

.theme-icon-moon {
    color: #6366f1;
}

.lang-select {
    padding: 0.45rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
}

.support {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--g600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.support a {
    color: inherit;
    text-decoration: none;
}

.support a:hover {
    text-decoration: underline;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.05rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 99px;
    cursor: pointer;
    white-space: nowrap;
}

.pill-outline {
    color: var(--g600);
    background: var(--surface);
    border: 1.5px solid var(--g500);
}

.pill-outline:hover {
    background: var(--g50);
}

.pill-solid {
    color: #fff;
    background: var(--g500);
    border: 1.5px solid var(--g500);
}

.pill-solid:hover {
    background: var(--g600);
    border-color: var(--g600);
}

/* The Sale pill carries today's figures, so it is a link with parts rather
   than a button with a word. */
.sale-pill {
    gap: 0.45rem;
    text-decoration: none;
}

.sale-pill-label {
    font-weight: 600;
    color: var(--ink-muted);
}

.sale-pill-total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--g700);
}

/* How many invoices are behind the figure, kept to a chip so it cannot be
   mistaken for part of the amount. */
.sale-pill-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.32rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: var(--g500);
    border-radius: 99px;
}

/* Still owed on today's own invoices. Red because it is the one figure here
   somebody may need to act on before closing. */
.sale-pill-due {
    padding-left: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--danger);
    border-left: 1px solid var(--line);
}

.sale-pill:hover .sale-pill-label {
    color: var(--g700);
}

/* Narrow, the amount is what matters; the word and the due are what go. */
@media (max-width: 720px) {
    .sale-pill-label,
    .sale-pill-due {
        display: none;
    }
}

:root[data-theme="dark"] .sale-pill-total {
    color: #a7f3d0;
}

:root[data-theme="dark"] .sale-pill-due {
    color: #f87171;
    border-left-color: #24344f;
}

/* --------------------------------------------------------------------------
   Profile menu
   -------------------------------------------------------------------------- */

.profile {
    position: relative;
    flex: none;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.profile-caret {
    color: var(--ink-muted);
}

.profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    font-family: var(--font-en);
    font-size: 0.775rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(140deg, var(--g500), var(--g700));
    border-radius: 50%;
    flex: none;
}

.profile-avatar-lg {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 0.9rem;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 50;
    width: 15rem;
    padding: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.3rem;
}

.profile-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.profile-mail {
    margin: 0.1rem 0 0;
    font-size: 0.75rem;
    color: var(--ink-muted);
    word-break: break-all;
}

.profile-action {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.profile-action:hover {
    background: #f1f5f9;
}

.profile-action-danger {
    color: var(--danger);
}

.profile-action-danger:hover {
    background: var(--danger-soft);
}

.profile-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Quick actions
   -------------------------------------------------------------------------- */

/* Dashboard: the range the figures cover, and a quiet note while they reload.
   Both sit inside the period bar beside the select. */
.period-range {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.period-loading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--g600);
}

/* A failed refresh keeps the last good figures on screen and says so here,
   rather than blanking every card. */
/* What just happened, after a collection is recorded. */
.dash-flash {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--g700);
    background: var(--g50);
    border-radius: 10px;
}

.dash-error {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: 10px;
}

/* ==========================================================================
   Customer Payment dialog  (dashboard)
   Its own header rather than the shared one: a gradient band with the icon
   inside it, which no other dialog uses.
   ========================================================================== */
.cpay {
    width: min(540px, calc(100vw - 2rem));
    padding: 0;
    overflow: hidden;
}

.cpay-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.15rem 1.35rem;
    color: #fff;
    background: linear-gradient(105deg, #131c3a 0%, #1f2b57 45%, #4c2a6b 100%);
}

.cpay-head-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 11px;
}

.cpay-head-text {
    flex: 1;
    min-width: 0;
}

.cpay-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cpay-sub {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
}

.cpay-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cpay-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Which way the money is going. Sitting under the header rather than in it,
   so the switch reads as part of the form and not as window furniture. */
.cpay-sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--line);
}

.cpay-side {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 0.5rem;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink-muted);
    background: var(--canvas);
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cpay-side:hover {
    color: var(--ink);
}

.cpay-side-on {
    color: var(--g700);
    background: var(--surface);
    border-bottom-color: var(--g600);
}

/* Paying out is not collecting in, and the panel says so before the numbers
   do: the outstanding figure is what the shop owes, not what it is owed. */
.cpay-supplier .cpay-outstanding {
    background: var(--g50);
    border-color: var(--g500);
}

.cpay-supplier .cpay-outstanding-label,
.cpay-supplier .cpay-outstanding-value {
    color: var(--g700);
}

.cpay-supplier .cpay-match b {
    color: var(--g700);
}

.cpay-supplier .cpay-submit {
    background: var(--g600);
}

.cpay-body {
    padding: 1.2rem 1.35rem 1.35rem;
}

.cpay-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.4rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    text-transform: uppercase;
}

.cpay-row + .cpay-row,
.cpay-label:not(:first-child) {
    margin-top: 0.95rem;
}

.cpay-req {
    color: var(--danger);
}

.cpay-input {
    width: 100%;
    padding: 0.62rem 0.8rem;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
}

.cpay-input:focus {
    outline: 0;
    border-color: var(--g500);
    box-shadow: 0 0 0 3px var(--g100);
}

.cpay-input:disabled {
    color: var(--ink-muted);
    background: var(--canvas);
}

/* The suggestion list sits directly under the box it belongs to. */
.cpay-matches {
    max-height: 190px;
    margin: 0.35rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.cpay-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--ink);
    text-align: left;
    background: var(--surface);
    border: 0;
    cursor: pointer;
}

.cpay-match:hover {
    background: var(--g50);
}

.cpay-match b {
    color: var(--danger);
    white-space: nowrap;
}

.cpay-hint {
    margin: 0.55rem 0 0;
    padding: 0.75rem 0.85rem;
    font-size: 0.88rem;
    color: var(--ink-muted);
    background: var(--canvas);
    border-radius: 9px;
}

/* What they owe altogether, which is the number that starts the conversation. */
.cpay-outstanding {
    margin: 0.85rem 0 0;
    padding: 0.8rem 0.95rem;
    background: var(--danger-soft);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 10px;
}

.cpay-outstanding-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--danger);
    text-transform: uppercase;
}

.cpay-outstanding-value {
    margin: 0.2rem 0 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--danger);
}

.cpay-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

/* Where the row holds one field rather than two — a repair and an instalment
   take no discount, so the amount has the width to itself. */
.cpay-row-one {
    grid-template-columns: minmax(0, 1fr);
}

/* Currency sign welded to the left of the box, as on the reference. */
.cpay-money {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.cpay-money-sign {
    display: grid;
    place-items: center;
    min-width: 38px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-muted);
    background: var(--canvas);
    border-right: 1px solid var(--line);
}

.cpay-money-sign-strong {
    color: #fff;
    background: #16234a;
    border-right-color: #16234a;
}

.cpay-money-input {
    width: 100%;
    min-width: 0;
    padding: 0.62rem 0.8rem;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--ink);
    background: var(--surface);
    border: 0;
}

.cpay-money-input:focus {
    outline: 0;
}

.cpay-money-input-strong {
    font-weight: 700;
}

.cpay-money:focus-within {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px var(--g100);
}

.cpay-note {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--ink-muted);
}

.cpay-warn,
.cpay-error {
    margin: 0.85rem 0 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.86rem;
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: 9px;
}

.cpay-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.95rem 1.35rem;
    border-top: 1px solid var(--line);
}

.cpay-cancel {
    padding: 0.6rem 1.4rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.cpay-cancel:hover {
    background: var(--canvas);
}

.cpay-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.35rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    background: #dc2626;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.cpay-submit:hover:not(:disabled) {
    filter: brightness(1.07);
}

.cpay-submit:disabled {
    color: var(--ink-muted);
    background: var(--canvas);
    border: 1px solid var(--line);
    cursor: not-allowed;
}

/* The dashboard's own trigger, sitting in the quick-action row. */
.qa-collect {
    --qa-bg: #dc2626;
}

:root[data-theme="dark"] .cpay-money-sign-strong {
    background: #0f1830;
    border-right-color: #0f1830;
}

/* ==========================================================================
   Sale invoice, A4 / A5 sheet

   Set in a serif face at the sizes a printed invoice uses, which are smaller
   than anything on screen: the body runs at 10.5px so a dozen lines and six
   conditions still fit one sheet. Sizes are px against a 210mm page with 12mm
   margins, so what is measured here is what comes out of the printer.

   Printed in ink on white. The theme's green is kept for the rules and the
   title, which is where colour belongs on a document somebody files.
   ========================================================================== */
.sinv {
    /* The face the reference is set in, with the free metric-compatible
       substitutes after it so Linux and Mac print the same widths. */
    font-family: "Times New Roman", "Liberation Serif", "Nimbus Roman", Times, serif;
    font-size: 10.5px;
    line-height: 1.35;
    color: #111;
    background: #fff;
}

.sinv-head {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid var(--g600);
}

.sinv-brand {
    flex: 0 0 auto;
    max-width: 34%;
}

.sinv-logo {
    display: block;
    max-width: 168px;
    max-height: 52px;
    object-fit: contain;
}

.sinv-wordmark {
    display: block;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--g700);
}

.sinv-tag {
    margin: 0.15rem 0 0;
    font-size: 8px;
    letter-spacing: 0.1em;
    color: #555;
    text-transform: uppercase;
}

/* Address block: sized to its own text and pushed to the right edge, so the
   letterhead reads mark on the left, where-to-find-us on the right, rather
   than both crowded against the middle. The colons sit in their own column so
   every value starts on the same vertical line however long its label is. */
.sinv-where {
    flex: 0 1 auto;
    width: max-content;
    /* A long office address stops growing before it reaches the logo. */
    max-width: 62%;
    margin: 0 0 0 auto;
    font-size: 10px;
    line-height: 1.42;
}

.sinv-where > div {
    display: grid;
    /* Wide enough for "Hotline", the longest label, and no wider — the column
       is what holds the colons in line. */
    grid-template-columns: 46px 1fr;
}

.sinv-where dt,
.sinv-where dd {
    margin: 0;
    color: #222;
}

.sinv-title {
    margin: 0.5rem 0 0.55rem;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--g700);
    text-align: center;
}

.sinv-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.6rem;
    margin-bottom: 0.6rem;
}

.sinv-meta-col {
    margin: 0;
    font-size: 10px;
    line-height: 1.75;
}

.sinv-meta-col > div {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0.35rem;
}

.sinv-meta-col dt {
    color: #333;
}

/* Written on the label rather than in the markup, so the colon cannot be
   forgotten on one row and not another. */
.sinv-meta-col dt::after {
    content: ":";
}

.sinv-meta-col dd {
    margin: 0;
    color: #111;
}

/* The right-hand column labels are set bold on the reference and the left
   ones are not, which is what separates "about the sale" from "about the
   customer" at a glance. */
.sinv-meta-col:last-child dt {
    font-weight: 700;
}

.sinv-strong {
    font-weight: 700;
}

.sinv-table {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 10.5px;
    border-collapse: collapse;
}

.sinv-table th {
    padding: 0.28rem 0.4rem;
    font-weight: 700;
    color: #111;
    text-align: center;
    background: var(--g50);
    border: 1px solid #555;
}

.sinv-table th.sinv-c-desc {
    text-align: left;
}

.sinv-table td {
    padding: 0.3rem 0.4rem;
    vertical-align: top;
    border: 1px solid #777;
}

.sinv-c-sl {
    width: 52px;
    text-align: center;
    /* "S/L No" belongs on one line; wrapped, it makes the header row taller
       than every row beneath it. */
    white-space: nowrap;
}

/* The description takes whatever the fixed columns leave, and a long product
   name wraps inside it rather than pushing the figures off the sheet. */
.sinv-c-desc {
    width: auto;
    word-break: break-word;
}

/* Centred, as they are on the reference — a printed invoice reads its
   quantities down the middle of the column rather than off its right edge. */
.sinv-c-num {
    width: 72px;
    text-align: center;
}

.sinv-table td.sinv-c-desc b {
    font-weight: 700;
}

/* The serial belongs to the line above it, so it sits under the name rather
   than in a column of its own. */
.sinv-sn {
    display: block;
    margin-top: 0.05rem;
    font-size: 10px;
    color: #222;
}

.sinv-sn i {
    display: inline-block;
    min-width: 26px;
    font-style: normal;
}

/* The service particulars, as a table of their own above the charge.

   It borrows .sinv-table so the borders and type match the charge table
   exactly; what it overrides is the row labels, which are <th> cells and would
   otherwise take the centred green treatment meant for a column heading. */
.sinv-info {
    /* Its own heading is a full-width band, so it needs no gap under it. */
    margin-bottom: 0.55rem;
}

.sinv-info th.sinv-info-label {
    width: 150px;
    font-weight: 600;
    text-align: left;
    /* The heading band is the green one; a label is not a heading. */
    background: none;
}

/* Two columns of them side by side would halve the room a fault description
   gets, and a fault description is the whole point of the sheet. */
.sinv-info td {
    word-break: break-word;
}

/* How a service was paid for. A sale records one account and needs no such
   block; a job can be settled in parts, and the slip has to say through what. */
.sinv-taken {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 1rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    font-size: 10px;
    border-top: 1px dashed #999;
}

.sinv-taken-label {
    font-weight: 700;
    color: #222;
}

.sinv-taken-row b {
    font-weight: 700;
}

.sinv-sum {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.6rem;
}

.sinv-words {
    flex: 1;
    margin: 0;
    padding-top: 0.1rem;
    font-size: 10.5px;
}

.sinv-words span {
    margin-right: 0.6rem;
    font-weight: 700;
}

.sinv-words b {
    font-weight: 700;
}

.sinv-figures {
    flex: 0 0 auto;
    min-width: 210px;
    margin: 0;
    font-size: 10.5px;
}

.sinv-figures > div {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.1rem 0;
}

.sinv-figures dt {
    color: #333;
}

.sinv-figures dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* The one figure the eye should land on. */
.sinv-grand {
    padding-top: 0.2rem !important;
    font-size: 12px;
    font-weight: 700;
}

.sinv-grand dt {
    color: #111 !important;
}

.sinv-grand dd {
    padding-bottom: 0.1rem;
    border-bottom: 1px solid #111;
}

.sinv-due dd {
    font-weight: 700;
    color: var(--danger);
}

.sinv-signs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.sinv-sign {
    font-size: 9.5px;
    font-weight: 700;
    color: #111;
    text-align: center;
}

.sinv-sign-rule {
    display: block;
    margin-bottom: 0.2rem;
    border-top: 1px solid #111;
}

.sinv-scan {
    text-align: center;
}

.sinv-scan-label {
    margin: 0 0 0.2rem;
    font-size: 9.5px;
    font-weight: 700;
    color: #111;
}

.sinv-barcode {
    display: block;
    width: 132px;
    height: 30px;
    margin: 0 auto;
    fill: #111;
}

.sinv-scan-code {
    margin: 0.1rem 0 0;
    font-size: 8px;
    letter-spacing: 0.06em;
    color: #444;
}

/* The conditions on the left, the warranty desk boxed on the right. */
.sinv-conditions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 1.2rem;
    margin-bottom: 0.5rem;
}

/*
 * Numbers sit in the text rather than hanging outside it, so a condition that
 * runs to three lines has every line starting at the same left edge — which is
 * how the reference sets them and why nothing looks indented under a number.
 */
.sinv-terms {
    margin: 0;
    padding-left: 0;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.55;
    color: #111;
    list-style: none;
    counter-reset: sinv-term;
}

.sinv-terms li {
    margin-bottom: 0.02rem;
    counter-increment: sinv-term;
}

.sinv-terms li::before {
    content: counter(sinv-term) ". ";
}

.sinv-desk {
    min-width: 210px;
    padding: 0.45rem 0.7rem;
    text-align: center;
    border: 1px solid #111;
}

.sinv-desk-label,
.sinv-desk-value {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
    color: #111;
}

.sinv-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.3rem;
    font-size: 9.5px;
    color: #333;
    border-top: 1px solid #999;
}

.sinv-credit {
    margin: 0.25rem 0 0;
    font-size: 8.5px;
    color: #666;
    text-align: center;
}

/* A5 is the same document on half the sheet: a shade smaller so it still fits
   without reflowing into a different layout. */
.inv-a5 .sinv {
    font-size: 9.5px;
}

.inv-a5 .sinv-title {
    font-size: 14px;
}

.inv-a5 .sinv-table {
    font-size: 9.5px;
}

.inv-a5 .sinv-meta-col,
.inv-a5 .sinv-where {
    font-size: 9px;
}

.inv-a5 .sinv-terms,
.inv-a5 .sinv-foot {
    font-size: 8.5px;
}

.inv-a5 .sinv-desk {
    min-width: 170px;
}

.inv-a5 .sinv-desk-label,
.inv-a5 .sinv-desk-value {
    font-size: 9px;
}

/* Printing: the sheet is the page, and nothing of the app goes with it. */
@media print {
    .sinv {
        color: #000;
    }

    .sinv-table thead {
        display: table-header-group;
    }

    .sinv-table tr {
        break-inside: avoid;
    }

    .sinv-signs,
    .sinv-sum {
        break-inside: avoid;
    }
}

/* ==========================================================================
   Warranty Check dialog  (dashboard)
   Shares the payment dialog's frame; what differs is the verdict panel, which
   is the whole point of the screen and so is the largest thing on it.
   ========================================================================== */
/* A unit that has been back several times makes this panel the tallest thing
   on the screen, so the body scrolls rather than the dialog running off it. */
.wchk .cpay-body {
    max-height: 64vh;
    overflow-y: auto;
}

.wchk-head {
    background: linear-gradient(105deg, #0f3b2e 0%, #125741 48%, #1f7a52 100%);
}

.wchk-search {
    display: flex;
    gap: 0.5rem;
}

.wchk-go {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.4rem;
    align-items: center;
    padding: 0 1.05rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: var(--g600);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.wchk-go:hover:not(:disabled) {
    filter: brightness(1.07);
}

.wchk-go:disabled {
    color: var(--ink-muted);
    background: var(--canvas);
    border: 1px solid var(--line);
    cursor: not-allowed;
}

/* The answer. Green when the unit is covered, plain when it is not — a red
   panel for "expired" would read as an error when it is simply a fact. */
.wchk-verdict {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0.9rem 0 0;
    padding: 0.9rem 1rem;
    border-radius: 11px;
}

.wchk-yes {
    color: var(--g700);
    background: var(--g50);
    border: 1px solid var(--g500);
}

.wchk-no {
    color: var(--ink);
    background: var(--canvas);
    border: 1px solid var(--line);
}

.wchk-verdict-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
}

.wchk-headline {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.wchk-detail {
    margin: 0.1rem 0 0;
    font-size: 0.86rem;
    opacity: 0.85;
}

.wchk-facts {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
}

.wchk-facts > div {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 0.6rem;
    padding: 0.22rem 0;
    border-bottom: 1px solid var(--line);
}

.wchk-facts > div:last-child {
    border-bottom: 0;
}

.wchk-facts dt {
    color: var(--ink-muted);
}

.wchk-facts dd {
    margin: 0;
    color: var(--ink);
}

.wchk-note {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.wchk-miss {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: 9px;
}

.wchk-did {
    margin: 0.85rem 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    text-transform: uppercase;
}

/* Each visit this unit has made back to the counter. */
.wchk-claims {
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    list-style: none;
}

.wchk-claims li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--line);
}

.wchk-claims li:last-child {
    border-bottom: 0;
}

.wchk-claims span {
    min-width: 88px;
    color: var(--ink-muted);
}

.wchk-claims b {
    font-weight: 600;
}

.wchk-claims i {
    font-size: 0.8rem;
    font-style: normal;
    color: var(--g700);
}

.wchk-done {
    padding: 0.6rem 1.35rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    background: var(--g600);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.wchk-done:hover {
    filter: brightness(1.07);
}

/* The dashboard's own trigger, beside Record Payment. */
.qa-warranty {
    --qa-bg: #0f766e;
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.qa {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.25rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 600;
    color: #fff;
    background: var(--qa-bg);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 16px -10px var(--qa-bg);
    cursor: pointer;
    /* These are links now, so the underline an anchor comes with has to go —
       everything else about them already matched. */
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.qa:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.qa-emerald { --qa-bg: #0d9f6e; }
.qa-blue    { --qa-bg: #3b82f6; }
.qa-purple  { --qa-bg: #9333ea; }
.qa-indigo  { --qa-bg: #2563eb; }
.qa-orange  { --qa-bg: #f59332; }
.qa-rose    { --qa-bg: #ef4351; }
.qa-teal    { --qa-bg: #0d9488; }

/* --------------------------------------------------------------------------
   Period filter
   -------------------------------------------------------------------------- */

.period {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: linear-gradient(100deg, #f3fdf8 0%, #fbfefd 55%, var(--surface) 100%);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.period-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    color: #fff;
    background: var(--g500);
    border-radius: 10px;
    flex: none;
}

.period-select {
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    min-width: 9rem;
}

.period-trend {
    margin-left: auto;
    color: var(--g500);
    flex: none;
}

/* --------------------------------------------------------------------------
   Summary cards
   -------------------------------------------------------------------------- */

.sum-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.sum {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: linear-gradient(150deg, var(--sum-a) 0%, var(--sum-b) 100%);
    border: 1px solid var(--sum-line);
    border-radius: 18px;
    overflow: hidden;
}

/* The soft wedge in the top-right corner of each card. */
.sum::before {
    content: "";
    position: absolute;
    top: -3.5rem;
    right: -3.5rem;
    width: 9rem;
    height: 9rem;
    background: var(--sum-wedge);
    border-radius: 0 0 0 100%;
    pointer-events: none;
}

.sum-green  { --sum-a: #d7f5e3; --sum-b: #f2fdf7; --sum-line: #bbf0d3; --sum-wedge: #c9f2dc; --sum-ink: #047857; --sum-strong: #065f46; --sum-fill: #10b981; }
.sum-blue   { --sum-a: #d8e9fd; --sum-b: #f2f8ff; --sum-line: #bfdcfb; --sum-wedge: #cbe2fc; --sum-ink: #1d4ed8; --sum-strong: #1e3a8a; --sum-fill: #3b82f6; }
.sum-amber  { --sum-a: #fdf0cf; --sum-b: #fffbf0; --sum-line: #fbe4ad; --sum-wedge: #fceabc; --sum-ink: #b45309; --sum-strong: #92400e; --sum-fill: #f59e0b; }
.sum-violet { --sum-a: #ebe2fd; --sum-b: #f9f6ff; --sum-line: #ddd0fb; --sum-wedge: #e3d7fc; --sum-ink: #7c3aed; --sum-strong: #5b21b6; --sum-fill: #8b5cf6; }

.sum-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.sum-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    color: var(--sum-ink);
    background: var(--surface);
    border-radius: 12px;
    flex: none;
    box-shadow: 0 4px 10px -6px rgb(15 23 42 / 25%);
}

.sum-count {
    font-family: var(--font-en);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sum-ink);
}

.sum-corner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    color: var(--sum-ink);
    background: rgb(255 255 255 / 55%);
    border-radius: 10px;
    flex: none;
}

.sms-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: #fb7185;
    border-radius: 99px;
    flex: none;
    white-space: nowrap;
}

.sum-label {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sum-ink);
}

.sum-total {
    position: relative;
    z-index: 1;
    margin: 0.3rem 0 0;
    font-family: var(--font-en);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--sum-strong);
}

.sum-rows {
    position: relative;
    z-index: 1;
    margin: 1.15rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.sum-row-key {
    font-size: 0.85rem;
    font-weight: 600;
}

.sum-row-good {
    color: var(--sum-ink);
}

.sum-row-bad {
    color: #dc2626;
}

.sum-row-val {
    margin: 0;
    font-family: var(--font-en);
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.sum-row-val-negative {
    color: #dc2626;
    font-weight: 700;
}

.sum-track {
    position: relative;
    z-index: 1;
    height: 5px;
    margin-top: auto;
    margin-bottom: 0.55rem;
    background: rgb(255 255 255 / 70%);
    border: 1px solid rgb(15 23 42 / 6%);
    border-radius: 99px;
    overflow: hidden;
}

.sum-fill {
    display: block;
    height: 100%;
    min-width: 5px;
    background: var(--sum-fill);
    border-radius: 99px;
}

.sum-note {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.75rem;
    color: #64748b;
    text-align: right;
}

/* Countdown inside the ACCOUNT card */

.countdown {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.55rem;
}

.countdown-group {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex: 1 1 0;
    min-width: 0;
}

.countdown-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 2.7rem;
    background: var(--cd-bg);
    border: 1px solid var(--cd-line);
    border-radius: 10px;
    line-height: 1;
}

.countdown-cell b {
    font-family: var(--font-en);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cd-ink);
}

.countdown-cell i {
    margin-top: 2px;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 600;
    color: var(--cd-ink);
    opacity: 0.75;
}

.countdown-violet { --cd-bg: #ede4fe; --cd-line: #d9c9fc; --cd-ink: #7c3aed; }
.countdown-blue   { --cd-bg: #dbeafe; --cd-line: #bfdbfe; --cd-ink: #2563eb; }
.countdown-indigo { --cd-bg: #e0e7ff; --cd-line: #c7d2fe; --cd-ink: #4f46e5; }
.countdown-rose   { --cd-bg: #ffe4e6; --cd-line: #fecdd3; --cd-ink: #e11d48; }

.countdown-sep {
    font-weight: 700;
    color: #94a3b8;
}

/* --------------------------------------------------------------------------
   Mini stat cards
   -------------------------------------------------------------------------- */

.mini-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
}

.mini {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    background: var(--mini-bg);
    border: 1px solid var(--mini-line);
    border-radius: 14px;
}

.mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--mini-ink);
    background: var(--mini-chip);
    border-radius: 10px;
    flex: none;
}

.mini-body {
    min-width: 0;
}

.mini-label {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-value {
    margin: 0.1rem 0 0;
    font-family: var(--font-en);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
}

.mini-blue   { --mini-bg: #f4f9ff; --mini-line: #dbeafe; --mini-chip: #dbeafe; --mini-ink: #2563eb; }
.mini-green  { --mini-bg: #f4fdf8; --mini-line: #d1fae5; --mini-chip: #d1fae5; --mini-ink: #059669; }
.mini-purple { --mini-bg: #f9f6ff; --mini-line: #e9d5ff; --mini-chip: #ede4fe; --mini-ink: #7c3aed; }
.mini-rose   { --mini-bg: #fff5f6; --mini-line: #fecdd3; --mini-chip: #ffe4e6; --mini-ink: #e11d48; }
.mini-amber  { --mini-bg: #fffbf0; --mini-line: #fde68a; --mini-chip: #fef3c7; --mini-ink: #d97706; }

/* --------------------------------------------------------------------------
   Bottom panels
   -------------------------------------------------------------------------- */

.panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.5rem;
    align-items: start;
}

.panel {
    position: relative;
    padding: 1.35rem 1.5rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

/* The green rail down the left edge of the distribution panel. */
.panel-accent::before {
    content: "";
    position: absolute;
    top: 1.35rem;
    bottom: 1.35rem;
    left: -1px;
    width: 5px;
    background: var(--g500);
    border-radius: 99px;
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    color: #fff;
    border-radius: 12px;
    flex: none;
}

.panel-icon-green {
    background: var(--g500);
}

.panel-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.panel-sub {
    margin: 0.15rem 0 0;
    font-size: 0.825rem;
    color: var(--ink-muted);
}

.chart-modes {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    padding: 0.25rem;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
    flex: none;
}

.chart-mode {
    display: inline-flex;
    padding: 0.35rem;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.chart-mode:hover {
    color: var(--g600);
    background: var(--g50);
}

.chart-mode-active {
    color: var(--g600);
    background: var(--g100);
}

/* Donut */

.donut-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.donut {
    width: 200px;
    height: 200px;
    flex: none;
}

.donut-track {
    stroke: #eef2f7;
}

.donut-total {
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 700;
    fill: var(--ink);
    text-anchor: middle;
}

.donut-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    fill: #94a3b8;
    text-anchor: middle;
}

.legend {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.legend-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.legend-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex: none;
}

.legend-label {
    color: #475569;
    font-weight: 500;
}

.legend-value {
    font-family: var(--font-en);
    font-weight: 700;
    color: var(--ink);
}

.legend-pct {
    min-width: 3.1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-align: right;
}

/* Trend tiles + chart */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.tile {
    padding: 0.75rem 0.9rem;
    background: var(--tile-bg);
    border: 1px solid var(--tile-line);
    border-radius: 12px;
}

.tile-label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-value {
    margin: 0.2rem 0 0;
    font-family: var(--font-en);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--tile-ink);
}

.tile-green  { --tile-bg: #f4fdf8; --tile-line: #d1fae5; --tile-ink: #059669; }
.tile-blue   { --tile-bg: #f4f9ff; --tile-line: #dbeafe; --tile-ink: #2563eb; }
.tile-rose   { --tile-bg: #fff5f6; --tile-line: #fecdd3; --tile-ink: #e11d48; }
.tile-violet { --tile-bg: #f9f6ff; --tile-line: #e9d5ff; --tile-ink: #7c3aed; }

.chart-wrap {
    overflow-x: auto;
}

.chart {
    display: block;
    width: 100%;
    min-width: 34rem;
    height: auto;
}

.chart-grid {
    stroke: #cbd5e1;
    stroke-width: 1;
}

.chart-baseline {
    stroke: #94a3b8;
    stroke-width: 1;
}

.chart-axis {
    font-family: var(--font-en);
    font-size: 11px;
    fill: #94a3b8;
}

.chart-dot {
    fill: var(--surface);
}

.chart-legend {
    display: flex;
    gap: 1.25rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: #475569;
}

.chart-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* --------------------------------------------------------------------------
   Dashboard responsive steps
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    .sum-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .panel-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1100px) {
    .layout-main {
        padding: 1.25rem 1.25rem 2.5rem;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: var(--shadow);
    }

    .layout:not(.layout-collapsed) .sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 29;
        background: rgb(15 23 42 / 45%);
    }

    .layout-body {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .sum-grid,
    .mini-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .topbar {
        flex-wrap: wrap;
    }

    .support {
        font-size: 0.8rem;
    }

    .qa {
        flex: 1 1 10rem;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] {
    --ink: #e2e8f0;
    --ink-muted: #94a3b8;
    --line: #1e293b;
    --surface: #0f172a;
    --canvas: #020617;
    --shadow: 0 20px 45px -25px rgb(0 0 0 / 75%);
}

:root[data-theme="dark"] .nav-item {
    color: #cbd5e1;
}

:root[data-theme="dark"] .nav-icon {
    color: #94a3b8;
}

:root[data-theme="dark"] .nav-item:hover,
:root[data-theme="dark"] .profile-action:hover,
:root[data-theme="dark"] .theme-toggle:hover,
:root[data-theme="dark"] .btn-ghost:hover:not(:disabled) {
    background: #1e293b;
}

:root[data-theme="dark"] .field-label,
:root[data-theme="dark"] .checkbox,
:root[data-theme="dark"] .legend-label,
:root[data-theme="dark"] .chart-legend {
    color: #cbd5e1;
}

:root[data-theme="dark"] .field-input,
:root[data-theme="dark"] .lang-select,
:root[data-theme="dark"] .period-select {
    color: var(--ink);
    background: #0b1220;
}

:root[data-theme="dark"] .chart-modes,
:root[data-theme="dark"] .field-input:disabled {
    background: #0b1220;
}

:root[data-theme="dark"] .donut-track {
    stroke: #1e293b;
}

:root[data-theme="dark"] .sum-row-val {
    color: #cbd5e1;
}

:root[data-theme="dark"] .period {
    background: linear-gradient(100deg, #08251c 0%, #0b1a21 55%, var(--surface) 100%);
}

/* The pastel cards keep their hue but drop to card-on-dark luminance. */
:root[data-theme="dark"] .sum-green  { --sum-a: #06281d; --sum-b: #0a1f19; --sum-line: #10513a; --sum-wedge: #0a3527; --sum-ink: #34d399; --sum-strong: #6ee7b7; }
:root[data-theme="dark"] .sum-blue   { --sum-a: #0a2038; --sum-b: #0a1928; --sum-line: #14406e; --sum-wedge: #0d2a49; --sum-ink: #60a5fa; --sum-strong: #93c5fd; }
:root[data-theme="dark"] .sum-amber  { --sum-a: #2e1f05; --sum-b: #211809; --sum-line: #6b4310; --sum-wedge: #3d2907; --sum-ink: #fbbf24; --sum-strong: #fcd34d; }
:root[data-theme="dark"] .sum-violet { --sum-a: #1e1338; --sum-b: #171029; --sum-line: #43267e; --sum-wedge: #271851; --sum-ink: #a78bfa; --sum-strong: #c4b5fd; }

:root[data-theme="dark"] .sum-icon,
:root[data-theme="dark"] .sum-corner-icon {
    background: rgb(255 255 255 / 10%);
}

:root[data-theme="dark"] .sum-track {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 8%);
}

:root[data-theme="dark"] .mini-blue   { --mini-bg: #0b1728; --mini-line: #17314f; --mini-chip: #17314f; --mini-ink: #60a5fa; }
:root[data-theme="dark"] .mini-green  { --mini-bg: #08201a; --mini-line: #10513a; --mini-chip: #10513a; --mini-ink: #34d399; }
:root[data-theme="dark"] .mini-purple { --mini-bg: #150f27; --mini-line: #3b2472; --mini-chip: #3b2472; --mini-ink: #a78bfa; }
:root[data-theme="dark"] .mini-rose   { --mini-bg: #221014; --mini-line: #63202f; --mini-chip: #63202f; --mini-ink: #fb7185; }
:root[data-theme="dark"] .mini-amber  { --mini-bg: #221a08; --mini-line: #6b4310; --mini-chip: #6b4310; --mini-ink: #fbbf24; }

:root[data-theme="dark"] .tile-green  { --tile-bg: #08201a; --tile-line: #10513a; --tile-ink: #34d399; }
:root[data-theme="dark"] .tile-blue   { --tile-bg: #0b1728; --tile-line: #17314f; --tile-ink: #60a5fa; }
:root[data-theme="dark"] .tile-rose   { --tile-bg: #221014; --tile-line: #63202f; --tile-ink: #fb7185; }
:root[data-theme="dark"] .tile-violet { --tile-bg: #150f27; --tile-line: #3b2472; --tile-ink: #a78bfa; }

:root[data-theme="dark"] .countdown-violet { --cd-bg: #201545; --cd-line: #3b2472; --cd-ink: #c4b5fd; }
:root[data-theme="dark"] .countdown-blue   { --cd-bg: #0f2547; --cd-line: #1d4ed8; --cd-ink: #93c5fd; }
:root[data-theme="dark"] .countdown-indigo { --cd-bg: #1b1b4d; --cd-line: #3730a3; --cd-ink: #a5b4fc; }
:root[data-theme="dark"] .countdown-rose   { --cd-bg: #2d1119; --cd-line: #9f1239; --cd-ink: #fda4af; }

:root[data-theme="dark"] .alert-error {
    color: #fecaca;
    background: #2d1114;
    border-color: #7f1d1d;
}

:root[data-theme="dark"] .alert-success {
    color: #a7f3d0;
    background: #06281d;
    border-color: #10513a;
}

/* --------------------------------------------------------------------------
   Sidebar submenus
   -------------------------------------------------------------------------- */

.nav-group {
    display: flex;
    flex-direction: column;
}

/* A group header that is expanded, and top-level placeholders once clicked. */
.nav-item-open,
.nav-item-selected {
    color: var(--g700);
    background: var(--g50);
}

.nav-item-open .nav-icon,
.nav-item-selected .nav-icon {
    color: var(--g600);
}

.nav-chevron {
    transition: transform 0.18s ease;
}

.nav-chevron-open {
    transform: rotate(90deg);
    color: var(--g600);
}

.subnav {
    position: relative;
    margin: 2px 0 6px;
    padding: 0 0 0 2.15rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: subnav-in 0.16s ease-out;
}

/* Guide rail running down the left of the nested items. */
.subnav::before {
    content: "";
    position: absolute;
    top: 0.15rem;
    bottom: 0.15rem;
    left: 1.42rem;
    width: 1.5px;
    background: var(--line);
    border-radius: 99px;
}

@keyframes subnav-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.subnav-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    border-radius: 8px;
}

.subnav-item:hover {
    color: var(--g700);
    background: var(--g50);
}

.subnav-dot {
    width: 5px;
    height: 5px;
    flex: none;
    background: #cbd5e1;
    border-radius: 50%;
}

.subnav-item:hover .subnav-dot {
    background: var(--g500);
}

.subnav-item-active,
.subnav-item-active:hover {
    color: var(--g700);
    background: var(--g100);
    font-weight: 600;
}

.subnav-item-active .subnav-dot {
    background: var(--g600);
}

:root[data-theme="dark"] .nav-item-open,
:root[data-theme="dark"] .nav-item-selected {
    color: #6ee7b7;
    background: #08201a;
}

:root[data-theme="dark"] .subnav-item {
    color: #94a3b8;
}

:root[data-theme="dark"] .subnav-item:hover,
:root[data-theme="dark"] .subnav-item-active {
    color: #6ee7b7;
    background: #08201a;
}

/* ==========================================================================
   Business Settings
   ========================================================================== */

.bs-card {
    padding: 1.85rem;
    background: var(--surface);
    border: 2px solid #3b82f6;
    border-radius: 14px;
}

.bs-card-loading {
    color: var(--ink-muted);
    border-color: var(--line);
}

.bs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.bs-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.bs-badge {
    flex: none;
    padding: 0.35rem 0.85rem;
    font-size: 0.775rem;
    font-weight: 700;
    color: #e11d48;
    background: #ffe4e6;
    border-radius: 99px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Field grid
   -------------------------------------------------------------------------- */

.bs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem 1.5rem;
}

.bs-row {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bs-row .field-label {
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
}

.bs-req {
    color: var(--danger);
    font-weight: 700;
}

.bs-row-full {
    margin-top: 0.85rem;
}

.bs-textarea {
    min-height: 5.5rem;
    resize: vertical;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Upload + options
   -------------------------------------------------------------------------- */

.bs-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.4rem;
    align-items: start;
}

.bs-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    min-height: 13.5rem;
    justify-content: center;
}

.bs-upload-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.bs-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 10rem;
    padding: 1.4rem 0.9rem;
    text-align: center;
    background: var(--surface);
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bs-drop:hover,
.bs-drop-over {
    border-color: var(--g500);
    background: var(--g50);
}

.bs-drop-icon {
    margin-bottom: 0.5rem;
    color: #94a3b8;
}

.bs-drop-cta {
    font-size: 0.825rem;
    font-weight: 500;
    color: #334155;
    line-height: 1.4;
}

.bs-drop-hint {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    line-height: 1.35;
    color: #94a3b8;
}

.bs-drop-input {
    display: none;
}

/* Preview shown once a logo exists or a file has been picked. */
.bs-logo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
}

.bs-logo img {
    display: block;
    max-width: 9rem;
    max-height: 5.5rem;
    object-fit: contain;
}

.bs-logo-remove {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: inline-flex;
    padding: 0.25rem;
    color: #fff;
    background: var(--danger);
    border: 2px solid var(--surface);
    border-radius: 50%;
    cursor: pointer;
}

.bs-logo-note {
    margin: 0;
    font-size: 0.7rem;
    color: var(--ink-muted);
}

.bs-logo-error {
    text-align: center;
}

.bs-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    align-content: start;
}

.opt-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 0.95rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    min-width: 0;
}

.opt-card-toggle {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    min-height: 4.55rem;
}

.opt-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opt-card-toggle .opt-label {
    flex: 1 1 auto;
}

.opt-state {
    flex: none;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.opt-select {
    width: 100%;
    cursor: pointer;
}

/* Switch */

.switch {
    position: relative;
    flex: none;
    width: 2.6rem;
    height: 1.45rem;
    padding: 0;
    background: #d1d5db;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.switch-on {
    background: #22c55e;
}

.switch:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.switch-knob {
    position: absolute;
    top: 0.16rem;
    left: 0.16rem;
    width: 1.13rem;
    height: 1.13rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(15 23 42 / 30%);
    transition: transform 0.18s ease;
}

.switch-on .switch-knob {
    transform: translateX(1.15rem);
}

.switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(34 197 94 / 30%);
}

/* --------------------------------------------------------------------------
   Inactive package warning + footer
   -------------------------------------------------------------------------- */

.bs-warn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}

.bs-warn-icon {
    flex: none;
    color: #dc2626;
}

.bs-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.4rem;
}

.bs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.05rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--g700);
    text-decoration: none;
    background: var(--g100);
    border: 1px solid #a7f3d0;
    border-radius: 99px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bs-btn:hover {
    color: #fff;
    background: var(--g600);
    border-color: var(--g600);
}

/* Both footer actions are inert while the package is inactive. */
.bs-btn-disabled,
.bs-btn-disabled:hover,
.bs-btn:disabled,
.bs-btn:disabled:hover {
    color: #86c9ab;
    background: #e8f7ef;
    border-color: #d3efe1;
    cursor: not-allowed;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    .bs-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .bs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bs-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bs-card {
        padding: 1.15rem;
    }

    .bs-grid,
    .bs-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .bs-foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .bs-btn {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .bs-row .field-label,
:root[data-theme="dark"] .opt-label {
    color: #cbd5e1;
}

:root[data-theme="dark"] .bs-badge {
    color: #fda4af;
    background: #2d1119;
}

:root[data-theme="dark"] .bs-drop {
    background: #0b1220;
    border-color: #334155;
}

:root[data-theme="dark"] .bs-drop:hover,
:root[data-theme="dark"] .bs-drop-over {
    background: #08201a;
    border-color: var(--g500);
}

:root[data-theme="dark"] .bs-drop-cta {
    color: #cbd5e1;
}

:root[data-theme="dark"] .bs-warn {
    color: #fcd34d;
    background: #221a08;
    border-color: #6b4310;
}

:root[data-theme="dark"] .bs-btn {
    color: #6ee7b7;
    background: #08201a;
    border-color: #10513a;
}

:root[data-theme="dark"] .bs-btn-disabled,
:root[data-theme="dark"] .bs-btn:disabled {
    color: #3f6b59;
    background: #0a1712;
    border-color: #143327;
}

/* Sidebar heading: the uploaded logo when there is one, else the business name. */
.sidebar-logo {
    display: block;
    max-width: 10.5rem;
    max-height: 2.15rem;
    object-fit: contain;
    object-position: left center;
}

/* ==========================================================================
   Software Setting  (/software-setting/*)

   Three screens sharing one vocabulary: a state chip that says whether the
   thing is actually working, switches that read as sentences, and a test that
   proves it rather than a form that only looks filled in.
   ========================================================================== */

/* Stacked cards on these screens, unlike Business Settings' single one. */
.bs-card + .bs-card {
    margin-top: 1.1rem;
}

/* Switched on is not the same as usable, so the chip reports the second. */
.sw-state {
    padding: 0.28rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-muted);
    background: var(--g100);
    border-radius: 99px;
}

.sw-state-on {
    color: var(--g700);
    background: var(--g50);
    box-shadow: inset 0 0 0 1px var(--g500);
}

.sw-section {
    margin: 1.5rem 0 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
}

.sw-section-first {
    margin-top: 0;
}

/* The explanation belongs with the heading, not in a tooltip. */
.sw-section-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--ink-muted);
}

.sw-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0;
    font-size: 0.86rem;
    color: var(--ink);
    cursor: pointer;
}

.sw-switch input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--g600);
}

.sw-key {
    display: flex;
    gap: 0.4rem;
}

.sw-key .field-input {
    flex: 1;
    min-width: 0;
}

.sw-clear {
    display: grid;
    place-items: center;
    width: 2.3rem;
    color: var(--danger);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.sw-clear:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.sw-note {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.3rem 0 0;
    font-size: 0.73rem;
    color: var(--ink-muted);
}

.sw-note-block {
    display: block;
    margin-bottom: 0.7rem;
}

.sw-kept {
    font-weight: 500;
    color: var(--g600);
}

.sw-error {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    color: var(--danger);
}

.sw-area {
    min-height: 3.4rem;
    padding: 0.5rem 0.7rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

/* Four short boxes, so they do not each take a third of the row. */
.sw-params {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sw-event {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 9px;
}

.sw-event .sw-switch {
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.sw-foot {
    justify-content: flex-end;
}

/* .btn-primary is full width, which suits the login form it was written for
   and not a settings card. These put it back to the width of its label. */
.sw-wide,
.sw-foot .btn,
.sw-test-row .btn {
    width: auto;
}

.sw-test-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sw-test-row .field-input {
    flex: 1 1 14rem;
    min-width: 0;
}

.sw-result {
    margin-top: 0.8rem;
    padding: 0.7rem 0.85rem;
    border-radius: 9px;
    border: 1px solid var(--line);
}

.sw-result-ok {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
}

.sw-result-bad {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger);
}

.sw-result-line {
    margin: 0;
    font-size: 0.83rem;
}

/* The gateway reply, verbatim: it is the part that says whether the message
   actually went, and paraphrasing it would lose that. */
.sw-result-body {
    max-height: 9rem;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.6rem;
    overflow: auto;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.72rem;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--surface);
    border-radius: 6px;
}

.sw-file {
    padding: 0.42rem 0.6rem;
    font-size: 0.82rem;
}

/* Restore is the only thing here that can destroy everything, and it is the
   only card that looks like it. */
.sw-danger {
    border-color: var(--danger);
}

.sw-warn {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: 9px;
}

.sw-warn svg {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.sw-destroy {
    margin-top: 1rem;
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.sw-destroy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sw-columns {
    margin: 0.9rem 0 0;
    padding: 0.75rem 0.85rem;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 9px;
}

.sw-columns-title {
    margin: 0 0 0.5rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.sw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.sw-chip {
    padding: 0.22rem 0.55rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
}

.sw-chip-need {
    color: var(--g700);
    border-color: var(--g500);
}

.sw-chip-star {
    color: var(--danger);
}

/* A name nothing answers to stops the whole file, so the names that work are
   printed rather than left to be guessed. */
.sw-lookup {
    margin: 0.3rem 0 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.sw-lookup b {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: var(--ink);
}

@media (max-width: 900px) {
    .sw-params {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

:root[data-theme="dark"] .sw-state {
    background: #1b2942;
}

:root[data-theme="dark"] .sw-state-on {
    color: #a7f3d0;
    background: #06281d;
}

:root[data-theme="dark"] .sw-event,
:root[data-theme="dark"] .sw-columns {
    background: #0b1220;
    border-color: #24344f;
}

:root[data-theme="dark"] .sw-result-ok {
    color: #a7f3d0;
    background: #06281d;
    border-color: #10513a;
}

:root[data-theme="dark"] .sw-result-bad {
    color: #fca5a5;
    background: #2a1113;
    border-color: #7f1d1d;
}

:root[data-theme="dark"] .sw-warn {
    color: #fca5a5;
    background: #2a1113;
}

:root[data-theme="dark"] .sw-chip,
:root[data-theme="dark"] .sw-clear,
:root[data-theme="dark"] .sw-result-body {
    background: #0f172a;
    border-color: #24344f;
}

/* ==========================================================================
   Device sticker  (/service/list -> Device Sticker)

   Four inches by two and a half, the common thermal label. Sized here in
   millimetres because that is what @page understands: 101.6 x 63.5.

   It is read off a shelf of identical laptops, so it holds two facts and no
   decoration — whose device this is, and which device it is.
   ========================================================================== */

.dst-sheet {
    box-sizing: border-box;
    width: 101.6mm;
    height: 63.5mm;
    padding: 2.6mm 3.5mm;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #000;
    background: #fff;
    border: 1px solid #000;
}

/* The mark on the left, the number to ring on the right. A device that has
   wandered off a bench is returned by this line, not by the service number. */
.dst-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3mm;
    padding-bottom: 1mm;
    border-bottom: 1px solid #000;
}

.dst-logo {
    max-width: 34mm;
    max-height: 7mm;
    object-fit: contain;
    object-position: left center;
}

/* Stands in for the logo where none has been uploaded, so the label never
   opens with an empty band. */
.dst-shop {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* Gives up its own room before it can push the number off the edge. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dst-phone {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/*
 * The one part of a fixed-size label that is allowed to give.
 *
 * A device name and a fault are whatever somebody typed, so on a label that
 * cannot grow they are what has to yield: this block takes the slack, and
 * clips rather than pushing the dates and the barcode off the bottom. A
 * sticker missing the end of a fault is still a usable sticker; one missing
 * its barcode is not.
 */
.dst-body {
    flex: 1;
    min-height: 0;
    margin-top: 1.2mm;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.34;
}

/* Label, colon and value as three columns, so every colon sits on the same
   vertical line however long the label in front of it is. */
.dst-line {
    display: grid;
    grid-template-columns: 25mm 3mm 1fr;
    align-items: baseline;
}

.dst-label {
    font-weight: 600;
}

.dst-colon {
    text-align: center;
}

.dst-value {
    font-weight: 700;
    /* A long device name or fault takes a second line rather than running off
       the label; a third would not fit the height. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Divides who brought it in from what they brought, and is a heading rather
   than a rule so it reads as the shop wrote it. */
.dst-rule {
    margin: 1mm 0 0.6mm;
    padding-top: 0.8mm;
    font-size: 10px;
    font-weight: 700;
    border-top: 1px solid #000;
}

/* Both dates on one line, pushed to the foot: the slack belongs between the
   particulars and the dates, not trapped under the last particular. */
.dst-dates {
    margin: 0.8mm 0 0;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.dst-scan {
    padding-top: 1.2mm;
}

/* Short and wide: the label has height for a strip, not for a block. */
.dst-scan .sinv-barcode {
    width: 100%;
    height: 7mm;
}

/* The sticker is black on white by definition, so it does not take a dark
   theme — only the room around it does. */
:root[data-theme="dark"] .dst-sheet {
    border-color: #24344f;
}

@page sticker {
    size: 101.6mm 63.5mm;
    margin: 0;
}

@media print {
    body:has(#device-sticker) .layout-main > *:not(.modal-scrim) {
        display: none !important;
    }

    body:has(#device-sticker) .modal-scrim {
        position: static;
        display: block;
        padding: 0;
        background: none;
    }

    body:has(#device-sticker) .modal {
        width: auto;
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    body:has(#device-sticker) .modal-body {
        max-height: none;
        padding: 0;
        overflow: visible;
    }

    body:has(#device-sticker) .modal-head,
    body:has(#device-sticker) .modal-foot {
        display: none !important;
    }

    .dst-sheet {
        page: sticker;
        /* The label stock is the page, so the drawn edge would print as a
           line 1mm inside the cut. */
        border: 0;
        break-inside: avoid;
    }
}

/* ==========================================================================
   The service report, on paper

   The by-status table needed nothing: it wears .pl-table, so the printed-lists
   block above already gives it the header band, the hairlines and the repeated
   thead. Everything else about the sheet did.

   The summary tiles are the interesting part. On screen they are six cards,
   because a figure in a card is a figure you can pick out at a glance across a
   dashboard. Printed at that size they took a third of the sheet, each one
   outlined and rounded for no reason paper cares about, and the green, amber
   and red that tell paid from due at a glance come off a monochrome printer as
   three indistinguishable greys. So on paper they become what they always
   were: a row of labelled figures with hairlines between them.
   ========================================================================== */

@media print {
    /* The screen's title and its Print button. The letterhead says all of it,
       so leaving both would print the report's name twice. */
    .sr-head {
        display: none !important;
    }

    /*
     * Portrait, claimed by name. The only unnamed @page that sets a size asks
     * for A4 landscape, and anything that does not claim its own inherits it —
     * which gave eight short columns 273mm to spread over.
     */
    .sr-card {
        page: a4page;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    /* --- the section headings ------------------------------------------- */

    /* Small caps rather than a screen heading: on a one-page report these are
       captions dividing two blocks, not titles competing with the letterhead. */
    .sr-section {
        margin: 4mm 0 1.5mm !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #000 !important;
    }

    .sr-section:first-of-type {
        margin-top: 0 !important;
    }

    /* --- the summary figures -------------------------------------------- */

    .sr-tiles {
        display: flex !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
        border: 1px solid #666;
        break-inside: avoid;
    }

    /* Equal shares of the row, and a hairline between each pair rather than a
       box around every one. */
    .sr-tile {
        flex: 1 1 0;
        min-width: 0;
        padding: 1.8mm 2mm !important;
        background: #fff !important;
        border: 0 !important;
        border-left: 1px solid #cbd5e1 !important;
        border-radius: 0 !important;
    }

    .sr-tile:first-child {
        border-left: 0 !important;
    }

    /* Six across 186mm is 31mm each, so a two-word label wraps rather than
       being clipped. */
    .sr-tile-label {
        font-size: 6.5px !important;
        line-height: 1.25;
        letter-spacing: 0.03em;
        color: #333 !important;
    }

    /*
     * Every figure black. The tone classes are what make paid green and due
     * red on screen, and they are the whole reason this rule has to name the
     * value rather than the tile: .sr-tile-due .sr-tile-value is two classes
     * deep and would otherwise win.
     */
    .sr-tile-value,
    .sr-tile-paid .sr-tile-value,
    .sr-tile-earned .sr-tile-value,
    .sr-tile-refund .sr-tile-value,
    .sr-tile-due .sr-tile-value {
        margin: 1mm 0 0 !important;
        font-size: 11px !important;
        color: #000 !important;
    }

    /* --- the by-status table ------------------------------------------- */

    /*
     * Auto layout gives free text the slack, which is right for a list of
     * product names and wrong here: the only text column is a one-word status,
     * so it took half the page and left the five money columns cramped. Fixed
     * shares instead, the figures wide enough to hold a formatted amount.
     */
    .sr-status-table {
        table-layout: fixed !important;
    }

    /* Portrait A4 inside 12mm margins is 186mm. The five figure columns take
       112mm of it and the status word keeps the rest, which is ample for one
       word and stops it eating the sheet. */
    .sr-status-table th:nth-child(1),
    .sr-status-table td:nth-child(1) {
        width: 8mm;
    }

    .sr-status-table th:nth-child(3),
    .sr-status-table td:nth-child(3) {
        width: 16mm;
    }

    .sr-status-table th:nth-child(n + 4),
    .sr-status-table td:nth-child(n + 4) {
        width: 24mm;
    }

    /* The status reads as a plain word here; on screen it is a pill. */
    .sr-status,
    .sr-paid,
    .sr-refund,
    .sr-due {
        color: #000 !important;
        background: none !important;
        padding: 0 !important;
        border: 0 !important;
        font-weight: 400 !important;
    }
}

/* ==========================================================================
   Printed lists  (every screen with a Print List button)

   One treatment for all of them, because they are all the same document: a
   table of rows with a letterhead over it. Keyed on .pl-table and its wrapper,
   which every list already uses, so a new list gets a printable report by
   being built the way the others are.

   Three things stood between these tables and an A4 sheet, and none of them
   was the table's fault:

     the card around it kept its padding, border and tinted ground, none of
     which means anything on paper;

     the wrapper scrolls sideways on screen, and a box that scrolls on one
     axis clips on the other — so the table was cut off at the wrapper's edge
     rather than running onto the page;

     and every list sets a minimum width between 52rem and 76rem, against the
     1030-odd pixels A4 landscape has inside the app's 12mm margins. The widest
     of them was 200px over.

   The head, the signatures and the totals caption are print-only; on screen
   this section adds nothing.
   ========================================================================== */

.rpt-head,
.rpt-signs {
    display: none;
}

@media print {
    /*
     * Every printed list claims A4 landscape by name. The tables run to a dozen
     * columns and would not otherwise fit; naming it means none of them depends
     * on an unnamed rule elsewhere in this file staying where it is.
     */
    .rl-card,
    .sl-card,
    .ps-wrap,
    .ps-card,
    .dl-card,
    .exl-card,
    .txn-card,
    .eml-card,
    .tm-card,
    .ebt-result-card,
    .cl-card,
    .lg-sheet {
        page: a4land;
    }

    /* --- the letterhead ------------------------------------------------- */

    .rpt-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12mm;
        margin-bottom: 4mm;
        padding-bottom: 2mm;
        color: #000;
        border-bottom: 1.5px solid #000;
    }

    /*
     * The mark beside the name rather than above it. Stacked, the left column
     * ran to four lines against the right column's three and the rule beneath
     * them sat under nothing in particular.
     */
    .rpt-shop {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        align-items: center;
    }

    /*
     * The gap belongs to the logo, not to the grid. A shop with no logo leaves
     * column one empty, and an unconditional column-gap would indent the whole
     * letterhead past a mark that is not there.
     */
    .rpt-shop:has(.rpt-logo) {
        column-gap: 3mm;
    }

    /*
     * The text is pinned to column two whether or not a logo occupies column
     * one. Left to flow, three items across a two-column grid put the address
     * beside the shop's name and the phone underneath it — which is what a
     * shop with no logo printed.
     */
    .rpt-shop b,
    .rpt-shop span {
        grid-column: 2;
    }

    .rpt-logo {
        grid-column: 1;
        grid-row: 1 / -1;
        max-width: 26mm;
        max-height: 12mm;
        object-fit: contain;
        object-position: left center;
    }

    .rpt-shop b {
        display: block;
        align-self: end;
        font-size: 14px;
        line-height: 1.2;
    }

    .rpt-what b {
        display: block;
        font-size: 14px;
        line-height: 1.2;
    }

    .rpt-shop span,
    .rpt-what span {
        display: block;
        font-size: 9px;
        color: #333;
    }

    /* Right-aligned, so the title and the shop's name hold the two ends of
       the rule between them. */
    .rpt-what {
        flex: 0 0 auto;
        text-align: right;
    }

    /* --- the sheet ------------------------------------------------------ */

    /* The card is a screen device; on paper the page is the card. Every list
       names its own, which is why they are all listed here. */
    .rl-card,
    .sl-card,
    .ps-wrap,
    .ps-card,
    .dl-card,
    .exl-card,
    .txn-card,
    .eml-card,
    .tm-card,
    .ebt-card,
    .cl-card,
    .lg-sheet {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .pl-table-wrap,
    .lg-table-wrap {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* --- the table ------------------------------------------------------ */

    .pl-table {
        /* The minimum widths go; the table takes the page instead. Auto layout
           rather than fixed, so a column of free text gets the slack and a
           column of two-digit counts does not. */
        min-width: 0 !important;
        width: 100% !important;
        font-size: 8.5px !important;
        table-layout: auto;
    }

    .pl-table th,
    .pl-table td {
        padding: 1.4mm 1.2mm !important;
        /* Wraps at spaces, and breaks inside a word only where the word could
           not fit a line of its own — unlike word-break, which breaks
           anywhere and turns a company name into rubble. */
        overflow-wrap: break-word;
    }

    /* Repeated at the top of every sheet, so page two reads on its own. */
    .pl-table thead {
        display: table-header-group;
    }

    .pl-table tfoot {
        display: table-footer-group;
    }

    .pl-table tbody tr {
        break-inside: avoid;
    }

    /* Printers drop backgrounds by default, and a header band that vanishes
       takes the column headings with it. */
    .pl-table thead th {
        color: #000 !important;
        background: #e5e7eb !important;
        border-bottom: 1px solid #666 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /*
     * Slate #334155 is the screen's body colour and prints as a washed grey.
     * On paper the figures are black, and the hairlines are dark enough to
     * separate rows — the screen's #eef2f7 all but vanishes.
     */
    .pl-table tbody td {
        color: #000 !important;
        background: #fff !important;
        border-right: 1px solid #cbd5e1 !important;
        border-top: 1px solid #cbd5e1 !important;
    }

    .pl-table tbody td:last-child {
        border-right: 0 !important;
    }

    /* --- what does not belong on paper ---------------------------------- */

    /*
     * The screen's page header, with its big title and its "Showing 3 of 12"
     * line, and the search and per-page controls beside them. The letterhead
     * says all of it in a form meant for paper, so leaving both printed the
     * title twice — once as a heading and once as a report.
     */
    .wl-head,
    .sl-head,
    .ps-head,
    .dl-head,
    .exl-head,
    .eml-head,
    .tm-list-head,
    .cl-head,
    .ebt-range,
    .rl-count,
    .ps-count {
        display: none !important;
    }

    /* The relative age beside a date is a screen affordance; on a dated report
       it only competes with the date it sits next to. */
    .pl-table .lg-ago,
    .pl-table .rma-new-serial,
    .pl-table .sl-eye {
        display: none !important;
    }

    /*
     * Green and red do not survive a monochrome printer as anything but two
     * shades of grey, so every figure prints as a figure. Listed rather than
     * blanket-set, because the header band above is a tint that must stay.
     */
    .pl-table .ql-grand,
    .pl-table .ql-discount,
    .pl-table .sl-profit,
    .pl-table .sl-profit-bad,
    .pl-table .lg-balance,
    .pl-table .cl-balance,
    .pl-table .cl-balance-receivable,
    .pl-table .rma-status,
    .pl-table .cs-stock,
    .pl-table .cs-stock-bad,
    .pl-table .exl-amount,
    .pl-table .dl-loss,
    .pl-table .txn-in,
    .pl-table .txn-out {
        color: #000 !important;
        background: none !important;
    }

    /* A margin is a chip on screen, sized to be noticed when revealed. On a
       report it is one figure among a dozen and reads as one. */
    .pl-table .sl-profit {
        display: inline;
        margin: 0;
        font-size: inherit;
        font-weight: 400;
    }

    /* --- totals and signatures ------------------------------------------ */

    /* Each list already had a closing row under its own name; they all get
       the report's treatment rather than each keeping a screen tint. */
    /*
     * Only the closing rows that belong to a printable list. inv-total-row is
     * the till receipt's and rv-total-row a return document's; both are their
     * own paperwork and keep their own look.
     */
    .rpt-totals th,
    .rpt-totals td,
    .dl-total-row td,
    .exl-total-row td,
    .lg-total-row td {
        font-weight: 700;
        color: #000 !important;
        background: #f1f5f9 !important;
        border-top: 1.2px solid #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rpt-totals th {
        text-align: right;
    }

    .rpt-signs {
        display: flex;
        justify-content: space-between;
        gap: 20mm;
        /*
         * Enough to read as a separate band, not so much that it costs a row.
         * At 12mm a full page of twenty installments with a wrapped note tipped
         * the signatures onto a second sheet by themselves.
         */
        margin-top: 8mm;
        /* A signature line alone at the top of a second sheet is no use. */
        break-inside: avoid;
    }

    .rpt-signs > div {
        flex: 0 0 55mm;
        font-size: 9px;
        text-align: center;
        color: #000;
    }

    .rpt-signs span {
        display: block;
        margin-bottom: 1mm;
        border-top: 1px solid #000;
    }
}

/* ==========================================================================
   My Profile
   ========================================================================== */

.pf-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1.5rem;
    align-items: start;
}

.pf-avatar-row {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
}

/* Same gradient chip as the topbar, so initials look consistent in both. */
.pf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.25rem;
    height: 5.25rem;
    flex: none;
    font-family: var(--font-en);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(140deg, var(--g500), var(--g700));
    border-radius: 50%;
    overflow: hidden;
}

.pf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pf-avatar-actions {
    min-width: 0;
}

.pf-avatar-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.pf-avatar-hint {
    margin: 0.15rem 0 0.6rem;
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.pf-avatar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pf-avatar-pending {
    margin: 0.55rem 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--g600);
}

.pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pf-btn:hover:not(:disabled) {
    color: var(--g700);
    background: var(--g50);
    border-color: #a7f3d0;
}

.pf-btn-danger:hover:not(:disabled) {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: #fecaca;
}

.pf-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pf-file {
    display: none;
}

/* Topbar avatar, when a photo has been uploaded. */
.profile-avatar-img {
    object-fit: cover;
    padding: 0;
}

@media (max-width: 1100px) {
    .pf-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .pf-avatar-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

:root[data-theme="dark"] .pf-btn {
    color: #cbd5e1;
    background: #0b1220;
}

:root[data-theme="dark"] .pf-btn:hover:not(:disabled) {
    color: #6ee7b7;
    background: #08201a;
    border-color: #10513a;
}

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

.modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1.25rem;
    overflow-y: auto;
    background: rgb(15 23 42 / 55%);
    animation: modal-fade 0.14s ease-out;
}

.modal {
    width: 100%;
    max-width: 30rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 30px 60px -25px rgb(15 23 42 / 55%);
    animation: modal-rise 0.16s ease-out;
}

.modal-wide {
    max-width: 44rem;
}

@keyframes modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-rise {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

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

.modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.modal-sub {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.modal-close {
    display: inline-flex;
    flex: none;
    padding: 0.3rem;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--ink);
    background: #f1f5f9;
}

.modal-body {
    padding: 1.35rem;
}

.modal-foot {
    padding: 1rem 1.35rem;
    border-top: 1px solid var(--line);
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
}

/* The shared submit button is full width by default; not in a dialog footer. */
.modal-actions .btn-primary {
    width: auto;
}

/* ==========================================================================
   Admin · Users
   ========================================================================== */

.au-tools {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.au-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 99px;
}

.au-search:focus-within {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 15%);
}

.au-search-input {
    width: 14rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: none;
}

.au-table-wrap {
    overflow-x: auto;
}

.au-table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.au-table th {
    padding: 0.6rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.au-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

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

.au-table tbody tr:hover {
    background: #f8fafc;
}

.au-right {
    text-align: right;
}

.au-id {
    font-family: var(--font-en);
    font-weight: 600;
    color: var(--ink-muted);
}

.au-muted {
    color: var(--ink-muted);
}

.au-empty {
    padding: 2rem 0.75rem !important;
    text-align: center;
    color: var(--ink-muted);
}

.au-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.au-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    overflow: hidden;
    font-family: var(--font-en);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(140deg, var(--g500), var(--g700));
    border-radius: 50%;
}

.au-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.au-name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    min-width: 0;
}

.au-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.12rem 0.42rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #b45309;
    background: #fef3c7;
    border-radius: 99px;
    white-space: nowrap;
}

.au-badge-you {
    color: var(--g700);
    background: var(--g100);
}

.au-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.au-icon-btn {
    display: inline-flex;
    padding: 0.4rem;
    color: #475569;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.au-icon-btn:hover:not(:disabled) {
    color: var(--g700);
    background: var(--g50);
    border-color: #a7f3d0;
}

.au-icon-btn-danger:hover:not(:disabled) {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: #fecaca;
}

/* Protected and self rows: actions are visibly unavailable, not just inert. */
.au-icon-btn:disabled {
    color: #cbd5e1;
    background: #f8fafc;
    cursor: not-allowed;
}

.au-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: 0.825rem;
}

.au-pager-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.au-page-of {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.au-avatar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.35rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid var(--line);
}

.au-avatar {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.05rem;
}

.au-confirm {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #334155;
}

.au-danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.1rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--danger);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.au-danger-btn:hover:not(:disabled) {
    background: #b91c1c;
}

.au-danger-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

@media (max-width: 760px) {
    .au-tools {
        width: 100%;
        margin-left: 0;
    }

    .au-search-input {
        width: 100%;
    }

    .au-search {
        flex: 1 1 10rem;
    }
}

:root[data-theme="dark"] .au-table tbody tr:hover,
:root[data-theme="dark"] .modal-close:hover {
    background: #0b1220;
}

:root[data-theme="dark"] .au-icon-btn {
    color: #cbd5e1;
    background: #0b1220;
}

:root[data-theme="dark"] .au-icon-btn:disabled {
    color: #334155;
    background: #0a1018;
}

:root[data-theme="dark"] .au-icon-btn:hover:not(:disabled) {
    color: #6ee7b7;
    background: #08201a;
    border-color: #10513a;
}

:root[data-theme="dark"] .au-badge {
    color: #fcd34d;
    background: #221a08;
}

:root[data-theme="dark"] .au-badge-you {
    color: #6ee7b7;
    background: #08201a;
}

:root[data-theme="dark"] .au-confirm {
    color: #cbd5e1;
}

/* ==========================================================================
   New Product
   Same layout as the reference, on this app's palette: the theme green for
   every accent, and the shared field / switch / dropzone styles.
   ========================================================================== */

.np-card {
    padding: 1.6rem 1.75rem 1.5rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.np-title {
    margin: 0 0 1.1rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* 12 columns: name 6, brand 3, category 3, sub 6, unit 3, switches 3,
   then six 2-wide numeric cells. */
.np-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 0.95rem;
}

.np-span-2 { grid-column: span 2; }
.np-span-3 { grid-column: span 3; }
.np-span-6 { grid-column: span 6; }
.np-span-12 { grid-column: span 12; }

.np-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.np-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    min-height: 1.35rem;
}

.np-cell .field-label {
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
}

.np-optional {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--g600);
}

/* Select paired with its "+ Add" button */
.np-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.np-select {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.np-select:disabled {
    cursor: not-allowed;
}

.np-add {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex: none;
    padding: 0.55rem 0.8rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--g600);
    background: var(--surface);
    border: 1.5px solid var(--g500);
    border-radius: 99px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.np-add:hover {
    color: #fff;
    background: var(--g500);
}

/* Suggestion Enabled, sitting on the Product Name label row */
.np-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: none;
}

.np-suggestion-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

/* Decimal + Manage Stock pair */
.np-switches {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.75rem;
    padding-top: 0.05rem;
}

.np-switch-cell {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.np-switch-cell .field-label {
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.np-switch-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.np-switch-state {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

/* Product image */
.np-image-block {
    margin-top: 1.1rem;
}

.np-image-block .field-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
}

.np-image {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
}

.np-image img {
    display: block;
    max-width: 8.5rem;
    max-height: 8.5rem;
    object-fit: contain;
}

.np-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.35rem;
}

/* The shared submit button is full width by default; here it is a pill. */
.np-foot .btn-primary {
    width: auto;
    min-width: 7rem;
    padding: 0.6rem 1.6rem;
    border-radius: 99px;
}

/* --------------------------------------------------------------------------
   Responsive: collapse 12 -> 6 -> 3 -> 1 tracks
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
    .np-span-3 { grid-column: span 4; }
    .np-span-2 { grid-column: span 3; }
}

@media (max-width: 1100px) {
    .np-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .np-span-6 { grid-column: span 6; }
    .np-span-3 { grid-column: span 3; }
    .np-span-2 { grid-column: span 2; }
}

@media (max-width: 820px) {
    .np-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .np-span-6,
    .np-span-3,
    .np-span-2 { grid-column: span 2; }

    .np-label-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .np-card {
        padding: 1.15rem;
    }

    .np-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .np-span-6,
    .np-span-3,
    .np-span-2 { grid-column: span 1; }

    .np-control {
        flex-wrap: wrap;
    }

    .np-add {
        width: 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .np-cell .field-label,
:root[data-theme="dark"] .np-switch-cell .field-label,
:root[data-theme="dark"] .np-image-block .field-label,
:root[data-theme="dark"] .np-suggestion-label {
    color: #cbd5e1;
}

:root[data-theme="dark"] .np-add {
    background: #0b1220;
}

:root[data-theme="dark"] .np-add:hover {
    color: #041711;
    background: var(--g500);
}

:root[data-theme="dark"] .np-image {
    border-color: #334155;
}

/* ==========================================================================
   Taxonomy management (Brand / Category / Sub Category / Unit)
   Reference layout, this app's palette: theme green for the card outline and
   the Create action; amber and rose stay for Edit and Delete, which read as
   semantic action colours rather than brand colours.
   ========================================================================== */

.tx-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.tx-card + .tx-card,
.alert + .tx-card {
    margin-top: 1.25rem;
}

.tx-title {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   Create + search toolbar
   -------------------------------------------------------------------------- */

.tx-toolbar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

/* Pill inputs, matching the reference field shape. */
.tx-input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.62rem 1.1rem;
    border-radius: 999px;
}

.tx-select {
    cursor: pointer;
    padding-right: 0.75rem;
}

.tx-create {
    flex: none;
    padding: 0.6rem 1.6rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tx-create:hover:not(:disabled) {
    color: #fff;
    background: var(--g500);
}

.tx-create:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Search sits at the far right of the toolbar. */
.tx-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 24rem;
    min-width: 0;
    margin-left: auto;
    padding: 0.55rem 1.1rem;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.tx-search:focus-within {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 15%);
}

.tx-search-input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: none;
}

.tx-create-error {
    margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   List
   -------------------------------------------------------------------------- */

.tx-list-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tx-row-group {
    display: flex;
    flex-direction: column;
}

.tx-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.85rem;
    padding: 0.4rem 0.5rem 0.4rem 1.25rem;
    background: var(--surface);
    border: 1px solid #eef2f7;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgb(15 23 42 / 9%), 0 1px 2px rgb(15 23 42 / 5%);
}

.tx-row-editing {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 12%);
}

.tx-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    margin-left: -0.55rem;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.18s ease, color 0.15s ease, border-color 0.15s ease;
}

.tx-chev:hover {
    color: var(--g600);
    border-color: var(--g500);
}

.tx-chev-open {
    transform: rotate(90deg);
    color: var(--g600);
    border-color: var(--g500);
}

.tx-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.925rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-badge {
    flex: none;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    white-space: nowrap;
}

.tx-badge-parent {
    color: var(--g700);
    background: var(--g50);
}

.tx-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
}

.tx-btn {
    padding: 0.38rem 1.05rem;
    font-family: inherit;
    font-size: 0.825rem;
    font-weight: 700;
    background: var(--surface);
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tx-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tx-btn-edit {
    color: #b45309;
    border-color: #f59e0b;
}

.tx-btn-edit:hover {
    color: #fff;
    background: #f59e0b;
}

.tx-btn-delete {
    color: #dc2626;
    border-color: #f87171;
}

.tx-btn-delete:hover {
    color: #fff;
    background: #ef4444;
}

.tx-btn-save {
    color: var(--g700);
    border-color: var(--g500);
}

.tx-btn-save:hover:not(:disabled) {
    color: #fff;
    background: var(--g500);
}

.tx-btn-cancel {
    color: #475569;
    border-color: var(--line);
}

.tx-btn-cancel:hover {
    background: #f1f5f9;
}

/* Inline edit fields inside a row */
.tx-edit-fields {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
}

.tx-edit-fields .tx-input {
    padding: 0.42rem 0.95rem;
}

.tx-row-error {
    margin: 0.35rem 0 0 1.25rem;
}

.tx-empty {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.9rem;
}

/* Expanded sub category list under a category row */
.tx-sublist {
    margin: 0.5rem 0 0.2rem 2.6rem;
    padding: 0 0 0 1.1rem;
    list-style: none;
    border-left: 1.5px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tx-sublist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #475569;
}

.tx-sublist-dot {
    width: 5px;
    height: 5px;
    flex: none;
    background: var(--g500);
    border-radius: 50%;
}

.tx-sublist-empty {
    font-size: 0.8rem;
    color: var(--ink-muted);
    font-style: italic;
}

.tx-warning {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.825rem;
    line-height: 1.5;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Import Brand Name
   -------------------------------------------------------------------------- */

/* Sits beside Create and carries an icon, so it needs to be a flex row. */
.tx-import {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bi-error {
    margin: 0 0 0.9rem;
}

.bi-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.bi-group {
    padding: 0.85rem 0.9rem 0.95rem;
    background: var(--g50);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.bi-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.bi-group-name {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bi-all {
    padding: 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--g600);
    background: none;
    border: 0;
    cursor: pointer;
}

.bi-all:hover:not(:disabled) {
    text-decoration: underline;
}

.bi-all:disabled {
    color: var(--ink-muted);
    cursor: default;
}

.bi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bi-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.28rem 0.6rem 0.28rem 0.45rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.bi-chip:hover:not(:disabled) {
    border-color: var(--g500);
}

.bi-chip-on {
    color: #fff;
    background: var(--g500);
    border-color: var(--g500);
}

/* Already a brand: ticked so the list reads as complete, muted so it is
   clear this one is not part of what the button will create. */
.bi-chip-have {
    color: var(--ink-muted);
    background: var(--g100);
    border-color: var(--line);
    cursor: default;
}

.bi-paste {
    display: block;
    margin-top: 1.1rem;
}

.bi-paste-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.bi-paste-box {
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

.bi-count {
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-muted);
}

/* .modal-foot lays nothing out on its own, and the shared submit button is
   full width by default, so the row is made here rather than app-wide. */
.bi-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.bi-foot .btn-primary {
    width: auto;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .tx-search {
        flex: 1 1 100%;
        margin-left: 0;
        order: 3;
    }
}

@media (max-width: 700px) {
    .tx-card {
        padding: 1.1rem;
    }

    .tx-input,
    .tx-create {
        flex: 1 1 100%;
    }

    .tx-row {
        flex-wrap: wrap;
        border-radius: 14px;
        padding: 0.75rem 0.85rem;
    }

    .tx-name {
        flex: 1 1 100%;
        white-space: normal;
    }

    .tx-actions {
        margin-left: auto;
    }

    .tx-edit-fields {
        flex-wrap: wrap;
    }

    .tx-chev {
        margin-left: 0;
    }

    .tx-sublist {
        margin-left: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .tx-row {
    background: #0b1220;
    border-color: #1e293b;
    box-shadow: none;
}

:root[data-theme="dark"] .tx-chev,
:root[data-theme="dark"] .tx-btn,
:root[data-theme="dark"] .tx-create,
:root[data-theme="dark"] .tx-search,
:root[data-theme="dark"] .tx-input {
    background: #0b1220;
}

:root[data-theme="dark"] .tx-badge {
    color: #94a3b8;
    background: #1e293b;
}

:root[data-theme="dark"] .tx-badge-parent {
    color: #6ee7b7;
    background: #08201a;
}

:root[data-theme="dark"] .tx-btn-cancel:hover {
    background: #1e293b;
}

:root[data-theme="dark"] .tx-sublist-item {
    color: #cbd5e1;
}

:root[data-theme="dark"] .tx-warning {
    color: #fcd34d;
    background: #221a08;
    border-color: #6b4310;
}

/* ==========================================================================
   Products List
   Reference layout on this app's palette: the header band and card outline
   take the theme green, and the zebra stripe uses the same green tint.
   ========================================================================== */

.pl-card {
    padding: 1.4rem 1.6rem 1.5rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.pl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.pl-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.pl-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    /* Wide enough for the search plus the CSV pair, and allowed to wrap rather
       than squeezing the search down to a box nobody can read a term in. */
    flex: 0 1 44rem;
    flex-wrap: wrap;
    min-width: 0;
}

.pl-tools .tx-search {
    flex: 1 1 15rem;
    /* Below this the placeholder is cut mid-word, so the buttons drop to the
       next line instead. */
    min-width: 13rem;
    margin-left: 0;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.pl-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.pl-table {
    width: 100%;
    min-width: 68rem;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.pl-table thead th {
    padding: 0.6rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--g500);
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid rgb(255 255 255 / 22%);
}

.pl-table thead th:last-child {
    border-right: 0;
}

.pl-table tbody td {
    padding: 0.6rem 0.7rem;
    border-right: 1px solid #eef2f7;
    border-top: 1px solid #eef2f7;
    color: #334155;
    vertical-align: middle;
}

.pl-table tbody td:last-child {
    border-right: 0;
}

.pl-table tbody tr:first-child td {
    border-top: 0;
}

/* Zebra stripe, tinted with the theme green rather than plain grey. */
.pl-table tbody tr:nth-child(even) td {
    background: #f4fdf8;
}

.pl-table tbody tr:hover td {
    background: var(--g50);
}

.pl-name {
    font-weight: 600;
    color: var(--ink);
    min-width: 14rem;
}

.pl-center {
    text-align: center;
}

.pl-nowrap {
    white-space: nowrap;
}

.pl-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pl-actions .tx-btn {
    padding: 0.3rem 0.85rem;
    font-size: 0.775rem;
}

.pl-empty {
    padding: 2.25rem 0.7rem !important;
    text-align: center;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .pl-card {
        padding: 1.1rem;
    }

    .pl-tools {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .pl-table tbody td {
    color: #cbd5e1;
    border-color: #1e293b;
}

:root[data-theme="dark"] .pl-table tbody tr:nth-child(even) td {
    background: #0b1220;
}

:root[data-theme="dark"] .pl-table tbody tr:hover td {
    background: #08201a;
}

:root[data-theme="dark"] .pl-name {
    color: #e2e8f0;
}

:root[data-theme="dark"] .pl-table-wrap {
    border-color: #1e293b;
}

/* ==========================================================================
   New / Edit Product — presentation pass
   Same fields in the same order; what changes is hierarchy, rhythm and the
   image area, which previously left most of the card empty.
   ========================================================================== */

/* Card header */

.np-head {
    margin-bottom: 1.35rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line);
}

.np-card .np-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.np-sub {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

/* Section headings: a small caps label with a rule running to the right, so
   the twelve fields read as three groups instead of one wall. */

.np-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.6rem 0 0.85rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--g700);
    white-space: nowrap;
}

.np-section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
}

/* The first section heading sits right under the header divider. */
.np-head + .np-section-title,
.alert + .np-section-title {
    margin-top: 0;
}

/* Consistent control height across inputs and selects. */
.np-cell .field-input {
    height: 2.8rem;
}

/* Browser spinners on five adjacent number fields looked untidy. */
.np-cell input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.np-cell input[type="number"]::-webkit-outer-spin-button,
.np-cell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Image band
   -------------------------------------------------------------------------- */

.np-image-block {
    margin-top: 0;
}

.np-drop {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    background: #fbfdfc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.np-drop:hover,
.np-drop-over {
    border-color: var(--g500);
    background: var(--g50);
}

.np-drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    color: var(--g600);
    background: var(--g100);
    border-radius: 10px;
}

.np-drop-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.np-drop-cta {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.np-drop-hint {
    margin-top: 0.1rem;
    font-size: 0.775rem;
    color: var(--ink-muted);
}

/* Selected / stored image, same band shape as the dropzone. */
.np-image-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.np-image-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0.3rem;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.np-image-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.np-image-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.np-image-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.np-image-note {
    margin: 0.1rem 0 0;
    font-size: 0.775rem;
    color: var(--ink-muted);
}

.np-image-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
}

.pf-btn-danger {
    color: #dc2626;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.np-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.np-required-note {
    margin: 0;
    font-size: 0.775rem;
    color: var(--ink-muted);
}

.np-foot-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

@media (max-width: 560px) {
    .np-drop,
    .np-image-row {
        flex-wrap: wrap;
    }

    .np-image-actions,
    .np-foot-actions {
        width: 100%;
        margin-left: 0;
    }

    .np-foot-actions .pf-btn,
    .np-foot-actions .btn-primary {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .np-section-title {
    color: #6ee7b7;
}

:root[data-theme="dark"] .np-drop {
    background: #0b1220;
    border-color: #334155;
}

:root[data-theme="dark"] .np-drop:hover,
:root[data-theme="dark"] .np-drop-over {
    background: #08201a;
    border-color: var(--g500);
}

:root[data-theme="dark"] .np-drop-icon {
    color: #6ee7b7;
    background: #08201a;
}

:root[data-theme="dark"] .np-drop-cta,
:root[data-theme="dark"] .np-image-name {
    color: #e2e8f0;
}

:root[data-theme="dark"] .np-image-thumb {
    background: #0b1220;
}

:root[data-theme="dark"] .pf-btn-danger {
    color: #fb7185;
}

/* ==========================================================================
   Customer
   Reference layout on this app's palette: a four-across add form with pill
   fields, then the customer list.
   ========================================================================== */

.cu-card {
    padding: 1.5rem 1.7rem 1.4rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.cu-title {
    margin: 0 0 1.1rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.cu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem 1.5rem;
}

.cu-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cu-cell .field-label {
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

/* Pill fields, matching the reference control shape. */
.cu-input {
    height: 2.85rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

.cu-select {
    cursor: pointer;
    padding-right: 0.85rem;
}

/* Amount is a number field; the spinner adds noise next to a pill. */
.cu-cell input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.cu-cell input[type="number"]::-webkit-outer-spin-button,
.cu-cell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cu-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.cu-create {
    padding: 0.55rem 1.5rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.cu-create:hover:not(:disabled) {
    color: #fff;
    background: var(--g500);
}

.cu-create:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   List
   -------------------------------------------------------------------------- */

.cu-list {
    margin-top: 1.35rem;
}

.cu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    margin-left: 0.55rem;
    padding: 0.1rem 0.45rem;
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--g700);
    background: var(--g100);
    border-radius: 999px;
    vertical-align: middle;
}

.cu-type {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.725rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    white-space: nowrap;
}

/* Direction of the opening balance: green when they owe us, rose when we owe. */
.cu-balance {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
}

.cu-balance-receivable {
    color: var(--g700);
    background: var(--g100);
}

.cu-balance-payable {
    color: #b45309;
    background: #fef3c7;
}

/* The row currently loaded into the form above. */
.cu-row-editing td {
    background: var(--g50) !important;
    box-shadow: inset 2px 0 0 var(--g500);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
    .cu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .cu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cu-card {
        padding: 1.15rem;
    }

    .cu-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cu-foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .cu-create {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .cu-cell .field-label {
    color: #cbd5e1;
}

:root[data-theme="dark"] .cu-input,
:root[data-theme="dark"] .cu-create {
    background: #0b1220;
}

:root[data-theme="dark"] .cu-type {
    color: #cbd5e1;
    background: #1e293b;
}

:root[data-theme="dark"] .cu-count,
:root[data-theme="dark"] .cu-balance-receivable {
    color: #6ee7b7;
    background: #08201a;
}

:root[data-theme="dark"] .cu-balance-payable {
    color: #fcd34d;
    background: #221a08;
}

:root[data-theme="dark"] .cu-row-editing td {
    background: #08201a !important;
}

/* ==========================================================================
   Customer List
   Reference layout on this app's palette: green header band, pill search and
   per-page control, and a Previous / Page X Of Y / Next footer.
   ========================================================================== */

.cl-card {
    padding: 1.5rem 1.7rem 1.4rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.cl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.cl-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.cl-sub {
    margin: 0.3rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.cl-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cl-search {
    width: 16rem;
    height: 2.85rem;
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
}

.cl-per-page {
    height: 2.85rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Table tweaks on top of the shared .pl-table
   -------------------------------------------------------------------------- */

.cl-table thead th {
    /* Every action column heading is centred, as in the reference. */
    letter-spacing: 0.05em;
}

.cl-name {
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    white-space: nowrap;
}

.cl-upper {
    text-transform: uppercase;
}

.cl-muted {
    color: var(--ink-muted);
}

.pl-right {
    text-align: right;
}

/* Balance reads "Receivable 1250.00" — green when they owe us, amber when we owe. */
.cl-balance {
    font-weight: 700;
    white-space: nowrap;
}

.cl-balance-receivable {
    color: var(--g600);
}

.cl-balance-payable {
    color: #b45309;
}

/* --------------------------------------------------------------------------
   Footer pager
   -------------------------------------------------------------------------- */

.cl-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.cl-page-of {
    font-size: 0.925rem;
    color: var(--ink);
}

.cl-page-btn {
    min-width: 6.5rem;
    padding: 0.6rem 1.35rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 600;
    color: #334155;
    background: #eef2f7;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.cl-page-btn:hover:not(:disabled) {
    color: #fff;
    background: var(--g500);
}

.cl-page-btn:disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Dialogs: add transaction, ledger, report
   -------------------------------------------------------------------------- */

.cl-modal-empty {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--ink-muted);
}

.cl-radio-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.cl-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
}

.cl-radio:hover {
    border-color: var(--g500);
}

.cl-radio-on {
    border-color: var(--g500);
    background: var(--g50);
}

.cl-radio input {
    margin-top: 0.2rem;
    accent-color: var(--g500);
    flex: none;
}

.cl-radio b {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.cl-radio i {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    font-style: normal;
    line-height: 1.4;
    color: var(--ink-muted);
}

.cl-ledger-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.1rem;
    padding: 0.9rem 1rem;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.cl-ledger-key {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.cl-ledger-table {
    min-width: 34rem;
}

.cl-dir {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}

.cl-dir-in {
    color: var(--g700);
    background: var(--g100);
}

.cl-dir-out {
    color: #b45309;
    background: #fef3c7;
}

.cl-report-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
    margin: 0 0 1.15rem;
}

.cl-report-list div {
    min-width: 0;
}

.cl-report-list dt {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.cl-report-list dd {
    margin: 0.1rem 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    word-break: break-word;
}

.cl-report-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.15rem;
}

/* The Customer List button on the Add Customer card */

.cu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.cu-head .cu-title {
    margin: 0;
}

.cu-list-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--g600);
    text-decoration: none;
    background: var(--surface);
    border: 1.5px solid var(--g500);
    border-radius: 999px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.cu-list-link:hover {
    color: #fff;
    background: var(--g500);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .cl-card {
        padding: 1.15rem;
    }

    .cl-tools {
        width: 100%;
    }

    .cl-search {
        flex: 1 1 10rem;
        width: auto;
    }
}

@media (max-width: 620px) {
    .cl-radio-row,
    .cl-report-list,
    .cl-report-tiles,
    .cl-ledger-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .cl-pager {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cl-page-btn {
        flex: 1 1 0;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .cl-search,
:root[data-theme="dark"] .cl-per-page,
:root[data-theme="dark"] .cu-list-link,
:root[data-theme="dark"] .cl-radio {
    background: #0b1220;
}

:root[data-theme="dark"] .cl-page-btn {
    color: #cbd5e1;
    background: #1e293b;
}

:root[data-theme="dark"] .cl-page-btn:disabled {
    color: #475569;
    background: #0f172a;
}

:root[data-theme="dark"] .cl-ledger-summary {
    background: #0b1220;
}

:root[data-theme="dark"] .cl-radio-on {
    background: #08201a;
}

:root[data-theme="dark"] .cl-radio b,
:root[data-theme="dark"] .cl-report-list dd {
    color: #e2e8f0;
}

:root[data-theme="dark"] .cl-dir-in {
    color: #6ee7b7;
    background: #08201a;
}

:root[data-theme="dark"] .cl-dir-out {
    color: #fcd34d;
    background: #221a08;
}

:root[data-theme="dark"] .cl-balance-payable {
    color: #fcd34d;
}

/* ==========================================================================
   Customer Ledger (statement)
   Reference layout on this app's palette: the table header band takes the
   theme green, and receivable / payable keep their semantic green and rose.
   ========================================================================== */

.lg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.lg-print {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.5rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lg-print:hover {
    color: #fff;
    background: var(--g500);
}

.lg-card,
.lg-sheet {
    padding: 1.6rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

/* --------------------------------------------------------------------------
   Statement header: contact left, business centre, closing balance right
   -------------------------------------------------------------------------- */

.lg-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 1.5rem;
    margin-bottom: 1.6rem;
}

.lg-party-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.lg-party-line {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    color: #475569;
}

.lg-business {
    padding: 0.85rem 1.35rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.lg-business-logo {
    display: block;
    max-width: 8rem;
    max-height: 2.2rem;
    margin: 0 auto 0.4rem;
    object-fit: contain;
}

.lg-business-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.lg-business-line {
    margin: 0.1rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}

.lg-closing {
    font-size: 1.05rem;
    color: var(--ink);
    text-align: right;
}

.lg-closing-value {
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Period filters
   -------------------------------------------------------------------------- */

.lg-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.35rem;
}

.lg-filter {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lg-filter-label {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.lg-input {
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
}

/* The printed sheet states the period as text instead of controls. */
.lg-period-print {
    display: none;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.lg-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.lg-table {
    min-width: 58rem;
}

.lg-table thead th {
    background: var(--g500);
}

.lg-table tbody tr:nth-child(even) td {
    background: transparent;
}

.lg-table tbody tr:hover td {
    background: var(--g50);
}

.lg-opening-row td {
    font-style: italic;
    color: var(--ink-muted) !important;
}

.lg-ago {
    font-size: 0.8rem;
    font-weight: 600;
}

.lg-ago-d {
    color: #d97706;
}

.lg-ago-h {
    color: #2563eb;
}

.lg-ago-m {
    color: var(--g600);
}

.lg-balance {
    font-weight: 600;
    white-space: nowrap;
}

.lg-balance-receivable {
    color: var(--g600);
}

.lg-balance-payable {
    color: var(--danger);
}

.lg-zero {
    color: #334155;
}

.lg-total-row td {
    padding: 0.7rem;
    font-weight: 700;
    background: #f8fafc;
    border-top: 2px solid var(--line);
}

.lg-total-label {
    text-align: right;
}

.lg-action {
    padding: 0.3rem 1.05rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--g700);
    background: var(--surface);
    border: 1.5px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lg-action:hover {
    color: #fff;
    background: var(--g500);
}

/* --------------------------------------------------------------------------
   Signatures
   -------------------------------------------------------------------------- */

.lg-signatures {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 5rem;
}

.lg-sign {
    padding-top: 0.45rem;
    min-width: 13rem;
    font-size: 0.95rem;
    color: var(--ink);
    border-top: 1px solid #94a3b8;
    text-align: left;
}

.lg-sign:last-child {
    text-align: right;
}

/* Detail dialog */

.lg-detail {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
}

.lg-detail dt {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.lg-detail dd {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .lg-head {
        grid-template-columns: minmax(0, 1fr);
        text-align: left;
    }

    .lg-closing {
        text-align: left;
    }

    .lg-business {
        justify-self: start;
    }

    .lg-filters {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }
}

@media (max-width: 620px) {
    .lg-sheet {
        padding: 1.15rem;
    }

    .lg-signatures {
        flex-direction: column;
        align-items: stretch;
        gap: 3rem;
        margin-top: 3rem;
    }

    .lg-sign:last-child {
        text-align: left;
    }

    .lg-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Print: just the statement, on white
   -------------------------------------------------------------------------- */

@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }

    /* Everything that is not the statement is dropped. */
    .sidebar,
    .topbar,
    .sidebar-reopen,
    .sidebar-scrim,
    .lg-no-print,
    .alert {
        display: none !important;
    }

    .layout,
    .layout-body,
    .layout-main {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
    }

    /*
     * A statement is a list report addressed to somebody, so it wears the same
     * letterhead as the other nine and adds one band saying who and what the
     * closing figure is.
     */

    /* The letterhead has already given the shop's name, address and mark. */
    .lg-business {
        display: none !important;
    }

    .lg-head {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8mm;
        margin: 0 0 3mm !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    .lg-party-name {
        margin: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #000 !important;
    }

    .lg-party-line {
        margin: 0 !important;
        font-size: 8.5px !important;
        line-height: 1.4;
        color: #333 !important;
    }

    /* The one figure the reader is looking for, so it is the one thing on the
       band set larger — and black, because green survives a mono printer as an
       indeterminate grey. */
    .lg-closing {
        flex: none;
        text-align: right;
        font-size: 8.5px !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #333 !important;
    }

    .lg-closing-value {
        display: block;
        margin-top: 0.5mm;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0;
        text-transform: none;
        color: #000 !important;
        background: none !important;
    }

    .lg-period-print {
        display: block;
        margin: 0 0 2mm;
        font-size: 8.5px;
        color: #333;
    }

    /* Every balance in the body prints as a figure, not as a colour. */
    .lg-table .lg-balance,
    .lg-table .lg-zero,
    .lg-total-row .lg-balance {
        color: #000 !important;
        background: none !important;
    }

    /* The sheet, the table, the header band, the row breaks, the figure
       colours and the closing row are all handled once for every list by the
       printed-lists block below. */
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .lg-party-line {
    color: #94a3b8;
}

:root[data-theme="dark"] .lg-business-line {
    color: #cbd5e1;
}

:root[data-theme="dark"] .lg-input,
:root[data-theme="dark"] .lg-print,
:root[data-theme="dark"] .lg-action {
    background: #0b1220;
}

:root[data-theme="dark"] .lg-total-row td {
    background: #0b1220;
}

:root[data-theme="dark"] .lg-zero {
    color: #cbd5e1;
}

:root[data-theme="dark"] .lg-sign {
    border-color: #475569;
}

/* ==========================================================================
   Create Purchase
   Reference layout on this app's palette: three stacked cards, the theme green
   for outlines, the line-item header band and every action.
   ========================================================================== */

.pu-card {
    padding: 1.5rem 1.7rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.pu-card + .pu-card,
.alert + .pu-card {
    margin-top: 1.35rem;
}

/* --------------------------------------------------------------------------
   Header: supplier / date on one row, product / barcode on the next
   -------------------------------------------------------------------------- */

.pu-head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 2.25rem;
}

.pu-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pu-field .field-label {
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
}

.pu-control {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.pu-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

select.pu-input {
    cursor: pointer;
}

.pu-add {
    flex: none;
    padding: 0.55rem 1.05rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pu-add:hover {
    color: #fff;
    background: var(--g500);
}

/* Date field with its leading icon */
.pu-date {
    position: relative;
    display: flex;
    align-items: center;
}

.pu-date-icon {
    position: absolute;
    left: 1rem;
    color: var(--ink);
    pointer-events: none;
}

.pu-date .pu-input {
    padding-left: 2.6rem;
}

.pu-invoice {
    margin: 1.1rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Line items
   -------------------------------------------------------------------------- */

.pu-lines-card {
    padding: 1.1rem 1.2rem;
}

.pu-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.pu-table {
    min-width: 74rem;
    font-size: 0.825rem;
}

.pu-table thead th {
    background: var(--g500);
}

.pu-table tbody td {
    padding: 0.45rem 0.5rem;
    vertical-align: middle;
}

.pu-table tbody tr:nth-child(even) td {
    background: transparent;
}

/* Inputs sit inside cells, so they lose the pill shape and shrink to fit. */
.pu-cell {
    width: 100%;
    min-width: 6rem;
    height: 2.25rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.825rem;
    border-radius: 8px;
}

.pu-cell-sm {
    min-width: 5rem;
}

.pu-cell-num {
    min-width: 5.5rem;
    text-align: right;
}

.pu-cell::-webkit-outer-spin-button,
.pu-cell::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pu-cell[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.pu-unit {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.675rem;
    font-weight: 600;
    color: var(--ink-muted);
    background: #f1f5f9;
    border-radius: 999px;
}

/* Computed columns */
.pu-margin,
.pu-total {
    font-family: var(--font-en);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.pu-margin {
    color: var(--g600);
}

/* Buying above the selling price is worth shouting about. */
.pu-margin-bad {
    color: var(--danger);
}

.pu-total {
    color: var(--ink);
}

.pu-remove {
    display: inline-flex;
    padding: 0.35rem;
    color: var(--danger);
    background: var(--surface);
    border: 1px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
}

.pu-remove:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.pu-lines-error {
    margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   Note + money
   -------------------------------------------------------------------------- */

.pu-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.pu-note {
    display: flex;
    flex-direction: column;
}

.pu-note-label {
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.pu-textarea {
    min-height: 11rem;
    resize: vertical;
    line-height: 1.55;
}

.pu-money {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.pu-money-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pu-money-label {
    flex: 1 1 auto;
    font-size: 1rem;
    color: var(--ink);
}

.pu-money-strong {
    font-weight: 700;
}

.pu-money-input {
    flex: 0 0 13rem;
    height: 2.6rem;
    padding: 0.5rem 0.9rem;
    text-align: right;
    border-radius: 8px;
}

.pu-money-input[readonly] {
    background: #f8fafc;
    color: var(--ink);
    cursor: default;
}

.pu-money-input::-webkit-outer-spin-button,
.pu-money-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pu-money-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.pu-payby {
    margin: 0.6rem 0 0;
    font-size: 1rem;
    color: var(--ink);
}

.pu-account {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.6rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
}

/* The reference outlines the payment box, so it reads as the field to fill. */
.pu-payment {
    border-color: #fca5a5;
}

.pu-payment:focus {
    border-color: var(--g500);
}

.pu-money-error {
    text-align: right;
}

.pu-due {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
    text-align: right;
}

.pu-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.pu-actions .btn-primary {
    width: auto;
    padding: 0.6rem 1.6rem;
    border-radius: 999px;
}

.pu-dialog-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .pu-head-grid,
    .pu-foot-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .pu-money-input {
        flex: 0 0 10rem;
    }
}

@media (max-width: 620px) {
    .pu-card {
        padding: 1.15rem;
    }

    .pu-control {
        flex-wrap: wrap;
    }

    .pu-add {
        width: 100%;
        text-align: center;
    }

    .pu-money-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .pu-money-input,
    .pu-account {
        flex: 1 1 100%;
    }

    .pu-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .pu-actions .btn-primary,
    .pu-actions .pf-btn {
        width: 100%;
        justify-content: center;
    }

    .pu-dialog-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .pu-input,
:root[data-theme="dark"] .pu-add,
:root[data-theme="dark"] .pu-cell,
:root[data-theme="dark"] .pu-account,
:root[data-theme="dark"] .pu-money-input,
:root[data-theme="dark"] .pu-remove {
    background: #0b1220;
}

:root[data-theme="dark"] .pu-money-input[readonly] {
    background: #0a1018;
}

:root[data-theme="dark"] .pu-unit {
    color: #94a3b8;
    background: #1e293b;
}

:root[data-theme="dark"] .pu-total {
    color: #e2e8f0;
}

/* --------------------------------------------------------------------------
   Create Purchase — line row corrections
   Serial is a button that opens a per-unit dialog, Action is a text link, and
   the margin columns read as percentages.
   -------------------------------------------------------------------------- */

.pu-serial {
    padding: 0.3rem 0.85rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--g700);
    background: var(--g100);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pu-serial:hover {
    color: #fff;
    background: var(--g500);
}

/* Once serials are captured the button reports how many. */
.pu-serial-set {
    color: var(--g700);
    background: var(--surface);
    border-color: var(--g500);
}

/* The reference uses a plain red word rather than a button. */
.pu-remove {
    padding: 0.2rem 0.1rem;
    font-family: inherit;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--danger);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.pu-remove:hover {
    color: #b91c1c;
    text-decoration: underline;
    background: transparent;
}

:root[data-theme="dark"] .pu-serial {
    color: #6ee7b7;
    background: #08201a;
}

:root[data-theme="dark"] .pu-serial-set {
    background: #0b1220;
}

/* ==========================================================================
   Add Serial Numbers dialog
   Rows are added and removed freely; the count drives the line quantity.
   ========================================================================== */

.modal-head-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
}

/* "All clear", sitting on the title row */
.sn-clear {
    padding: 0.2rem 0.15rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--g600);
    background: transparent;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.sn-clear:hover {
    color: var(--g700);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Scan mode
   -------------------------------------------------------------------------- */

/* Sits beside "All clear" on the title row, and reads as pressed while on. */
.sn-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--g600);
    background: transparent;
    border: 1.5px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.sn-scan-btn:hover {
    color: #fff;
    background: var(--g500);
}

.sn-scan-btn-on {
    color: #fff;
    background: var(--g500);
}

.sn-scan {
    margin-bottom: 0.9rem;
    padding: 0.7rem 0.8rem 0.6rem;
    background: var(--g50);
    border: 1px solid var(--g500);
    border-radius: 10px;
}

.sn-scan-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    color: var(--g600);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.sn-scan-field:focus-within {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px var(--g100);
}

.sn-scan-input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
}

.sn-scan-count {
    flex: none;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-muted);
    white-space: nowrap;
}

.sn-scan-note {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

.sn-scan-added {
    font-weight: 700;
    color: var(--g700);
}

/* A serial scanned twice is the one thing the rows must not hold, so it is
   called out rather than reported as a quiet no-op. */
.sn-scan-duplicate {
    font-weight: 700;
    color: var(--danger);
}

.sn-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-height: 24rem;
    overflow-y: auto;
    /* Room for the focus ring, which the scroll container would otherwise clip. */
    padding: 0.15rem;
    margin: -0.15rem;
}

.sn-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sn-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.75rem;
    padding: 0.55rem 0.95rem;
    border-radius: 10px;
}

/* Rose outlined pill, matching the reference. */
.sn-remove {
    flex: none;
    padding: 0.5rem 1.15rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--danger);
    background: var(--surface);
    border: 2px solid #f87171;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sn-remove:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.sn-add {
    display: inline-flex;
    margin-top: 0.85rem;
    padding: 0.5rem 1.15rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sn-add:hover {
    color: #fff;
    background: var(--g500);
}

.sn-hint {
    margin: 0.9rem 0 0;
    font-size: 0.775rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.sn-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
}

.sn-cancel,
.sn-save {
    padding: 0.5rem 1.4rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 700;
    background: var(--surface);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sn-cancel {
    color: var(--danger);
    border: 2px solid #f87171;
}

.sn-cancel:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.sn-save {
    color: var(--g600);
    border: 2px solid var(--g500);
}

.sn-save:hover {
    color: #fff;
    background: var(--g500);
}

@media (max-width: 480px) {
    .sn-row {
        gap: 0.5rem;
    }

    .sn-remove {
        padding: 0.5rem 0.85rem;
    }

    .sn-actions {
        flex-direction: column-reverse;
    }

    .sn-cancel,
    .sn-save,
    .sn-add {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

:root[data-theme="dark"] .sn-input,
:root[data-theme="dark"] .sn-remove,
:root[data-theme="dark"] .sn-add,
:root[data-theme="dark"] .sn-cancel,
:root[data-theme="dark"] .sn-save {
    background: #0b1220;
}

/* ==========================================================================
   Purchase List
   Reference layout on this app's palette: header outside the bordered table
   card, theme-green header band, and four coloured row actions.
   ========================================================================== */

.ps-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.ps-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.ps-count {
    margin: 0.25rem 0 0;
    font-size: 0.925rem;
    color: var(--ink-muted);
}

.ps-tools {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.ps-search {
    width: 15rem;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

.ps-per-page {
    height: 2.9rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}

/* The table sits in its own outlined card, as in the reference. */
.ps-card {
    padding: 0.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.ps-table-wrap {
    border: 0;
}

.ps-table {
    min-width: 62rem;
}

.ps-table thead th {
    background: var(--g500);
}

.ps-invoice {
    font-family: var(--font-en);
    font-weight: 600;
}

/* Supplier name over its address, which is how the reference stacks it. */
.ps-supplier {
    display: block;
    font-weight: 600;
    color: var(--ink);
}

.ps-supplier-address {
    display: block;
    font-size: 0.775rem;
    color: var(--ink-muted);
}

.ps-due {
    font-weight: 700;
    color: var(--danger);
}

.ps-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ps-btn {
    padding: 0.32rem 0.95rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--surface);
    border: 1.5px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.ps-btn-view {
    color: var(--g700);
    border-color: var(--g500);
}

.ps-btn-view:hover {
    color: #fff;
    background: var(--g500);
}

.ps-btn-return {
    color: #b45309;
    border-color: #f59e0b;
}

.ps-btn-return:hover:not(:disabled) {
    color: #fff;
    background: #f59e0b;
}

.ps-btn-edit {
    color: var(--g700);
    border-color: var(--g500);
}

.ps-btn-edit:hover {
    color: #fff;
    background: var(--g500);
}

.ps-btn-delete {
    color: var(--danger);
    border-color: #f87171;
}

.ps-btn-delete:hover {
    color: #fff;
    background: var(--danger);
}

/* Return belongs to a screen that does not exist yet. */
.ps-btn:disabled {
    color: #cbd5e1;
    background: #f8fafc;
    border-color: var(--line);
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Pager + print
   -------------------------------------------------------------------------- */

.ps-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.35rem;
}

.ps-page-btn {
    padding: 0.6rem 1.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: #475569;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
}

.ps-page-btn:hover:not(:disabled) {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
}

.ps-page-btn:disabled {
    color: #94a3b8;
    background: #f1f5f9;
    border-color: transparent;
    cursor: not-allowed;
}

.ps-page-of {
    font-size: 0.95rem;
    color: var(--ink);
}

.ps-print-row {
    margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   View dialog
   -------------------------------------------------------------------------- */

.pv-detail {
    margin-bottom: 1.1rem;
}

.pv-table-wrap {
    margin-bottom: 1.1rem;
}

.pv-serial {
    max-width: 12rem;
    font-size: 0.775rem;
    word-break: break-word;
}

.pv-money {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.6rem 1rem;
}

.pv-money div {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.75rem;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.pv-money span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.pv-money b {
    margin-top: 0.15rem;
    font-family: var(--font-en);
    font-size: 1rem;
}

.pv-money-due b {
    color: var(--danger);
}

.pv-note {
    margin: 1rem 0 0;
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #334155;
    background: #f8fafc;
    border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
    .ps-tools {
        width: 100%;
    }

    .ps-search {
        flex: 1 1 10rem;
        width: auto;
    }

    .ps-foot {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .ps-search,
:root[data-theme="dark"] .ps-per-page,
:root[data-theme="dark"] .ps-btn,
:root[data-theme="dark"] .ps-page-btn {
    background: #0b1220;
}

:root[data-theme="dark"] .ps-btn:disabled,
:root[data-theme="dark"] .ps-page-btn:disabled {
    color: #334155;
    background: #0a1018;
}

:root[data-theme="dark"] .pv-money div,
:root[data-theme="dark"] .pv-note {
    background: #0b1220;
}

:root[data-theme="dark"] .pv-note {
    color: #cbd5e1;
}

:root[data-theme="dark"] .ps-supplier {
    color: #e2e8f0;
}

/* ==========================================================================
   Purchases Return
   Reference layout on this app's palette: three info blocks, the line table
   with per-serial selection, then the note and the action.
   ========================================================================== */

.pr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pr-return-no {
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.pr-title {
    margin: 1.1rem 0 1.25rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-align: center;
}

.pr-card {
    padding: 1.5rem 1.7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.pr-card + .pr-card,
.alert + .pr-card {
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Supplier / purchase / summary
   -------------------------------------------------------------------------- */

.pr-head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 20rem);
    gap: 2rem;
    align-items: start;
}

.pr-block-title {
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}

.pr-block p {
    margin: 0 0 0.45rem;
    font-size: 0.95rem;
    color: #334155;
    word-break: break-word;
}

.pr-key {
    font-weight: 700;
    color: var(--ink);
}

/* The summary sits in its own outlined panel, as in the reference. */
.pr-summary {
    padding: 1.15rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.pr-summary-title {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.pr-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.pr-summary-row span {
    font-size: 1rem;
    color: var(--ink);
}

.pr-summary-input {
    flex: 0 0 9rem;
    height: 2.4rem;
    padding: 0.45rem 0.8rem;
    text-align: right;
    background: #f8fafc;
    border-radius: 8px;
    cursor: default;
}

/* --------------------------------------------------------------------------
   Lines
   -------------------------------------------------------------------------- */

.pr-lines-card {
    padding: 1.1rem 1.2rem;
}

.pr-table {
    min-width: 68rem;
    font-size: 0.825rem;
}

.pr-table thead th {
    background: var(--g500);
}

.pr-table tbody td {
    padding: 0.55rem 0.6rem;
    vertical-align: middle;
}

.pr-table tbody tr:nth-child(even) td {
    background: transparent;
}

/* A ticked line is visibly part of the return. */
.pr-row-on td {
    background: var(--g50) !important;
    box-shadow: inset 2px 0 0 var(--g500);
}

.pr-select {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--g500);
    cursor: pointer;
}

.pr-select:disabled {
    cursor: not-allowed;
}

.pr-qty {
    width: 100%;
    min-width: 6rem;
    height: 2.2rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.825rem;
    text-align: right;
    border-radius: 8px;
}

.pr-qty:disabled {
    background: #f8fafc;
    cursor: not-allowed;
}

.pr-qty[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

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

.pr-note-cell {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: var(--ink-muted);
    text-align: right;
}

.pr-note-bad {
    color: var(--danger);
    font-weight: 700;
}

/* Serial chips, each with its own tick */
.pr-serials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pr-serial {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.pr-serial:hover {
    border-color: var(--g500);
}

.pr-serial input {
    width: 0.9rem;
    height: 0.9rem;
    accent-color: var(--g500);
    cursor: pointer;
}

/* Already returned, so no longer on offer. */
.pr-serial-used {
    color: #94a3b8;
    text-decoration: line-through;
    cursor: not-allowed;
}

.pr-serial-used input {
    cursor: not-allowed;
}

.pr-total {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--danger);
    text-align: right;
}

/* --------------------------------------------------------------------------
   Note + action
   -------------------------------------------------------------------------- */

.pr-note-label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.pr-textarea {
    width: 100%;
    min-height: 7rem;
    resize: vertical;
    line-height: 1.55;
}

.pr-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.2rem;
}

.pr-actions .btn-primary {
    width: auto;
    padding: 0.6rem 1.6rem;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .pr-head-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 620px) {
    .pr-card {
        padding: 1.15rem;
    }

    .pr-title {
        font-size: 1.3rem;
    }

    .pr-summary-input {
        flex: 0 0 7rem;
    }

    .pr-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .pr-actions .btn-primary,
    .pr-actions .pf-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .pr-block p {
    color: #cbd5e1;
}

:root[data-theme="dark"] .pr-summary-input,
:root[data-theme="dark"] .pr-qty:disabled {
    background: #0a1018;
}

:root[data-theme="dark"] .pr-qty,
:root[data-theme="dark"] .pr-textarea {
    background: #0b1220;
}

:root[data-theme="dark"] .pr-serial {
    color: #cbd5e1;
    background: #1e293b;
}

:root[data-theme="dark"] .pr-row-on td {
    background: #08201a !important;
}

/* ==========================================================================
   Purchase Return List
   ========================================================================== */

.rl-card {
    padding: 1.6rem 1.8rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 16px;
}

.rl-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.rl-count {
    margin: 0.2rem 0 0;
    font-size: 0.95rem;
    color: var(--ink-muted);
}

/* Search and page size sit on their own row, right aligned. */
.rl-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin: 1.1rem 0;
}

.rl-search {
    width: 20rem;
    height: 2.9rem;
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
}

.rl-per-page {
    height: 2.9rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}

.rl-table-wrap {
    border: 0;
}

.rl-table {
    min-width: 62rem;
}

.rl-table thead th {
    background: var(--g500);
}

.rl-ref {
    font-family: var(--font-en);
    font-weight: 600;
}

/* Which purchase the return came off. */
.rl-against {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--ink-muted);
}

@media (max-width: 820px) {
    .rl-card {
        padding: 1.15rem;
    }

    .rl-tools {
        justify-content: stretch;
    }

    .rl-search {
        flex: 1 1 10rem;
        width: auto;
    }
}

:root[data-theme="dark"] .rl-search,
:root[data-theme="dark"] .rl-per-page {
    background: #0b1220;
}

/* ==========================================================================
   Purchase Return Details (printable)
   ========================================================================== */

.rv-toolbar {
    margin-bottom: 1.1rem;
}

.rv-sheet {
    max-width: 52rem;
    margin: 0 auto;
    padding: 2rem 2.25rem 2.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.rv-head {
    text-align: center;
    margin-bottom: 1.6rem;
}

.rv-logo {
    display: block;
    max-width: 9rem;
    max-height: 2.6rem;
    margin: 0 auto 0.6rem;
    object-fit: contain;
}

.rv-business {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.rv-phone {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    color: var(--ink);
}

.rv-kind {
    margin: 0.5rem 0 0;
    font-size: 1.05rem;
    color: var(--ink-muted);
}

/* Three info blocks in one outlined panel */
.rv-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 1.75rem;
}

.rv-block-title {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}

.rv-block p {
    margin: 0 0 0.4rem;
    font-size: 0.925rem;
    color: #334155;
    word-break: break-word;
}

/* Section headings: the purchase in green, the return in rose. */
.rv-section {
    margin: 0 0 0.7rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.rv-section-buy {
    color: var(--g600);
}

.rv-section-return {
    color: var(--danger);
}

.rv-table-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 1.75rem;
}

.rv-table {
    min-width: 34rem;
    font-size: 0.9rem;
}

/* Tinted header rather than the solid band, matching the reference. */
.rv-table thead th {
    color: var(--ink);
    background: var(--g100);
    border-right: 1px solid rgb(15 23 42 / 6%);
    font-size: 0.825rem;
    letter-spacing: 0;
    text-transform: none;
}

.rv-right {
    text-align: right;
}

.rv-total-row td {
    padding: 0.65rem 0.7rem;
    font-weight: 700;
    background: #f1f5f9;
    border-top: 1px solid var(--line);
}

.rv-serials {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--ink-muted);
}

.rv-note {
    margin: 0 0 1.5rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #334155;
    background: #f8fafc;
    border-radius: 10px;
}

.rv-print-row {
    text-align: center;
}

@media (max-width: 900px) {
    .rv-info {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 620px) {
    .rv-sheet {
        padding: 1.25rem;
    }

    .rv-business {
        font-size: 1.35rem;
    }
}

/* Print: just the sheet, on white. */
@media print {
    .rv-sheet {
        max-width: none;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }

    .rv-table-wrap {
        overflow: visible !important;
    }

    .rv-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .rv-table thead th {
        color: #000 !important;
        background: #e5e7eb !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rv-total-row td {
        background: #f3f4f6 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rv-section-buy,
    .rv-section-return {
        color: #000 !important;
    }
}

:root[data-theme="dark"] .rv-block p {
    color: #cbd5e1;
}

:root[data-theme="dark"] .rv-table thead th {
    color: #e2e8f0;
    background: #08201a;
}

:root[data-theme="dark"] .rv-total-row td {
    background: #0b1220;
}

:root[data-theme="dark"] .rv-note {
    color: #cbd5e1;
    background: #0b1220;
}

/* ==========================================================================
   Create Sale  (/sale/create, /sale/:id/edit)

   Three stacked cards, each ringed in the theme green the way the reference
   rings its in blue: who and what, the lines, then the money.
   ========================================================================== */

.cs-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.cs-card + .cs-card,
.alert + .cs-card {
    margin-top: 1.25rem;
}

.cs-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Header: customer / date / switches on one row, the four search boxes below
   -------------------------------------------------------------------------- */

.cs-head-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.1rem 1rem;
}

.cs-cell {
    display: flex;
    flex-direction: column;
    grid-column: span 3;
    min-width: 0;
}

.cs-cell-customer { grid-column: span 5; }
.cs-cell-date     { grid-column: span 3; }

/* The switches sit to the right of the row, level with the two fields. */
.cs-cell-switches {
    grid-column: span 4;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1.6rem;
}

/* The two barcode boxes carry no label, so they need the label's height. */
.cs-cell-nolabel {
    justify-content: flex-end;
}

.cs-control {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.cs-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 2.8rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
}

select.cs-input {
    cursor: pointer;
}

/* Customer select with a clear button tucked inside its right edge. */
.cs-picker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.cs-picker .cs-input {
    padding-right: 3.4rem;
}

.cs-picker-clear {
    position: absolute;
    top: 50%;
    right: 1.9rem;
    display: grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--ink-muted);
    background: var(--surface);
    border: 0;
    border-radius: 4px;
    transform: translateY(-50%);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cs-picker-clear:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* "+ Customer" - an outline button in the theme green. */
.cs-add {
    flex: 0 0 auto;
    height: 2.8rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--g600);
    white-space: nowrap;
    background: var(--surface);
    border: 1.5px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cs-add:hover {
    color: #fff;
    background: var(--g500);
}

/* ---------- switches ---------- */

.cs-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.cs-toggle-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    cursor: pointer;
}

.cs-switch {
    position: relative;
    width: 2.6rem;
    height: 1.35rem;
    padding: 0;
    background: #cbd5e1;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease;
}

.cs-switch-on {
    background: var(--g500);
}

.cs-switch-dot {
    position: absolute;
    top: 0.17rem;
    left: 0.2rem;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgb(15 23 42 / 25%);
    transition: transform 0.18s ease;
}

.cs-switch-on .cs-switch-dot {
    transform: translateX(1.2rem);
}

.cs-switch:focus-visible {
    outline: 2px solid var(--g600);
    outline-offset: 2px;
}

/* ---------- profit read-out ---------- */

.cs-profit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 4.5rem;
}

.cs-profit-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
}

.cs-profit-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--g600);
    font-variant-numeric: tabular-nums;
}

.cs-profit-bad {
    color: #dc2626;
}

.cs-invoice {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.cs-invoice strong {
    color: var(--g700);
}

/* --------------------------------------------------------------------------
   The invoice just posted

   Sits above a form that has already been cleared for the next customer, so
   it has to carry its own invoice number and figures — nothing below it still
   refers to the sale it is talking about.
   -------------------------------------------------------------------------- */

.cs-saved {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1.4rem;
    margin: 0 0 0.9rem;
    padding: 0.7rem 2.4rem 0.7rem 0.95rem;
    background: var(--g50);
    border: 1px solid var(--g500);
    border-left: 3px solid var(--g600);
    border-radius: 9px;
}

.cs-saved-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink);
}

.cs-saved-tick {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    color: #fff;
    background: var(--g600);
    border-radius: 50%;
}

.cs-saved-no {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--g700);
}

/* The figures, laid out so the labels read across and the amounts line up
   under them rather than running together as a sentence. */
.cs-saved-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.15rem;
    margin: 0;
}

.cs-saved-figures dt {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.cs-saved-figures dd {
    margin: 0.05rem 0 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}

/* Money still owed is the one figure worth catching an eye. Qualified by the
   list, or the rule above it — one class heavier — keeps the plain ink. */
.cs-saved-figures dd.cs-saved-due {
    color: var(--danger);
}

.cs-saved-print {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.cs-saved-print-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.cs-saved-paper {
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--g700);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--g500);
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.cs-saved-paper:hover {
    color: #fff;
    background: var(--g600);
    border-color: var(--g600);
}

.cs-saved-x {
    position: absolute;
    top: 0.4rem;
    right: 0.45rem;
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--ink-muted);
    background: none;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cs-saved-x:hover {
    color: var(--g700);
    background: var(--g100);
}

@media (max-width: 720px) {
    /* Narrow, the print row has nowhere to be pushed to, so it drops under
       the figures instead of squeezing them. */
    .cs-saved-print {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   Lines
   -------------------------------------------------------------------------- */

.cs-lines-card {
    padding: 0.9rem 1rem;
}

.cs-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.cs-table {
    min-width: 74rem;
}

.cs-table thead th {
    padding: 0.62rem 0.6rem;
}

.cs-table tbody td {
    padding: 0.55rem 0.6rem;
}

/* Serials need room to stack their chips; nothing else should stretch. */
.cs-table tbody td:not(.pl-name):not(.cs-serial-cell) {
    white-space: nowrap;
}

.cs-serial-cell {
    min-width: 17rem;
}

.cs-cell-in {
    width: 100%;
    min-width: 5.5rem;
    height: 2.3rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    text-align: center;
    border-radius: 7px;
}

.cs-cell-sm {
    min-width: 4.5rem;
}

.cs-cell-in[readonly] {
    background: #f1f5f9;
    color: var(--ink-muted);
    cursor: default;
}

.cs-cell-in::-webkit-outer-spin-button,
.cs-cell-in::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cs-cell-in[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.cs-stock,
.cs-dp,
.cs-total {
    font-variant-numeric: tabular-nums;
}

.cs-total {
    font-weight: 700;
    color: var(--ink);
}

.cs-stock-bad {
    font-weight: 700;
    color: #dc2626;
}

.cs-muted {
    color: var(--ink-muted);
}

/* "Delete" reads as a link in the reference, not a button. */
.cs-remove {
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #dc2626;
    background: none;
    border: 0;
    cursor: pointer;
}

.cs-remove:hover {
    text-decoration: underline;
}

.cs-lines-error {
    margin: 0.7rem 0 0;
}

/* --------------------------------------------------------------------------
   Serial chips
   -------------------------------------------------------------------------- */

.cs-serials {
    position: relative;
}

.cs-serials-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.3rem;
    padding: 0.28rem 0.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: text;
}

.cs-serials-open .cs-serials-box,
.cs-serials-box:focus-within {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 14%);
}

.cs-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.2rem 0.18rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    white-space: nowrap;
}

.cs-chip-x {
    display: grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--ink-muted);
    background: none;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cs-chip-x:hover {
    color: #fff;
    background: #dc2626;
}

.cs-serials-input {
    flex: 1 1 4rem;
    min-width: 4rem;
    padding: 0.1rem 0.2rem;
    font-size: 0.78rem;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
}

/* Rendered into the body, so it is placed against the viewport and its top,
   left, width and height are measured off the box in SerialPicker. Above the
   sidebar and topbar, below a modal, which is where a dropdown belongs. */
/* --------------------------------------------------------------------------
   A4 Serial No Generator
   -------------------------------------------------------------------------- */

.sg-page {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

.sg-form {
    padding: 1.4rem 1.5rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.sg-title {
    margin: 0 0 1.1rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.sg-field {
    display: block;
    margin-bottom: 0.9rem;
}

.sg-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

/* The same pill the taxonomy screens use, so a field is a field everywhere. */
.sg-input {
    width: 100%;
    padding: 0.62rem 1.1rem;
    border-radius: 999px;
}

.sg-note {
    margin: 0 0 0.75rem;
}

.sg-count {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
    color: var(--g600);
}

.sg-capped {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    text-align: right;
    color: #b45309;
}

/*
 * The scan warning. Same amber as the capped note, but left-aligned in a block
 * of its own: it runs to a sentence and carries a number the shop has to act
 * on, which a right-aligned footnote does not read as.
 */
.sg-warn {
    margin: 0 0 0.7rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: left;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
}

.sg-print {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.7rem 1.2rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sg-print:hover {
    color: #fff;
    background: var(--g500);
}

/* --- the sheet ------------------------------------------------------- */

.sg-sheet {
    min-height: 18rem;
    padding: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.sg-grid {
    display: grid;
    grid-template-columns: repeat(var(--sg-columns, 4), minmax(0, 1fr));
    gap: 0.6rem;
}

.sg-cell {
    padding: 0.5rem 0.4rem 0.45rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    break-inside: avoid;
}

/* Drawn as an SVG so it prints at the printer's resolution rather than a
   bitmap's — a barcode that goes fuzzy is a barcode that does not scan. */
.sg-bars {
    display: block;
    width: 100%;
    height: 42px;
}

.sg-serial {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #000;
    overflow-wrap: anywhere;
}

.sg-note-line {
    margin: 0.1rem 0 0;
    font-size: 0.68rem;
    color: #333;
    overflow-wrap: anywhere;
}

.sg-empty {
    margin: 0;
    padding: 4rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

@media (max-width: 900px) {
    .sg-page {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    /*
     * Each size claims its page by name. The only unnamed @page that sets a
     * size asks for landscape, and anything that does not claim its own
     * inherits it — a sheet of stickers wants the taller page.
     */
    .sg-sheet-a4 {
        page: a4page;
    }

    .sg-sheet-a5 {
        page: a5page;
    }

    /* Mini is A4 too — it is the sticker that shrinks, not the paper. */
    .sg-sheet-mini {
        page: a4page;
    }

    /*
     * A mini sticker is mini all through, not just narrower: shorter bars, a
     * smaller serial, a tighter cell. Left at the full size the text would fill
     * a cell that no longer has room for it.
     */
    .sg-sheet-mini .sg-grid {
        gap: 2mm !important;
    }

    .sg-sheet-mini .sg-cell {
        padding: 1.2mm 1mm 1mm !important;
    }

    .sg-sheet-mini .sg-bars {
        height: 26px !important;
    }

    .sg-sheet-mini .sg-serial {
        font-size: 7px !important;
    }

    .sg-sheet-mini .sg-note-line {
        font-size: 5.5px !important;
    }

    .sg-sheet {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }

    /* One column on paper — the form is gone, so the sheet has the width. */
    .sg-page {
        display: block !important;
        gap: 0 !important;
    }

    /*
     * Held at the asked-for column count rather than left to reflow: the grid
     * is sized in fractions of its container, and on paper the container is
     * the page, not the window it happened to be laid out in.
     */
    .sg-grid {
        gap: 3mm !important;
    }

    .sg-cell {
        padding: 2mm 1.5mm 1.5mm !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 0 !important;
    }

    .sg-serial {
        font-size: 9px !important;
    }

    .sg-note-line {
        font-size: 7px !important;
    }

    .sg-bars {
        height: 36px !important;
    }
}

/* --------------------------------------------------------------------------
   Business Report
   -------------------------------------------------------------------------- */

.br-card {
    padding: 1.5rem 1.6rem 1.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.br-loading {
    color: var(--ink-muted);
}

.br-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--line);
}

.br-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
}

.br-sub {
    margin: 0.25rem 0 0;
    max-width: 46rem;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.br-range {
    margin: 0.4rem 0 0;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--g700);
}

.br-print {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.05rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.br-print:hover {
    color: #fff;
    background: var(--g500);
}

/* --- the six figures --------------------------------------------------- */

.br-tiles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.4rem;
}

.br-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.8rem 0.85rem;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-left: 3px solid var(--g500);
    border-radius: 10px;
}

.br-tile-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.br-tile-value {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.br-tile-note {
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--ink-muted);
}

/* A profit reads as one, a loss reads as one, and everything else stays
   neutral — the tone comes from the server so the screen does not have to
   know that a negative net profit is the bad case. */
.br-tile-good {
    background: var(--g50);
    border-color: var(--g500);
}

.br-tile-good .br-tile-value {
    color: var(--g700);
}

.br-tile-bad {
    background: var(--danger-soft);
    border-color: var(--danger);
    border-left-color: var(--danger);
}

.br-tile-bad .br-tile-value {
    color: var(--danger);
}

/* --- the blocks -------------------------------------------------------- */

.br-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.br-block {
    min-width: 0;
    padding: 0.95rem 1.05rem 1.05rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    break-inside: avoid;
}

.br-block-wide,
.br-block-full {
    grid-column: 1 / -1;
}

.br-block-full {
    margin-top: 1rem;
}

.br-block-title {
    margin: 0 0 0.7rem;
    padding-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--g700);
    border-bottom: 1px solid var(--line);
}

.br-empty {
    margin: 0;
    padding: 1.2rem 0;
    text-align: center;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--ink-muted);
}

/* --- the tables -------------------------------------------------------- */

.br-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.br-table th,
.br-table td {
    padding: 0.4rem 0.15rem;
    vertical-align: top;
    text-align: left;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.br-table tbody tr:last-child th,
.br-table tbody tr:last-child td {
    border-bottom: 0;
}

.br-table th[scope="row"] {
    font-weight: 500;
}

/* The reason for a line, under the line rather than in a tooltip. */
.br-table em {
    display: block;
    margin-top: 0.05rem;
    font-size: 0.7rem;
    font-style: normal;
    line-height: 1.35;
    color: var(--ink-muted);
}

.br-table td {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/*
 * Qualified by the cell, not left bare: `.br-table td` sets a colour and is a
 * class plus a type, which outranks a lone class — so `.br-neg` on its own
 * lost every time and negatives quietly printed in ink.
 */
.br-table td.br-neg {
    color: var(--danger);
}

/* A subtotal is arrived at; a total is the answer. They are drawn
   differently because a page of same-weight rows hides both. */
.br-row-subtotal th,
.br-row-subtotal td {
    font-weight: 700;
    background: var(--canvas);
}

.br-row-total th,
.br-row-total td {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--g700);
    background: var(--g50);
    border-top: 1.5px solid var(--g500);
    border-bottom: 1.5px solid var(--g500);
}

.br-table-split th:not([scope="row"]) {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: right;
    color: var(--ink-muted);
}

.br-table-split td {
    width: 30%;
}

.br-table-grid thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: right;
    color: var(--ink-muted);
    background: var(--canvas);
}

.br-table-grid thead th:first-child {
    text-align: left;
}

.br-table-grid tbody th[scope="row"] {
    font-weight: 600;
    white-space: nowrap;
}

/* Which figures a range applies to and which are simply true today. */
.br-basis {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.02rem 0.35rem;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 999px;
}

.br-basis-today {
    color: #92400e;
    background: #fffbeb;
}

.br-basis-range {
    color: var(--g700);
    background: var(--g50);
}

.br-share {
    display: block;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 500;
    color: var(--ink-muted);
}

/* --- narrower screens -------------------------------------------------- */

@media (max-width: 1180px) {
    .br-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .br-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .br-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .br-card {
        padding: 1.1rem 1rem 1.2rem;
    }
}

/* --- on paper ----------------------------------------------------------- */

@media print {
    /*
     * A4 upright. Every other report claims landscape because its table runs
     * to a dozen columns; this one is a statement read down the page, and the
     * widest thing on it is six columns of month.
     */
    .br-card {
        page: a4page;
        padding: 0 !important;
        background: #fff !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* The letterhead says all of this, in the form paper wants. */
    .br-head {
        display: none !important;
    }

    /*
     * The screen breakpoints fire on paper too — a 186mm page is about 700 CSS
     * pixels, which is under every one of them — so the grid is stated here
     * rather than inherited from a rule written for a phone. Six tiles across
     * A4 leaves 31mm each, which will not hold a seven-figure number; three
     * leaves 62mm, which will.
     */
    .br-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2mm !important;
        margin-bottom: 4mm !important;
    }

    .br-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Two tidy rows of two rather than one full-width block and a gap beside
       the last one. */
    .br-block-wide {
        grid-column: span 1 !important;
    }

    .br-tile {
        padding: 1.8mm 2mm !important;
        border-radius: 0 !important;
        /* A tinted panel is a screen device and costs ink; the rule at the
           left is enough to group them once the fill is gone. */
        background: #fff !important;
        border: 1px solid #cbd5e1 !important;
        border-left: 2px solid #94a3b8 !important;
    }

    .br-tile-label {
        font-size: 6.5pt !important;
    }

    .br-tile-value {
        font-size: 10pt !important;
    }

    .br-tile-note {
        font-size: 6pt !important;
    }

    .br-cols {
        gap: 4mm !important;
    }

    .br-block {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .br-block-full {
        margin-top: 4mm !important;
    }

    .br-block-title {
        margin-bottom: 2mm !important;
        padding-bottom: 1mm !important;
        font-size: 7.5pt !important;
        color: #0f172a !important;
        border-bottom: 1px solid #94a3b8 !important;
    }

    .br-table {
        font-size: 8pt !important;
    }

    /*
     * Tight rows. Each line of the statement carries a label and the basis for
     * it, so eleven lines at screen spacing is 115mm — most of the page for one
     * of five blocks. At print spacing the same eleven lines are 90mm and the
     * whole report lands on a single sheet.
     */
    .br-table th,
    .br-table td {
        padding: 0.8mm 0.5mm !important;
        line-height: 1.25 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .br-table em {
        margin-top: 0 !important;
        font-size: 6.5pt !important;
        line-height: 1.2 !important;
    }

    /* A block sizes to its own content rather than to the tallest thing in its
       row, so a short table does not print a long empty box. */
    .br-cols {
        align-items: start !important;
    }

    /* Ink, not fill: the weight and the rules carry the emphasis on paper. */
    .br-row-subtotal th,
    .br-row-subtotal td,
    .br-row-total th,
    .br-row-total td,
    .br-table-grid thead th {
        background: #fff !important;
    }

    .br-row-total th,
    .br-row-total td {
        font-size: 8.5pt !important;
        color: #0f172a !important;
        border-top: 1px solid #0f172a !important;
        border-bottom: 1px solid #0f172a !important;
    }

    .br-basis {
        padding: 0 !important;
        background: none !important;
        color: #475569 !important;
    }

    /* Black on paper. The brackets already say it is negative, the way a
       statement has always said it, and red costs a colour cartridge. */
    .br-table td.br-neg {
        color: #0f172a !important;
    }

    /* A table split across a page break loses its heading, so the short ones
       stay whole and only the month table is allowed to run on. */
    .br-block:not(.br-block-full) {
        break-inside: avoid;
    }

    .br-table-grid thead {
        display: table-header-group;
    }

    .br-table tr {
        break-inside: avoid;
    }
}

/* --------------------------------------------------------------------------
   SMS gateway
   -------------------------------------------------------------------------- */

.sms-page {
    max-width: 68rem;
    margin: 0 auto;
}

/* --- the heading strip ------------------------------------------------ */

.sms-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.sms-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
}

.sms-sub {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    color: var(--ink-muted);
}

/*
 * Reports whether a message can actually go, which is not the same as whether
 * the switch is on — so when it cannot, the chip names the missing piece and
 * reads as an instruction rather than a verdict.
 */
.sms-state {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 999px;
}

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

.sms-state-on {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
}

/* --- the cards -------------------------------------------------------- */

.sms-card {
    padding: 1.4rem 1.5rem 1.5rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.sms-card-loading {
    color: var(--ink-muted);
}

.sms-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--line);
}

/* The theme green, so a page of grey boxes still reads as this app's. */
.sms-card-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    color: var(--g600);
    background: var(--g50);
    border-radius: 9px;
}

.sms-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.sms-card-note {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

/* --- fields ----------------------------------------------------------- */

.sms-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.sms-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    grid-column: span 2;
}

/* The URL is long and the verb beside it is three letters, so they do not get
   half the row each. */
.sms-field-wide {
    grid-column: span 3;
}

.sms-field-narrow {
    grid-column: span 1;
}

/* The key runs the full width rather than three of four: the leftover quarter
   beside it held nothing, and a dangling gap reads as a missing field. */
.sms-field-key {
    grid-column: 1 / -1;
}

.sms-field-full {
    grid-column: 1 / -1;
    margin-top: 0.9rem;
}

.sms-field .field-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
}

.sms-req {
    color: var(--danger);
}

.sms-kept {
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--g700);
    background: var(--g50);
    border-radius: 999px;
}

.sms-hint {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.3rem 0 0;
    font-size: 0.73rem;
    color: var(--ink-muted);
}

.sms-error {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    color: var(--danger);
}

.sms-key {
    display: flex;
    gap: 0.4rem;
}

.sms-key .field-input {
    flex: 1;
    min-width: 0;
}

.sms-clear {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    color: var(--danger);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sms-clear:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.sms-area {
    min-height: 3.6rem;
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
}

/* Parameter names are copied character for character out of a provider's
   documentation, and a proportional font hides the difference between an
   underscore and a hyphen at the end of a word. */
.sms-mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.82rem;
}

.sms-params {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.sms-params .sms-field {
    grid-column: span 1;
}

/* --- the switch ------------------------------------------------------- */

.sms-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    cursor: pointer;
}

.sms-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.sms-toggle-track {
    position: relative;
    flex: none;
    width: 2.4rem;
    height: 1.35rem;
    margin-top: 0.05rem;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.18s ease;
}

.sms-toggle-track i {
    position: absolute;
    top: 0.175rem;
    left: 0.175rem;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(15 23 42 / 25%);
    transition: transform 0.18s ease;
}

.sms-toggle input:checked + .sms-toggle-track {
    background: var(--g500);
}

.sms-toggle input:checked + .sms-toggle-track i {
    transform: translateX(1.05rem);
}

.sms-toggle input:focus-visible + .sms-toggle-track {
    box-shadow: 0 0 0 3px var(--g50), 0 0 0 4px var(--g500);
}

.sms-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sms-toggle-text b {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
}

.sms-toggle-text em {
    font-size: 0.75rem;
    font-style: normal;
    color: var(--ink-muted);
}

.sms-toggle-sm {
    margin-bottom: 0.55rem;
}

/* --- warnings and the request preview --------------------------------- */

.sms-inline-warn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.1rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.79rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 9px;
}

/*
 * The request as it will actually go out, built from the boxes above. A
 * parameter spelt wrong is otherwise invisible until a send fails, and the
 * gateway's reply for that is usually a bare number.
 */
.sms-preview {
    margin-top: 1.1rem;
    padding: 0.7rem 0.85rem;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 9px;
}

.sms-preview-tag {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.sms-preview-body {
    margin: 0;
    overflow-x: auto;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.76rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink);
}

/* --- placeholder chips ------------------------------------------------ */

.sms-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.sms-token {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    font-family: inherit;
    text-align: left;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sms-token b {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--g700);
}

.sms-token span {
    font-size: 0.71rem;
    color: var(--ink-muted);
}

.sms-token:hover {
    background: var(--g50);
    border-color: var(--g500);
}

.sms-token:hover span {
    color: var(--g700);
}

/* --- one event per row ------------------------------------------------ */

.sms-events {
    display: grid;
    gap: 0.7rem;
}

/*
 * An event that is off keeps its message but stops competing for attention:
 * the text stays readable and editable, it simply is not the thing on the page
 * that looks live.
 */
.sms-event {
    padding: 0.85rem 0.95rem;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 11px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sms-event-on {
    background: var(--surface);
    border-color: var(--g500);
}

.sms-event .sms-area {
    min-height: 3.2rem;
}

/* --- what a message costs --------------------------------------------- */

.sms-meter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    margin: 0.45rem 0 0;
    font-size: 0.73rem;
    color: var(--ink-muted);
}

.sms-meter-count {
    font-weight: 700;
    color: var(--g700);
}

/* More than one segment is more than one message on the bill, every time it
   is sent, so it is worth reading as a number and not as a note. */
.sms-meter-heavy .sms-meter-count {
    color: #b45309;
}

.sms-meter-idle {
    color: var(--ink-muted);
    font-style: italic;
}

.sms-enc {
    padding: 0.08rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ink-muted);
    background: var(--g100);
    border-radius: 999px;
}

/* Unicode quarters the room a message has, and one Bangla letter is enough to
   switch the whole thing, so the encoding is worth naming outright. */
.sms-enc-uni {
    color: #92400e;
    background: #fffbeb;
}

/* --- the save bar and the test ---------------------------------------- */

.sms-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.sms-actions-note {
    margin-right: auto;
    font-size: 0.76rem;
    color: var(--ink-muted);
}

/* .btn-primary is full width and indigo, which suits the login form it was
   written for and not a settings card. */
.sms-actions .btn,
.sms-actions button[type="submit"] {
    width: auto;
    color: #fff;
    background: var(--g600);
}

.sms-actions .btn:hover:not(:disabled),
.sms-actions button[type="submit"]:hover:not(:disabled) {
    background: var(--g700);
}

.sms-test-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sms-test-row .field-input {
    flex: 1 1 14rem;
    min-width: 0;
}

.sms-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    padding: 0 1.1rem;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: #fff;
    background: var(--g600);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sms-btn:hover:not(:disabled) {
    background: var(--g700);
}

.sms-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.sms-result {
    margin-top: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.sms-result-ok {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
}

.sms-result-bad {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger);
}

.sms-result-line {
    margin: 0;
    font-size: 0.83rem;
    font-weight: 600;
}

/* The gateway reply, verbatim: it is the part that says whether the message
   actually went, and paraphrasing it would lose that. */
.sms-result-body {
    max-height: 9rem;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.6rem;
    overflow: auto;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.74rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--ink);
    background: var(--surface);
    border-radius: 6px;
}

/* --- narrower screens -------------------------------------------------- */

@media (max-width: 860px) {
    .sms-grid,
    .sms-params {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * Only the URL keeps the whole row. The short fields pair off instead of
     * each taking a full line — a two-word gateway name in a 700px box is
     * wasted space, and it pushes the rest of the card off the screen.
     */
    .sms-field,
    .sms-field-narrow,
    .sms-field-key {
        grid-column: span 1;
    }

    .sms-field-wide {
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .sms-card {
        padding: 1.1rem 1rem 1.2rem;
    }

    /* One field to a line: there is no pair of these that both stay usable
       in half of a phone's width. */
    .sms-grid,
    .sms-params {
        grid-template-columns: minmax(0, 1fr);
    }

    .sms-field,
    .sms-field-wide,
    .sms-field-narrow,
    .sms-field-key {
        grid-column: span 1;
    }

    .sms-actions-note {
        margin-right: 0;
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   CSV in and out
   -------------------------------------------------------------------------- */

.csv-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

/* Same pill as the taxonomy screens' Create, so the strip reads as one row of
   controls rather than three unrelated buttons. */
.csv-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.csv-btn:hover:not(:disabled) {
    color: #fff;
    background: var(--g500);
}

.csv-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.csv-note {
    margin: 0.6rem 0 0;
}

.csv-ok {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--g700);
}

/* --- the dialog ------------------------------------------------------- */

.csv-template {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
    padding: 0;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--g600);
    background: none;
    border: 0;
    cursor: pointer;
}

.csv-template:hover {
    text-decoration: underline;
}

/* The native file input is unstyleable across browsers, so the label is the
   control and the input is only what it wraps. */
.csv-drop {
    display: block;
    padding: 1.1rem;
    text-align: center;
    background: var(--g50);
    border: 2px dashed var(--g500);
    border-radius: 10px;
    cursor: pointer;
}

.csv-drop:hover {
    background: var(--g100);
}

.csv-drop:focus-within {
    box-shadow: 0 0 0 3px var(--g100);
}

.csv-file {
    /* Reachable by the keyboard, and by a click on the label, without being
       drawn — display:none would take it out of the tab order. */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.csv-drop-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.csv-hint {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* The product form's heading and its Import pair sit on one row. */
.np-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.np-head-text {
    min-width: 0;
}

@media print {
    .csv-tools,
    .csv-note,
    .csv-ok {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Search-as-you-type select
   -------------------------------------------------------------------------- */

.ss {
    position: relative;
    min-width: 0;
}

/* Wears .field-input, so it only has to add the row and the truncation the
   button element does not give for free. */
.ss-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.ss-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ss-value-empty {
    color: var(--ink-muted);
}

.ss-caret {
    flex: none;
    color: var(--ink-muted);
    transition: transform 0.15s ease;
}

.ss-open .ss-caret {
    transform: rotate(180deg);
}

/* Placed against the viewport because it is portaled to the body, out of the
   sideways-scrolling toolbar that would otherwise clip it. */
.ss-menu {
    position: fixed;
    z-index: 46;
    display: flex;
    flex-direction: column;
    min-width: 16rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgb(15 23 42 / 16%);
    overflow: hidden;
}

.ss-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    padding: 0.5rem 0.65rem;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--line);
}

.ss-search-input {
    width: 100%;
    min-width: 0;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
}

.ss-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
}

.ss-opt {
    display: block;
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ink);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* Highlight follows the keyboard and the mouse alike, so arrowing down and
   hovering never disagree about which row is next. */
.ss-opt-active {
    background: var(--g50);
}

.ss-opt-on {
    font-weight: 700;
    color: var(--g700);
}

.ss-none,
.ss-more {
    margin: 0;
    padding: 0.6rem 0.7rem;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.ss-more {
    flex: none;
    border-top: 1px solid var(--line);
}

.cs-serials-menu {
    position: fixed;
    z-index: 45;
    min-width: 12rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgb(15 23 42 / 14%);
}

.cs-serials-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    padding: 0.38rem 0.5rem;
    font-size: 0.8rem;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.cs-serials-opt:hover {
    background: var(--g50);
}

.cs-serials-no {
    font-weight: 600;
    color: var(--ink);
}

.cs-serials-date {
    font-size: 0.72rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

.cs-serials-none {
    padding: 0.5rem;
    font-size: 0.78rem;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Footer: note and rep on the left, the money column on the right
   -------------------------------------------------------------------------- */

.cs-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.cs-left {
    display: flex;
    flex-direction: column;
}

.cs-textarea {
    min-height: 10rem;
    resize: vertical;
    line-height: 1.55;
}

.cs-label-sr {
    margin-top: 1.1rem;
}

.cs-money {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cs-money-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cs-money-label {
    flex: 1 1 auto;
    font-size: 0.95rem;
    color: var(--ink);
}

.cs-money-strong {
    font-weight: 700;
}

.cs-money-input {
    flex: 0 0 12rem;
    height: 2.5rem;
    padding: 0.45rem 0.85rem;
    text-align: right;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.cs-money-input[readonly] {
    background: #f8fafc;
    color: var(--ink);
    cursor: default;
}

.cs-money-input:disabled {
    background: #e9edf2;
    color: var(--ink-muted);
    cursor: not-allowed;
}

.cs-money-input::-webkit-outer-spin-button,
.cs-money-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cs-money-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.cs-other-name {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
}

/* The three due figures are the ones that cost money, so they read in red. */
.cs-due-label {
    font-weight: 600;
    color: #dc2626;
}

.cs-due-value[readonly] {
    color: #dc2626;
    font-weight: 700;
}

.cs-payby {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--ink);
}

.cs-account {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
}

/* Money coming in is the field a cashier looks for, so it is outlined. */
.cs-receive {
    border: 2px solid #dc2626;
}

.cs-receive:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgb(220 38 38 / 16%);
}

.cs-money-error {
    margin: -0.2rem 0 0;
    text-align: right;
}

.cs-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 0.9rem;
}

/* --------------------------------------------------------------------------
   Create Customer dialog
   -------------------------------------------------------------------------- */

.cs-dialog-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 1rem;
}

.cs-dialog-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.4rem;
}

/* Matches the reference's red "Close" pill in the dialog header. */
.cs-modal-close {
    padding: 0.4rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #dc2626;
    background: var(--surface);
    border: 1.5px solid #dc2626;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cs-modal-close:hover {
    color: #fff;
    background: #dc2626;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .cs-cell-in[readonly] {
    background: #16233a;
    color: #94a3b8;
}

/* The green tokens stay light in dark mode, so the posted-invoice panel takes
   the same success surface the alerts use rather than glowing mint. */
:root[data-theme="dark"] .cs-saved {
    background: #06281d;
    border-color: #10513a;
    border-left-color: var(--g500);
}

:root[data-theme="dark"] .cs-saved-no,
:root[data-theme="dark"] .cs-saved-figures dd {
    color: #a7f3d0;
}

:root[data-theme="dark"] .cs-saved-figures dd.cs-saved-due {
    color: #f87171;
}

:root[data-theme="dark"] .cs-saved-paper {
    color: #a7f3d0;
    background: #0b3527;
    border-color: #10513a;
}

:root[data-theme="dark"] .cs-saved-paper:hover {
    color: #04120c;
    background: var(--g500);
    border-color: var(--g500);
}

:root[data-theme="dark"] .cs-saved-x:hover {
    color: #a7f3d0;
    background: #0b3527;
}

:root[data-theme="dark"] .cs-serials-box,
:root[data-theme="dark"] .cs-serials-menu {
    background: var(--surface);
    border-color: #24344f;
}

:root[data-theme="dark"] .cs-chip {
    color: #cbd5e1;
    background: #1b2942;
    border-color: #24344f;
}

:root[data-theme="dark"] .cs-money-input[readonly] {
    background: #16233a;
    color: #e2e8f0;
}

:root[data-theme="dark"] .cs-money-input:disabled {
    background: #131f33;
    color: #64748b;
}

:root[data-theme="dark"] .cs-due-label,
:root[data-theme="dark"] .cs-due-value[readonly] {
    color: #f87171;
}

:root[data-theme="dark"] .cs-switch {
    background: #334155;
}

:root[data-theme="dark"] .cs-picker-clear {
    background: var(--surface);
}

/* --------------------------------------------------------------------------
   Narrow screens: the switch cluster and the money column stop competing
   for the same row.
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    .cs-cell,
    .cs-cell-customer,
    .cs-cell-date {
        grid-column: span 6;
    }

    .cs-cell-switches {
        grid-column: span 12;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .cs-card {
        padding: 1.1rem 1rem;
    }

    .cs-cell,
    .cs-cell-customer,
    .cs-cell-date {
        grid-column: span 12;
    }

    .cs-control {
        flex-wrap: wrap;
    }

    .cs-add {
        flex: 1 1 100%;
    }

    .cs-foot-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .cs-money-input,
    .cs-money-row .cs-money-input {
        flex: 0 0 9rem;
    }

    .cs-dialog-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Sale List  (/sale/list)

   Unlike the Purchase List, the reference keeps the whole screen inside one
   ringed card: title, page size and count stacked at the top left, search at
   the top right, then the table, the pager and Print.
   ========================================================================== */

.sl-card {
    padding: 1.5rem 1.7rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.alert + .sl-card {
    margin-top: 1.1rem;
}

.sl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.sl-head-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.sl-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
}

.sl-per-page {
    width: auto;
    min-width: 8.5rem;
    height: 2.6rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
}

.sl-count {
    margin: 0;
    font-size: 0.925rem;
    color: var(--ink-muted);
}

.sl-search {
    flex: 0 1 20rem;
    min-width: 0;
    height: 2.7rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.sl-table-wrap {
    overflow-x: auto;
}

.sl-table {
    min-width: 72rem;
}

.sl-table thead th {
    padding: 0.65rem 0.75rem;
}

.sl-table tbody td {
    padding: 0.7rem 0.75rem;
    white-space: nowrap;
}

.sl-invoice {
    font-weight: 600;
    color: var(--ink);
}

.sl-name {
    font-weight: 600;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Profit, behind an eye
   -------------------------------------------------------------------------- */

.sl-profit-cell {
    text-align: center;
}

.sl-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    color: var(--ink-muted);
    background: none;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.sl-eye:hover {
    color: var(--g600);
    background: var(--g50);
}

.sl-eye[aria-pressed="true"] {
    color: var(--g600);
}

.sl-profit {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--g600);
    font-variant-numeric: tabular-nums;
}

.sl-profit-bad {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   Edit button and the action dropdown
   -------------------------------------------------------------------------- */

/*
 * The reference rings Edit in amber, which is the one accent on this screen
 * that is not the theme green — it marks the row's own action apart from the
 * green table furniture, so it is kept.
 */
.sl-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #b45309;
    background: var(--surface);
    border: 1.5px solid #f59e0b;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.sl-edit:hover {
    color: #fff;
    background: #f59e0b;
}

.sl-action {
    width: auto;
    min-width: 8.5rem;
    height: 2.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 8px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Pager and Print
   -------------------------------------------------------------------------- */

.sl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.2rem;
}

.sl-print-row {
    margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .sl-edit {
    color: #fbbf24;
    background: var(--surface);
    border-color: #b45309;
}

:root[data-theme="dark"] .sl-edit:hover {
    color: #0f172a;
    background: #fbbf24;
}

:root[data-theme="dark"] .sl-eye:hover {
    background: #16233a;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .sl-card {
        padding: 1.1rem 1rem;
    }

    .sl-head {
        gap: 1rem;
    }

    .sl-search {
        flex: 1 1 100%;
    }

    .sl-foot {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Print: just the card and the figures
   -------------------------------------------------------------------------- */

@media print {
    .sl-card {
        padding: 0;
        border: 0;
    }

    .sl-table {
        min-width: 0;
    }

    .sl-table-wrap {
        overflow: visible;
    }
}

/* ==========================================================================
   Sale List: the invoice template picker
   ========================================================================== */

.sl-template {
    width: auto;
    min-width: 9.5rem;
    height: 2.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 8px;
    cursor: pointer;
}

/* ==========================================================================
   Sale invoice  (/sale/:id/invoice/:template)

   One sheet, four papers. The frame sets the on-screen width so what you see
   is the width that will print, and each paper declares its own @page size so
   a till roll does not come out on A4.
   ========================================================================== */

.inv-frame {
    margin: 0 auto;
}

.inv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Pushed over so it sits with the paper tag and the print button rather than
   floating in the middle of the toolbar. Never printed — it is a control. */
.inv-head-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
}

.inv-paper-tag {
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--g700);
    background: var(--g50);
    border: 1px solid var(--g500);
    border-radius: 999px;
}

.inv-sheet {
    padding: 1.6rem 1.8rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
}

/* ---------- head ---------- */

.inv-head {
    text-align: center;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
}

.inv-logo {
    max-height: 3.2rem;
    margin: 0 auto 0.5rem;
    object-fit: contain;
}

.inv-business {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}

.inv-tag {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--g600);
}

.inv-line {
    margin: 0.12rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.inv-muted {
    color: var(--ink-muted);
}

.inv-kind {
    margin: 0.6rem 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g700);
}

/* ---------- who and when ---------- */

.inv-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem 1.5rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}

.inv-meta-col p {
    margin: 0.14rem 0;
    font-size: 0.84rem;
}

.inv-meta-col span {
    font-weight: 700;
    color: var(--ink);
}

/* ---------- lines ---------- */

.inv-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.9rem;
    font-size: 0.84rem;
}

.inv-table thead th {
    padding: 0.45rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    color: var(--g700);
    background: var(--g50);
    border-bottom: 1px solid var(--g500);
}

.inv-table tbody td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px dashed var(--line);
    vertical-align: top;
}

.inv-r {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.inv-c-no {
    width: 2rem;
    text-align: left;
}

.inv-item {
    font-weight: 600;
}

.inv-serial,
.inv-warranty {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--ink-muted);
}

/* ---------- money ---------- */

.inv-totals {
    margin-top: 0.9rem;
    margin-left: auto;
    max-width: 17rem;
}

.inv-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.22rem 0;
    font-size: 0.85rem;
}

.inv-total-row b {
    font-variant-numeric: tabular-nums;
}

.inv-total-grand {
    margin-top: 0.25rem;
    padding-top: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-top: 1px solid var(--g500);
}

.inv-total-due b {
    color: var(--danger);
}

.inv-note {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.inv-foot {
    margin-top: 1.2rem;
    padding-top: 0.8rem;
    text-align: center;
    border-top: 1px solid var(--line);
}

.inv-footer-text {
    margin: 0 0 0.25rem;
    font-size: 0.82rem;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Paper sizes

   The two rolls drop to a single narrow column: no side-by-side meta, smaller
   type, and the totals run the full width because there is no room beside them.
   -------------------------------------------------------------------------- */

.inv-pos-80 { max-width: 80mm; }
.inv-pos-58 { max-width: 58mm; }
.inv-a4     { max-width: 210mm; }
.inv-a5     { max-width: 148mm; }

.inv-roll .inv-sheet {
    padding: 0.8rem 0.7rem;
    border-radius: 8px;
}

.inv-roll .inv-business {
    font-size: 1.05rem;
}

.inv-roll .inv-kind {
    margin-top: 0.4rem;
    font-size: 0.8rem;
}

.inv-roll .inv-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
}

.inv-roll .inv-meta-col p,
.inv-roll .inv-table,
.inv-roll .inv-total-row {
    font-size: 0.75rem;
}

.inv-roll .inv-table thead th,
.inv-roll .inv-table tbody td {
    padding: 0.3rem 0.25rem;
}

/* Rate is implied by qty and total on a narrow roll, so it goes. */
.inv-pos-58 .inv-table th:nth-child(4),
.inv-pos-58 .inv-table td:nth-child(4) {
    display: none;
}

.inv-roll .inv-totals {
    max-width: none;
}

.inv-roll .inv-logo {
    max-height: 2.2rem;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .inv-sheet {
    background: var(--surface);
    border-color: #24344f;
}

:root[data-theme="dark"] .inv-table tbody td {
    border-bottom-color: #24344f;
}

/* The light-theme red is too dark against the dark sheet to read. */
:root[data-theme="dark"] .inv-total-due b {
    color: #f87171;
}

/* --------------------------------------------------------------------------
   Print

   Each paper declares its own page size, so the browser dialog opens on the
   right stock instead of defaulting to A4 and cropping a till roll.
   -------------------------------------------------------------------------- */

@media print {
    .inv-frame {
        max-width: none;
        margin: 0;
    }

    .inv-sheet {
        padding: 0;
        border: 0;
        border-radius: 0;
    }
}

@page {
    margin: 10mm;
}

/*
 * A named page per paper. The frame carries the matching class, and only the
 * one on screen is ever printed, so the last matching rule wins harmlessly.
 */
@media print {
    .inv-pos-80 { page: pos80; }
    .inv-pos-58 { page: pos58; }
    .inv-a4 { page: a4page; }
    .inv-a5 { page: a5page; }

    /* The service slip and the quotation are portrait A4 too. Naming the page
       matters: the only unnamed @page that sets a size asks for A4 landscape,
       and anything that does not claim its own inherits it. */
}

/*
 * Two lengths, not "80mm auto": `auto` cannot be combined with a length, so
 * the whole size declaration is thrown away and the receipt prints on
 * whatever the driver defaults to — cropped. A generous height keeps a long
 * receipt on one strip; a thermal driver set to continuous feed trims the tail.
 */
@page pos80 {
    size: 80mm 200mm;
    margin: 3mm;
}

@page pos58 {
    size: 58mm 200mm;
    margin: 2mm;
}

@page a4page {
    size: A4;
    margin: 12mm;
}

/*
 * A4 the other way up, for the reports whose tables carry a dozen columns.
 *
 * Named so a report claims it. They were all landing on landscape already, but
 * by inheriting an unnamed @page that happens to sit in another screen's print
 * block — move or delete that rule and every report changes paper without
 * anything in a report's own styles having been touched.
 */
@page a4land {
    size: A4 landscape;
    margin: 12mm;
}

@page a5page {
    size: A5;
    margin: 10mm;
}

/* ==========================================================================
   Warranty: Serial List  (/warranty/serial-list)

   Shares the return-list card and table furniture; what is new here is the
   two-button action cell and the cover badges in the detail dialog.
   ========================================================================== */

.wl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.wl-head-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.wl-table {
    min-width: 58rem;
}

.wl-table tbody td {
    padding: 0.7rem 0.75rem;
}

.wl-serial {
    font-weight: 700;
    color: var(--ink);
}

/* ---------- action cell ---------- */

.wl-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/*
 * "Warranty Received" reads as the same family as View — the reference rings
 * both in one colour — so it takes the theme green with a filled tint to mark
 * it as the heavier of the two.
 */
.wl-btn-warranty {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
    white-space: nowrap;
}

.wl-btn-warranty:hover {
    color: #fff;
    background: var(--g500);
}

.wl-claim-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* ---------- detail dialog ---------- */

.wl-cover {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.wl-badge {
    padding: 0.28rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.wl-badge-available {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
}

.wl-badge-sold {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #93c5fd;
}

.wl-badge-returned {
    color: #b45309;
    background: #fffbeb;
    border-color: #fcd34d;
}

.wl-badge-ok {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
}

.wl-badge-out {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fca5a5;
}

.wl-badge-none,
.wl-badge-soft {
    color: var(--ink-muted);
    background: #f1f5f9;
    border-color: var(--line);
}

.wl-sub {
    margin: 1.2rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.wl-none {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.wl-pill {
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
}

.wl-pill-yes {
    color: var(--g700);
    background: var(--g50);
}

.wl-pill-no {
    color: #b91c1c;
    background: #fef2f2;
}

/* ---------- receive dialog ---------- */

.wl-hint {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--ink);
}

.wl-hint-quiet {
    margin: 0.2rem 0 0.6rem;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.wl-textarea {
    min-height: 6rem;
    resize: vertical;
    line-height: 1.55;
}

/* ---------- dark theme ---------- */

:root[data-theme="dark"] .wl-badge-sold {
    color: #93c5fd;
    background: #16233a;
    border-color: #1e3a8a;
}

:root[data-theme="dark"] .wl-badge-returned {
    color: #fcd34d;
    background: #241d0f;
    border-color: #78350f;
}

:root[data-theme="dark"] .wl-badge-out,
:root[data-theme="dark"] .wl-pill-no {
    color: #fca5a5;
    background: #2a1416;
}

:root[data-theme="dark"] .wl-badge-none,
:root[data-theme="dark"] .wl-badge-soft {
    background: #16233a;
    border-color: #24344f;
}

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
    .wl-head {
        gap: 1rem;
    }

    .wl-head .sl-search {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Create Received Warranty  (/warranty/received/:serial)

   Two ringed cards: three summary panels across the top, then the note and
   what was settled. The panels are inset cards on a tinted ground, the way the
   reference sets them apart from the ring around them.
   ========================================================================== */

.wr-toolbar {
    margin-bottom: 0.9rem;
}

.wr-title {
    margin: 0 0 0.7rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.wr-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.wr-card + .wr-card,
.alert + .wr-card {
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   The three panels
   -------------------------------------------------------------------------- */

.wr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

.wr-panel {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    min-width: 0;
}

.wr-panel-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}

.wr-icon {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    flex: 0 0 auto;
}

/* Three quiet tints, so the panels are told apart at a glance. */
.wr-icon-product {
    color: #4338ca;
    background: #eef2ff;
}

.wr-icon-supplier {
    color: #7e22ce;
    background: #faf5ff;
}

.wr-icon-customer {
    color: var(--g700);
    background: var(--g50);
}

.wr-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.wr-panel-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wr-label {
    margin: 0 0 0.28rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.wr-value {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* The two warranty lines read as the fact they are, in the theme green. */
.wr-warranty {
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--g600);
}

.wr-rule {
    height: 1px;
    margin: 1rem 0;
    background: var(--line);
}

.wr-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.wr-right {
    text-align: right;
}

.wr-price {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--g600);
    font-variant-numeric: tabular-nums;
}

.wr-serial {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.85rem;
    color: var(--ink);
    background: #f1f5f9;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
}

/* ---------- remaining-days pills ---------- */

.wr-pill {
    display: inline-block;
    padding: 0.28rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

.wr-pill-blue {
    color: #1d4ed8;
    background: #eff6ff;
}

.wr-pill-green {
    color: var(--g700);
    background: var(--g50);
}

/* Tone wins over the panel colour: lapsed cover always reads as a problem. */
.wr-pill-out {
    color: #b91c1c;
    background: #fef2f2;
}

.wr-pill-none {
    color: var(--ink-muted);
    background: #f1f5f9;
    font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   Note and money
   -------------------------------------------------------------------------- */

.wr-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.wr-note {
    display: flex;
    flex-direction: column;
}

.wr-note-label {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.wr-note-label-date {
    margin-top: 1rem;
}

.wr-textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.55;
}

.wr-date {
    max-width: 12rem;
}

.wr-money {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.wr-money-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wr-money-label {
    flex: 1 1 auto;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.wr-money-strong {
    font-weight: 700;
}

/* Charge is what you are billing, so it is quiet until something is typed. */
.wr-charge {
    flex: 0 0 10rem;
    height: 2.4rem;
    padding: 0.4rem 0.9rem;
    text-align: right;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.wr-charge::placeholder {
    color: #f87171;
}

.wr-payby {
    margin: 0.7rem 0 0;
    padding-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.wr-account {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.925rem;
    color: var(--ink);
}

/* Money coming in is the field a cashier looks for, so it is outlined. */
.wr-amount {
    flex: 0 0 10rem;
    height: 2.4rem;
    padding: 0.4rem 0.9rem;
    text-align: right;
    border: 2px solid #dc2626;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.wr-amount:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgb(220 38 38 / 16%);
}

.wr-charge::-webkit-outer-spin-button,
.wr-charge::-webkit-inner-spin-button,
.wr-amount::-webkit-outer-spin-button,
.wr-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wr-charge[type="number"],
.wr-amount[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.wr-total {
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
}

.wr-total-value {
    flex: 0 0 10rem;
    padding-right: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    color: var(--g600);
    font-variant-numeric: tabular-nums;
}

.wr-due {
    color: #dc2626;
}

.wr-none {
    margin: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.wr-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .wr-panel,
:root[data-theme="dark"] .wr-money {
    background: #0b1220;
    border-color: #24344f;
}

:root[data-theme="dark"] .wr-icon-product {
    color: #a5b4fc;
    background: #1e1b4b;
}

:root[data-theme="dark"] .wr-icon-supplier {
    color: #d8b4fe;
    background: #2e1065;
}

:root[data-theme="dark"] .wr-serial {
    color: #e2e8f0;
    background: #16233a;
}

:root[data-theme="dark"] .wr-pill-blue {
    color: #93c5fd;
    background: #16233a;
}

:root[data-theme="dark"] .wr-pill-out {
    color: #fca5a5;
    background: #2a1416;
}

:root[data-theme="dark"] .wr-pill-none {
    color: #94a3b8;
    background: #16233a;
}

:root[data-theme="dark"] .wr-due {
    color: #f87171;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .wr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .wr-card {
        padding: 1.1rem 1rem;
    }

    .wr-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .wr-foot-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .wr-charge,
    .wr-amount,
    .wr-total-value {
        flex: 0 0 8rem;
    }
}

/* ==========================================================================
   Serial List: the In RMA marker

   A unit on the service bench. It sits beside STOCK because that is the
   question it qualifies: not on the shelf, and not out with the customer
   either — it is here, being worked on.
   ========================================================================== */

.wl-stock-cell {
    white-space: nowrap;
}

.wl-rma,
.wl-badge-rma {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.22rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--g700);
    background: var(--surface);
    border: 1.5px solid var(--g500);
    border-radius: 999px;
}

.wl-badge-rma {
    margin-left: 0;
}

.wl-pill-rma {
    color: var(--g700);
    background: var(--g50);
}

.wl-pill-done {
    color: var(--ink-muted);
    background: #f1f5f9;
}

.wl-closed {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--ink-muted);
}

:root[data-theme="dark"] .wl-rma,
:root[data-theme="dark"] .wl-badge-rma {
    background: var(--surface);
}

:root[data-theme="dark"] .wl-pill-done {
    color: #94a3b8;
    background: #16233a;
}

/* ==========================================================================
   RMA board  (/warranty/rma)

   Four stage tabs above the list, each carrying the count of repairs sitting
   in it. The tabs sit outside the card, as the reference has them.
   ========================================================================== */

.rma-tabs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.rma-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.05rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.rma-tab:hover {
    border-color: var(--g500);
    color: var(--g700);
}

.rma-tab-on {
    color: #fff;
    background: var(--g500);
    border-color: var(--g500);
}

.rma-tab-on:hover {
    color: #fff;
    background: var(--g600);
}

/*
 * The count is the number waiting, so it reads as a flag rather than as part
 * of the label — red on a quiet tab, and legible once the tab goes green.
 */
.rma-tab-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--danger);
}

.rma-tab-on .rma-tab-count {
    color: #fff;
}

/* --------------------------------------------------------------------------
   The board table
   -------------------------------------------------------------------------- */

.rma-table {
    min-width: 82rem;
}

.rma-table thead th {
    padding: 0.6rem 0.65rem;
}

.rma-table tbody td {
    padding: 0.7rem 0.65rem;
    vertical-align: middle;
}

.rma-serial {
    font-weight: 700;
    color: var(--ink);
}

/* Date, how long ago, then the cover it carries — three short lines. */
.rma-when {
    min-width: 9rem;
    white-space: nowrap;
}

.rma-date {
    font-weight: 600;
    color: var(--ink);
}

.rma-days {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.rma-contact {
    font-weight: 600;
    color: var(--ink);
}

.rma-mobile {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

.rma-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rma-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

.rma-status-received {
    color: var(--g700);
    background: var(--g50);
}

.rma-status-in_process {
    color: #1d4ed8;
    background: #eff6ff;
}

.rma-status-ready {
    color: #b45309;
    background: #fffbeb;
}

.rma-status-delivered {
    color: var(--ink-muted);
    background: #f1f5f9;
}

.rma-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   The printable job sheet
   -------------------------------------------------------------------------- */

.inv-sheet-frame {
    margin: 0 auto;
}

.rma-slip-key {
    width: 9rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}

.rma-slip-signs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    margin-top: 2.4rem;
}

.rma-slip-signs span {
    display: block;
    border-top: 1px solid var(--ink-muted);
}

.rma-slip-signs p {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .rma-tab {
    background: var(--surface);
    border-color: #24344f;
}

:root[data-theme="dark"] .rma-status-in_process {
    color: #93c5fd;
    background: #16233a;
}

:root[data-theme="dark"] .rma-status-ready {
    color: #fcd34d;
    background: #241d0f;
}

:root[data-theme="dark"] .rma-status-delivered {
    color: #94a3b8;
    background: #16233a;
}

:root[data-theme="dark"] .rma-tab-count {
    color: #f87171;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .rma-tabs {
        gap: 0.4rem;
    }

    .rma-tab {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
    }

    .rma-slip-signs {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}

/* ==========================================================================
   RMA: the replacement serial, the stage dialogs, and the warranty invoice
   ========================================================================== */

/* A supplier may send back a different unit; both numbers matter. */
/* In its own column now, so it reads as a serial in its own right rather than
   as a footnote under the one it replaced. */
.rma-new-serial {
    display: block;
    font-weight: 600;
    color: var(--g600);
}

/* Only shown when the supplier sent a different model back, which is a bigger
   fact than a new number and is worth the second line. */
.rma-new-product {
    display: block;
    max-width: 14rem;
    font-size: 0.75rem;
    color: var(--ink-muted);
    white-space: normal;
}

/*
 * "Mark Supplier Received" is the one step waiting on somebody else, so it
 * carries the amber the reference gives it rather than the theme green.
 */
.rma-btn-supplier-received {
    color: #b45309;
    border-color: #f59e0b;
}

.rma-btn-supplier-received:hover {
    color: #fff;
    background: #f59e0b;
}

.rma-btn-send-supplier,
.rma-btn-deliver {
    color: var(--g700);
    border-color: var(--g500);
}

.rma-btn-send-supplier:hover,
.rma-btn-deliver:hover {
    color: #fff;
    background: var(--g500);
}

/* Not a stage button — it changes nothing, it only prints — so it is the
   quietest of the three rather than another coloured call to action. */
.rma-btn-parcel {
    color: var(--ink-muted);
    border-color: var(--line);
}

.rma-btn-parcel:hover {
    color: var(--ink);
    border-color: var(--ink-muted);
    background: var(--g100);
}

/* --------------------------------------------------------------------------
   Parcel sticker

   Cut out and taped to the carton, so it is read across a workbench rather
   than at desk distance: the two addresses are set as large as the paper
   allows and there is nothing else competing with them.
   -------------------------------------------------------------------------- */

.pcl-sheet {
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 6px;
}

.pcl-half {
    padding: 1rem 1.15rem;
}

/* Where it is going is the one thing that must be legible from across the
   room; where it came from is for whoever opens it. */
.pcl-to {
    border-bottom: 2px dashed var(--ink);
}

.pcl-caption {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--ink-muted);
}

.pcl-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.pcl-line {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    line-height: 1.45;
}

.pcl-mobile {
    font-weight: 600;
}

.pcl-from .pcl-name {
    font-size: 1.1rem;
}

.pcl-from .pcl-line {
    font-size: 0.9rem;
}

/* Said plainly where an address is missing, so nobody tapes up a carton that
   cannot be delivered. */
.pcl-missing {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--danger);
}

.pcl-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.2rem;
    padding: 0.55rem 1.15rem;
    font-size: 0.78rem;
    color: var(--ink);
    border-top: 1px solid var(--ink);
}

.pcl-foot b {
    font-weight: 700;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Stage dialogs
   -------------------------------------------------------------------------- */

.rd-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.3rem;
}

.rd-card {
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    min-width: 0;
}

.rd-card-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

/* The party or the headline figure this card is about. */
.rd-card-who {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #4338ca;
    overflow-wrap: anywhere;
}

.rd-line {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.2rem 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.rd-line b {
    color: var(--ink);
}

.rd-line-due,
.rd-line-due b {
    color: var(--danger);
}

.rd-remain-ok {
    color: var(--g600) !important;
}

.rd-remain-out {
    color: var(--danger) !important;
}

.rd-remain-none {
    color: var(--ink-muted) !important;
}

.rd-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1rem;
}

/* A step with only a date does not need three columns of room. */
.rd-row .field:only-child {
    max-width: 14rem;
}

.rd-money-caption {
    margin: 0.6rem 0 0.4rem;
    font-size: 0.95rem;
    text-align: right;
    color: var(--ink);
}

.rd-money-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rd-account {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    color: var(--ink);
}

.rd-account-select {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
}

.rd-no-account {
    flex: 1 1 auto;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.rd-amount {
    flex: 0 0 11rem;
    height: 2.5rem;
    padding: 0.45rem 0.9rem;
    text-align: right;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.rd-amount::-webkit-outer-spin-button,
.rd-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rd-amount[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.rd-textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.55;
}

/* The step button spans the dialog, as the reference has it. */
.rd-submit {
    margin-top: 0.4rem;
}

.rd-submit .btn {
    width: 100%;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Warranty invoice
   -------------------------------------------------------------------------- */

.wi-sheet {
    color: var(--ink);
}

.wi-head {
    padding-bottom: 0.9rem;
    text-align: center;
    border-bottom: 1px solid var(--ink);
}

.wi-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.wi-id {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}

.wi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.1rem;
}

.wi-panel {
    padding: 1rem 1.1rem;
    background: #f4f5f7;
    border-radius: 8px;
    min-width: 0;
}

.wi-panel-wide {
    margin-top: 1rem;
}

.wi-panel-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.wi-panel p {
    margin: 0.22rem 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.wi-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.wi-dt {
    font-weight: 700;
}

.wi-dt-spaced {
    margin-top: 0.8rem !important;
}

.wi-foot {
    margin-top: 1.4rem;
    padding-top: 0.8rem;
    text-align: center;
    border-top: 1px solid var(--line);
}

.wi-foot p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.wi-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}

.wi-btn {
    width: 100%;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .rd-card {
    background: #0b1220;
    border-color: #24344f;
}

:root[data-theme="dark"] .rd-card-who {
    color: #a5b4fc;
}

:root[data-theme="dark"] .wi-panel {
    background: #16233a;
}

:root[data-theme="dark"] .wi-head {
    border-bottom-color: #24344f;
}

:root[data-theme="dark"] .rma-btn-supplier-received {
    color: #fbbf24;
    border-color: #b45309;
}

:root[data-theme="dark"] .rma-btn-supplier-received:hover {
    color: #0f172a;
    background: #fbbf24;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .rd-cards,
    .rd-row,
    .wi-grid,
    .wi-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Print: the invoice alone
   -------------------------------------------------------------------------- */

@media print {
    .wi-panel {
        background: #f4f5f7 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ==========================================================================
   Create Service  (/service/create, /service/:id/edit)

   Three ringed cards under a plain heading: who brought it in, what it is,
   and what has been paid. Every field carries a small leading icon, as the
   reference does, and the optional (i) marks the ones that need explaining.
   ========================================================================== */

.sv-head {
    margin-bottom: 1.1rem;
}

.sv-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

.sv-sub {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.sv-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.sv-card + .sv-card,
.alert + .sv-card {
    margin-top: 1.25rem;
}

.sv-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1.2rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
}

.sv-card-title svg {
    color: var(--g600);
}

.sv-card-note {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.sv-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sv-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.sv-label-icon {
    color: var(--ink-muted);
    flex: 0 0 auto;
}

.sv-control {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.sv-input {
    width: 100%;
    min-width: 0;
    height: 2.7rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
}

select.sv-input {
    cursor: pointer;
}

/*
 * The little (i) the reference puts at the end of a field. Title-only rather
 * than a tooltip widget: it explains on hover without adding a stateful popup
 * to a form this long.
 */
.sv-hint {
    position: absolute;
    right: 0.65rem;
    display: grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    font-size: 0.68rem;
    font-weight: 700;
    font-style: italic;
    color: var(--ink-muted);
    background: #f1f5f9;
    border-radius: 999px;
    cursor: help;
    pointer-events: auto;
}

.sv-control:has(.sv-hint) .sv-input {
    padding-right: 2.2rem;
}

/* A date input already owns its right edge, so no hint crowds it. */
.sv-control input[type="date"] + .sv-hint {
    display: none;
}

.sv-textarea {
    min-height: 7rem;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    resize: vertical;
    line-height: 1.55;
}

.sv-notes {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Customer and technician
   -------------------------------------------------------------------------- */

.sv-who-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
}

.sv-picker {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
}

.sv-new {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.7rem;
}

/* ---------- the chosen customer ---------- */

.sv-chip {
    margin-top: 1.1rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.sv-chip-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}

.sv-avatar {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--g500);
    border-radius: 999px;
    flex: 0 0 auto;
}

.sv-avatar-sm {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.8rem;
}

.sv-chip-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.sv-chip-drop,
.sv-pay-drop {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    color: var(--danger);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s ease;
}

.sv-chip-drop:hover,
.sv-pay-drop:hover {
    background: #fef2f2;
}

.sv-chip-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
}

.sv-chip-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.sv-chip-line svg {
    color: var(--ink-muted);
    flex: 0 0 auto;
}

.sv-chip-wide {
    grid-column: 1 / -1;
}

/* Nothing owed reads as settled; a balance reads as a warning. */
.sv-chip-balance {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
}

.sv-chip-balance svg {
    color: var(--g600);
}

.sv-chip-owing {
    color: #b45309;
    background: #fffbeb;
    border-color: #fcd34d;
}

.sv-chip-owing svg {
    color: #b45309;
}

/* --------------------------------------------------------------------------
   Service details grid
   -------------------------------------------------------------------------- */

.sv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.2rem;
}

.sv-span2 {
    grid-column: span 2;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Payment details
   -------------------------------------------------------------------------- */

.sv-pay {
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.sv-pay-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.8rem;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--ink);
}

.sv-pay-title svg {
    color: var(--g600);
}

.sv-pay-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.sv-pay-name {
    flex: 0 0 9rem;
    min-width: 0;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.sv-pay-amount {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.sv-cur {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    font-size: 0.9rem;
    color: var(--ink-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.sv-amount {
    width: 100%;
    height: 2.6rem;
    padding: 0.5rem 1rem 0.5rem 2rem;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.sv-amount::-webkit-outer-spin-button,
.sv-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sv-amount[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.sv-add-pay {
    width: 100%;
    height: 2.7rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    cursor: pointer;
}

.sv-add-pay:disabled {
    cursor: not-allowed;
    color: var(--ink-muted);
}

.sv-pay-hint,
.sv-pay-empty {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.sv-pay-empty {
    margin: 0 0 0.7rem;
}

/* ---------- the three tiles ---------- */

.sv-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}

.sv-tile {
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: 10px;
    min-width: 0;
}

.sv-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.sv-tile-icon {
    color: var(--ink-muted);
    flex: 0 0 auto;
}

.sv-tile-value {
    margin: 0.5rem 0 0.15rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sv-tile-foot {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink-muted);
}

/* Paid is good news, an outstanding balance is not, and a cleared one is. */
.sv-tile-paid {
    border-left-color: var(--g500);
}

.sv-tile-paid .sv-tile-icon {
    color: var(--g600);
}

.sv-tile-due {
    border-left-color: #f59e0b;
    background: #fffdf7;
}

.sv-tile-due .sv-tile-icon {
    color: #b45309;
}

.sv-tile-due .sv-tile-value {
    color: #b45309;
}

.sv-tile-clear {
    border-left-color: var(--g500);
}

.sv-tile-clear .sv-tile-icon {
    color: var(--g600);
}

/* --------------------------------------------------------------------------
   Submit
   -------------------------------------------------------------------------- */

.sv-submit {
    margin-top: 1.4rem;
    text-align: center;
}

.sv-submit .btn {
    gap: 0.45rem;
}

.sv-submit-note {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

/* The link to the slip of the job just saved. It belongs with this screen
   rather than with the slip's own styles, which is where it used to sit. */
.sv-slip-link {
    margin: 0 0 1.1rem;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .sv-chip,
:root[data-theme="dark"] .sv-pay,
:root[data-theme="dark"] .sv-tile {
    background: #0b1220;
    border-color: #24344f;
}

:root[data-theme="dark"] .sv-tile {
    border-left-color: #24344f;
}

:root[data-theme="dark"] .sv-tile-paid,
:root[data-theme="dark"] .sv-tile-clear {
    border-left-color: var(--g500);
}

:root[data-theme="dark"] .sv-tile-due {
    background: #1c1710;
    border-left-color: #b45309;
}

:root[data-theme="dark"] .sv-tile-due .sv-tile-value,
:root[data-theme="dark"] .sv-tile-due .sv-tile-icon {
    color: #fbbf24;
}

:root[data-theme="dark"] .sv-chip-line {
    background: var(--surface);
    border-color: #24344f;
}

:root[data-theme="dark"] .sv-chip-owing {
    color: #fbbf24;
    background: #241d0f;
    border-color: #78350f;
}

:root[data-theme="dark"] .sv-chip-owing svg {
    color: #fbbf24;
}

:root[data-theme="dark"] .sv-hint {
    background: #16233a;
}

:root[data-theme="dark"] .sv-chip-drop:hover,
:root[data-theme="dark"] .sv-pay-drop:hover {
    background: #2a1416;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .sv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .sv-card {
        padding: 1.1rem 1rem;
    }

    .sv-who-grid,
    .sv-grid,
    .sv-tiles,
    .sv-chip-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sv-span2 {
        grid-column: span 1;
    }

    .sv-picker {
        flex-wrap: wrap;
    }

    .sv-new {
        flex: 1 1 100%;
        justify-content: center;
    }

    .sv-pay-row {
        flex-wrap: wrap;
    }

    .sv-pay-name {
        flex: 1 1 auto;
    }

    .sv-pay-amount {
        flex: 1 1 100%;
        order: 3;
    }
}

/* ==========================================================================
   Service List  (/service/list)

   Shares the return-list card and header furniture. What is its own here: the
   status is editable in place, and the pager is a pair of green pills rather
   than the grey buttons the other lists use.
   ========================================================================== */

.svl-table {
    min-width: 76rem;
}

.svl-table thead th {
    padding: 0.62rem 0.7rem;
}

.svl-table tbody td {
    padding: 0.7rem 0.7rem;
    vertical-align: middle;
}

.svl-ref {
    font-weight: 700;
    color: var(--ink);
}

.svl-customer {
    display: block;
    font-weight: 700;
    color: var(--ink);
}

.svl-mobile {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

.svl-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Money in is good news; money still owed is not. */
.svl-paid {
    color: var(--g600);
}

.svl-due {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   The in-place status select
   -------------------------------------------------------------------------- */

.svl-status {
    width: auto;
    min-width: 9.5rem;
    height: 2.4rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.875rem;
    border-radius: 8px;
    cursor: pointer;
}

.svl-status:disabled {
    color: var(--ink-muted);
    cursor: wait;
}

/* --------------------------------------------------------------------------
   Pager and Print List — outlined pills, as the reference has them
   -------------------------------------------------------------------------- */

.svl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.2rem;
}

.svl-page {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.4rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--g700);
    background: var(--surface);
    border: 1.5px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.svl-page:hover:not(:disabled) {
    color: #fff;
    background: var(--g500);
}

.svl-page:disabled {
    color: var(--ink-muted);
    border-color: var(--line);
    cursor: not-allowed;
}

.svl-print-row {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .svl-page {
    background: var(--surface);
}

:root[data-theme="dark"] .svl-page:disabled {
    border-color: #24344f;
}

:root[data-theme="dark"] .svl-due {
    color: #f87171;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .svl-foot {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Print: the figures, without the controls
   -------------------------------------------------------------------------- */

@media print {
    .svl-table {
        min-width: 0;
    }
}

/* ==========================================================================
   Service List: the money dialogs
   ========================================================================== */

/* What has gone back, sitting under the figure it has already netted off. */
.svl-refunded {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* The job's money at a glance, so the cap below it makes sense. */
.svl-cap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.svl-cap span {
    padding: 0.25rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    background: #f1f5f9;
    border-radius: 999px;
    white-space: nowrap;
}

.svl-cap-due {
    color: var(--danger) !important;
    background: #fef2f2 !important;
}

.svl-cap-note {
    margin: 0 0 1.1rem;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.svl-dialog-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 1rem;
}

:root[data-theme="dark"] .svl-cap span {
    background: #16233a;
}

:root[data-theme="dark"] .svl-cap-due {
    color: #f87171 !important;
    background: #2a1416 !important;
}

@media (max-width: 640px) {
    .svl-dialog-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Service report  (/service/report, and ?status=… for the drill-down)

   The title and its date range sit outside the ringed card, with Print opposite
   them. Inside: the filters, six summary tiles, then one row per status.
   ========================================================================== */

.sr-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.sr-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ink);
}

.sr-range {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

/* Print is red in the reference — the one warm accent on the page. */
.sr-print {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.3rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--danger);
    background: var(--surface);
    border: 1.5px solid var(--danger);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.sr-print:hover {
    color: #fff;
    background: var(--danger);
}

.sr-card {
    padding: 1.5rem 1.7rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.alert + .sr-card {
    margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */

.sr-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
    gap: 1rem 1.5rem;
    margin-bottom: 1.6rem;
}

.sr-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sr-label {
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.sr-input {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
}

select.sr-input {
    cursor: pointer;
}

/* The calendar glyph the reference puts inside the date fields. */
.sr-date {
    position: relative;
    min-width: 0;
}

.sr-date-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    color: var(--ink-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.sr-date .sr-input {
    padding-left: 2.7rem;
}

/* --------------------------------------------------------------------------
   Summary tiles
   -------------------------------------------------------------------------- */

.sr-section {
    margin: 0 0 0.8rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.sr-tiles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.7rem;
}

.sr-tile {
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    min-width: 0;
}

.sr-tile-label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.sr-tile-value {
    margin: 0.55rem 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Money kept reads green, money owed red, money returned amber. */
.sr-tile-paid .sr-tile-value,
.sr-tile-earned .sr-tile-value {
    color: var(--g600);
}

.sr-tile-refund .sr-tile-value {
    color: #b45309;
}

.sr-tile-due .sr-tile-value {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   Tables — figures right-aligned, as the reference has them
   -------------------------------------------------------------------------- */

.sr-status-table {
    min-width: 52rem;
}

.sr-table {
    min-width: 82rem;
}

.sr-status-table thead th,
.sr-table thead th {
    padding: 0.62rem 0.7rem;
}

.sr-status-table tbody td,
.sr-table tbody td {
    padding: 0.7rem 0.7rem;
    vertical-align: middle;
}

.sr-right {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sr-status {
    font-weight: 600;
    color: var(--ink);
}

.sr-paid {
    color: var(--g600);
}

.sr-refund {
    color: #b45309;
}

.sr-due {
    color: var(--danger);
}

/* Filled, because it is the one thing on the row you can do. */
.sr-viewall {
    padding: 0.42rem 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--g600);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.sr-viewall:hover {
    background: var(--g700);
}

/* --------------------------------------------------------------------------
   Drill-down
   -------------------------------------------------------------------------- */

.sr-drill-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.sr-back {
    display: inline-block;
    margin-bottom: 0.4rem;
    font-size: 0.925rem;
    color: var(--g600);
    text-decoration: none;
}

.sr-back:hover {
    text-decoration: underline;
}

.sr-drill-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
}

.sr-drill-status {
    color: var(--g600);
}

.sr-drill-count {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.sr-perpage {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.sr-perpage span {
    max-width: 3.2rem;
    line-height: 1.2;
}

.sr-perpage-select {
    width: auto;
    min-width: 4.5rem;
    height: 2.7rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
}

/* A link, not a button: the reference styles it as plain text. */
.sr-view {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--g600);
    text-decoration: none;
    white-space: nowrap;
}

.sr-view:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .sr-tile {
    background: #0b1220;
    border-color: #24344f;
}

:root[data-theme="dark"] .sr-print {
    background: var(--surface);
}

:root[data-theme="dark"] .sr-refund,
:root[data-theme="dark"] .sr-tile-refund .sr-tile-value {
    color: #fbbf24;
}

:root[data-theme="dark"] .sr-due,
:root[data-theme="dark"] .sr-tile-due .sr-tile-value {
    color: #f87171;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    .sr-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .sr-card {
        padding: 1.1rem 1rem;
    }

    .sr-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .sr-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Print: the figures, without the controls
   -------------------------------------------------------------------------- */

@media print {
    .sr-card {
        padding: 0;
        border: 0;
    }

    .sr-tiles {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sr-status-table,
    .sr-table {
        min-width: 0;
    }
}

/* ==========================================================================
   Create Quotation  (/quotation/create, /quotation/:id/edit)

   Three ringed cards: who it is for, the lines, then the money. The cost
   columns and the Profit read-out appear together behind one switch.
   ========================================================================== */

.qt-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.qt-card + .qt-card,
.alert + .qt-card,
.qt-slip-link + form .qt-card:first-child {
    margin-top: 1.25rem;
}

.qt-slip-link {
    margin: 0 0 1.1rem;
}

.qt-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.qt-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

/* ---------- profit read-out ---------- */

.qt-profit {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.qt-profit-label {
    font-size: 0.9rem;
    color: var(--ink-muted);
}

/* Shown greyed until the cost columns give it something to say. */
.qt-profit-idle {
    align-self: flex-start;
}

.qt-profit-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--g600);
    font-variant-numeric: tabular-nums;
}

.qt-profit-bad {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   Bill To / Select Product
   -------------------------------------------------------------------------- */

.qt-head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 2.25rem;
}

.qt-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qt-label {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.qt-input {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

select.qt-input {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Lines
   -------------------------------------------------------------------------- */

.qt-lines-card {
    padding: 1rem 1.1rem;
}

.qt-toggle-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
}

.qt-toggle-label {
    font-size: 0.9rem;
    color: var(--ink);
}

.qt-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
}

.qt-table {
    min-width: 58rem;
}

.qt-table thead th {
    padding: 0.62rem 0.7rem;
}

.qt-table tbody td {
    padding: 0.6rem 0.7rem;
    vertical-align: middle;
}

.qt-cell {
    width: 100%;
    min-width: 8rem;
    height: 2.5rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    border-radius: 999px;
}

.qt-cell-sm {
    min-width: 5.5rem;
}

.qt-cell::-webkit-outer-spin-button,
.qt-cell::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qt-cell[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.qt-total {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A filled red square, as the reference draws it. */
.qt-remove {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    color: #fff;
    background: var(--danger);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.qt-remove:hover {
    background: #b91c1c;
}

.qt-lines-error {
    margin: 0.7rem 0 0;
}

/* --------------------------------------------------------------------------
   Note and money
   -------------------------------------------------------------------------- */

.qt-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: stretch;
}

.qt-note {
    display: flex;
    flex-direction: column;
}

.qt-note-label {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--ink);
}

.qt-textarea {
    flex: 1 1 auto;
    min-height: 15rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    resize: vertical;
    line-height: 1.55;
}

.qt-money {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.2rem 1.3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.qt-money-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.qt-money-label {
    flex: 1 1 auto;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

/* The one figure that reduces the offer, so it reads as a deduction. */
.qt-money-discount {
    color: var(--danger);
}

.qt-money-strong {
    font-weight: 700;
}

.qt-money-input {
    flex: 0 0 14rem;
    height: 2.6rem;
    padding: 0.5rem 0.9rem;
    text-align: right;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.qt-money-input[readonly] {
    background: var(--surface);
    color: var(--ink);
    cursor: default;
}

.qt-money-input::-webkit-outer-spin-button,
.qt-money-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qt-money-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.qt-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.2rem;
}

:root[data-theme="dark"] .qt-money {
    background: #0b1220;
    border-color: #24344f;
}

:root[data-theme="dark"] .qt-money-input[readonly] {
    background: #16233a;
    color: #e2e8f0;
}


/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .qt-card {
        padding: 1.1rem 1rem;
    }

    .qt-head {
        flex-direction: column;
        gap: 0.5rem;
    }

    .qt-head-grid,
    .qt-foot-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .qt-money-input {
        flex: 0 0 9rem;
    }

    .qt-textarea {
        min-height: 8rem;
    }
}

/* ==========================================================================
   Quotation List  (/quotation/list)

   Shares the return-list card and the Service List's header and pager. What is
   its own: the figures, which are the reason anyone opens this screen.
   ========================================================================== */

.ql-table {
    min-width: 70rem;
}

.ql-table thead th {
    padding: 0.62rem 0.7rem;
}

.ql-table tbody td {
    padding: 0.7rem 0.7rem;
    vertical-align: middle;
}

.ql-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   Add Damage  (/damage/add)

   Three ringed cards: when and what, the lines, then the note and the total.
   Everything is valued at cost, so there is no sale price anywhere on it.
   ========================================================================== */

.dm-title {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

.dm-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.dm-card + .dm-card,
.alert + .dm-card {
    margin-top: 1.25rem;
}

.dm-head-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
}

.dm-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The date sits alone on its row, as the reference has it. */
.dm-field-date {
    grid-column: 1 / 2;
}

/* The two barcode boxes carry no label, so they need the label's height. */
.dm-field-nolabel {
    justify-content: flex-end;
}

.dm-label {
    margin-bottom: 0.4rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--ink);
}

.dm-input {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

select.dm-input {
    cursor: pointer;
}

.dm-ref {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.dm-ref strong {
    color: var(--g700);
}

/* ---------- lines ---------- */

.dm-lines-card {
    padding: 0.9rem 1rem;
}

.dm-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
}

.dm-table {
    min-width: 66rem;
}

.dm-table thead th {
    padding: 0.62rem 0.7rem;
}

.dm-table tbody td {
    padding: 0.6rem 0.7rem;
    vertical-align: middle;
}

/* Cost is read-only text, not an input: the business paid what it paid. */
.dm-cost {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dm-lines-error {
    margin: 0.7rem 0 0;
}

/* ---------- note and total ---------- */

.dm-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.dm-note {
    display: flex;
    flex-direction: column;
}

.dm-note-label {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.dm-textarea {
    min-height: 11rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    resize: vertical;
    line-height: 1.55;
}

.dm-money-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dm-money-label {
    flex: 1 1 auto;
    font-size: 1rem;
    color: var(--ink);
}

.dm-money-input {
    flex: 0 0 13rem;
    height: 2.6rem;
    padding: 0.5rem 0.9rem;
    text-align: right;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.dm-money-input[readonly] {
    background: var(--surface);
    color: var(--ink);
    cursor: default;
}

.dm-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.2rem;
}

/* ==========================================================================
   Damage List  (/damage/list)

   Title and controls outside the ringed card, as the reference has them, and a
   Total row closing the table.
   ========================================================================== */

.dl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.dl-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
}

.dl-count {
    margin: 0.25rem 0 0;
    font-size: 0.925rem;
    color: var(--ink-muted);
}

.dl-tools {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.dl-search {
    flex: 0 1 16rem;
    min-width: 0;
    height: 2.7rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
}

.dl-per-page {
    width: auto;
    min-width: 8.5rem;
    height: 2.7rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
}

.dl-card {
    padding: 0.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.alert + .dl-card {
    margin-top: 1rem;
}

.dl-table-wrap {
    overflow-x: auto;
}

.dl-table {
    min-width: 52rem;
}

.dl-table thead th {
    padding: 0.62rem 0.75rem;
}

.dl-table tbody td,
.dl-table tfoot td {
    padding: 0.7rem 0.75rem;
    vertical-align: middle;
}

.dl-ref {
    font-weight: 700;
    color: var(--ink);
}

.dl-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The closing row: everything the filter matches. */
.dl-total-row td {
    font-weight: 700;
    color: var(--ink);
    background: var(--g50);
    border-top: 2px solid var(--g500);
}

.dl-print-row {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .dm-money-input[readonly] {
    background: #16233a;
    color: #e2e8f0;
}

:root[data-theme="dark"] .dl-total-row td {
    background: #16233a;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .dm-head-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dm-field-date {
        grid-column: auto;
    }
}

@media (max-width: 860px) {
    .dm-card {
        padding: 1.1rem 1rem;
    }

    .dm-head-grid,
    .dm-foot-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dl-search {
        flex: 1 1 100%;
    }

    .dm-money-input {
        flex: 0 0 9rem;
    }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .dl-card {
        padding: 0;
        border: 0;
    }

    .dl-table {
        min-width: 0;
    }

    .dl-total-row td {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ==========================================================================
   Damage Details  (/damage/:id/view)

   A sheet that gets printed and handed on: who recorded the loss, whose
   letterhead it is under, and what was written off.
   ========================================================================== */

.dv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.dv-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
}

.dv-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* ---------- the three-way header panel ---------- */

.dv-panel {
    padding: 1.2rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.alert + .dv-panel {
    margin-top: 1rem;
}

.dv-who {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* "Created By" carries a rule under it, as the reference has. */
.dv-by-label {
    display: inline-block;
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.dv-by-name {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.dv-business {
    text-align: center;
    min-width: 0;
}

.dv-logo {
    max-height: 2.4rem;
    margin: 0 auto 0.35rem;
    object-fit: contain;
}

.dv-business-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.dv-meta {
    text-align: right;
    min-width: 0;
}

/*
 * Red rather than the theme green: this document records a loss, and that is
 * the one place on the screen where the colour is carrying meaning.
 */
.dv-kind {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--danger);
}

.dv-line {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}

/* ---------- the lines ---------- */

.dv-card {
    margin-top: 1.25rem;
    padding: 0.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.dv-table-wrap {
    overflow-x: auto;
}

.dv-table {
    min-width: 44rem;
}

.dv-table thead th {
    padding: 0.62rem 0.75rem;
}

.dv-table tbody td,
.dv-table tfoot td {
    padding: 0.7rem 0.75rem;
    vertical-align: middle;
}

.dv-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The quantity total sits under its own column, as the reference has it. */
.dv-qty-total {
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.dv-serial {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ink-muted);
}

.dv-note {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

/* ---------- the boxed total ---------- */

.dv-total-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.4rem;
}

.dv-total-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    min-width: 22rem;
    padding: 0.9rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.dv-total-box span {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.dv-total-box b {
    font-size: 1.05rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .dv-panel,
:root[data-theme="dark"] .dv-total-box {
    background: #0b1220;
    border-color: #24344f;
}

:root[data-theme="dark"] .dv-by-label {
    border-bottom-color: #24344f;
}

:root[data-theme="dark"] .dv-kind {
    color: #f87171;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .dv-who {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.2rem;
    }

    .dv-business,
    .dv-meta {
        text-align: left;
    }

    .dv-logo {
        margin-left: 0;
    }

    .dv-total-box {
        min-width: 0;
        width: 100%;
        gap: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Print: the sheet alone
   -------------------------------------------------------------------------- */

@media print {
    .dv-card {
        padding: 0;
        border: 0;
    }

    .dv-table {
        min-width: 0;
    }
}

/* ==========================================================================
   Add Expense  (/expense/add)

   Three ringed cards: what and out of where, the lines, then the note beside
   the total. An expense touches no ledger and no stock, so nothing on this
   screen offers a contact or a product.
   ========================================================================== */

.ex-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.ex-card + .ex-card,
.alert + .ex-card {
    margin-top: 1.25rem;
}

.ex-title {
    margin: 0 0 1.15rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

.ex-head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.1rem 1.5rem;
    align-items: end;
}

.ex-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ex-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--ink);
}

/* The icon carries the theme colour; the words stay ink, so they stay read. */
.ex-label-icon {
    color: var(--g600);
    flex: none;
}

.ex-input {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

select.ex-input {
    cursor: pointer;
}

/* The select and its quick-add sit on one line, as the reference has them. */
.ex-type-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ex-add-type {
    flex: none;
    height: 2.9rem;
    padding: 0 1.25rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.ex-add-type:hover {
    color: #fff;
    background: var(--g500);
}

.ex-ref {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.ex-ref strong {
    color: var(--g700);
}

/* ---------- the lines ---------- */

.ex-lines-card {
    padding: 0.9rem 1rem;
}

.ex-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
}

.ex-table {
    min-width: 46rem;
}

.ex-table thead th {
    padding: 0.62rem 0.7rem;
}

.ex-table tbody td {
    padding: 0.6rem 0.7rem;
    vertical-align: middle;
}

.ex-cell-in {
    width: 100%;
    height: 2.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
}

select.ex-cell-in {
    cursor: pointer;
}

.ex-cell-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ex-lines-error {
    margin: 0.7rem 0 0;
}

/* ---------- the note, the total, and Create ---------- */

.ex-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.ex-note {
    display: flex;
    flex-direction: column;
}

.ex-note-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.ex-textarea {
    min-height: 9.5rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    resize: vertical;
    line-height: 1.55;
}

.ex-money {
    display: flex;
    flex-direction: column;
}

.ex-money-input {
    height: 2.75rem;
    padding: 0.5rem 1rem;
    text-align: right;
    border-radius: 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ex-money-input[readonly] {
    background: var(--surface);
    color: var(--ink);
    cursor: default;
}

/* Create sits directly under the figure it commits, and spans it. */
.ex-actions {
    display: flex;
    margin-top: 1rem;
}

.ex-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* ==========================================================================
   Expense List  (/expense/list)

   Title and filters outside the ringed card, a Total row closing the table,
   and the same money split by heading underneath.
   ========================================================================== */

.exl-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.exl-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
}

.exl-range {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.exl-filters {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.exl-period {
    height: 2.7rem;
    min-width: 9rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}

.exl-date {
    display: flex;
    flex-direction: column;
}

.exl-date-label {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

/* The calendar mark sits inside the pill beside the value, as the reference has it. */
.exl-date-box {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    height: 2.7rem;
    padding: 0 1rem;
    color: var(--g600);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.exl-date-box:focus-within {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 18%);
}

.exl-date-input {
    min-width: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
}

.exl-tools {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.exl-search {
    flex: 1 1 18rem;
    height: 2.7rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
}

.exl-per-page {
    flex: 0 0 10rem;
    height: 2.7rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}

.exl-card {
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.exl-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
}

.exl-table {
    min-width: 60rem;
}

.exl-num {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A note can run long; it should not push the figures off the screen. */
.exl-note {
    max-width: 18rem;
    color: var(--ink-muted);
}

.exl-history {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.35;
}

.exl-account {
    font-weight: 600;
    color: var(--ink);
}

.exl-by {
    font-size: 0.78rem;
    color: var(--ink-muted);
}

.exl-actions {
    display: flex;
    gap: 0.4rem;
}

.exl-total-row td {
    font-weight: 700;
    color: var(--ink);
    background: var(--g50);
    border-top: 2px solid var(--g500);
}

.exl-sub-title {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
}

.exl-cat-table {
    min-width: 34rem;
}

.exl-print-row {
    margin-top: 1rem;
}

.exl-warn {
    margin: 0.6rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

/* ==========================================================================
   Expense By Type  (/expense/by-type)

   One ringed card of filters over another holding the answer, closed by a
   Total row that stands out because it is the line the screen exists for.
   ========================================================================== */

.ebt-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.ebt-card + .ebt-card,
.alert + .ebt-card {
    margin-top: 1.25rem;
}

.ebt-title {
    margin: 0 0 1.15rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

.ebt-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
    align-items: end;
}

.ebt-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ebt-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--ink);
}

.ebt-label-icon {
    color: var(--g600);
    flex: none;
}

.ebt-input {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

select.ebt-input {
    cursor: pointer;
}

.ebt-range {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.ebt-result-card {
    padding: 0.9rem 1rem;
}

.ebt-table {
    min-width: 46rem;
}

.ebt-num {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ebt-note {
    max-width: 20rem;
    color: var(--ink-muted);
}

.ebt-actions {
    display: flex;
    gap: 0.4rem;
}

.ebt-total-row td {
    font-weight: 700;
    color: var(--ink);
    background: var(--g50);
    border-top: 2px solid var(--g500);
}

/*
   The one figure this screen is asked for. Red because it is money leaving,
   which is the same reading the Damage sheet gives its heading.
*/
.ebt-total-num {
    font-weight: 700;
    color: var(--danger);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ebt-per-page {
    height: 2.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
}

.ebt-print-row {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* ---------- the shared edit dialog ---------- */

.ee-textarea {
    min-height: 6rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    resize: vertical;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .exl-total-row td,
:root[data-theme="dark"] .ebt-total-row td {
    background: #16233a;
}

:root[data-theme="dark"] .ex-money-input[readonly] {
    background: var(--surface);
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .ex-head-grid,
    .ebt-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ex-foot-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .ex-type-row {
        flex-wrap: wrap;
    }

    .exl-filters {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Print

   The filters go, the ring comes off, and the tables stop demanding a minimum
   width so they fit the sheet. The two Total rows keep their fill, because a
   totals line that prints as plain text stops reading as a totals line.
   -------------------------------------------------------------------------- */

@media print {
    .exl-card,
    .ebt-card,
    .ebt-result-card {
        padding: 0;
        border: 0;
    }

    .exl-table,
    .exl-cat-table,
    .ebt-table {
        min-width: 0;
    }

    .exl-total-row td,
    .ebt-total-row td,
    .ebt-total-num {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* The period is the whole meaning of the figures, so it stays on the page. */
    .exl-range,
    .ebt-range {
        color: #334155;
    }
}

/* ==========================================================================
   Multi Barcode  (/barcode/multi)

   Controls on the left, the actual print run on the right. The preview is not
   a sample: what is in the sheet is what leaves the printer, which is why the
   sheet is the only thing @media print keeps.
   ========================================================================== */

.bl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.bl-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.bl-panel {
    min-width: 0;
}

.bl-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.bl-hint {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

/* ---------- the multi-select ---------- */

.pms {
    position: relative;
}

.pms-control {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.35rem 0.35rem 0.35rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pms-control-open,
.pms-control:focus-within {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 18%);
}

.pms-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.15rem 0;
}

.pms-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.3rem 0.35rem 0.3rem 0.7rem;
    font-size: 0.875rem;
    color: var(--ink);
    background: var(--g50);
    border: 1px solid var(--g100);
    border-radius: 8px;
}

.pms-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    color: var(--ink-muted);
    background: none;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pms-chip-x:hover {
    color: #fff;
    background: var(--danger);
}

.pms-input {
    flex: 1 1 6rem;
    min-width: 4rem;
    padding: 0.25rem 0;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
}

.pms-tools {
    display: flex;
    align-items: center;
    flex: none;
    gap: 0.15rem;
}

.pms-clear,
.pms-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    color: var(--ink-muted);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pms-clear:hover:not(:disabled),
.pms-caret:hover {
    color: var(--g700);
    background: var(--g50);
}

.pms-clear:disabled {
    opacity: 0.35;
    cursor: default;
}

.pms-sep {
    width: 1px;
    height: 1.3rem;
    background: var(--line);
}

.pms-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: 17rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.pms-option {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    color: var(--ink);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.pms-option-active {
    color: var(--g700);
    background: var(--g50);
}

.pms-none {
    padding: 0.75rem;
    font-size: 0.88rem;
    color: var(--ink-muted);
}

/* ---------- quantities ---------- */

.mb-qty-card {
    margin-top: 0.9rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.mb-qty-title {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.mb-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.mb-qty-row + .mb-qty-row {
    margin-top: 0.5rem;
}

.mb-qty-name {
    min-width: 0;
    font-size: 0.925rem;
    color: var(--ink);
}

.mb-qty-field {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.mb-qty-input {
    width: 5rem;
    height: 2.3rem;
    padding: 0.35rem 0.6rem;
    text-align: center;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

/* The running count, set apart because it is what the Print button commits. */
.mb-total {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: right;
    color: var(--g700);
}

/* ---------- toggles ---------- */

.bl-toggles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem 1rem;
    margin: 1.5rem 0 0.5rem;
}

.bl-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.bl-toggle-label {
    font-size: 0.95rem;
    color: var(--ink);
}

.bl-toggle-state {
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.bl-switch {
    position: relative;
    flex: none;
    width: 3.1rem;
    height: 1.7rem;
    padding: 0;
    background: #cbd5e1;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.bl-switch-on {
    background: var(--g500);
}

.bl-knob {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.3rem;
    height: 1.3rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgb(15 23 42 / 30%);
    transition: transform 0.18s ease;
}

.bl-switch-on .bl-knob {
    transform: translateX(1.4rem);
}

/* ---------- sliders ---------- */

.bl-sliders {
    margin-top: 1.25rem;
}

.bl-slider + .bl-slider {
    margin-top: 1.1rem;
}

.bl-slider-off {
    opacity: 0.45;
}

.bl-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.bl-slider-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

/*
   The value is the one number being changed, so it carries the accent the
   track does — the eye finds the figure and the handle as one pair.
*/
.bl-slider-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--g700);
    font-variant-numeric: tabular-nums;
}

.bl-range {
    width: 100%;
    height: 6px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(90deg, var(--g500), var(--g700));
    border-radius: 999px;
    cursor: pointer;
}

.bl-range:disabled {
    cursor: default;
}

.bl-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    background: var(--g600);
    border: 3px solid var(--surface);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgb(16 185 129 / 25%);
    cursor: pointer;
}

.bl-range::-moz-range-thumb {
    width: 17px;
    height: 17px;
    background: var(--g600);
    border: 3px solid var(--surface);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgb(16 185 129 / 25%);
    cursor: pointer;
}

.bl-print {
    width: 100%;
    margin-top: 1.75rem;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.bl-print:hover:not(:disabled) {
    color: #fff;
    background: var(--g500);
}

.bl-print:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---------- the sheet ---------- */

.bl-sheet {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.5rem;
    min-height: 6rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.bs-sticker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    width: 13rem;
    padding: 0.5rem 0.6rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.bs-sticker-company {
    margin: 0;
    font-weight: 700;
    line-height: 1.25;
    color: #000;
}

/* One line: a wrapped product name pushes the bars off a small label. */
.bs-sticker-name {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    color: #000;
}

.bs-sticker-price {
    margin: 0;
    line-height: 1.25;
    color: #000;
}

.bs-sticker-bars {
    display: block;
    max-width: 100%;
    margin: 0.15rem 0 0;
}

.bs-sticker-code {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.08em;
    line-height: 1.25;
    color: #000;
}

.bs-sticker-nobars {
    margin: 0.3rem 0;
    font-size: 0.75rem;
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   Dark theme

   The sticker itself stays white on black: it is a piece of paper, and a
   barcode inverted for the screen would not survive the printer.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .bl-switch {
    background: #475569;
}

:root[data-theme="dark"] .bs-sticker {
    border-color: #cbd5e1;
}

/* --------------------------------------------------------------------------
   Print

   Only the sheet goes to paper, and it drops its own frame so the stickers
   start at the corner of the label roll rather than inset by a card.
   -------------------------------------------------------------------------- */

@media print {
    .bl-layout {
        display: block;
    }

    .bl-sheet {
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .bs-sticker {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .bs-sticker-bars rect {
        fill: #000 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .bl-layout,
    .sb-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bl-toggles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .bl-toggles,
    .sb-toggles {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Single Barcode  (/barcode/single)

   The same panel as Multi Barcode over one product, so it wears the shared
   bl- furniture and adds only what differs: a plain select, and the Print
   Quantity box centred under it.
   ========================================================================== */

/*
   A narrower control column than Multi Barcode, because one product needs no
   room for a list of chips, and two toggle columns rather than three so the
   labels are not cramped into it.
*/
.sb-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
}

.sb-toggles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sb-select {
    width: 100%;
    height: 3rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
}

/* Label above, box below, both centred on the select — as the reference has it. */
.sb-qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.sb-qty-label {
    font-size: 1rem;
    color: var(--ink);
}

/*
   Ringed in the theme green rather than the plain field grey: this is the one
   number that decides how much comes out of the printer.
*/
.sb-qty-input {
    width: 11rem;
    height: 2.9rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    text-align: center;
    color: var(--ink);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    outline: none;
    font-variant-numeric: tabular-nums;
    transition: box-shadow 0.15s ease;
}

.sb-qty-input:focus {
    box-shadow: 0 0 0 3px rgb(16 185 129 / 22%);
}

/* One sticker at a time reads better centred than tucked into a corner. */
.sb-sheet {
    align-content: center;
    justify-content: center;
    min-height: 14rem;
}

/* A single label is sized by its content, so the whole name stays readable. */
.bs-sticker-wide {
    width: auto;
    max-width: 100%;
    min-width: 11rem;
    padding: 0.6rem 1.1rem;
}

.bs-sticker-wide .bs-sticker-name {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

@media print {
    .sb-sheet {
        align-content: flex-start;
        justify-content: flex-start;
        min-height: 0;
    }
}

/* A capped run is said out loud, never silently shortened. */
.bl-capped {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--danger);
}

/* ==========================================================================
   Bank Accounts  (/bank-account/list)

   Two ringed cards: create above, the list below. The balance column is the
   whole point of the screen, so it is the one thing that carries colour.
   ========================================================================== */

.ba-card {
    padding: 1.5rem 1.75rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.ba-card + .ba-card,
.alert + .ba-card {
    margin-top: 1.5rem;
}

.ba-title {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
}

/* The inner panel the reference sets the fields into. */
.ba-form {
    padding: 1.35rem 1.5rem;
    background: var(--g50);
    border-radius: 12px;
}

.ba-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.1rem 1.75rem;
}

.ba-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* No label of its own, so the button lines up with the input beside it. */
.ba-field-action {
    justify-content: flex-end;
}

.ba-field-action .btn {
    width: 100%;
    height: 2.9rem;
    justify-content: center;
    border-radius: 999px;
}

.ba-label {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    color: var(--ink);
}

.ba-input {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

/* ---------- the list ---------- */

.ba-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.ba-list-head .ba-title {
    margin: 0;
}

.ba-search {
    flex: 0 1 22rem;
    height: 2.9rem;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
}

.ba-table {
    min-width: 44rem;
}

/* The number and branch belong to the name, not to a column of their own. */
.ba-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--ink-muted);
}

/*
 * Debit and credit sit beside the balance, so the heading has to line up over
 * the figures. Qualified with the table, because .pl-table thead th sets
 * text-align and a lone class does not outrank it.
 */
.pl-table thead th.ba-num-th {
    text-align: right;
}

/* Right-aligned and tabular, so the columns can be read down. */
.ba-num {
    text-align: right;
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Of the three, the balance is the conclusion; the other two are its working. */
.ba-num-bold {
    font-weight: 700;
}

/*
 * An account that has paid out more than it took in.
 *
 * Qualified the same way: .pl-table tbody td sets a colour, and at two levels
 * deep it beat this rule outright — which is why the red never appeared.
 */
.pl-table tbody td.ba-num-neg,
.ba-num-neg {
    color: var(--danger);
}

.ba-actions {
    display: flex;
    gap: 0.5rem;
}

.ba-btn {
    padding: 0.4rem 1.15rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 1.5px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.ba-btn:hover {
    color: #fff;
    background: var(--g500);
}

.ba-total-row td {
    font-weight: 700;
    color: var(--ink);
    background: var(--g50);
    border-top: 2px solid var(--g500);
}

/* ---------- the report ---------- */

.ba-report-table {
    min-width: 40rem;
}

.ba-report-note {
    margin: 0.9rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .ba-form,
:root[data-theme="dark"] .ba-total-row td {
    background: #16233a;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 800px) {
    .ba-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ba-search {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Balance Transfer  (/bank-account/transfer)

   Wears the Bank Accounts card and table, because the table below is the same
   table — it is on this screen to show that the Total does not move.
   ========================================================================== */

.bt-heading {
    margin: 0 0 1.1rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

.bt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.1rem 1.75rem;
}

/* The figure being committed, so it reads as a number rather than a label. */
.bt-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bt-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.35rem;
}

.bt-actions .btn {
    border-radius: 999px;
}

.bt-report-table {
    min-width: 48rem;
}

.bt-note {
    margin: 0.9rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

@media (max-width: 800px) {
    .bt-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Cheque Management  (/bank-account/cheque)

   One ringed card holding the whole screen: tabs, filters, the three figures,
   then the register. The stat cards keep red and green because those are the
   two directions money can go, not decoration.
   ========================================================================== */

.cq-card {
    padding: 1.5rem 1.75rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.cq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
}

.cq-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ink);
}

.cq-add {
    padding: 0.7rem 1.6rem;
    font-family: inherit;
    font-size: 0.975rem;
    font-weight: 700;
    color: #fff;
    background: var(--g600);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cq-add:hover {
    background: var(--g700);
}

/* ---------- the status tabs ---------- */

.cq-tabs {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
}

.cq-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--canvas);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.cq-tab:hover {
    background: var(--g50);
}

.cq-tab-on,
.cq-tab-on:hover {
    color: #fff;
    background: var(--g600);
}

/* The count rides along, so a full tab is visible without opening it. */
.cq-tab-count {
    padding: 0.05rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--g700);
    background: #fff;
    border-radius: 999px;
}

.cq-tab-on .cq-tab-count {
    color: var(--g700);
}

/* ---------- search and type ---------- */

.cq-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.cq-search {
    flex: 1 1 22rem;
    height: 3rem;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
}

.cq-type {
    flex: 0 0 13rem;
    height: 3rem;
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    cursor: pointer;
}

/* ---------- the three figures ---------- */

.cq-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.cq-stat {
    padding: 1.15rem 1.35rem;
    border: 1px solid;
    border-radius: 10px;
}

.cq-stat-label {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
}

.cq-stat-value {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.cq-stat-sub {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
}

/* Money out. */
.cq-stat-pay {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: #fecaca;
}

/* Money in. */
.cq-stat-rec {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g100);
}

/* Neither one nor the other: what is left once both settle. */
.cq-stat-net {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* ---------- the register ---------- */

.cq-table {
    min-width: 68rem;
}

.cq-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--ink-muted);
}

.cq-num {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cq-type-tag {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.cq-type-receive {
    color: var(--g700);
    background: var(--g50);
}

.cq-type-payment {
    color: var(--danger);
    background: var(--danger-soft);
}

/* Changed in place, because that is the daily work of this screen. */
.cq-status {
    padding: 0.3rem 0.6rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1.5px solid;
    border-radius: 999px;
    cursor: pointer;
}

.cq-status-pending {
    color: #b45309;
    background: #fffbeb;
    border-color: #fcd34d;
}

.cq-status-deposited {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.cq-status-bounce {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: #fecaca;
}

.cq-status-cleared {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g100);
}

.cq-actions {
    display: flex;
    gap: 0.4rem;
}

.cq-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.cq-showing {
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.cq-foot-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cq-show {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.cq-per-page {
    height: 2.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 10px;
    cursor: pointer;
}

.cq-textarea {
    min-height: 5.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    resize: vertical;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Dark theme

   The stat cards keep their meaning but drop to backgrounds that belong on a
   dark page rather than glowing off it.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .cq-tab {
    background: #16233a;
}

:root[data-theme="dark"] .cq-tab-count {
    background: #0b1220;
}

:root[data-theme="dark"] .cq-stat-pay {
    background: #2a1518;
    border-color: #7f1d1d;
}

:root[data-theme="dark"] .cq-stat-rec {
    background: #0f2a22;
    border-color: #14532d;
}

:root[data-theme="dark"] .cq-stat-net {
    color: #93c5fd;
    background: #12203a;
    border-color: #1e3a8a;
}

:root[data-theme="dark"] .cq-status-pending {
    background: #2a2110;
    border-color: #92400e;
}

:root[data-theme="dark"] .cq-status-deposited {
    background: #12203a;
    border-color: #1e3a8a;
}

:root[data-theme="dark"] .cq-status-bounce {
    background: #2a1518;
    border-color: #7f1d1d;
}

:root[data-theme="dark"] .cq-status-cleared {
    background: #0f2a22;
    border-color: #14532d;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .cq-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .cq-search,
    .cq-type {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Transactions  (/bank-account/transactions)

   Two ringed cards: the filters, then the register. Nothing here is editable —
   every line belongs to the document that made it, and Action goes there.
   ========================================================================== */

.txn-card {
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.txn-card + .txn-card,
.alert + .txn-card {
    margin-top: 1.35rem;
}

.txn-filters {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.txn-period {
    flex: 0 0 12rem;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
}

.txn-dates {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.txn-date {
    display: flex;
    flex-direction: column;
}

.txn-date-label {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

/* The calendar mark sits inside the pill beside the value. */
.txn-date-box {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    height: 2.9rem;
    padding: 0 1.1rem;
    color: var(--g600);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.txn-date-box:focus-within {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 18%);
}

.txn-date-input {
    min-width: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
}

.txn-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.txn-search {
    flex: 1 1 18rem;
    height: 2.75rem;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
}

.txn-print {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    padding: 0.6rem 1.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.txn-print:hover {
    color: #fff;
    background: var(--g500);
}

.txn-select {
    flex: 0 0 9.5rem;
    height: 2.75rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}

.txn-range {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

/* ---------- the register ---------- */

.txn-table {
    min-width: 66rem;
}

/* Which account the movement went through, under what it was. */
.txn-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--ink-muted);
}

.txn-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The two directions money can go, told apart at a glance. */
.txn-out {
    color: var(--danger);
}

.txn-in {
    color: var(--g700);
}

.txn-nolink {
    color: var(--ink-muted);
}

.txn-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.txn-showing {
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.txn-foot-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.txn-show {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.txn-per-page {
    height: 2.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .txn-card {
        padding: 0;
        border: 0;
    }

    .txn-table {
        min-width: 0;
    }

    .txn-out,
    .txn-in,
    .ba-total-row td {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .txn-period,
    .txn-select {
        flex: 1 1 100%;
    }

    .txn-tools {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   Investors  (/investment/investors, /investment/investor/:id/report)

   Two ringed cards: add above, the list below. INVESTMENT is worked out from
   the movements rather than stored, which is what the Report page shows.
   ========================================================================== */

.ivr-card {
    padding: 1.5rem 1.75rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.ivr-card + .ivr-card,
.alert + .ivr-card {
    margin-top: 1.5rem;
}

.ivr-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
}

.ivr-count {
    margin: 0.3rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

/* ---------- the add form ---------- */

.ivr-form {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.ivr-field {
    display: flex;
    flex-direction: column;
    flex: 0 1 20rem;
    min-width: 0;
}

.ivr-label {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    color: var(--ink);
}

.ivr-input {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

.ivr-form-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.ivr-form-actions .btn {
    height: 2.9rem;
    padding: 0 2.25rem;
    border-radius: 999px;
}

/*
   Amber rather than red: cancelling clears a form, it does not destroy
   anything, and red here would overstate what the button does.
*/
.ivr-cancel {
    height: 2.9rem;
    padding: 0 2rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #b45309;
    background: var(--surface);
    border: 2px solid #f59e0b;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.ivr-cancel:hover {
    color: #fff;
    background: #f59e0b;
}

/* ---------- the list ---------- */

.ivr-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
}

.ivr-search {
    flex: 0 1 22rem;
    height: 2.9rem;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
}

.ivr-table {
    min-width: 46rem;
}

.ivr-num {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Money going back out. */
.ivr-neg {
    color: var(--danger);
}

.ivr-total-label {
    text-align: right;
}

.ivr-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ivr-btn {
    padding: 0.4rem 1.15rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--surface);
    border: 1.5px solid;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.ivr-btn-receive {
    color: var(--g600);
    border-color: var(--g500);
}

.ivr-btn-receive:hover {
    color: #fff;
    background: var(--g500);
}

.ivr-btn-return {
    color: #b45309;
    border-color: #f59e0b;
}

.ivr-btn-return:hover:not(:disabled) {
    color: #fff;
    background: #f59e0b;
}

/* Nothing invested means nothing to give back. */
.ivr-btn-return:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ivr-btn-report {
    color: #b45309;
    border-color: #f59e0b;
}

.ivr-btn-report:hover {
    color: #fff;
    background: #f59e0b;
}

/* ---------- the report ---------- */

.ivr-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.ivr-stat {
    padding: 1.15rem 1.35rem;
    border: 1px solid;
    border-radius: 10px;
}

.ivr-stat-label {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    color: var(--ink-muted);
}

.ivr-stat-value {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ivr-stat-in {
    background: var(--g50);
    border-color: var(--g100);
}

.ivr-stat-in .ivr-stat-value {
    color: var(--g700);
}

.ivr-stat-out {
    background: var(--danger-soft);
    border-color: #fecaca;
}

.ivr-stat-out .ivr-stat-value {
    color: var(--danger);
}

.ivr-stat-net {
    background: var(--surface);
    border-color: var(--line);
}

.ivr-stat-net .ivr-stat-value {
    color: var(--g700);
}

.ivr-report-table {
    min-width: 40rem;
}

.ivr-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--ink-muted);
}

.ivr-tag {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.ivr-tag-receive {
    color: var(--g700);
    background: var(--g50);
}

.ivr-tag-return {
    color: var(--danger);
    background: var(--danger-soft);
}

.ivr-hint {
    margin: -0.35rem 0 1rem;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.ivr-textarea {
    min-height: 5.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    resize: vertical;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .ivr-stat-in {
    background: #0f2a22;
    border-color: #14532d;
}

:root[data-theme="dark"] .ivr-stat-out {
    background: #2a1518;
    border-color: #7f1d1d;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .ivr-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .ivr-field,
    .ivr-search {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Create EMI  (/emi/create)

   One ringed card. The three read-outs sit between the form and Payment By,
   because they are what the numbers above them come to — and Payment Total
   turning green is the signal that Create will go through.
   ========================================================================== */

.emi-card {
    padding: 1.5rem 1.75rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.alert + .emi-card {
    margin-top: 1.25rem;
}

.emi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.emi-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
}

.emi-sub {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.emi-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.15rem 1.75rem;
}

.emi-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.emi-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.emi-label-icon {
    color: var(--g600);
    flex: none;
}

.emi-input {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

select.emi-input {
    cursor: pointer;
}

/* Filled from the sale, so it is shown rather than asked for. */
.emi-input[readonly] {
    background: var(--canvas);
    color: var(--ink);
    cursor: default;
}

.emi-hint {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

/* ---------- the read-outs ---------- */

.emi-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.emi-stat {
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.emi-stat-label {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.emi-stat-value {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Collected matches the advance: the plan can be saved. */
.emi-ok {
    color: var(--g700);
}

/* It does not: the server would refuse this, so the screen says so first. */
.emi-bad {
    color: var(--danger);
}

/* ---------- payment by ---------- */

.emi-pay-title {
    margin: 1.75rem 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
}

.emi-pay-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.emi-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.emi-pay-name {
    font-size: 0.975rem;
    color: var(--ink);
}

.emi-pay-input {
    flex: 0 0 14rem;
    height: 2.9rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    text-align: right;
    color: var(--ink);
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 8px;
    outline: none;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.emi-pay-input:focus {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 20%);
}

/* Ringed green once the collected total matches the advance. */
.emi-pay-ok {
    border-color: var(--g500);
}

.emi-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.75rem;
}

.emi-actions .btn {
    padding: 0 2.5rem;
    height: 2.9rem;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .emi-input[readonly] {
    background: #16233a;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .emi-grid,
    .emi-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .emi-pay-input {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   EMI List  (/emi/list)

   Progress is two bars, not one: instalments settled and money in answer
   different questions once the last instalment carries the rounding.
   ========================================================================== */

.eml-card {
    padding: 1.5rem 1.75rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.alert + .eml-card {
    margin-top: 1.25rem;
}

.eml-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.eml-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ink);
}

.eml-count {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.eml-tools {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.eml-search {
    flex: 0 1 20rem;
    height: 2.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
}

.eml-per-page {
    flex: none;
    height: 2.9rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}

.eml-create {
    flex: none;
    height: 2.9rem;
    padding: 0 1.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--g600);
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.eml-create:hover {
    color: #fff;
    background: var(--g500);
}

.eml-tabs {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.eml-table {
    min-width: 76rem;
}

.eml-table tbody td {
    vertical-align: top;
}

.eml-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--ink-muted);
}

.eml-num {
    display: block;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.eml-paid {
    font-weight: 700;
    color: var(--g700);
}

.eml-due {
    margin-top: 0.15rem;
    font-weight: 700;
    color: var(--danger);
}

/* ---------- the two progress bars ---------- */

.eml-progress {
    min-width: 13rem;
}

.eml-bar-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.eml-bar-row + .eml-bar {
    margin: 0.25rem 0 0.6rem;
}

.eml-bar {
    height: 7px;
    overflow: hidden;
    background: var(--canvas);
    border-radius: 999px;
}

.eml-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

/* Rows settled. */
.eml-bar-count {
    background: #2563eb;
}

/* Money in. */
.eml-bar-amount {
    background: var(--g500);
}

.eml-type {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6d28d9;
    background: #f5f3ff;
    border-radius: 999px;
}

.eml-status {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.eml-status-active {
    color: #1d4ed8;
    background: #eff6ff;
}

.eml-status-completed {
    color: var(--g700);
    background: var(--g50);
}

.eml-status-cancelled {
    color: var(--danger);
    background: var(--danger-soft);
}

.eml-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   EMI Installments  (/emi/:id/installments, /emi/:id/invoice)
   ========================================================================== */

.emv-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
}

.emv-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

/* The letterhead, boxed off as it is on the printed sheet. */
.emv-business {
    padding: 0.75rem 1.1rem;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.emv-business-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.emv-line {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.emv-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.emv-cell {
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.emv-cell-label {
    margin: 0 0 0.3rem;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.emv-cell-value {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.emv-cell-sub {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.emv-in {
    color: var(--g700);
}

.emv-out {
    color: var(--danger);
}

.emv-table {
    min-width: 68rem;
}

/* Banded rows: thirteen lines of figures are hard to track across otherwise. */
.emv-alt td {
    background: var(--g50);
}

.emv-num {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.emv-note {
    max-width: 14rem;
    color: var(--ink-muted);
}

.emv-tag {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.emv-tag-paid {
    color: var(--g700);
    background: var(--g50);
}

.emv-tag-partial {
    color: #b45309;
    background: #fffbeb;
}

.emv-tag-pending {
    color: #1d4ed8;
    background: #eff6ff;
}

.emv-done {
    color: var(--ink-muted);
}

.emv-pay-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    margin-top: 0.9rem;
    font-size: 0.95rem;
    color: var(--ink-muted);
    border-top: 1px solid var(--line);
}

.emv-pay-total strong {
    font-variant-numeric: tabular-nums;
}

/* Not yet covered, so Submit will not go through. */
.emi-pay-bad {
    border-color: #fca5a5;
}

/* ---------- the printable sheet ---------- */

.emi-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.emi-sheet {
    padding: 1.75rem 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.emi-sheet-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ---------- the money receipt ---------- */

.emr {
    padding: 0.5rem 0.25rem;
}

.emr-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

/* The letterhead block, left of the heading. */
.emr-business {
    flex: 1 1 12rem;
    min-width: 0;
}

.emr-business-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
}

.emr-line {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.emr-centre {
    text-align: center;
}

.emr-heading {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
}

.emr-phone {
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.emr-kind {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--ink);
}

.emr-meta {
    text-align: right;
}

.emr-strong {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

/* Amber, as on the reference: a rule that separates rather than warns. */
.emr-rule {
    height: 3px;
    margin: 0.9rem 0 1.1rem;
    background: #f59e0b;
    border-radius: 2px;
}

.emr-from {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--ink);
}

.emr-amount {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.emr-via {
    font-weight: 400;
    color: var(--ink-muted);
}

.emr-words {
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.emr-figures {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
    color: var(--ink);
}

.emr-note {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
    color: var(--ink);
}

.emr-signs {
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
    margin-top: 3.5rem;
}

.emr-sign {
    padding-top: 0.4rem;
    font-size: 0.95rem;
    color: var(--ink);
    border-top: 1px solid var(--ink);
}

.emr-close {
    padding: 0.55rem 1.5rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--danger);
    background: var(--surface);
    border: 2px solid var(--danger);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.emr-close:hover {
    color: #fff;
    background: var(--danger);
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .emv-alt td {
    background: #16233a;
}

:root[data-theme="dark"] .eml-type {
    color: #c4b5fd;
    background: #221a3a;
}

:root[data-theme="dark"] .eml-status-active,
:root[data-theme="dark"] .emv-tag-pending {
    background: #12203a;
}

:root[data-theme="dark"] .emv-tag-partial {
    background: #2a2110;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .eml-card,
    .emi-sheet {
        padding: 0;
        border: 0;
    }

    .emv-table,
    .eml-table {
        min-width: 0;
    }

    .emv-alt td,
    .emv-tag,
    .eml-status,
    .eml-type,
    .ba-total-row td {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .emv-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .emv-cards,
    .emi-sheet-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .eml-search {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Installment Report  (/emi/installment-report)

   Wears the EMI card and table, because it is the same schedule seen across
   every plan at once. Only the filter row and the three figures are its own.
   ========================================================================== */

.isr-filters {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
}

.isr-tabs {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.isr-dates {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.isr-period {
    height: 2.9rem;
    min-width: 10rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
}

.isr-date {
    display: flex;
    flex-direction: column;
}

.isr-date-label {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

/* The calendar mark sits inside the pill beside the value. */
.isr-date-box {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    height: 2.9rem;
    padding: 0 1.1rem;
    color: var(--g600);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.isr-date-box:focus-within {
    border-color: var(--g500);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 18%);
}

.isr-date-input {
    min-width: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
}

.isr-search {
    flex: 1 1 18rem;
    height: 2.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
}

.isr-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.isr-table {
    min-width: 74rem;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .isr-table {
        min-width: 0;
    }

    /*
     * The note column is left to size itself.
     *
     * Capping it was tried and made things worse: narrowing the column does not
     * remove the text, it wraps it, so the rows grew taller and a full page went
     * from 200mm to 224mm. Truncating instead would lose part of a record
     * somebody files. A report with long notes simply runs to more pages —
     * the header repeats and rows do not split, so page two reads on its own.
     */

    .isr-stats {
        gap: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .isr-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .isr-search {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   The Print action on an installment row
   -------------------------------------------------------------------------- */

.emv-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* A line nothing has been paid on has no receipt to print. */
.emv-actions .ba-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.emv-actions .ba-btn:disabled:hover {
    color: var(--g600);
    background: var(--surface);
}

/* --------------------------------------------------------------------------
   Printing a money receipt

   Scoped with :has() so that when a receipt is open it is the only thing on
   the paper. Where :has() is unsupported the whole block is dropped and the
   page prints as it stands — the safe direction to fail, since a blank sheet
   is worse than a cluttered one.
   -------------------------------------------------------------------------- */

@media print {
    body:has(#emi-receipt) .layout-main > *:not(.modal-scrim) {
        display: none !important;
    }

    body:has(#emi-receipt) .modal-scrim {
        position: static;
        display: block;
        padding: 0;
        background: none;
    }

    body:has(#emi-receipt) .modal {
        width: auto;
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    body:has(#emi-receipt) .modal-body {
        max-height: none;
        padding: 0;
        overflow: visible;
    }

    /* The dialog's own chrome is not part of the receipt. */
    body:has(#emi-receipt) .modal-head,
    body:has(#emi-receipt) .modal-foot {
        display: none !important;
    }

    .emr-rule {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Printing a parcel sticker

   The same :has() scoping as the receipt above, on A5 so the label comes off
   a normal printer at a size that fits a carton. Black on white and heavier
   than it looks on screen: it is read across a workbench, and it survives
   being taped over.
   -------------------------------------------------------------------------- */

@page parcel {
    size: A5;
    margin: 8mm;
}

@media print {
    body:has(#parcel-sticker) .layout-main > *:not(.modal-scrim) {
        display: none !important;
    }

    body:has(#parcel-sticker) .modal-scrim {
        position: static;
        display: block;
        padding: 0;
        background: none;
    }

    body:has(#parcel-sticker) .modal {
        width: auto;
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    body:has(#parcel-sticker) .modal-body {
        max-height: none;
        padding: 0;
        overflow: visible;
    }

    body:has(#parcel-sticker) .modal-head,
    body:has(#parcel-sticker) .modal-foot {
        display: none !important;
    }

    .pcl-sheet {
        page: parcel;
        color: #000;
        border-color: #000;
        /* One carton, one label: never split across two sheets. */
        break-inside: avoid;
    }

    .pcl-to {
        border-bottom-color: #000;
    }

    .pcl-foot {
        border-top-color: #000;
    }

    .pcl-caption,
    .pcl-foot b {
        color: #333;
    }

    /* Bigger on paper than on screen — the sheet is no longer sharing the
       page with a dialog around it. */
    .pcl-name {
        font-size: 26pt;
    }

    .pcl-line {
        font-size: 13pt;
    }

    .pcl-from .pcl-name {
        font-size: 16pt;
    }

    .pcl-from .pcl-line {
        font-size: 11pt;
    }
}

/* ==========================================================================
   HRM Team  (/hrm/team, /hrm/team/:id/salary)

   Two ringed cards: add above, the roster below. The three flags are buttons
   in the list because switching one is the daily change, not a form edit.
   ========================================================================== */

.tm-card {
    padding: 1.5rem 1.75rem;
    background: var(--surface);
    border: 2px solid var(--g500);
    border-radius: 14px;
}

.tm-card + .tm-card,
.alert + .tm-card {
    margin-top: 1.5rem;
}

.tm-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}

.tm-sub {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.tm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.1rem 1.75rem;
    margin-top: 1.25rem;
}

.tm-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tm-label {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.tm-input {
    width: 100%;
    min-width: 0;
    height: 2.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
}

select.tm-input {
    cursor: pointer;
}

/* The three switches share the row with the submit, as the reference has them. */
.tm-switch-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.tm-add {
    flex: 1 1 16rem;
    display: flex;
    justify-content: flex-end;
}

.tm-add .btn {
    width: 100%;
    max-width: 26rem;
    height: 2.9rem;
    justify-content: center;
    border-radius: 999px;
}

/* ---------- the roster ---------- */

.tm-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
}

.tm-search {
    flex: 0 1 20rem;
    height: 2.9rem;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
}

.tm-empty {
    margin: 0;
    padding: 2.5rem 0;
    font-size: 1rem;
    text-align: center;
    color: var(--ink-muted);
}

.tm-table {
    min-width: 72rem;
}

.tm-num {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Still owed for this cycle. */
.tm-owed {
    color: var(--danger);
}

.tm-in {
    color: var(--g700);
}

/*
   Yes and No are buttons, not labels: green for on, red for off, and clicking
   one flips it. Colour carries the state, so it is readable at a glance down
   three columns.
*/
.tm-flag {
    min-width: 3.9rem;
    padding: 0.35rem 1rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--surface);
    border: 1.5px solid;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tm-flag-yes {
    color: var(--g600);
    border-color: var(--g500);
}

.tm-flag-yes:hover {
    color: #fff;
    background: var(--g500);
}

.tm-flag-no {
    color: var(--danger);
    border-color: var(--danger);
}

.tm-flag-no:hover {
    color: #fff;
    background: var(--danger);
}

/* ---------- the salary report ---------- */

.tm-report-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.tm-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
    margin: 1.25rem 0 1rem;
}

.tm-stat {
    padding: 1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.tm-stat-label {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    color: var(--ink-muted);
}

.tm-stat-value {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.tm-report-table {
    min-width: 54rem;
}

.tm-note {
    max-width: 16rem;
    color: var(--ink-muted);
}

.tm-cycle {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-muted);
    background: var(--canvas);
    border-radius: 999px;
}

/* The ones that actually settle the month. */
.tm-cycle-now {
    color: var(--g700);
    background: var(--g50);
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .tm-card {
        padding: 0;
        border: 0;
    }

    .tm-table,
    .tm-report-table {
        min-width: 0;
    }

    .tm-flag,
    .tm-cycle,
    .ba-total-row td {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .tm-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .tm-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tm-switch-row {
        gap: 1.25rem;
    }

    .tm-add {
        flex: 1 1 100%;
    }

    .tm-search {
        flex: 1 1 100%;
    }
}

@media (max-width: 600px) {
    .tm-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The role, chosen in place. Sized so the three control columns still fit. */
.tm-role-select {
    min-width: 9rem;
    height: 2.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
}

/* ==========================================================================
   HRM SR List  (/hrm/sr-list, /hrm/sr/:id/report)

   Wears the Team card and table, because a rep is a team member seen through
   a narrower lens. Only the pieces that differ live here.
   ========================================================================== */

.sr-table {
    min-width: 58rem;
}

/* Plain words rather than a button: this list does not switch the flag, the
   Team screen does. */
.sr-active {
    font-weight: 700;
    /* The badge reads YES/NO; the words come from the yes/no pair, which is
       title case because "NO" is spoken for by the number column. */
    text-transform: uppercase;
    color: var(--g700);
}

.sr-active-no {
    color: var(--danger);
}

/* ---------- the sale report ---------- */

.sr-filters {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/*
   Profit is off by default and says "in Print" because that is when it
   matters: it is the one figure here that should not reach a customer by
   accident.
*/
.sr-profit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    font-size: 0.95rem;
    color: var(--ink);
    cursor: pointer;
}

.sr-profit-toggle input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--g600);
    cursor: pointer;
}

.sr-report-table {
    min-width: 58rem;
}

.sr-print-row {
    margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .sr-table,
    .sr-report-table {
        min-width: 0;
    }

    .sr-active,
    .sr-active-no {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .sr-filters {
        gap: 1rem;
    }
}

/* ==========================================================================
   HRM Attendance  (/hrm/attendance, /hrm/attendance/:id)

   Wears the Team card, because the schedule and the roster belong together.
   The month is a real seven-column grid starting Saturday, as the week runs
   here — not a table, so a cell can hold a day number and a verdict.
   ========================================================================== */

.att-legend-label {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.att-optional {
    font-weight: 400;
    color: var(--ink-muted);
}

.att-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.35rem;
}

.att-day {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.att-day input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--g600);
    cursor: pointer;
}

/* A chosen off day is filled, so the working week reads at a glance. */
.att-day-on {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
}

.att-sched-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.1rem 1.25rem;
    align-items: end;
}

/* No label of its own, so the button lines up with the inputs beside it. */
.att-sched-action {
    justify-content: flex-end;
}

.att-sched-action .btn,
.att-sched-action .eml-create {
    width: 100%;
    height: 2.9rem;
    justify-content: center;
    border-radius: 999px;
}

.att-team-wrap {
    margin-top: 1.1rem;
}

.att-team-table {
    min-width: 34rem;
}

/* ---------- the month ---------- */

.att-month {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.att-month-label {
    padding: 0.5rem 1.5rem;
    font-size: 0.975rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.att-punch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 1.35rem;
}

.att-punch-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.att-punch-row .field-input {
    flex: 1 1 auto;
    min-width: 0;
}

.att-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.6rem;
}

.att-weekday {
    padding: 0.35rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
}

.att-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 5.2rem;
    padding: 0.6rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

/* Days before the first of the month hold the grid open. */
.att-cell-blank {
    background: none;
    border: 0;
}

/* Today, ringed so the eye finds it without reading dates. */
.att-cell-today {
    border: 2px solid var(--g500);
}

.att-cell-day {
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.att-mark {
    font-size: 0.95rem;
    font-weight: 700;
}

/* Each verdict its own colour, so a month reads without counting. */
.att-mark-present {
    color: var(--g700);
}

.att-mark-late {
    color: #b45309;
}

.att-mark-absent {
    color: var(--danger);
}

.att-mark-leave {
    color: #2563eb;
}

.att-mark-off {
    font-weight: 600;
    color: var(--ink-muted);
}

.att-chips {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.att-chip {
    padding: 0.5rem 1.1rem;
    font-size: 0.925rem;
    font-weight: 700;
    border-radius: 8px;
}

.att-chip-late {
    color: #b45309;
    background: #fffbeb;
}

.att-chip-absent {
    color: var(--danger);
    background: var(--danger-soft);
}

.att-chip-leave {
    color: #1d4ed8;
    background: #eff6ff;
}

.att-chip-present {
    color: var(--g700);
    background: var(--g50);
}

.att-chip-off {
    color: var(--ink-muted);
    background: var(--canvas);
}

.att-legend {
    display: flex;
    gap: 1.35rem;
    flex-wrap: wrap;
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

/* ---------- leave ---------- */

.att-leave-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem 1.25rem;
    align-items: end;
    margin-top: 1.25rem;
}

.att-leave-title {
    margin: 1.75rem 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
}

.att-leave-table {
    min-width: 44rem;
}

.att-leave-tag {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
}

.att-leave-pending {
    color: #b45309;
    background: #fffbeb;
}

.att-leave-approved {
    color: var(--g700);
    background: var(--g50);
}

.att-leave-rejected {
    color: var(--danger);
    background: var(--danger-soft);
}

.att-leave-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.att-decided {
    font-size: 0.85rem;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .att-chip-late,
:root[data-theme="dark"] .att-leave-pending {
    background: #2a2110;
}

:root[data-theme="dark"] .att-chip-absent,
:root[data-theme="dark"] .att-leave-rejected {
    background: #2a1518;
}

:root[data-theme="dark"] .att-chip-leave {
    background: #12203a;
}

:root[data-theme="dark"] .att-day-on {
    background: #0f2a22;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .tm-card {
        padding: 0;
        border: 0;
    }

    .att-cell {
        min-height: 3.6rem;
    }

    .att-mark,
    .att-chip,
    .att-leave-tag,
    .att-cell-today {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .att-sched-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .att-leave-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .att-days {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .att-punch {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The grid keeps seven columns: a week that wraps is not a week. */
    .att-cell {
        min-height: 4rem;
        padding: 0.4rem 0.35rem;
    }

    .att-grid {
        gap: 0.3rem;
    }
}

@media (max-width: 600px) {
    .att-sched-grid,
    .att-leave-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .att-days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   HRM Role  (/hrm/role)

   Wears the Team card, because a role is part of the same staff record. The
   permission grid is two columns as the reference has it, with a filter and a
   select-all — forty-odd boxes with neither is a chore.
   ========================================================================== */

.rol-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.rol-name {
    flex: 1 1 22rem;
    height: 2.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
}

.rol-toolbar .btn {
    flex: none;
    height: 2.9rem;
    padding: 0 1.75rem;
    border-radius: 999px;
}

.rol-search {
    flex: 0 1 18rem;
    height: 2.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
}

.rol-error {
    margin: 0.6rem 0 0;
}

/* ---------- one role per row ---------- */

.rol-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.rol-row + .rol-row {
    margin-top: 0.75rem;
}

.rol-row-name {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    flex-wrap: wrap;
    min-width: 0;
}

.rol-name-text {
    font-size: 1rem;
    color: var(--ink);
}

/* How many hold it, and how much it grants — the two facts a role has. */
.rol-meta {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.rol-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Amber: renaming is a correction, not a destruction. */
.rol-edit {
    height: auto;
    padding: 0.4rem 1.15rem;
    font-size: 0.875rem;
    border-width: 1.5px;
}

/* ---------- the permission grid ---------- */

.rol-perm-tools {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.rol-perm-filter {
    flex: 1 1 14rem;
    height: 2.6rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
}

.rol-perms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1rem;
    max-height: 26rem;
    overflow-y: auto;
    padding-right: 0.35rem;
}

.rol-perm {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.95rem;
    font-size: 0.925rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.rol-perm input {
    width: 1rem;
    height: 1rem;
    flex: none;
    accent-color: var(--g600);
    cursor: pointer;
}

/* A held permission is filled, so what a role grants reads without squinting. */
.rol-perm-on {
    color: var(--g700);
    background: var(--g50);
    border-color: var(--g500);
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] .rol-perm-on {
    background: #0f2a22;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 800px) {
    .rol-name,
    .rol-search {
        flex: 1 1 100%;
    }

    .rol-toolbar .btn {
        flex: 1 1 100%;
    }

    .rol-perms {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A pill round a wrapped row reads as a mistake, so it squares off. */
    .rol-row {
        border-radius: 12px;
    }
}

/* ==========================================================================
   Report hub  (/report/sale)

   A card per report, each carrying its own range — so the dates set here are
   the dates the report opens with, rather than a filter discovered on the far
   side of a click.
   ========================================================================== */

.hub-head {
    margin-bottom: 1.35rem;
}

.hub-eyebrow {
    margin: 0;
    font-size: 0.775rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.hub-title {
    margin: 0.25rem 0 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--ink);
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.35rem;
}

.hub-card {
    display: flex;
    flex-direction: column;
    padding: 1.15rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hub-card:hover {
    border-color: var(--g500);
    box-shadow: 0 8px 20px -14px rgb(15 23 42 / 30%);
}

.hub-card-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
}

/* What the card will actually show, so a title alone is not the only clue. */
.hub-card-note {
    margin: 0.3rem 0 1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

.hub-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.hub-label {
    flex: 0 0 2.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--g700);
}

.hub-date {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

.hub-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.6rem 1rem;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 700;
    color: #fff;
    background: var(--g600);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.hub-search:hover {
    background: var(--g700);
}

/* ==========================================================================
   One report  (/report/sale/:report)

   The columns arrive with the rows, so this renders all thirteen.
   ========================================================================== */

/* A report whose data does not exist yet: dimmed on the hub, and the reason
   spelled out on the report itself rather than left as an empty table. */
.hub-card-off {
    background: var(--canvas);
}

.hub-card-flag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b45309;
    background: #fffbeb;
    border-radius: 999px;
}

.srv-unavailable {
    margin: 0 0 1rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
}

:root[data-theme="dark"] .hub-card-flag,
:root[data-theme="dark"] .srv-unavailable {
    background: #2a2110;
}

.srv-filters {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.srv-table {
    min-width: 54rem;
}

.srv-num {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
    .srv-table {
        min-width: 0;
    }

    .srv-num,
    .ba-total-row td {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
    .hub-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hub-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}