/* ================================================================
   SAVANNAH TRACKING LTD — Application Theme
   app.css  |  Global styles, shell layout, header, footer
   ================================================================ */

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
    --clr-green: #3A7D1E;
    --clr-green-lt: #4E9E2A;
    --clr-green-xlt: #EBF5E6;
    --clr-red-dot: #CC2200;
    /* Shell — light theme */
    --clr-shell: #FFFFFF;
    --clr-header-bg: #F0F0F0;
    --clr-footer-bg: #F0F0F0;
    --clr-header-border: #DCDCDC;
    --clr-footer-border: #DCDCDC;
    /* Text */
    --clr-text-primary: #1A1A1A;
    --clr-text-secondary: #555555;
    --clr-text-muted: #888888;
    /* Inputs */
    --clr-input-bg: #FFFFFF;
    --clr-input-border: #D1D5DB;
    --clr-input-focus: rgba(58, 125, 30, 0.12);
    /* Layout */
    --header-h: 64px;
    --footer-h: 44px;
    --gap-x: 65px;
    --gap-y: 25px;
    --min-w: 860px;
    --min-h: 540px;
    --radius: 10px;
    /* Typography */
    --font-display: 'Roboto', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--clr-text-primary);
    background: #0b0803;
    overflow: hidden;
}

/* ── Background image ──────────────────────────────────────────── */
#stl-bg {
    position: fixed;
    inset: 0;
    /* 60% vertical position keeps the building visible rather than cropping it */
    background: url('/images/STL-Home.webp') center 60% / cover no-repeat;
    z-index: 0;
}

/* No overlay — natural photo colours */

/* ── App shell — white floating frame ──────────────────────────── */
#stl-app {
    position: fixed;
    inset: var(--gap-y) var(--gap-x);
    min-width: var(--min-w);
    min-height: var(--min-h);
    z-index: 1;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--clr-shell);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 24px 80px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ── HEADER ────────────────────────────────────────────────────── */
.stl-header {
    flex-shrink: 0;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: var(--clr-header-bg);
    border-bottom: 1px solid var(--clr-header-border);
    position: relative;
    z-index: 20;
}

    /* Thin green accent along the bottom edge of header */
    .stl-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--clr-green) 25%, var(--clr-green) 75%, transparent 100%);
        opacity: 0.4;
    }

/* Logo */
.stl-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
}

.stl-logo-img {
    height: 40px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    transition: opacity 0.18s;
}

.stl-logo-link:hover .stl-logo-img {
    opacity: 0.82;
}

/* Fallback text (if image fails) */
.stl-logo-fallback {
    display: none;
    flex-direction: column;
    line-height: 1.1;
}

.stl-logo-img.errored + .stl-logo-fallback {
    display: flex;
}

.stl-logo-fallback .lf-main {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--clr-green);
    text-transform: uppercase;
}

.stl-logo-fallback .lf-sub {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.20em;
    color: var(--clr-text-muted);
    text-transform: uppercase;
}

/* Logout button */
.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: transparent;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    color: var(--clr-text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    text-decoration: none;
}

    .btn-logout:hover {
        background: var(--clr-green-xlt);
        border-color: var(--clr-green);
        color: var(--clr-green);
    }

    .btn-logout .icon {
        opacity: 0.65;
    }

/* ── MAIN CONTENT AREA ─────────────────────────────────────────── */
.stl-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background: var(--clr-shell);
    display: flex;
    flex-direction: column;
    height: 0; /* flex child needs this so overflow works and height is calculable */
}

    .stl-main::-webkit-scrollbar {
        width: 5px;
    }

    .stl-main::-webkit-scrollbar-track {
        background: #F5F5F5;
    }

    .stl-main::-webkit-scrollbar-thumb {
        background: #CCCCCC;
        border-radius: 3px;
    }

        .stl-main::-webkit-scrollbar-thumb:hover {
            background: var(--clr-green);
        }

/* ── FOOTER ────────────────────────────────────────────────────── */
.stl-footer {
    flex-shrink: 0;
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-footer-bg);
    border-top: 1px solid var(--clr-footer-border);
    padding: 0 28px;
    overflow: hidden;
}

.footer-strip {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 11.5px;
    color: var(--clr-text-muted);
    letter-spacing: 0.02em;
}

    .footer-strip .fi {
        padding: 0 14px;
        position: relative;
    }

        .footer-strip .fi + .fi::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 11px;
            background: #CCCCCC;
        }

    .footer-strip .fi-copy {
        color: #AAAAAA;
    }

    .footer-strip a {
        color: inherit;
        text-decoration: none;
        transition: color 0.15s;
    }

        .footer-strip a:hover {
            color: var(--clr-green);
        }

/* ── Utility ───────────────────────────────────────────────────── */
.page-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}


/* ================================================================
   LOGIN PAGE — defined globally to avoid Blazor CSS isolation issues
   ================================================================ */

/* Blazor renders @Body inside anonymous wrappers — make them stretch to fill stl-main */
.stl-main > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* The full height chain for clients page */
.stl-main .clients-page {
    flex: 1;
    flex-direction: row;
    min-height: 0;
}

.login-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-box {
    width: 320px;
}

.login-heading {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 28px 0;
    line-height: 1.3;
    text-align: center;
}

.login-page .field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

    .login-page .field-group label {
        font-size: 13px;
        font-weight: 600;
        color: #444444;
        margin-bottom: 5px;
    }

.login-page .field-input {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #D1D5DB;
    border-radius: 7px;
    font-size: 14px;
    font-family: inherit;
    color: #1A1A1A;
    background: #FAFAFA;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
}

    .login-page .field-input:focus {
        border-color: #3A7D1E;
        background: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(58, 125, 30, 0.12);
    }

.login-page .validation-message {
    font-size: 11.5px;
    color: #C0392B;
    margin-top: 4px;
}

.login-error {
    background: #FFF2F2;
    border: 1px solid #FFCDD2;
    border-radius: 7px;
    padding: 9px 13px;
    font-size: 13px;
    color: #C0392B;
    margin-bottom: 16px;
}

.login-btn {
    margin-top: 6px;
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 7px;
    background: #3A7D1E;
    color: #FFFFFF;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

    .login-btn:hover:not(:disabled) {
        background: #2C6015;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(58, 125, 30, 0.28);
    }

    .login-btn:active:not(:disabled) {
        transform: translateY(0);
    }

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

.login-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.30);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
    flex-shrink: 0;
}

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


/* ── Header user info + logout ─────────────────────────────────── */
.header-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-username {
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-text-secondary);
}


/* ================================================================
   CLIENTS PAGE — two-panel layout
   ================================================================ */

.clients-page {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* ── LEFT PANEL ─────────────────────────────────────────────────── */
.clients-left {
    width: 30%;
    min-width: 220px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #E8E8E8;
    background: #FFFFFF;
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0;
}

.panel-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #AAAAAA;
}

.client-count {
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF;
    background: #3A7D1E;
    border-radius: 10px;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
}

/* Back Button in Clients */
.btn-back-clients {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin: 10px 20px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #495057;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    width: calc(100% - 40px);
}

    .btn-back-clients:hover {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

/* Search */
.clients-search-wrap {
    position: relative;
    padding: 10px 20px;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0;
}

.clients-search {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #1A1A1A;
    background: #FFFFFF;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}

    .clients-search:focus {
        border-color: #3A7D1E;
        box-shadow: 0 0 0 3px rgba(58, 125, 30, 0.10);
    }

.clients-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #AAAAAA;
    pointer-events: none;
}

/* Scrollable list */
.clients-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

    .clients-list::-webkit-scrollbar {
        width: 4px;
    }

    .clients-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .clients-list::-webkit-scrollbar-thumb {
        background: #DDDDDD;
        border-radius: 2px;
    }

        .clients-list::-webkit-scrollbar-thumb:hover {
            background: #BBBBBB;
        }

/* Individual client row — editorial borderless style */
.client-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    cursor: pointer;
    position: relative;
    transition: background 0.14s;
    user-select: none;
    gap: 12px;
}

    /* Hairline separator — every row except the last */
    .client-row::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20px;
        right: 20px;
        height: 1px;
        background: #F0F0F0;
    }

    .client-row:hover {
        background: #F7FAF6;
    }

.client-row--active {
    background: #F0F7ED;
}

    /* Remove separator on active item — cleaner break */
    .client-row--active::after {
        background: transparent;
    }

.client-name {
    display: block;
    font-size: 13.5px;
    font-weight: 400;
    color: #2A2A2A;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.14s;
}

.client-row:hover .client-name {
    color: #3A7D1E;
}

.client-row--active .client-name {
    font-weight: 600;
    color: #2C6015;
}

/* Loading / empty states */
.list-state {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    font-size: 13px;
    color: #AAAAAA;
}

.list-state--error {
    color: #C0392B;
}

.list-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #DDDDDD;
    border-top-color: #3A7D1E;
    border-radius: 50%;
    animation: list-spin 0.7s linear infinite;
    flex-shrink: 0;
}

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

/* ── RIGHT PANEL ────────────────────────────────────────────────── */
.clients-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* without this, a tall child (e.g. a long report table) forces
                      this flex item to grow instead of scrolling internally */
    overflow: hidden; /* children handle their own scroll */
    background: #FFFFFF;
}

/* Empty state — no client selected */
.right-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #CCCCCC;
}

    .right-empty p {
        font-size: 14px;
        color: #BBBBBB;
    }

/* Placeholder while billing panel is being built */
.right-placeholder {
    padding: 32px;
    font-size: 14px;
    color: #888888;
}


/* ================================================================
   LEDGER — right panel
   ================================================================ */

.ledger-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0;
    gap: 16px;
}

.ledger-client-name {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
    letter-spacing: 0.01em;
}

.ledger-toolbar {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Toolbar buttons */
.tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #FFFFFF;
    color: #444444;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

    .tb-btn:hover {
        background: #F5F5F5;
        border-color: #AAAAAA;
    }

.tb-btn--primary {
    background: #3A7D1E;
    border-color: #3A7D1E;
    color: #FFFFFF;
}

    .tb-btn--primary:hover {
        background: #2C6015;
        border-color: #2C6015;
        color: #FFFFFF;
    }

.tb-btn--success {
    background: #28a745;
    border-color: #28a745;
    color: #FFFFFF;
}

    .tb-btn--success:hover {
        background: #218838;
        border-color: #218838;
        color: #FFFFFF;
    }

/* Spacer pushes export button to the far right */
.ledger-toolbar-spacer {
    flex: 1;
}

/* Export ledger PDF button */
.tb-btn--export {
    background: #FFFFFF;
    border-color: #1B5E8E;
    color: #1B5E8E;
}

    .tb-btn--export:hover {
        background: #EFF4FA;
        border-color: #1B5E8E;
        color: #1B5E8E;
    }

.list-spinner--sm {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

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

/* Ledger scroll area */
.ledger-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}

    .ledger-wrap::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .ledger-wrap::-webkit-scrollbar-thumb {
        background: #CCCCCC;
        border-radius: 3px;
    }

/* Ledger table */
.ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .ledger-table thead tr {
        background: #F8F8F8;
        position: sticky;
        top: 0;
        z-index: 1;
        border-bottom: 1px solid #E8E8E8;
    }

    .ledger-table th {
        padding: 5px 8px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: #888888;
        white-space: nowrap;
    }

    .ledger-table td {
        padding: 4px 8px;
        color: #1A1A1A;
        border-bottom: 1px solid #F5F5F5;
        vertical-align: middle;
        white-space: nowrap;
    }

    .ledger-table tbody tr:hover td {
        background: #FAFAFA;
    }

/* Shared "grouped report" theme -- Parts Movement groups by item
   ("Category — Item" band, transactions indented underneath); Below Reorder
   Level and other single-row-per-item reports group by Category alone,
   items indented underneath. */
.report-group-row td {
    padding: 9px 10px;
    background: #F3F4F6;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    border-left: 3px solid #4B5563;
    white-space: nowrap;
}

.report-group-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B93A1;
}

.report-group-sep {
    margin: 0 6px;
    color: #C4CAD3;
}

.report-group-title {
    font-size: 13px;
    font-weight: 700;
    color: #1A1A1A;
}

.report-child-row td {
    padding-left: 26px;
}

.report-child-row:nth-of-type(even) td {
    background: #FCFCFD;
}

/* Type pills — soft-tinted chips so the eye can scan movement direction at
   a glance, the way conditional formatting would in a spreadsheet. */
.movement-type-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.movement-type-pill--stock_in,
.movement-type-pill--return {
    background: rgba(16, 185, 129, 0.12);
    color: #0D9668;
}

.movement-type-pill--issue,
.movement-type-pill--write_off {
    background: rgba(220, 38, 38, 0.10);
    color: #C22A2A;
}

.movement-type-pill--adjustment {
    background: rgba(232, 168, 32, 0.16);
    color: #93690A;
}

.movement-type-pill--opening_balance {
    background: rgba(74, 144, 217, 0.12);
    color: #2D6DAE;
}

.ledger-table td.movement-qty-in {
    color: #0D9668;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ledger-table td.movement-qty-out {
    color: #C22A2A;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Excel-style full grid lines + a subtle card frame around the report table. */
.ledger-table--grid th,
.ledger-table--grid td {
    border-right: 1px solid #EDEEF0;
}

    .ledger-table--grid th:last-child,
    .ledger-table--grid td:last-child {
        border-right: none;
    }

.report-table-card {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Row type colouring — very subtle left tint */
.row-credit td:first-child {
    border-left: 3px solid #4A90D9;
}

.row-invoice td:first-child {
    border-left: 3px solid #3A7D1E;
}

.row-usage td:first-child {
    border-left: 3px solid #E8A820;
}

/* Column alignment helpers */
.col-right,
.ledger-table th.col-right {
    text-align: right;
}

.col-center,
.ledger-table th.col-center {
    text-align: center;
}

.col-desc {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Credit notes — blue (positive, reduce balance) */
.amt-credit {
    color: #4A90D9;
}

/* Usage statements — red (negative, charges) */
.amt-debit {
    color: #C0392B;
}

/* Balance column */
.bal-cell {
    font-weight: 600;
    color: #1A1A1A;
}

/* Type badges */
.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.type-badge--1 {
    background: #EBF3FB;
    color: #4A90D9;
}
/* Credit Note — blue */
.type-badge--2 {
    background: #EBF5E6;
    color: #3A7D1E;
}
/* Invoice — green */
.type-badge--3 {
    background: #FEF6E4;
    color: #C07800;
}
/* Usage — amber */

/* Invoiced badges */
.inv-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.inv-badge--yes {
    background: #EBF5E6;
    color: #3A7D1E;
}

.inv-badge--na {
    color: #CCCCCC;
    background: transparent;
}

/* Mark button styled as badge */
.inv-badge--no {
    background: #FEF6E4;
    color: #C07800;
    border: 1px solid #F0D080;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    padding: 2px 8px;
    transition: background 0.15s;
}

    .inv-badge--no:hover {
        background: #FDECC8;
    }

/* Totals footer */
.ledger-totals td {
    padding: 7px 10px;
    font-weight: 700;
    font-size: 13px;
    border-top: 2px solid #E0E0E0;
    background: #F8F8F8;
    color: #1A1A1A;
    white-space: nowrap;
}

/* ================================================================
   MODAL
   ================================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-box {
    background: #FFFFFF;
    border-radius: 10px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.14), 0 24px 60px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* Green accent bar — matches login card */
    .modal-box::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #3A7D1E, #5DB830, #3A7D1E);
        flex-shrink: 0;
    }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px 12px;
    border-bottom: 1px solid #F0F0F0;
}

.modal-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #1A1A1A;
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 14px;
    color: #AAAAAA;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
}

    .modal-close:hover {
        background: #F5F5F5;
        border-color: #E0E0E0;
        color: #333333;
    }

.modal-body {
    padding: 18px 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Two fields side by side (year + quarter) */
.modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-top: 1px solid #F0F0F0;
    background: #FAFAFA;
}

/* .tab-content-inner (WorksheetDetailTab's root) needs its own scroll --
   the shared .right-tab-content ancestor is overflow: hidden and expects
   each tab's root to handle its own scrolling, same as .client-details-panel. */
.tab-content-inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

/* Modal form fields — slightly smaller than login. Also used outside modals
   (e.g. WorksheetDetailTab renders directly inside .tab-content-inner, not
   a .modal-body) — .tab-content-inner is included so the same field styling
   applies there too. */
.modal-body .field-group,
.tab-content-inner {
    padding: 20px 24px;
}

.tab-content-inner .field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

    .modal-body .field-group label,
    .tab-content-inner .field-group label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: #666666;
        margin-bottom: 5px;
    }

.modal-body .field-input,
.tab-content-inner .field-input {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #1A1A1A;
    background: #FAFAFA;
    box-sizing: border-box;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    outline: none;
}

    .modal-body .field-input::placeholder,
    .tab-content-inner .field-input::placeholder {
        color: #BBBBBB;
    }

    .modal-body .field-input:focus,
    .tab-content-inner .field-input:focus {
        border-color: #3A7D1E;
        background: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(58, 125, 30, 0.10);
    }

.field-optional {
    font-size: 10px;
    font-weight: 400;
    color: #AAAAAA;
    text-transform: none;
    letter-spacing: 0;
}

/* select dropdown arrow */
select.field-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}


/* ================================================================
   ROW ACTION BUTTONS
   ================================================================ */

.row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
    color: #BBBBBB;
    padding: 0;
    flex-shrink: 0;
}

.act-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.act-btn--edit:hover {
    background: #EBF5E6;
    border-color: #B0D8A0;
    color: #3A7D1E;
}

.act-btn--uninvoice:hover {
    background: #FEF6E4;
    border-color: #F0D080;
    color: #C07800;
}

.act-btn--delete:hover {
    background: #FFF2F2;
    border-color: #FFCDD2;
    color: #C0392B;
}

.act-btn--download {
    color: #2E6B9E;
}

.act-btn-placeholder {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.act-btn--download:hover {
    background: #EBF3FB;
    border-color: #9EC8E8;
    color: #1A4F7A;
}

/* ================================================================
   DELETE CONFIRM MODAL — smaller variant
   ================================================================ */

.modal-box--sm {
    max-width: 380px;
}

.modal-box--md {
    max-width: 560px;
}

/* ── Multi-input stack (emails / phones) ── */
.cd-multi-inputs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Chip list for view mode emails/phones ── */
.cd-value--list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid #F0F0F0;
    min-height: 30px;
}

.cd-list-chip {
    display: inline-block;
    background: #F4F4F4;
    border: 1px solid #E4E4E4;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12.5px;
    color: #333333;
}

/* ── Toggle pills for view mode ── */
.cd-toggle-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 10px;
    background: #F0F0F0;
    color: #999999;
    border: 1px solid #E4E4E4;
}

.cd-toggle-pill--on {
    background: #EBF5E6;
    color: #3A7D1E;
    border-color: #C5E0B4;
}

.cd-toggle-pill--amber {
    background: #FFF8E1;
    color: #B45309;
    border-color: #FCD34D;
}

.confirm-text {
    font-size: 13.5px;
    color: #1A1A1A;
    line-height: 1.6;
    margin-bottom: 8px;
}

.confirm-warning {
    font-size: 12px;
    color: #C0392B;
}

.tb-btn--danger {
    background: #C0392B;
    border-color: #C0392B;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .tb-btn--danger:hover {
        background: #A93226;
        border-color: #A93226;
        color: #FFFFFF;
    }


/* ================================================================
   USAGE PREVIEW — inside Add Usage Statement modal
   ================================================================ */

.modal-box--wide {
    max-width: 820px;
}

.usage-preview {
    margin-top: 4px;
}

/* Loading / no-data states */
.usage-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0 8px;
    font-size: 13px;
    color: #888888;
}

.usage-no-data {
    padding: 14px 0 8px;
    font-size: 13px;
    color: #AAAAAA;
    font-style: italic;
}

/* Grand total banner */
.usage-total-banner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: #F0F7ED;
    border: 1px solid #C5E0B4;
    border-radius: 7px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.usage-total-label {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #3A7D1E;
}

.usage-total-amount {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: #2C6015;
    letter-spacing: 0.02em;
}

/* Grid wrapper — scrollable if many collars */
.usage-grid-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 340px;
    border: 1px solid #EEEEEE;
    border-radius: 6px;
}

    .usage-grid-wrap::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .usage-grid-wrap::-webkit-scrollbar-thumb {
        background: #CCCCCC;
        border-radius: 2px;
    }

/* Breakdown table */
.usage-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .usage-grid thead tr {
        background: #F8F8F8;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .usage-grid th {
        padding: 7px 10px;
        text-align: left;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: #888888;
        white-space: nowrap;
        border-bottom: 1px solid #E8E8E8;
    }

    .usage-grid td {
        padding: 6px 10px;
        color: #1A1A1A;
        border-bottom: 1px solid #F5F5F5;
        white-space: nowrap;
    }

    .usage-grid tbody tr:hover td {
        background: #FAFAFA;
    }

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

.ug-collar {
    font-weight: 500;
    color: #2A2A2A;
}

.ug-total {
    font-weight: 600;
    color: #1A1A1A;
}

/* Footer totals row */
.ug-footer td {
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #1A1A1A;
    border-top: 2px solid #E0E0E0;
    background: #F8F8F8;
    white-space: nowrap;
}


/* ── Usage grid — expand/collapse sub-rows ─────────────────────── */

.ug-summary-row {
    cursor: pointer;
}

    .ug-summary-row:hover td {
        background: #F3FAF0;
    }

.ug-expand-icon {
    display: inline-block;
    width: 14px;
    font-size: 10px;
    color: #888888;
    margin-right: 4px;
    user-select: none;
}

/* Monthly sub-rows */
.ug-month-row td {
    background: #FAFCFA;
    border-bottom: 1px solid #F0F0F0;
    padding: 4px 10px;
}

.ug-month-indent {
    padding-left: 28px !important;
}

.ug-month-label {
    font-size: 11px;
    font-weight: 600;
    color: #888888;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ug-month-cost {
    font-size: 11.5px;
    color: #555555;
}

/* Delete button inside monthly sub-row */
.ug-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #CCCCCC;
    padding: 0;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

    .ug-del-btn:hover {
        background: #FFF2F2;
        border-color: #FFCDD2;
        color: #C0392B;
    }


/* ================================================================
   INVOICE MODAL TABS
   ================================================================ */

.inv-tabs {
    display: flex;
    border-bottom: 1px solid #E8E8E8;
    background: #FAFAFA;
    padding: 0 22px;
    gap: 0;
}

.inv-tab {
    padding: 10px 20px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #888888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

    .inv-tab:hover:not(:disabled) {
        color: #3A7D1E;
    }

.inv-tab--active {
    color: #3A7D1E;
    border-bottom-color: #3A7D1E;
    font-weight: 600;
}

.inv-tab:disabled {
    opacity: 0.40;
    cursor: not-allowed;
}


/* ── Invoice summary strip (auto invoice modal) ────────────────── */
.inv-summary-strip {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #F0F7ED;
    border: 1px solid #C5E0B4;
    border-radius: 7px;
    padding: 10px 14px;
    margin-bottom: 12px;
    gap: 16px;
}

.inv-summary-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.inv-summary-client {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #2C6015;
    text-transform: uppercase;
}

.inv-summary-ref {
    font-size: 11px;
    font-weight: 600;
    color: rgba(58, 125, 30, 0.60);
    letter-spacing: 0.06em;
}

.inv-summary-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.inv-summary-row {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #555555;
}

    .inv-summary-row span:last-child {
        font-weight: 600;
        min-width: 80px;
        text-align: right;
    }

.inv-summary-subtotal {
    font-weight: 600;
    font-style: italic;
    border-top: 1px solid #DDDDDD;
    padding-top: 3px;
    margin-top: 2px;
}

.inv-summary-vat {
    color: #B45309;
    font-style: italic;
}

.inv-summary-subtotal {
    font-style: italic;
    color: #555555;
    border-top: 1px dashed #DDDDDD;
    padding-top: 4px;
    margin-top: 2px;
}

.inv-vat-note {
    font-size: 10px;
    color: #AAAAAA;
    font-weight: 400;
    font-style: normal;
}

.inv-summary-total {
    font-size: 13px;
    color: #2C6015;
    font-weight: 700;
    border-top: 1px solid #C5E0B4;
    padding-top: 4px;
}

.inv-no-invoice-notice {
    margin-top: 10px;
    padding: 8px 12px;
    background: #EAF6EA;
    border: 1px solid #82C882;
    border-radius: 4px;
    color: #2C6015;
    font-size: 12px;
    font-weight: 500;
}

margin-top: 2px;
}

.inv-credit {
    color: #4A90D9;
}

/* Manual invoice VAT summary preview */
.inv-manual-vat-summary {
    margin-top: 8px;
    padding: 10px 12px;
    background: #EFF4FA;
    border: 1px solid #B0C8E0;
    border-radius: 4px;
}

    .inv-manual-vat-summary .inv-summary-row {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        padding: 3px 0;
    }

color: #1B5E8E;
font-weight: 600;
border-top: 1px dashed #B0C8E0;
padding-top: 4px;
margin-top: 4px;
}

.inv-advance-amt {
    color: #1B5E8E;
    font-weight: 700;
}

/* Manual advance payment input (new accounts with no prior usage) */
.inv-advance-input-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #EFF7FF;
    border: 1px solid #B0C8E0;
    border-radius: 4px;
}

.inv-advance-prompt {
    font-size: 12px;
    color: #1B5E8E;
    font-style: italic;
}

.inv-advance-input {
    width: 140px;
    font-size: 13px;
}


/* ================================================================
   DB ERROR BANNER
   ================================================================ */

.db-error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFF2F2;
    border-bottom: 1px solid #FFCDD2;
    padding: 8px 20px;
    font-size: 13px;
    color: #C0392B;
    flex-shrink: 0;
    z-index: 10;
}

    .db-error-banner svg {
        flex-shrink: 0;
    }

    .db-error-banner span {
        flex: 1;
    }

.db-error-dismiss {
    background: none;
    border: none;
    color: #C0392B;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

    .db-error-dismiss:hover {
        opacity: 1;
    }

/* ================================================================
   TOAST STACK
   ================================================================ */

.toast-stack {
    position: fixed;
    top: 76px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 420px;
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FFF2F2;
    border: 1px solid #FFCDD2;
    border-radius: 7px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    font-size: 13px;
    color: #C0392B;
}

    .toast-item svg {
        flex-shrink: 0;
        margin-top: 1px;
    }

    .toast-item span {
        flex: 1;
    }

.toast-dismiss {
    background: none;
    border: none;
    color: #C0392B;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    opacity: 0.7;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

    .toast-dismiss:hover {
        opacity: 1;
    }

/* ================================================================
   STALE LEDGER BANNER
   ================================================================ */

.stale-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FEF6E4;
    border-bottom: 1px solid #F0D080;
    padding: 8px 20px;
    font-size: 13px;
    color: #8A6000;
    flex-shrink: 0;
}

    .stale-banner svg {
        flex-shrink: 0;
        color: #C07800;
    }

    .stale-banner span {
        flex: 1;
    }

.auto-invoice-pdf-warning {
    background: #FFF3CD;
    border: 1.5px solid #E0A800;
    border-radius: 6px;
    color: #7A5000;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    margin-bottom: 8px;
    width: 100%;
}

.stale-banner--success {
    background: #EAF7EE;
    border-bottom-color: #7EC89A;
    color: #1D6636;
}

.stale-banner--error {
    background: #FEF0F0;
    border-bottom-color: #F0A0A0;
    color: #8A0000;
}

.stale-refresh {
    background: #C07800;
    border: none;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

    .stale-refresh:hover {
        background: #A06000;
    }

.stale-dismiss {
    background: none;
    border: none;
    color: #C07800;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

    .stale-dismiss:hover {
        opacity: 1;
    }


/* ================================================================
   RIGHT PANEL TABS
   ================================================================ */

.right-tabs {
    display: flex;
    border-bottom: 2px solid #E8E8E8;
    background: #FAFAFA;
    padding: 0 20px;
    gap: 0;
    flex-shrink: 0;
}

.right-tab {
    padding: 10px 18px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888888;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

    .right-tab:hover {
        color: #3A7D1E;
    }

.right-tab--active {
    color: #3A7D1E;
    border-bottom-color: #3A7D1E;
    font-weight: 700;
}

.right-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}


/* ── Tab component roots must fill right-tab-content ──────────── */
.airtime-tab-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

    .airtime-tab-root .stale-banner {
        flex-shrink: 0;
    }

    .airtime-tab-root .ledger-header {
        flex-shrink: 0;
    }

    .airtime-tab-root .ledger-wrap {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

/* Placeholder and details tabs also fill the space */
.tab-coming-soon,
.client-details-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
/* ================================================================
   CLIENT DETAILS TAB
   ================================================================ */

.client-details-panel {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.cd-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cd-name {
    font-size: 18px;
    font-weight: 700;
    color: #1A1A1A;
}

.cd-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cd-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

.status-active {
    background: #28a745;
    color: #FFFFFF;
}

.status-suspended {
    background: #dc3545;
    color: #FFFFFF;
}

.cd-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    background: #6c757d;
    color: #FFFFFF;
}

.cd-badge--green {
    background: #17a2b8;
    color: #FFFFFF;
}

.cd-actions {
    display: flex;
    gap: 8px;
}

.cd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.cd-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-field--full {
    grid-column: 1 / -1;
}

.cd-field label {
    font-size: 11px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cd-value {
    font-size: 13px;
    color: #1A1A1A;
    padding: 6px 0;
    border-bottom: 1px solid #F0F0F0;
    min-height: 30px;
}

/* Compact Address Row Layout */
.cd-address-row {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 16px;
}

.cd-address-col-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-address-col-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cd-field-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-value--multiline {
    white-space: pre-wrap;
    min-height: 60px;
}

/* Options Row with Checkboxes */
.cd-options-row {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 8px 0;
}

/* Financial Administrators - Dynamic Grid (1-3 columns based on content) */
.cd-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

/* Contact Cards */
.cd-contact-card {
    background: #F9F9F9;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #E5E5E5;
    font-size: 13px;
    line-height: 1.6;
}

    .cd-contact-card div {
        margin-bottom: 4px;
    }

        .cd-contact-card div:last-child {
            margin-bottom: 0;
        }

.cd-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1A1A1A;
    cursor: default;
}

    .cd-checkbox-label input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #3A7D1E;
        cursor: default;
    }

        .cd-checkbox-label input[type="checkbox"]:disabled {
            opacity: 0.8;
        }

.cd-toggles {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================
   COMPACT FORM LAYOUT (ClientDetailsForm)
   ============================================ */

.form-grid-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.form-row--options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.form-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-col--full {
    flex: 1;
}

.form-col--70 {
    flex: 0 0 70%;
}

.form-col--60 {
    flex: 0 0 60%;
}

.form-col--40 {
    flex: 0 0 calc(40% - 16px);
}

.form-col--30 {
    flex: 0 0 calc(30% - 16px);
}

.form-section-header {
    font-size: 13px;
    font-weight: 700;
    color: #1A1A1A;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #333;
    padding-bottom: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.form-section-divider {
    border-bottom: 2px solid #333;
    margin: 4px 0;
}

/* Inline label + input on same line */
.form-stack-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-inline-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-label-inline {
    font-size: 11px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    min-width: 110px;
    text-align: left;
}

.form-inline-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .form-inline-field .field-input {
        flex: 1;
        max-width: 200px;
    }

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-stack-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.5;
}

.form-options-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

.form-options-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 300px;
}

.field-input--compact {
    flex: 1;
}

.form-hint-row {
    margin-top: -8px;
    text-align: right;
}

.checkbox-row {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 8px 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1A1A1A;
    cursor: pointer;
}

    .toggle-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.field-hint {
    font-size: 11px;
    color: #888;
    font-style: italic;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1A1A1A;
    cursor: pointer;
}

    .toggle-label input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: #3A7D1E;
    }

.cd-confirm-box {
    background: #FFF2F2;
    border: 1px solid #FFCDD2;
    border-radius: 7px;
    padding: 14px;
    font-size: 13px;
    color: #C0392B;
}

.cd-info-banner {
    background: #EBF4FB;
    border: 1px solid #A8D1F0;
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 13px;
    color: #1A5A8A;
    font-weight: 500;
}

.cd-info-banner--alert {
    background: #FBEAEA;
    border: 1px solid #E5A8A8;
    color: #A11E1E;
    font-weight: 600;
}

.cd-success {
    background: #EBF5E6;
    border: 1px solid #C5E0B4;
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 13px;
    color: #2C6015;
    font-weight: 600;
}

.field-required {
    color: #C0392B;
    font-size: 11px;
}

/* ================================================================
   ADD CLIENT BUTTON IN LEFT PANEL
   ================================================================ */

.add-client-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: calc(100% - 24px);
    margin: 0 12px 8px;
    padding: 7px 12px;
    background: #EBF5E6;
    border: 1px dashed #3A7D1E;
    border-radius: 6px;
    color: #3A7D1E;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .add-client-btn:hover {
        background: #D5EBC8;
    }

.client-suspended-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    background: #FFF2F2;
    color: #C0392B;
    margin-left: auto;
    flex-shrink: 0;
}

/* ================================================================
   COMING SOON / PLACEHOLDER TABS
   ================================================================ */

.tab-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    text-align: center;
    color: #AAAAAA;
}

    .tab-coming-soon h3 {
        font-size: 16px;
        font-weight: 600;
        color: #888888;
        margin: 0;
    }

    .tab-coming-soon p {
        font-size: 13px;
        color: #AAAAAA;
        margin: 0;
        max-width: 320px;
    }

.coming-soon-sub {
    font-size: 11px !important;
    font-style: italic;
}

.tab-empty-add {
    padding: 20px;
}

.tab-empty-hint {
    font-size: 13px;
    color: #888888;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F0F0F0;
}

/* ================================================================
   HEADER ACTION ICON BUTTONS (change password, user management)
   ================================================================ */

.btn-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid transparent;
    color: #AAAAAA;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .btn-header-action:hover {
        background: rgba(255,255,255,0.15);
        border-color: rgba(255,255,255,0.25);
        color: #FFFFFF;
    }

/* ================================================================
   ADMIN / USER MANAGEMENT PAGE
   ================================================================ */

.admin-page {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* without this the flex item grows to fit all content instead
                      of clipping/scrolling internally once it has enough rows */
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Reports page: pin the header/totals row and let only the grid scroll. */
.admin-page.reports-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .admin-page.reports-page .admin-header {
        flex-shrink: 0;
    }

/* Stores Summary/Settings tabs: same pinned-header pattern as reports-page --
   header (and, for Summary, the stat-tile row) stays put, only the section(s)
   below it scroll. */
.admin-page.stores-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .admin-page.stores-page > .admin-header,
    .admin-page.stores-page > .stat-tile-row {
        flex-shrink: 0;
    }

.stores-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Wide tables (many columns) get their own horizontal scroll instead of
   blowing out .stores-scroll-area's width and dragging unrelated content
   (e.g. the category bars below) off to the right along with them. */
.stores-table-scroll {
    overflow-x: auto;
}

.reports-table-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.admin-title {
    font-size: 17px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 2px;
}

.admin-subtitle {
    font-size: 12px;
    color: #888888;
}

.admin-note {
    font-size: 11.5px;
    color: #AAAAAA;
    margin-top: 10px;
    font-style: italic;
}

.row-deleted td {
    opacity: 0.45;
}

/* Reseller expand row */
.reseller-expand-row td {
    background: #EBF5E6 !important;
    border-top: none !important;
    padding: 0 !important;
}

.reseller-expand-body {
    display: flex;
    gap: 32px;
    padding: 12px 16px 14px 40px;
    border-top: 1px solid #D4E8CC;
    background: #EBF5E6;
}

.reseller-expand-col {
    flex: 1;
    min-width: 0;
}

.reseller-expand-heading {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    margin-bottom: 6px;
}

.reseller-expand-item {
    display: flex;
    flex-direction: column;
    padding: 3px 0;
    border-bottom: 1px solid #EEF2EE;
}

.reseller-expand-name {
    font-size: 13px;
    color: #1A1A1A;
}

.reseller-expand-meta {
    font-size: 11.5px;
    color: #6B7280;
}

.reseller-expand-empty {
    font-size: 12px;
    color: #9CA3AF;
    font-style: italic;
}

/* ================================================================
   PASSWORD SHOW / HIDE
   ================================================================ */

.pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .pw-wrap .field-input {
        padding-right: 36px;
        width: 100%;
        box-sizing: border-box;
    }

.pw-toggle {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #AAAAAA;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
    line-height: 1;
}

    .pw-toggle:hover {
        color: #3A7D1E;
    }

/* ================================================================
   RESELLER ACCESS MATRIX CHECKLIST
   ================================================================ */

.access-matrix-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    padding: 8px 10px;
    background: #FAFAFA;
}

/* ================================================================
   REPORTS PAGE — LEFT PANEL FILTERS
   ================================================================ */

.reports-filters {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
}

.reports-filters .field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

    .reports-filters .field-group label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: #666666;
        margin-bottom: 6px;
    }

.reports-filters .field-input {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #1A1A1A;
    background: #FAFAFA;
    box-sizing: border-box;
    outline: none;
}

.reports-filters .access-matrix-list {
    max-height: none;
}

.reports-filters .input-clearable {
    position: relative;
    display: flex;
}

    .reports-filters .input-clearable .field-input {
        padding-right: 28px;
    }

.reports-filters .input-clear-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #999999;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
}

    .reports-filters .input-clear-btn:hover {
        color: #333333;
        background: #EFEFEF;
    }

/* ── PRINT — hide chrome, only the report table prints ─────────── */
@media print {
    .clients-left,
    .btn-back-clients,
    .admin-header button,
    .right-tabs,
    .stl-header,
    .stl-footer {
        display: none !important;
    }

    .clients-page,
    .clients-right,
    .admin-page {
        overflow: visible !important;
        height: auto !important;
    }
}

/* ================================================================
   SDM BILLING V6 - ENHANCEMENTS
   Contact Management, Billing Address, Service Reference
   ================================================================ */

/* ── MODAL SIZE ─────────────────────────────────────────────────── */
.modal-box--lg {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
}

/* ── FORM SECTION HEADERS ──────────────────────────────────────── */
.form-section-header {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 20px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
}

.cd-section-header {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-top: 16px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e8e8e8;
}

/* ── CONTACT SECTIONS ──────────────────────────────────────────── */
.contact-section {
    margin: 16px 0;
}

.contact-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
}

    .contact-section-header span:first-child {
        font-weight: 600;
        color: #333;
    }

/* ── CONTACT CARDS (FORM EDIT MODE) ────────────────────────────── */
.contact-card {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 1fr auto auto;
    gap: 8px;
    padding: 12px;
    margin: 8px 0;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    align-items: center;
}

.contact-card--primary {
    border-color: #7FB069;
    background: #f6faf4;
}

.contact-card--readonly {
    background: #f5f5f5;
    opacity: 0.8;
}

.field-input--locked {
    background: #f0f0f0 !important;
    color: #888 !important;
    cursor: not-allowed;
}

    .contact-card input {
        margin: 0;
    }

.contact-remove-btn {
    padding: 6px 10px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background 0.2s;
}

    .contact-remove-btn:hover {
        background: #c82333;
    }

.contact-add-btn {
    padding: 10px 16px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

    .contact-add-btn:hover {
        background: #218838;
    }

/* ── CONTACT DISPLAY CARDS (VIEW MODE) ─────────────────────────── */
.cd-contact-card {
    padding: 10px 12px;
    margin: 6px 0;
    background: #f8f9fa;
    border-left: 3px solid #007bff;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.6;
}

    .cd-contact-card div {
        margin: 2px 0;
    }

    .cd-contact-card strong {
        color: #333;
    }

/* ── SERVICE REFERENCE DISPLAY ─────────────────────────────────── */
.cd-value--ref {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: 600;
    color: #0066cc;
    font-size: 14px;
}

/* ── READONLY INPUT ────────────────────────────────────────────── */
.field-input--readonly {
    background: #e9ecef;
    cursor: not-allowed;
    color: #666;
}

/* ── INFO BUTTON (Save & Send Agreement) ───────────────────────── */
.tb-btn--info {
    background: #17a2b8;
    color: white;
}

    .tb-btn--info:hover {
        background: #138496;
    }

/* ── RESPONSIVE CONTACT CARDS ──────────────────────────────────── */
@media (max-width: 768px) {
    .contact-card {
        grid-template-columns: 1fr;
    }

    .contact-remove-btn {
        width: 100%;
    }

    .modal-box--lg {
        max-width: 95%;
    }
}

/* ── 3-COLUMN MODAL ROW ────────────────────────────────────────── */
.modal-row-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

@media (max-width: 768px) {
    .modal-row-3col {
        grid-template-columns: 1fr;
    }
}

/* ── SERVICE REFERENCE ROW WITH BUTTON ─────────────────────────── */
.service-ref-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Agreement Status Messages */
.agreement-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.agreement-status--success {
    background-color: #D4EDDA;
    color: #155724;
    border: 1px solid #C3E6CB;
}

.agreement-status--error {
    background-color: #F8D7DA;
    color: #721C24;
    border: 1px solid #F5C6CB;
}

.service-ref-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .service-ref-input-row .field-input {
        flex: 1;
    }

/* ── SMALL BUTTON ──────────────────────────────────────────────── */
.tb-btn--sm {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
}


/* ============================================
   MAIN MENU PAGE
   ============================================ */

.main-menu-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    overflow-y: auto;
    height: 100vh;
}

.main-menu-header {
    text-align: center;
    margin-bottom: 60px;
    padding-bottom: 20px;
    border-bottom: 2px solid #E5E5E5;
}

    .main-menu-header h1 {
        font-size: 32px;
        font-weight: 700;
        color: #1A1A1A;
        margin: 0;
    }

.menu-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1100px;
}

.menu-card {
    position: relative;
    padding: 40px 30px;
    background: white;
    border: 2px solid #E5E5E5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .main-menu-container {
        padding: 30px 15px;
    }

    .main-menu-header {
        margin-bottom: 40px;
    }

        .main-menu-header h1 {
            font-size: 26px;
        }

    .menu-cards {
        gap: 20px;
        grid-template-columns: repeat(2, 1fr);
    }

    .menu-card {
        padding: 30px 20px;
    }

    .menu-card-icon {
        font-size: 48px;
    }

    .menu-card h2 {
        font-size: 20px;
    }
}

.menu-card:hover {
    border-color: #3A7D1E;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.menu-card--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: #E5E5E5 !important;
}

    .menu-card--disabled:hover {
        transform: none;
        box-shadow: none;
    }

.menu-card-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.menu-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 10px 0;
}

.menu-card p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.coming-soon-badge {
    display: inline-block;
    margin-top: 15px;
    padding: 4px 12px;
    background: #FFF3CD;
    color: #856404;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ============================================
   SETTINGS PAGE - VERTICAL TABS
   ============================================ */

.settings-tabs-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
}

.settings-tab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    border-radius: 4px;
}

    .settings-tab-item:hover {
        background: #f8f9fa;
        color: #1A1A1A;
    }

    .settings-tab-item.active {
        background: #EBF5E6;
        color: #3A7D1E;
        border-left-color: #3A7D1E;
        font-weight: 600;
    }

    .settings-tab-item .tab-icon {
        font-size: 20px;
    }

.placeholder-icon {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.3;
}
/* ================================================================
   AUTH GUARD LOADING SPINNER
   ================================================================ */

.auth-guard-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--clr-shell);
    z-index: 9999;
}

.auth-guard-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(58, 125, 30, 0.2);
    border-top-color: #3A7D1E;
    border-radius: 50%;
    animation: auth-spin 0.8s linear infinite;
}

.auth-guard-text {
    margin-top: 20px;
    font-size: 15px;
    color: #3A7D1E;
    font-weight: 500;
}

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

/* ================================================================
   CATALOGUE MANAGEMENT
   ================================================================ */

/* ── Category Tabs (Horizontal) ───────────────────────────────── */
.catalogue-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid #E5E7EB;
    padding-bottom: 0;
}

.catalogue-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--clr-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    top: 2px;
}

    .catalogue-tab:hover {
        color: var(--clr-text-primary);
        background: rgba(58, 125, 30, 0.05);
    }

    .catalogue-tab.active {
        color: var(--clr-green);
        border-bottom-color: var(--clr-green);
        font-weight: 600;
    }

    .catalogue-tab .tab-icon {
        font-size: 18px;
    }

    .catalogue-tab .tab-label {
        /* Label text */
    }

    .catalogue-tab .tab-badge {
        background: #E5E7EB;
        color: var(--clr-text-secondary);
        font-size: 12px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 12px;
        min-width: 24px;
        text-align: center;
    }

    .catalogue-tab.active .tab-badge {
        background: var(--clr-green-xlt);
        color: var(--clr-green);
    }

/* ── Search Bar ────────────────────────────────────────────────── */
.catalogue-search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 400px;
}

    .search-box svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--clr-text-muted);
    }

    .search-box input {
        width: 100%;
        padding: 10px 12px 10px 38px;
        border: 1px solid var(--clr-input-border);
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.2s ease;
    }

        .search-box input:focus {
            outline: none;
            border-color: var(--clr-green);
            box-shadow: 0 0 0 3px var(--clr-input-focus);
        }

/* ── Modal Section Title ──────────────────────────────────────── */
.modal-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 12px 0;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}

/* ── Row Deleted State ────────────────────────────────────────── */
.row-deleted {
    opacity: 0.5;
    background: #f9fafb !important;
}

    .row-deleted td {
        color: var(--clr-text-muted);
    }

/* ── Field Error ──────────────────────────────────────────────── */
.field-error {
    display: block;
    font-size: 12px;
    color: #DC2626;
    margin-top: 4px;
}

/* ── Field Toggle (Checkbox Label) ────────────────────────────── */
.field-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--clr-text-primary);
}

    .field-toggle input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

/* ── Modal Large Size ─────────────────────────────────────────── */
.modal-box--lg {
    width: 680px;
    max-width: 90vw;
}

/* ── Modal Small Size (for confirmations) ─────────────────────── */
.modal-dialog--small {
    max-width: 480px;
}

/* ── Button Variants ──────────────────────────────────────────── */
.btn-secondary {
    padding: 8px 16px;
    background: #F5F5F5;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #1A1A1A;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-secondary:hover {
        background: #E0E0E0;
        border-color: #BDBDBD;
    }

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #D32F2F;
    border: 1px solid #C62828;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-danger:hover {
        background: #C62828;
        border-color: #B71C1C;
    }

/* ── Success Alert (cd-success already exists, just ensuring) ── */
.cd-success {
    background: #EBF5E6;
    color: #3A7D1E;
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 4px solid #3A7D1E;
    margin-bottom: 16px;
    font-size: 14px;
}

/* ================================================================
   LEADS MODULE - STATUS BADGES
   ================================================================ */

/* ── Lead Status Badges ──────────────────────────────────────── */
.lead-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

.lead-status-new {
    background: #3B82F6;
}

.lead-status-contacted {
    background: #8B5CF6;
}

.lead-status-quotesent {
    background: #F59E0B;
}

.lead-status-negotiating {
    background: #F59E0B;
}

.lead-status-won {
    background: #10B981;
    opacity: 0.6;
}

.lead-status-lost {
    background: #6B7280;
    opacity: 0.6;
}

/* ── Worksheet Status Badges ─────────────────────────────────────── */
.worksheet-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

.worksheet-status-notstarted {
    background: #6B7280;
}

.worksheet-status-inproduction {
    background: #F59E0B;
}

.worksheet-status-completed {
    background: #8B5CF6;
}

.worksheet-status-shipped {
    background: #10B981;
}

.worksheet-type-chooser {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 16px;
}

.worksheet-type-chooser-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.worksheet-type-chooser-row .tb-btn {
    flex: 1;
    justify-content: center;
}

.worksheet-type-chooser-cancel-row {
    display: flex;
    justify-content: flex-end;
}

.tb-btn--icon-only {
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.worksheet-list-divider {
    border-top: 1px solid #E5E7EB;
    margin: 10px 16px 6px;
}

/* ── Worksheet Detail Summary (heading-style header, not boxed fields) ── */
.worksheet-summary {
    margin-bottom: 16px;
}

.worksheet-summary-client {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
}

.worksheet-summary-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6B7280;
}

.worksheet-summary-dot {
    color: #CCCCCC;
}

/* ── Inline text-style link button (e.g. "View Collars (N)") ─────────── */
.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #1976D2;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .link-btn:hover {
        color: #0D47A1;
    }

/* ── Job Card collars modal ───────────────────────────────────────── */
.collars-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.collar-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    background: #F3F4F6;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

/* ── Document actions (Email/Download Checklist/Job Card, etc) ───────── */
.doc-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.doc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .doc-action-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

.doc-action-sent {
    font-size: 11.5px;
    color: #16A34A;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Checklist Tab: header row (badge + progress bar share a row) ──── */
.checklist-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.checklist-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 260px;
    max-width: 340px;
    min-width: 200px;
}

.checklist-progress-bar {
    flex: 1;
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
}

.checklist-progress-fill {
    height: 100%;
    background: #16A34A;
    transition: width 0.2s ease;
}

.checklist-progress-label {
    font-size: 11.5px;
    color: #6B7280;
    white-space: nowrap;
}

/* ── Checklist Tab: bordered category card ──────────────────────────── */
.checklist-category-card {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #FFFFFF;
}

    .checklist-category-card .ledger-table {
        margin-top: 4px;
    }

/* ── Checklist Tab: Dates column (day-count label, not date pickers --
   dates are entered once via the sign-off modal) ─────────────────────── */
.checklist-dates-label {
    font-size: 12px;
    color: #374151;
    font-weight: 600;
}

.checklist-dates-unset {
    font-size: 11px;
    color: #B45309;
    font-weight: 600;
}

/* ── Checklist Tab: owner cell (initials chip + sign-off icon) ───────── */
.owner-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.initials-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E5E7EB;
    color: #4B5563;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.initials-chip--signedoff {
    background: #DCFCE7;
    color: #16A34A;
}

.initials-chip-tick {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 13px;
    height: 13px;
    padding: 1.5px;
    border-radius: 50%;
    background: #16A34A;
    color: #FFFFFF;
    box-shadow: 0 0 0 1.5px #FFFFFF;
}

.owner-signoff-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D1D5DB;
    border-radius: 50%;
    background: #FFFFFF;
    color: #16A34A;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

    .owner-signoff-btn svg {
        width: 13px;
        height: 13px;
    }

    .owner-signoff-btn:hover {
        background: #DCFCE7;
        border-color: #16A34A;
    }

.worksheet-summary-ref {
    display: inline-block;
    margin: 0 0 16px;
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
    border-bottom: 1px solid #D1D5DB;
}

/* ── Stores Module ───────────────────────────────────────────────── */

/* Edit/delete icons on a list row, revealed on hover instead of sitting
   permanently next to the badge/count -- keeps rows quiet at rest. */
.row-hover-actions {
    display: none;
    align-items: center;
    gap: 2px;
}

.client-row:hover .row-hover-actions {
    display: flex;
}

.store-item-sub {
    display: block;
    font-size: 11.5px;
    color: #9CA3AF;
    margin-top: 2px;
}

.stock-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

.stock-badge--ok {
    background: #10B981;
}

.stock-badge--low {
    background: #DC2626;
}

.store-filter-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px 12px;
}

.store-balance-figure {
    font-size: 28px;
    font-weight: 700;
    color: #1A1A1A;
}

/* ── Stores Summary Dashboard ────────────────────────────────────── */
.stat-tile-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.stat-tile {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-left: 3px solid #D1D5DB;
    border-radius: 8px;
    padding: 16px 18px;
}

.stat-tile--critical {
    border-left-color: #DC2626;
}

.stat-tile--good {
    border-left-color: #10B981;
}

.stat-tile-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9CA3AF;
    margin-bottom: 6px;
}

.stat-tile-value {
    font-size: 26px;
    font-weight: 700;
    color: #1A1A1A;
    font-variant-numeric: proportional-nums;
}

.stores-dashboard-section {
    margin-bottom: 28px;
}

.stores-dashboard-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 14px;
}

.stores-dashboard-section-sub {
    font-size: 12px;
    color: #888888;
    margin-bottom: 14px;
}

.stock-meter-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: #F0F0F0;
    border-radius: 3px;
    overflow: hidden;
}

.stock-meter-fill {
    height: 100%;
    border-radius: 3px;
    background: #10B981;
}

.stock-meter-fill--low {
    background: #DC2626;
}

.category-bar-row {
    display: grid;
    grid-template-columns: 200px 1fr 90px;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #F5F5F5;
}

.category-bar-name {
    font-size: 13px;
    color: #2A2A2A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-bar-track {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #F0F0F0;
}

.category-bar-segment--ok {
    background: #10B981;
}

.category-bar-segment--low {
    background: #DC2626;
}

.category-bar-count {
    font-size: 11.5px;
    color: #888888;
    text-align: right;
    white-space: nowrap;
}

.dashboard-empty-good {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 8px;
    color: #166534;
    font-size: 13.5px;
}

/* ── Compact modal variant (Stores add/edit dialogs) ────────────────
   The default .field-group padding (20px top/bottom, applied per field)
   is meant for long single-column forms and leaves short/packed forms
   feeling very sparse. This tightens vertical rhythm; pair with a width
   class (.modal-box--md / --wide) so packed rows don't feel cramped. */
.modal-box--compact .modal-body {
    padding: 14px 20px 10px;
}

.modal-box--compact .field-group {
    padding: 5px 0;
    margin-bottom: 0;
}

.modal-box--compact .modal-row {
    gap: 14px;
    margin-bottom: 6px;
}

.modal-box--compact .modal-row:last-child {
    margin-bottom: 0;
}

.modal-box--md {
    max-width: 560px;
}

/* ── Lead Location Display ──────────────────────────────────────── */
.client-location {
    display: block;
    font-size: 11.5px;
    color: #999999;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Lead Info Wrapper (for name + location stacking) ────────────── */
.lead-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Contact Item Styles ────────────────────────────────────────── */
.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.contact-item {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

    .contact-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border-color: #BDBDBD;
    }

.contact-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

    .contact-item-header strong {
        font-size: 14px;
        color: var(--clr-text-primary);
    }

.contact-item-actions {
    display: flex;
    gap: 6px;
}

    /* Contact action icon buttons - make them more visible */
    .contact-item-actions .act-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        background: #FFFFFF;
        border: 1px solid #E0E0E0;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

        .contact-item-actions .act-btn:hover {
            background: #F5F5F5;
            border-color: #BDBDBD;
        }

        .contact-item-actions .act-btn svg {
            width: 16px;
            height: 16px;
        }

    .contact-item-actions .act-btn--edit {
        color: #F57C00;
    }

        .contact-item-actions .act-btn--edit:hover {
            background: #FFF3E0;
            border-color: #FFB74D;
        }

    .contact-item-actions .act-btn--delete {
        color: #D32F2F;
    }

        .contact-item-actions .act-btn--delete:hover {
            background: #FFEBEE;
            border-color: #EF5350;
        }

.contact-item-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-detail {
    font-size: 13px;
    color: var(--clr-text-secondary);
}

/* ================================================================
   LEAD DETAILS - FORM STYLES
   ================================================================ */

/* ── Section Container ────────────────────────────────────────── */
.cd-section {
    margin-bottom: 24px;
}

/* ── Section Title ────────────────────────────────────────────── */
.cd-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--clr-text-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--clr-green);
}

/* ── Row (Form Row) ───────────────────────────────────────────── */
.cd-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

    .cd-row:last-child {
        margin-bottom: 0;
    }

/* ── Field Container ──────────────────────────────────────────── */
.cd-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

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

/* ── Checkbox Field with Empty Label Spacer ───────────────────── */
.cd-field-checkbox {
    display: flex;
    flex-direction: column;
}

    .cd-field-checkbox > label:first-child {
        visibility: hidden;
        height: 19px;
        margin-bottom: 6px;
    }

/* ── Inline Label Field (Label on Left) ───────────────────────── */
.cd-field-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

    .cd-field-inline label {
        font-size: 13px;
        font-weight: 500;
        color: var(--clr-text-secondary);
        min-width: 120px;
        text-align: left;
        margin: 0;
    }

    .cd-field-inline .cd-input {
        flex: 1;
    }

/* ── Input Fields ─────────────────────────────────────────────── */
.cd-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: var(--clr-text-primary);
    background: #f9fafb;
    transition: border-color 0.2s, background-color 0.2s;
}

    .cd-input:focus {
        outline: none;
        border-color: var(--clr-green);
        background: white;
        box-shadow: 0 0 0 3px rgba(58, 125, 30, 0.1);
    }

    .cd-input:disabled {
        background: #f3f4f6;
        color: #9ca3af;
        cursor: not-allowed;
    }

    .cd-input::placeholder {
        color: #9ca3af;
        font-style: italic;
    }

textarea.cd-input {
    resize: vertical;
    font-family: inherit;
}

select.cd-input {
    cursor: pointer;
}

/* ── Checkbox Label ───────────────────────────────────────────── */
.cd-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--clr-text-primary);
    cursor: pointer;
    margin-top: 8px;
}

    .cd-checkbox-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

/* ── Action Buttons ───────────────────────────────────────────── */
.cd-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid #e5e7eb;
}

/* ── Tab Loading Overlay ──────────────────────────────────────── */
.tab-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 9999;
}

    .tab-loading-overlay span {
        font-size: 14px;
        color: var(--clr-text-secondary);
    }

/* ── Client Details Tab Container ─────────────────────────────── */
.client-details-tab {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── Responsive Adjustments ───────────────────────────────────── */
@media (max-width: 768px) {
    .cd-row {
        flex-direction: column;
    }

    .cd-section {
        padding: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PROFORMA INVOICES TAB
   Used in LeadProformaInvoicesContent.razor
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tab Root (fills right-tab-content) ────────────────────────── */
.proforma-tab-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ── Header with New Proforma Button ───────────────────────────── */
.proforma-header {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 16px 20px 12px 20px;
}

.proforma-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #E8F5E9;
    border: 1px solid #C8E6C9;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #2E7D32;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .proforma-new-btn:hover {
        background: #D5EBC8;
        border-color: #A5D6A7;
    }

/* ── Search Input ──────────────────────────────────────────────── */
.proforma-search-wrap {
    flex-shrink: 0;
    padding: 12px 20px;
}

.proforma-search-input {
    width: 300px;
    padding: 8px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #1A1A1A;
    background: #FFFFFF;
    transition: all 0.2s ease;
}

    .proforma-search-input::placeholder {
        color: #9CA3AF;
    }

    .proforma-search-input:focus {
        outline: none;
        border-color: #3A7D1E;
        box-shadow: 0 0 0 3px rgba(58, 125, 30, 0.10);
    }

/* ── Scrollable Content Area ───────────────────────────────────── */
.proforma-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0 20px 20px 20px;
}

/* ── Proforma Table Grid (Ledger Style) ────────────────────────── */
.proforma-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .proforma-table thead tr {
        background: #F8F8F8;
        border-bottom: 1px solid #E8E8E8;
    }

    .proforma-table th {
        padding: 8px 12px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: #888888;
        white-space: nowrap;
    }

        .proforma-table th:last-child {
            text-align: center;
            width: 140px;
        }

    .proforma-table td {
        padding: 8px 12px;
        color: #1A1A1A;
        border-bottom: 1px solid #F5F5F5;
        vertical-align: middle;
    }

    .proforma-table tbody tr:hover td {
        background: #FAFAFA;
    }

    .proforma-table tbody tr td:first-child {
        font-weight: 600;
        color: #2E7D32;
    }

/* ── Table Action Icons ────────────────────────────────────────── */
.proforma-table-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.proforma-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .proforma-icon-btn:hover {
        background: #F5F5F5;
        border-color: #BDBDBD;
    }

    .proforma-icon-btn svg {
        width: 14px;
        height: 14px;
    }

/* Icon button variants */
.proforma-icon-btn--edit {
    color: #F57C00;
}

    .proforma-icon-btn--edit:hover {
        background: #FFF3E0;
        border-color: #FFB74D;
    }

.proforma-icon-btn--download {
    color: #7B1FA2;
}

    .proforma-icon-btn--download:hover {
        background: #F3E5F5;
        border-color: #BA68C8;
    }

.proforma-icon-btn--delete {
    color: #D32F2F;
}

    .proforma-icon-btn--delete:hover {
        background: #FFEBEE;
        border-color: #EF5350;
    }

.proforma-icon-btn--convert {
    color: #0288D1;
}

    .proforma-icon-btn--convert:hover {
        background: #E1F5FE;
        border-color: #4FC3F7;
    }

.proforma-icon-btn--converted {
    color: #388E3C;
}

    .proforma-icon-btn--converted:hover {
        background: #E8F5E9;
    }

.proforma-icon-btn--star {
    color: #BDBDBD;
}

    .proforma-icon-btn--star:hover {
        color: #7FB069;
        background: #F1F8EE;
        border-color: #A5D6A7;
    }

.proforma-icon-btn--star-active {
    color: #7FB069;
    border-color: #7FB069;
    background: #F1F8EE;
}

    .proforma-icon-btn--star-active:hover {
        background: #E8F5E9;
        border-color: #66BB6A;
    }

.proforma-icon-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(100%);
    background: #FAFAFA;
}

    .proforma-icon-btn:disabled:hover {
        background: #FAFAFA;
        border-color: #E0E0E0;
    }

/* ── Status Badge in Table ─────────────────────────────────────── */
.proforma-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.proforma-status-inline--draft {
    background: #F5F5F5;
    color: #757575;
}

.proforma-status-inline--sent {
    background: #E8F5E9;
    color: #2E7D32;
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL INVOICES - Same styles as proforma for consistency
   ═══════════════════════════════════════════════════════════════════ */

.invoice-tab-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.invoice-header {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 16px 20px 12px 20px;
}

.invoice-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #E8F5E9;
    border: 1px solid #C8E6C9;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #2E7D32;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .invoice-new-btn:hover {
        background: #D5EBC8;
        border-color: #A5D6A7;
    }

.invoice-search-wrap {
    flex-shrink: 0;
    padding: 12px 20px;
}

.invoice-search-input {
    width: 300px;
    padding: 8px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #1A1A1A;
    background: #FFFFFF;
    transition: all 0.2s ease;
}

    .invoice-search-input::placeholder {
        color: #9CA3AF;
    }

    .invoice-search-input:focus {
        outline: none;
        border-color: #3A7D1E;
        box-shadow: 0 0 0 3px rgba(58, 125, 30, 0.10);
    }

.invoice-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0 20px 20px 20px;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .invoice-table thead tr {
        background: #F8F8F8;
        border-bottom: 1px solid #E8E8E8;
    }

    .invoice-table th {
        padding: 8px 12px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: #888888;
        white-space: nowrap;
    }

        .invoice-table th:last-child {
            text-align: center;
            width: 140px;
        }

    .invoice-table td {
        padding: 8px 12px;
        color: #1A1A1A;
        border-bottom: 1px solid #F5F5F5;
        vertical-align: middle;
    }

    .invoice-table tbody tr:hover td {
        background: #FAFAFA;
    }

    .invoice-table tbody tr td:first-child {
        font-weight: 600;
        color: #2E7D32;
    }

.invoice-table-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.invoice-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .invoice-icon-btn:hover {
        background: #F5F5F5;
        border-color: #BDBDBD;
    }

    .invoice-icon-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

.invoice-icon-btn--edit {
    color: #1976D2;
}

    .invoice-icon-btn--edit:hover {
        background: #E3F2FD;
        border-color: #64B5F6;
    }

.invoice-icon-btn--download {
    color: #757575;
}

    .invoice-icon-btn--download:hover {
        background: #EEEEEE;
        border-color: #BDBDBD;
    }

.invoice-icon-btn--delete {
    color: #D32F2F;
}

    .invoice-icon-btn--delete:hover {
        background: #FFEBEE;
        border-color: #EF5350;
    }

.invoice-icon-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(100%);
    background: #FAFAFA;
}

    .invoice-icon-btn:disabled:hover {
        background: #FAFAFA;
        border-color: #E0E0E0;
    }

/* ── Tiny up/down reorder buttons (sort_order swap with neighbor) ── */
.reorder-btn {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #9CA3AF;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 3px;
}

    .reorder-btn:hover:not(:disabled) {
        background: #EEF2FF;
        color: #3A7D1E;
    }

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

.invoice-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.invoice-status-inline--draft {
    background: #F5F5F5;
    color: #757575;
}

.invoice-status-inline--sent {
    background: #E8F5E9;
    color: #2E7D32;
}


/* Proforma list container */
.proforma-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Individual proforma item */
.proforma-item {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 16px;
    transition: box-shadow 0.2s ease;
}

    .proforma-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

/* Proforma item header - number and amount */
.proforma-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.proforma-item-number {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .proforma-item-number strong {
        font-size: 15px;
        color: var(--clr-text-primary);
    }

.proforma-item-amount {
    font-size: 16px;
    font-weight: 600;
    color: var(--clr-green);
}

/* Status badge */
.proforma-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.proforma-status-badge--draft {
    background: var(--clr-gray-light);
    color: var(--clr-text-muted);
}

.proforma-status-badge--sent {
    background: var(--clr-green-light);
    color: var(--clr-green);
}

/* Proforma details */
.proforma-item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--clr-text-secondary);
}

.proforma-detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Proforma actions */
.proforma-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--clr-border-light);
}

    /* Action buttons — SCOPED to proforma item actions */
    .proforma-item-actions .act-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        background: transparent;
        border: 1px solid var(--clr-border);
        border-radius: 4px;
        font-size: 13px;
        color: var(--clr-text-primary);
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .proforma-item-actions .act-btn:hover {
            background: var(--clr-hover-bg);
        }

    .proforma-item-actions .act-btn--view {
        color: var(--clr-blue);
        border-color: var(--clr-blue-light);
    }

        .proforma-item-actions .act-btn--view:hover {
            background: var(--clr-blue-light);
        }

    .proforma-item-actions .act-btn--edit {
        color: var(--clr-orange);
        border-color: var(--clr-orange-light);
    }

        .proforma-item-actions .act-btn--edit:hover {
            background: var(--clr-orange-light);
        }

    .proforma-item-actions .act-btn--download {
        color: var(--clr-purple);
        border-color: var(--clr-purple-light);
    }

        .proforma-item-actions .act-btn--download:hover {
            background: var(--clr-purple-light);
        }

    .proforma-item-actions .act-btn--email {
        color: var(--clr-green);
        border-color: var(--clr-green-light);
    }

        .proforma-item-actions .act-btn--email:hover {
            background: var(--clr-green-light);
        }

    .proforma-item-actions .act-btn--delete {
        color: var(--clr-red);
        border-color: var(--clr-red-light);
    }

        .proforma-item-actions .act-btn--delete:hover {
            background: var(--clr-red-light);
        }

/* Search input styling */
.search-wrap {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    font-size: 14px;
    color: var(--clr-text-primary);
    background: var(--clr-card-bg);
}

    .search-input:focus {
        outline: none;
        border-color: var(--clr-green);
    }

/* Mobile responsiveness */
@media (max-width: 768px) {
    .proforma-item-header {
        flex-direction: column;
        gap: 8px;
    }

    .proforma-item-actions {
        flex-direction: column;
    }

        .proforma-item-actions .act-btn {
            width: 100%;
            justify-content: center;
        }
}

/* ═══════════════════════════════════════════════════════════════════════
   HARDWARE PROFORMA MODAL STYLES
   Used in HardwareProformaModal.razor
   ═══════════════════════════════════════════════════════════════════════ */

/* Modal size variants */
.modal-box--xl {
    width: 95%;
    max-width: 1200px;
}

/* ═══════════════════════════════════════════════════════════════════════
   NEW ORDER WORKSHEET MODAL — two-column invoice list + detail/overlay
   Used in NewOrderWorksheetModal.razor. Reuses .clients-list/.client-row
   (Clients.razor) and .right-empty for visual consistency.
   ═══════════════════════════════════════════════════════════════════════ */
.modal-box--split {
    width: 95%;
    max-width: 1080px;
    height: 82vh;
    max-height: 760px;
}

    .modal-box--split .modal-body {
        padding: 0;
        flex: 1;
        min-height: 0;
        flex-direction: row;
        overflow: hidden;
    }

.worksheet-invoices-left {
    width: 34%;
    min-width: 260px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #E8E8E8;
    overflow: hidden;
}

.worksheet-invoices-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
}

.invoice-row-meta {
    font-size: 11.5px;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.invoice-icon-btn--create {
    flex-shrink: 0;
    color: #3A7D1E;
}

    .invoice-icon-btn--create:hover {
        background: #EAF4E4;
        border-color: #8FC26B;
    }

/* Create-worksheet overlay — same "pop out and cover the panel" pattern as
   .summary-detail-modal on the Main Menu Overview card, adapted to a
   rectangular modal panel instead of a rounded dashboard card. */
.worksheet-create-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
}

.worksheet-create-overlay-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 14px;
    line-height: 1;
    color: #8A8A82;
    cursor: pointer;
}

    .worksheet-create-overlay-close:hover {
        color: #262626;
    }

.worksheet-create-overlay-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #1A1A1A;
    padding: 16px 46px 12px 22px;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0;
}

.worksheet-create-overlay-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.worksheet-create-line-desc {
    font-size: 13px;
    color: #333333;
    margin-bottom: 6px;
}

.worksheet-create-overlay-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 22px;
    border-top: 1px solid #F0F0F0;
    background: #FAFAFA;
    flex-shrink: 0;
}

/* Section styling */
.section-divider {
    height: 1px;
    background: var(--clr-border);
    margin: 24px 0 16px 0;
}

.section-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--clr-text-primary);
    margin: 0 0 16px 0;
}

/* Checkbox labels */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--clr-text-primary);
}

    .checkbox-label input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

/* Line items actions */
.line-items-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tb-btn--sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* Line items list */
.line-items-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

/* Individual line item card */
.line-item-card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 16px;
}

.line-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--clr-border-light);
}

.line-item-number {
    font-weight: 600;
    color: var(--clr-text-primary);
}

/* Line item totals */
.line-item-totals {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--clr-border-light);
}

.line-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 14px;
}

.line-total-main {
    font-size: 15px;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--clr-border);
}

.text-red {
    color: var(--clr-red);
}

.text-green {
    color: var(--clr-green);
}

/* Totals summary */
.totals-summary {
    background: var(--clr-gray-light);
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    padding: 16px;
    margin-top: 16px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}

.total-row-main {
    font-size: 17px;
    font-weight: 600;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 2px solid var(--clr-border);
}

/* Field required indicator */
.field-required {
    color: var(--clr-red);
}

/* Text color utilities */
.text-muted {
    color: var(--clr-text-muted);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .modal-box--xl {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    .line-items-actions {
        flex-direction: column;
    }

    .tb-btn--sm {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   INVOICE PREVIEW STYLES
   Used for HTML preview of proforma invoices
   ═══════════════════════════════════════════════════════════════════════ */

.invoice-preview {
    background: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: Arial, sans-serif;
}

    .invoice-preview table {
        border-collapse: collapse;
        width: 100%;
    }

        .invoice-preview table th,
        .invoice-preview table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .invoice-preview table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }

        .invoice-preview table td {
            vertical-align: top;
        }

/* ═══════════════════════════════════════════════════════════════════════
   EXCEL-STYLE LINE ITEMS TABLE (Hardware Proforma)
   ═══════════════════════════════════════════════════════════════════════ */

/* Readonly field styling */
.field-input-readonly {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    cursor: not-allowed;
}

/* Bottom-aligned modal row (for Reference + Customer Ref) */
.modal-row-bottom-align {
    align-items: flex-end;
}

/* Section heading with underline */
.section-heading-underlined {
    border-bottom: 2px solid #2C5F2D;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.line-items-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 16px 0;
    flex: 1;
    min-height: 0;
}

/* Wraps just the data rows (BomLineEditor) so the header row above it --
   a flex-shrink:0 sibling, not a child -- never scrolls with them. Only
   takes effect when .line-items-table itself sits in a bounded-height flex
   column (see modal-body below); a no-op otherwise. */
.line-items-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.line-item-row {
    display: grid;
    grid-template-columns: 40px 1fr 80px 140px 100px 120px 60px;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
    align-items: start;
}

.line-item-header-row {
    background: #f5f5f5;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    border-top: 2px solid #2C5F2D;
    border-bottom: 2px solid #2C5F2D;
    align-items: center;
    padding: 4px 8px;
    /* Read-only grids (e.g. JobCardsTab) render the header as a normal
       child inside a scrolling ancestor (.tab-content-inner) rather than
       via .line-items-scroll -- sticky keeps it pinned as the rows scroll
       past underneath. No-op wherever there's no scrolling ancestor. */
    position: sticky;
    top: 0;
    z-index: 1;
}

.line-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.line-col-num {
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.line-col-item {
    min-width: 0;
}

.line-col-qty,
.line-col-price,
.line-col-discount,
.line-col-total {
    align-items: flex-end;
    text-align: right;
}

.line-col-actions {
    justify-content: center;
    align-items: center;
}

/* Worksheet line-item editor: #, item, qty, comments, actions (no price/discount/total).
   Item names are short (catalogue item name, not a paragraph description), so give
   comments the flexible column -- that's the field that needs the most room. */
.worksheet-line-item-row {
    grid-template-columns: 40px 220px 70px 1fr 60px;
}

.line-col-comments {
    min-width: 0;
}

/* Discount checkbox and input side by side */
.discount-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.discount-input {
    width: 60px !important;
    flex-shrink: 0;
}

.field-input-compact {
    padding: 6px 8px;
    font-size: 13px;
    width: 100%;
}

.line-item-row textarea.field-input-compact {
    min-height: 40px;
    resize: vertical;
}

/* ── Rich text comments editor (worksheet line items) ──────────────── */
.rte-wrap {
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #FFFFFF;
    overflow: hidden;
}

.rte-toolbar {
    display: flex;
    gap: 2px;
    padding: 3px 4px;
    background: #F7F7F5;
    border-bottom: 1px solid #E8E8E8;
}

.rte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 5px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #555;
    font-size: 11px;
    cursor: pointer;
}

    .rte-btn:hover {
        background: #E9EFE6;
        color: #2C6015;
    }

.rte-editor {
    min-height: 40px;
    max-height: 140px;
    overflow-y: auto;
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
    color: #1A1A1A;
    outline: none;
}

    .rte-editor:empty::before {
        content: attr(data-placeholder);
        color: #AAAAAA;
    }

    .rte-editor ul, .rte-editor ol {
        margin: 0;
        padding-left: 20px;
    }

/* Read-only rendering of saved comments HTML (worksheet detail view) */
.rte-readonly {
    min-height: 40px;
}

    .rte-readonly ul, .rte-readonly ol {
        margin: 0;
        padding-left: 18px;
    }

.checkbox-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin: 0;
}

.text-muted {
    color: #999;
    font-size: 11px;
}

.text-strikethrough {
    text-decoration: line-through;
}

.line-item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #2C5F2D;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
}

/* Responsive adjustments for line items table */
@media (max-width: 1200px) {
    .line-item-row {
        grid-template-columns: 40px 1fr 70px 120px 90px 110px 50px;
        gap: 6px;
        font-size: 12px;
    }
}


/* ================================================================
   LOGIN BOX — card treatment (kept from the reverted polish pass)
   ================================================================ */

.login-box {
    width: 360px;
    background: #FFFFFF;
    border: 1px solid #ECECEA;
    border-radius: 14px;
    padding: 34px 32px 30px;
    box-shadow: 0 1px 2px rgba(20, 30, 12, 0.04), 0 14px 44px rgba(20, 30, 12, 0.10);
    position: relative;
    overflow: hidden;
}

    /* Green accent bar along the top edge */
    .login-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #3A7D1E, #4E9E2A, #3A7D1E);
    }


/* ================================================================
   SLEEK POLISH LAYER v2  —  static-only refinement (2026-07)
   Append-only overrides. STRICTLY NO entrance/mount animations:
   Blazor replaces DOM wrappers on interactive re-renders, so any
   animation on page/content roots replays constantly and reads as
   flicker. Hover/focus transitions only. Deleting this section
   restores the previous look exactly.
   ================================================================ */

/* ── 0. Foundations ────────────────────────────────────────────── */
::selection {
    background: rgba(58, 125, 30, 0.18);
    color: #143008;
}

/* Reserve the scrollbar gutter permanently so a scrollbar appearing
   or disappearing never changes content width (frame resize flicker) */
.stl-main {
    scrollbar-gutter: stable;
}

/* The menu container was 100vh inside a frame smaller than the
   viewport, guaranteeing overflow churn. Fill the frame instead. */
.main-menu-container {
    height: 100%;
}

/* ── 1. App shell — softer frame, deeper float ─────────────────── */
#stl-app {
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14),
                0 1px 2px rgba(0, 0, 0, 0.25),
                0 30px 90px rgba(0, 0, 0, 0.55),
                0 8px 28px rgba(0, 0, 0, 0.30);
}

/* ── 2. Header + footer ────────────────────────────────────────── */
.stl-header {
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F2 100%);
    border-bottom-color: #E2E4E0;
}

    .stl-header::after {
        opacity: 0.55;
        background: linear-gradient(90deg, transparent 0%, var(--clr-green-lt) 20%, var(--clr-green) 50%, var(--clr-green-lt) 80%, transparent 100%);
    }

.btn-logout {
    border-radius: 8px;
    border-color: #D6D6D6;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

    .btn-logout:hover {
        box-shadow: 0 3px 10px rgba(58, 125, 30, 0.14);
    }

.stl-footer {
    background: #FAFAF9;
    border-top-color: #ECECEA;
}

/* ── 3. Scrollbars — slim, rounded, unobtrusive ────────────────── */
.stl-main::-webkit-scrollbar,
.ledger-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.stl-main::-webkit-scrollbar-track,
.ledger-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.stl-main::-webkit-scrollbar-thumb,
.ledger-wrap::-webkit-scrollbar-thumb,
.clients-list::-webkit-scrollbar-thumb {
    background: #D4D4D4;
    border-radius: 6px;
}

    .stl-main::-webkit-scrollbar-thumb:hover,
    .ledger-wrap::-webkit-scrollbar-thumb:hover,
    .clients-list::-webkit-scrollbar-thumb:hover {
        background: #9CB98C;
    }

/* ── 4. Main menu — refined hero + card system (no animations) ── */
.main-menu-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 48px;
}

    .main-menu-header h1 {
        font-family: var(--font-display);
        font-size: 34px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #202020;
    }

    .main-menu-header::after {
        content: '';
        display: block;
        width: 72px;
        height: 3px;
        margin: 14px auto 0;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--clr-green), var(--clr-green-lt));
    }

.menu-cards {
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
    grid-auto-rows: minmax(0, 206px);
}

.menu-card {
    border: 1px solid #E9EAE7;
    border-radius: 14px;
    padding: 30px 22px 26px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 30, 12, 0.04), 0 4px 14px rgba(20, 30, 12, 0.05);
    transition: box-shadow 0.22s cubic-bezier(0.22, 0.68, 0.36, 1),
                border-color 0.22s;
    overflow: hidden;
}

    /* Green accent bar sweeps in along the top on hover */
    .menu-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--clr-green), var(--clr-green-lt));
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.28s cubic-bezier(0.22, 0.68, 0.36, 1);
    }

    /* Lift on hover via shadow only — transform: none overrides the
       original translateY(-2px) hover so layout/scroll overflow never
       change */
    .menu-card:hover {
        border-color: #CFE3C2;
        box-shadow: 0 2px 4px rgba(20, 30, 12, 0.05), 0 16px 34px rgba(31, 66, 15, 0.13);
        transform: none;
    }

        .menu-card:hover::before {
            transform: scaleX(1);
        }

.menu-card-icon {
    font-size: 30px;
    width: 62px;
    height: 62px;
    line-height: 1;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #F1F8ED 0%, #E4F0DC 100%);
    border: 1px solid #DCEAD2;
    border-radius: 16px;
}

.menu-card h2 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: #262626;
    margin: 0 0 6px 0;
}

.menu-card p {
    font-size: 12.5px;
    color: #808680;
    line-height: 1.45;
}

.menu-card--summary {
    grid-column: 4;
    grid-row: 1 / span 2;
    cursor: default;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.summary-card-header {
    text-align: center;
}

    .summary-card-header h2 {
        margin: 0 0 12px;
    }

    .summary-card-header::after {
        content: '';
        display: block;
        width: 46px;
        height: 2px;
        margin: 0 auto 20px;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent, rgba(58, 125, 30, 0.35), transparent);
    }

.summary-stat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.summary-stat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 2px;
    border-bottom: 1px solid #EEF1EA;
}

    .summary-stat-item:last-child {
        border-bottom: none;
    }

.summary-stat-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(160deg, #F1F8ED 0%, #E4F0DC 100%);
    border: 1px solid #DCEAD2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

.summary-stat-label {
    flex: 1;
    font-size: 11.5px;
    color: #4A4A45;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-green);
    min-width: 16px;
    text-align: right;
    flex-shrink: 0;
}

.summary-stat-item--breakdown {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}

/* ── Flagged stats (red) -- click opens the detail modal below.
   Plain state toggle on click, no animation, so there's nothing to
   replay/flicker the way mount animations did (see memory). */
.summary-stat-item.is-flagged .summary-stat-value {
    color: #C0392B;
}

.summary-stat-item.is-flagged .summary-stat-icon {
    background: linear-gradient(160deg, #FBEAE8 0%, #F6D8D4 100%);
    border-color: #E9BDB7;
}

.summary-stat-item.is-flagged {
    cursor: pointer;
}

/* Sized to exactly cover .menu-card--summary (position:relative, same
   border-radius) -- this is a sibling of .summary-stat-list, not nested
   inside a stat row, so inset:0 resolves against the card itself. */
.summary-detail-modal {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 20px 22px;
}

.summary-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 14px;
    line-height: 1;
    color: #8A8A82;
    cursor: pointer;
}

    .summary-detail-close:hover {
        color: #262626;
    }

.summary-detail-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--clr-green);
    padding-right: 30px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--clr-green-xlt);
    flex-shrink: 0;
}

.summary-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.summary-detail-list li {
    font-size: 12px;
    color: #333;
    padding: 5px 0;
    border-bottom: 1px solid var(--clr-green-xlt);
}

    .summary-detail-list li:last-child {
        border-bottom: none;
    }

.summary-stat-item-header {
    display: flex;
    align-items: center;
    gap: 9px;
}

.summary-stat-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    padding-left: 31px;
}

.summary-stat-chip {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 9px;
    background: #F4F4F2;
    border: 1px solid #E4E4E0;
    color: #6B6B64;
    white-space: nowrap;
}

    .summary-stat-chip strong {
        color: #262626;
        font-weight: 700;
        margin-left: 3px;
    }

    .menu-card--summary:hover {
        transform: none;
        box-shadow: 0 1px 2px rgba(20, 30, 12, 0.04), 0 4px 14px rgba(20, 30, 12, 0.05);
        border-color: #E9EAE7;
    }

    .menu-card--summary::before {
        display: none;
    }

@media (max-width: 768px) {
    .menu-card--summary {
        grid-column: auto;
        grid-row: auto;
    }
}

.menu-card--disabled {
    opacity: 0.55;
    filter: saturate(0.35);
    box-shadow: none;
}

    .menu-card--disabled:hover {
        border-color: #E9EAE7 !important;
        box-shadow: none;
    }

    .menu-card--disabled .menu-card-icon {
        background: #F4F4F4;
        border-color: #E8E8E8;
    }

    .menu-card--disabled::before {
        display: none;
    }

.coming-soon-badge {
    background: #F4F4F2;
    color: #8A8A85;
    border: 1px solid #E4E4E0;
    margin-top: 12px;
}

/* ── 5. Buttons — refined hover states (shadow only, no motion) ── */
.tb-btn {
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.18s;
}

    .tb-btn:hover:not(:disabled) {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }

.tb-btn--primary:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(58, 125, 30, 0.30);
}

.tb-btn--danger:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(192, 57, 43, 0.28);
}

.tb-btn--success:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(40, 167, 69, 0.28);
}

/* Consistent keyboard focus ring */
.tb-btn:focus-visible,
.btn-logout:focus-visible,
.login-btn:focus-visible,
.act-btn:focus-visible,
.right-tab:focus-visible,
.inv-tab:focus-visible,
.menu-card:focus-visible {
    outline: 2px solid rgba(58, 125, 30, 0.55);
    outline-offset: 2px;
}

/* ── 6. Modals — frosted backdrop, refined card (no animations) ── */
.modal-backdrop {
    background: rgba(15, 20, 12, 0.42);
    backdrop-filter: blur(4px) saturate(0.9);
    -webkit-backdrop-filter: blur(4px) saturate(0.9);
}

.modal-box {
    border-radius: 13px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04),
                0 10px 30px rgba(10, 20, 6, 0.16),
                0 30px 70px rgba(10, 20, 6, 0.22);
}

/* ── 7. Tables — calmer hover, crisper sticky header ───────────── */
.ledger-table tbody tr {
    transition: background 0.12s;
}

.ledger-table tbody tr:hover td {
    background: #F6FAF4;
}

.ledger-table thead tr {
    box-shadow: 0 1px 0 #E8E8E8, 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* ── 8. Left panel list — sliding accent on hover/active ───────── */
.client-row {
    transition: background 0.16s, box-shadow 0.2s;
}

    .client-row:hover {
        box-shadow: inset 2px 0 0 rgba(58, 125, 30, 0.35);
    }

.client-row--active {
    box-shadow: inset 3px 0 0 var(--clr-green);
}

/* ── 9. Tabs — soft hover wash ─────────────────────────────────── */
.right-tab,
.inv-tab {
    transition: color 0.16s, border-color 0.2s, background 0.16s;
}

    .right-tab:hover:not(.right-tab--active),
    .inv-tab:hover:not(.inv-tab--active):not(:disabled) {
        background: rgba(58, 125, 30, 0.05);
    }