/* =============================================================================
   Receipt Generator — design system
   -----------------------------------------------------------------------------
   Tokens, base typography and the Bootstrap refinements that make every page
   (login included) read as one product. The signed-in shell lives in app.css,
   the dashboard in dashboard.css. Nothing here changes behaviour.
   ============================================================================= */

:root {
    /* ---- Brand + status ------------------------------------------------- */
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --primary-soft: #EFF6FF;
    --primary-line: #DBEAFE;
    --primary-ring: rgba(37, 99, 235, 0.14);

    --success: #16A34A;
    --success-ink: #15803D;
    --success-soft: #F0FDF4;
    --success-line: #DCFCE7;

    --warning: #F97316;
    --warning-ink: #C2410C;
    --warning-soft: #FFF7ED;
    --warning-line: #FFEDD5;

    --purple: #7C3AED;
    --purple-ink: #6D28D9;
    --purple-soft: #FAF5FF;
    --purple-line: #EDE9FE;

    --danger: #DC2626;
    --danger-ink: #B91C1C;
    --danger-soft: #FEF2F2;
    --danger-line: #FECACA;

    /* ---- Ink ------------------------------------------------------------ */
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;

    /* ---- Surfaces ------------------------------------------------------- */
    --background: #F5F7FB;
    --card: #FFFFFF;
    --surface-subtle: #F8FAFC;
    --border: #E2E8F0;
    --border-soft: #EEF2F7;
    --border-strong: #CBD5E1;

    /* ---- Sidebar -------------------------------------------------------- */
    --sidebar: #172235;
    --sidebar-ink: #C9D3E2;
    --sidebar-muted: #7F8DA4;
    --sidebar-section: #64748B;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-line: rgba(255, 255, 255, 0.07);

    /* ---- Type ----------------------------------------------------------- */
    --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* ---- Radius --------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-btn: 10px;
    --radius-md: 12px;
    --radius-card: 14px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- Spacing (8px system) ------------------------------------------- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;

    /* ---- Elevation: deliberately very light ----------------------------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07);
    --shadow-pop: 0 8px 24px rgba(15, 23, 42, 0.12);

    /* ---- Shell metrics --------------------------------------------------- */
    --sidebar-w: 284px;
    --topbar-h: 76px;
    --content-max: 1440px;

    /* Bootstrap, brought onto the same system. */
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--background);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-sm);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--primary-dark);
    --bs-secondary-color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--background);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* One family, everywhere - including controls, which browsers otherwise
   render in their own UI font. */
input,
select,
textarea,
button,
.btn,
.form-control,
.form-select {
    font-family: var(--font-sans);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--text-primary);
    font-family: var(--font-sans);
    letter-spacing: -0.011em;
}

h1, .h1 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h2, .h2 { font-size: 20px; font-weight: 650; line-height: 1.3; }
h3, .h3 { font-size: 18px; font-weight: 650; line-height: 1.35; }
h4, .h4 { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
h5, .h5 { font-size: 16px; font-weight: 600; line-height: 1.4; }
h6, .h6 { font-size: 15px; font-weight: 600; line-height: 1.4; }

.text-muted {
    color: var(--text-secondary) !important;
}

small,
.small {
    font-size: 13px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

code {
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-primary);
    background: var(--surface-subtle);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
}

::selection {
    background: var(--primary-line);
}

/* -----------------------------------------------------------------------------
   Buttons: one height per size, one radius, one weight
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 20px;
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 14px;
    --bs-btn-border-radius: var(--radius-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: -0.006em;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--primary-ring);
}

/* The flex gap above sets the icon-to-label distance for every button, so the
   per-button spacing utilities in the markup would only double it. */
.btn > .bi {
    margin-right: 0 !important;
    font-size: 1em;
    line-height: 1;
}

.btn-sm {
    --bs-btn-font-size: 13px;
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 10px;
    --bs-btn-border-radius: var(--radius-sm);
}

.btn-lg {
    --bs-btn-font-size: 15px;
    --bs-btn-padding-y: 11px;
    --bs-btn-padding-x: 18px;
    --bs-btn-border-radius: var(--radius-btn);
}

/* The app's primary action historically ships as .btn-success; keep the class
   and put it on the brand blue so the product reads as one palette. */
.btn-success,
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-success,
.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary-line);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--surface-subtle);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-active-bg: var(--surface-subtle);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text-primary);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger-ink);
    --bs-btn-border-color: var(--danger-line);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger-ink);
    --bs-btn-active-border-color: var(--danger-ink);
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-ink);
    --bs-btn-hover-border-color: var(--danger-ink);
}

/* -----------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-control,
.form-select {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-select {
    padding-right: 34px;
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:focus,
.form-select:focus {
    border-color: #93B4F7;
    box-shadow: 0 0 0 3px var(--primary-ring);
}

textarea.form-control {
    min-height: 76px;
}

.form-control-color {
    padding: 4px;
}

.input-group-text {
    font-size: 14px;
    color: var(--text-secondary);
    background: var(--surface-subtle);
    border-color: var(--border);
    border-radius: var(--radius-sm);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: #93B4F7;
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.form-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Cards, tables, badges, alerts
   -------------------------------------------------------------------------- */

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
}

.card-body {
    padding: 24px;
}

.card-header {
    padding: 18px 24px;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
}

/* A table that runs to the card edge has to be clipped by the card radius. */
.card > .table-responsive {
    overflow-x: auto;
}

.card > .table-responsive:first-child {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}

.card > .table-responsive:last-child {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
}

.table {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--surface-subtle);
    --bs-table-hover-color: var(--text-primary);
    margin-bottom: 0;
    font-size: 14px;
}

.table > thead th,
.table > thead > tr > th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 14px 16px;
    border-bottom-color: var(--border-soft);
    vertical-align: middle;
}

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

.table-light,
.table > :not(caption) > * > .table-light {
    --bs-table-bg: var(--surface-subtle);
}

.badge {
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 6px;
}

.badge.bg-success {
    color: var(--success-ink) !important;
    background: var(--success-line) !important;
}

.badge.bg-secondary {
    color: var(--text-secondary) !important;
    background: #F1F5F9 !important;
}

.badge.bg-light {
    color: var(--text-secondary) !important;
    background: var(--surface-subtle) !important;
    border-color: var(--border) !important;
}

.alert {
    padding: 14px 16px;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-card);
}

/* Bootstrap's own right padding is overridden above, so restore room for the
   dismiss button and sit it on the alert's own padding. */
.alert-dismissible {
    padding-right: 48px;
}

.alert-dismissible .btn-close {
    padding: 17px 16px;
}

.alert-success {
    color: var(--success-ink);
    background: var(--success-soft);
    border-color: var(--success-line);
}

.alert-warning {
    color: #92400E;
    background: #FFFBEB;
    border-color: #FDE68A;
}

.alert-danger {
    color: var(--danger-ink);
    background: var(--danger-soft);
    border-color: var(--danger-line);
}

.dropdown-menu {
    padding: 6px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--surface-subtle);
}

/* -----------------------------------------------------------------------------
   Page-level pieces shared outside the dashboard
   -------------------------------------------------------------------------- */

/* The header every non-dashboard page opens with: title left, actions right. */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.page-head h4 {
    margin: 0;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* The label above a group of fields inside a form card. */
.form-section {
    margin: 0 0 16px;
    padding-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-soft);
}

/* Only between groups - never above the first one in the card. */
.row + .form-section {
    margin-top: 8px;
}

.receipt-preview {
    max-width: 880px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.color-swatch {
    width: 46px;
    height: 38px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.thumb-preview {
    max-height: 90px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

table.receipt-details td,
table.receipt-details th {
    vertical-align: middle;
}

/* -----------------------------------------------------------------------------
   Login

   One card split in two: the product on the left in the sidebar's own colours,
   so the sign-in page looks like the application it opens, and the form on the
   right with nothing beside it competing for attention. Under 860px the panel
   folds down to the brand strip alone and the form takes the full width.
   -------------------------------------------------------------------------- */

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    /* Two very faint washes of the brand blue, so the card has something to sit
       on without anything on it having to compete with the form. */
    background:
        radial-gradient(1100px 620px at 12% -15%, #E6EDFA 0%, rgba(230, 237, 250, 0) 62%),
        radial-gradient(900px 520px at 100% 112%, #E9F0FC 0%, rgba(233, 240, 252, 0) 58%),
        var(--background);
}

/* A slow drift of colour behind the card. Decoration only: it is fixed under
   everything, takes no pointer events, and the blur keeps it as atmosphere
   rather than shapes anyone could mistake for part of the form. */
.login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(72px);
    /* Transform only, so each orb animates on its own layer and the page is
       never laid out again for a frame of this. */
    will-change: transform;
}

.login-orb-1 {
    width: 580px;
    height: 580px;
    top: -190px;
    left: -150px;
    background: radial-gradient(circle at 32% 32%, #8FB7F4 0%, rgba(143, 183, 244, 0) 70%);
    animation: login-drift-1 20s ease-in-out infinite;
}

.login-orb-2 {
    width: 520px;
    height: 520px;
    right: -170px;
    bottom: -180px;
    background: radial-gradient(circle at 58% 42%, #9CC2F3 0%, rgba(156, 194, 243, 0) 70%);
    animation: login-drift-2 25s ease-in-out infinite;
}

.login-orb-3 {
    width: 430px;
    height: 430px;
    top: 52%;
    left: 6%;
    background: radial-gradient(circle at 50% 50%, #C9BEFA 0%, rgba(201, 190, 250, 0) 70%);
    animation: login-drift-3 29s ease-in-out infinite;
}

.login-orb-4 {
    width: 380px;
    height: 380px;
    top: 4%;
    right: 12%;
    background: radial-gradient(circle at 45% 55%, #A9CBF6 0%, rgba(169, 203, 246, 0) 70%);
    animation: login-drift-4 23s ease-in-out infinite;
}

/* Each orb travels a different way at a different speed, so the four never
   line up into a pattern the eye can follow and sit waiting for. */
@keyframes login-drift-1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
    50%      { transform: translate3d(220px, 150px, 0) scale(1.22); opacity: 1; }
}

@keyframes login-drift-2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); opacity: 1; }
    50%      { transform: translate3d(-260px, -170px, 0) scale(0.92); opacity: .7; }
}

@keyframes login-drift-3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.9); opacity: .65; }
    50%      { transform: translate3d(300px, -140px, 0) scale(1.15); opacity: .95; }
}

@keyframes login-drift-4 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.15); opacity: .95; }
    50%      { transform: translate3d(-200px, 200px, 0) scale(0.9); opacity: .68; }
}

/* Someone who has asked their system for less motion gets the same picture,
   held still. */
@media (prefers-reduced-motion: reduce) {
    .login-orb {
        animation: none;
    }
}

.login-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: 100%;
    max-width: 940px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* ---- The product, on the sidebar's colours ---------------------------- */

.login-aside {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 44px 40px;
    background: linear-gradient(158deg, #1F2C44 0%, var(--sidebar) 52%, #111A29 100%);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    font-size: 21px;
    line-height: 1;
    color: #fff;
    background: var(--primary);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38);
}

.login-brand-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
}

.login-brand-sub {
    font-size: 12px;
    line-height: 1.3;
    color: var(--sidebar-muted);
}

.login-aside-body {
    margin-top: auto;
}

.login-pitch {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -0.02em;
    color: #fff;
}

.login-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.login-point {
    display: flex;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sidebar-ink);
}

.login-point .bi {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 13px;
    color: #93B4F7;
}

.login-foot {
    margin: 0;
    font-size: 12px;
    color: var(--sidebar-muted);
}

/* ---- The form ---------------------------------------------------------- */

.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 40px;
}

.login-title {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.login-subtitle {
    margin: 0 0 24px;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.login-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--danger-ink);
    background: var(--danger-soft);
    border: 1px solid var(--danger-line);
    border-radius: var(--radius-md);
}

.login-alert .bi {
    flex: 0 0 auto;
    margin-top: 1px;
}

.login-field {
    margin-bottom: 16px;
}

.login-field .form-label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* The icon is decoration over the field, so it takes no clicks of its own -
   tapping it puts the cursor in the input underneath, as it looks like it should. */
.login-input {
    position: relative;
}

.login-input > .bi {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    color: var(--text-muted);
    pointer-events: none;
}

.login-input .form-control {
    height: 46px;
    padding-left: 40px;
    border-radius: var(--radius-btn);
}

.login-input.has-peek .form-control {
    padding-right: 46px;
}

.login-peek {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 15px;
    color: var(--text-muted);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.login-peek:hover {
    color: var(--text-secondary);
    background: var(--surface-subtle);
}

.login-peek:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-btn);
}

@media (max-width: 860px) {
    .login-card {
        grid-template-columns: minmax(0, 1fr);
        max-width: 430px;
    }

    /* The pitch and the list are there to fill a column beside the form. Stacked
       above it they only push the fields down, so on a phone the panel keeps the
       brand and nothing else. */
    .login-aside {
        gap: 0;
        padding: 26px 28px;
    }

    .login-aside-body,
    .login-foot {
        display: none;
    }

    .login-panel {
        padding: 28px;
    }
}

/* ---------------------------------------------------------------------------
   One line per customer, opening to the receipts inside

   A customer with more than one receipt takes a single row carrying their name,
   their total and a + for the next one. The receipts themselves are already in
   the page, hidden until the row is opened.
   --------------------------------------------------------------------------- */
.cust-row {
    cursor: pointer;
}

.cust-row > td {
    background: var(--surface-subtle);
    border-top: 1px solid var(--border-strong);
}

.cust-row:hover > td {
    background: var(--primary-soft);
}

.cust-name {
    font-weight: 600;
    color: var(--text-primary);
}

.cust-total {
    font-weight: 600;
}

.cust-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: 0;
}

.cust-toggle .bi {
    font-size: 12px;
    transition: transform .15s ease;
}

.cust-group.is-open .cust-toggle .bi {
    transform: rotate(90deg);
}

/* The rows stay in the document either way: a table row cannot be animated
   open, and keeping them rendered means opening one costs nothing. */
.cust-group:not(.is-open) .cust-child {
    display: none;
}

.cust-child > td:first-child {
    padding-left: 32px;
    box-shadow: inset 3px 0 0 var(--primary-line);
}