/* /Components/Modals/FacilityReportsModal.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   FacilityReportsModal.razor.css
   Comprehensive facility reports with charts and analytics
   Design: Consistent with NPM hero — navy header, gold accents
   ════════════════════════════════════════════════════════════════ */

.modal-overlay[b-jee59uzq5z] {
    position: fixed;
    inset: 0;
    background: rgba(13, 33, 55, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: fadeIn-b-jee59uzq5z 0.2s ease;
}

.modal-container[b-jee59uzq5z] {
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(13, 33, 55, 0.35);
    display: flex;
    flex-direction: column;
    max-height: 94vh;
    animation: slideUp-b-jee59uzq5z 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.modal-reports[b-jee59uzq5z] {
    width: 100%;
    max-width: min(1480px, calc(100vw - 48px));
}

@keyframes fadeIn-b-jee59uzq5z {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-jee59uzq5z {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ── Modal Header — NPM Hero style ──────────────────────── */
.modal-header[b-jee59uzq5z] {
    position: relative;
    background: var(--navy);
    padding: 24px 28px 20px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    /* Radial gold glow — matches NPM hero::before */
    .modal-header[b-jee59uzq5z]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(200, 168, 75, 0.18) 0%, transparent 70%);
        pointer-events: none;
    }

    /* Subtle dot pattern overlay */
    .modal-header[b-jee59uzq5z]::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 36px );
        pointer-events: none;
    }

.modal-title-section[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* Icon box — matches npm-hero-icon */
.facility-icon[b-jee59uzq5z] {
    width: 52px;
    height: 52px;
    background: rgba(200, 168, 75, 0.18);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(200, 168, 75, 0.25);
}

    .facility-icon svg[b-jee59uzq5z] {
        width: 24px;
        height: 24px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.modal-title-text[b-jee59uzq5z] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Eyebrow — matches npm-hero-eyebrow */
.modal-eyebrow[b-jee59uzq5z] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.modal-title[b-jee59uzq5z] {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.modal-subtitle[b-jee59uzq5z] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.modal-close[b-jee59uzq5z] {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .modal-close:hover[b-jee59uzq5z] {
        background: rgba(139, 58, 58, 0.45);
        border-color: rgba(255, 100, 100, 0.3);
    }

    .modal-close svg[b-jee59uzq5z] {
        width: 15px;
        height: 15px;
        stroke: rgba(255, 255, 255, 0.65);
        stroke-width: 2;
        stroke-linecap: round;
    }

    .modal-close:hover svg[b-jee59uzq5z] {
        stroke: #ffaaaa;
    }

/* Gold progress bar at very bottom of header — matches npm-hero-progress */
.modal-header-progress[b-jee59uzq5z] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 1;
}

.modal-header-progress-fill[b-jee59uzq5z] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width 0.6s ease;
}


/* ── Period Selector ────────────────────────────────────────── */
.report-period-selector[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1.5px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
    gap: 12px;
}

.period-tabs[b-jee59uzq5z] {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 4px;
}

.period-tab[b-jee59uzq5z] {
    padding: 6px 18px;
    border-radius: 7px;
    border: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

    .period-tab:hover[b-jee59uzq5z] {
        color: var(--text-subtle);
        background: var(--bg-icon);
    }

    .period-tab.active[b-jee59uzq5z] {
        background: var(--navy);
        color: var(--gold);
        box-shadow: 0 2px 6px rgba(13, 33, 55, 0.18);
    }

.period-date-selector[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-nav-btn[b-jee59uzq5z] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

    .date-nav-btn:hover[b-jee59uzq5z] {
        background: var(--navy);
        border-color: var(--navy);
    }

    .date-nav-btn svg[b-jee59uzq5z] {
        width: 13px;
        height: 13px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke 0.15s;
    }

    .date-nav-btn:hover svg[b-jee59uzq5z] {
        stroke: var(--gold);
    }

.current-period[b-jee59uzq5z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    min-width: 190px;
    text-align: center;
}


/* ── Modal Body ─────────────────────────────────────────────── */
.modal-body[b-jee59uzq5z] {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px;
    background: var(--bg);
}

    .modal-body[b-jee59uzq5z]::-webkit-scrollbar {
        width: 5px;
    }

    .modal-body[b-jee59uzq5z]::-webkit-scrollbar-track {
        background: transparent;
    }

    .modal-body[b-jee59uzq5z]::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 10px;
    }


/* ── Summary Cards — unified, professional ──────────────────── */
.summary-cards[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.summary-card[b-jee59uzq5z] {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}

    /* Identical subtle top rule on all cards — no color coding */
    .summary-card[b-jee59uzq5z]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--border);
        border-radius: 12px 12px 0 0;
    }

    .summary-card:hover[b-jee59uzq5z] {
        border-color: rgba(13, 33, 55, 0.22);
        box-shadow: 0 6px 20px rgba(13, 33, 55, 0.08);
        transform: translateY(-2px);
    }

/* ── Card icon — uniform neutral style ── */
.card-icon[b-jee59uzq5z] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-icon);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .card-icon svg[b-jee59uzq5z] {
        width: 17px;
        height: 17px;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        stroke: var(--text-subtle);
    }

/* All cards share the same neutral icon style — no per-card overrides */
.card-revenue .card-icon[b-jee59uzq5z],
.card-collection .card-icon[b-jee59uzq5z],
.card-occupancy .card-icon[b-jee59uzq5z],
.card-pending .card-icon[b-jee59uzq5z] {
    background: var(--bg-icon);
    border-color: var(--border);
}

    .card-revenue .card-icon svg[b-jee59uzq5z],
    .card-collection .card-icon svg[b-jee59uzq5z],
    .card-occupancy .card-icon svg[b-jee59uzq5z],
    .card-pending .card-icon svg[b-jee59uzq5z] {
        stroke: var(--text-subtle);
    }

.card-content[b-jee59uzq5z] {
    flex: 1;
    min-width: 0;
}

.card-label[b-jee59uzq5z] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 7px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-value[b-jee59uzq5z] {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 5px 0;
    line-height: 1;
}

.card-change[b-jee59uzq5z] {
    font-size: 11px;
    font-weight: 500;
    margin: 0;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    color: var(--text-subtle);
}

    /* Keep semantic green/red on the change indicators — they carry real meaning */
    .card-change.positive[b-jee59uzq5z] {
        color: var(--green);
    }

    .card-change.negative[b-jee59uzq5z] {
        color: var(--red);
    }

    .card-change.neutral[b-jee59uzq5z] {
        color: var(--text-subtle);
    }


/* ── Charts Section ─────────────────────────────────────────── */
.charts-section[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.chart-card[b-jee59uzq5z] {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 20px 22px;
}

.chart-header[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.chart-title[b-jee59uzq5z] {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}

.chart-legend[b-jee59uzq5z] {
    display: flex;
    gap: 14px;
}

.legend-item[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-subtle);
    font-weight: 500;
}

.legend-dot[b-jee59uzq5z] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .legend-dot.revenue[b-jee59uzq5z] {
        background: var(--green);
    }

    .legend-dot.target[b-jee59uzq5z] {
        background: var(--gold);
    }

.chart-container[b-jee59uzq5z] {
    min-height: 300px;
}


/* ── Bar Chart — 3D isometric bars ────────────────────────── */
.bar-chart-wrap[b-jee59uzq5z] {
    position: relative;
    height: 300px;
    /* Extra right/top padding to let the 3D faces breathe */
    padding-right: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}

/* Horizontal gridlines */
.bar-chart-grid[b-jee59uzq5z] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    padding-bottom: 28px;
    padding-top: 10px;
}

.bar-chart-grid-line[b-jee59uzq5z] {
    width: 100%;
    height: 1px;
    background: var(--border);
    opacity: 0.6;
}

.bar-chart[b-jee59uzq5z] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    padding: 10px 14px 28px 4px; /* top + right room for 3D faces */
}

.bar-group[b-jee59uzq5z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
}

.bar-wrapper[b-jee59uzq5z] {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
}

/* ── 3D Bar — front face + right face (::before) + top face (::after) ── */
.bar[b-jee59uzq5z] {
    width: 100%;
    max-width: 44px;
    /* Front face gradient: lighter top → mid → dark base */
    background: linear-gradient(180deg, #4eb893 0%, var(--green) 45%, #1a4e3a 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    overflow: visible; /* allow 3D faces to extend outside */
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 8px;
    cursor: default;
    /* Lift shadow for depth feel */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

    /* ── Right side face ── */
    .bar[b-jee59uzq5z]::before {
        content: '';
        position: absolute;
        right: -8px;
        top: -8px;
        width: 8px;
        height: calc(100% + 8px);
        background: linear-gradient(180deg, #163d2c 0%, #0f2e20 100%);
        clip-path: polygon(0 8px, 8px 0, 8px 100%, 0 calc(100% - 8px));
        pointer-events: none;
        z-index: 0;
    }

    /* ── Top face ── */
    .bar[b-jee59uzq5z]::after {
        content: '';
        position: absolute;
        top: -8px;
        left: 0;
        /* extends 8px to the right to meet the right face */
        right: -8px;
        height: 8px;
        background: linear-gradient(135deg, #72d9ae 0%, #3a9278 100%);
        clip-path: polygon(0 100%, 8px 0, 100% 0, calc(100% - 8px) 100%);
        pointer-events: none;
        z-index: 1;
    }

    .bar:hover[b-jee59uzq5z] {
        filter: brightness(1.1);
        transform: scaleY(1.015) translateY(-1px);
        transform-origin: bottom;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    }

    /* ── Gold highlight bar (last/current period) — front + faces in gold ── */
    .bar.highlight[b-jee59uzq5z] {
        background: linear-gradient(180deg, #f0d06a 0%, var(--gold) 45%, #8a6a22 100%);
        box-shadow: 0 6px 18px rgba(200, 168, 75, 0.3);
    }

        .bar.highlight[b-jee59uzq5z]::before {
            background: linear-gradient(180deg, #6b4d14 0%, #503b0f 100%);
        }

        .bar.highlight[b-jee59uzq5z]::after {
            background: linear-gradient(135deg, #f7e080 0%, #c8a84b 100%);
        }

/* Tooltip on hover */
.bar-value[b-jee59uzq5z] {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2px 7px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(13, 33, 55, 0.1);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 10; /* above all 3D faces */
}

.bar:hover .bar-value[b-jee59uzq5z] {
    opacity: 1;
}

.bar-label[b-jee59uzq5z] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}


/* ── Donut Chart — 3D coin perspective ──────────────────────── */
.chart-donut[b-jee59uzq5z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.donut-chart[b-jee59uzq5z] {
    position: relative;
    width: 210px;
    height: 210px;
    /* Tilt like a coin lying on a table */
    transform: perspective(520px) rotateX(28deg);
    /* Deep shadow cast forward/down for 3D illusion */
    filter: drop-shadow(0 22px 18px rgba(13, 33, 55, 0.28)) drop-shadow(0 6px 6px rgba(13, 33, 55, 0.18));
    transition: transform 0.4s ease;
}

    .donut-chart:hover[b-jee59uzq5z] {
        transform: perspective(520px) rotateX(18deg) scale(1.04);
        filter: drop-shadow(0 28px 22px rgba(13, 33, 55, 0.32)) drop-shadow(0 8px 8px rgba(13, 33, 55, 0.2));
    }

.donut-svg[b-jee59uzq5z] {
    width: 100%;
    height: 100%;
    /* Inner glow on the ring */
    filter: drop-shadow(0 2px 4px rgba(13, 33, 55, 0.12));
}

    /* Animated stroke draw */
    .donut-svg circle[b-jee59uzq5z] {
        transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease;
    }

.donut-center[b-jee59uzq5z] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.donut-value[b-jee59uzq5z] {
    font-family: 'DM Sans', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.donut-label[b-jee59uzq5z] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
}

.donut-legend[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
}

    /* Each column is a centered stat cell */
    .donut-legend .legend-item[b-jee59uzq5z] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 14px 10px;
        border-right: 1px solid var(--border);
        background: transparent;
        transition: background 0.15s;
        text-align: center;
    }

        .donut-legend .legend-item:last-child[b-jee59uzq5z] {
            border-right: none;
        }

        .donut-legend .legend-item:hover[b-jee59uzq5z] {
            background: var(--bg);
        }

    /* Dot sits above the label */
    .donut-legend .legend-dot[b-jee59uzq5z] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        opacity: 0.9;
    }

.legend-name[b-jee59uzq5z] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.legend-percent[b-jee59uzq5z] {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    letter-spacing: 0.3px;
}


/* ── Breakdown Section ──────────────────────────────────── */
.breakdown-section[b-jee59uzq5z] {
    margin-top: 4px;
}

.section-title[b-jee59uzq5z] {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .section-title[b-jee59uzq5z]::before {
        content: "";
        display: block;
        width: 4px;
        height: 18px;
        background: linear-gradient(180deg, var(--gold), var(--gold-light));
        border-radius: 2px;
    }

.breakdown-grid[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.breakdown-card[b-jee59uzq5z] {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
}

.breakdown-title[b-jee59uzq5z] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 14px 0;
}

.breakdown-list[b-jee59uzq5z] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-rate-panel[b-jee59uzq5z],
.section-status-panel[b-jee59uzq5z],
.fee-breakdown-panel[b-jee59uzq5z],
.fish-trend-panel[b-jee59uzq5z] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.mini-panel-title[b-jee59uzq5z] {
    margin-bottom: 12px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.mini-metric-row[b-jee59uzq5z],
.fee-type-row[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: 82px 1fr 58px;
    gap: 10px;
    align-items: center;
    margin-bottom: 9px;
}

.mini-metric-row:last-child[b-jee59uzq5z],
.fee-type-row:last-child[b-jee59uzq5z] {
    margin-bottom: 0;
}

.mini-metric-row span[b-jee59uzq5z],
.fee-type-row span[b-jee59uzq5z] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-subtle);
}

.mini-metric-row strong[b-jee59uzq5z],
.fee-type-row strong[b-jee59uzq5z] {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    text-align: right;
}

.mini-meter[b-jee59uzq5z] {
    height: 7px;
    background: var(--bg-icon);
    border-radius: 999px;
    overflow: hidden;
}

.mini-meter-fill[b-jee59uzq5z] {
    height: 100%;
    border-radius: inherit;
    transition: width 0.5s ease;
}

.mini-meter-fill.daily[b-jee59uzq5z] {
    background: #4a9eff;
}

.mini-meter-fill.fish[b-jee59uzq5z] {
    background: var(--green);
}

.mini-meter-fill.rental[b-jee59uzq5z] {
    background: var(--gold);
}

.mini-meter-fill.utility[b-jee59uzq5z] {
    background: var(--text-muted);
}

.section-status-row[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid rgba(221, 228, 234, 0.7);
}

.section-status-row:last-child[b-jee59uzq5z] {
    border-bottom: none;
}

.section-status-row span[b-jee59uzq5z],
.section-status-row small[b-jee59uzq5z] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-subtle);
}

.section-status-row strong[b-jee59uzq5z] {
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    white-space: nowrap;
}

.section-status-row small[b-jee59uzq5z] {
    white-space: nowrap;
}

.fish-sparkline[b-jee59uzq5z] {
    height: 72px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 8px 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
}

.fish-sparkline[b-jee59uzq5z]::-webkit-scrollbar {
    height: 4px;
}

.fish-sparkline[b-jee59uzq5z]::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: 2px;
}

.fish-sparkline[b-jee59uzq5z]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.fish-sparkline[b-jee59uzq5z]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.fish-sparkline span[b-jee59uzq5z] {
    flex: 1;
    min-width: 4px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #8ce8d0 0%, var(--green) 100%);
    opacity: 0.95;
    position: relative;
    cursor: pointer;
}

.fish-sparkline span:hover[b-jee59uzq5z] {
    opacity: 1;
    transform: scaleY(1.05);
    transition: all 0.15s ease;
}

.fish-sparkline span:hover[b-jee59uzq5z] {
    opacity: 1;
    transform: scaleY(1.05);
    transition: all 0.15s ease;
}

.fish-sparkline span:nth-child(30n)[b-jee59uzq5z] {
    border-right: 1px solid var(--border);
    margin-right: 2px;
}

.fish-trend-meta[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.fish-trend-meta span[b-jee59uzq5z],
.fish-trend-meta strong[b-jee59uzq5z] {
    font-size: 11.5px;
    color: var(--text-subtle);
    font-weight: 600;
}

.fish-trend-meta strong[b-jee59uzq5z] {
    color: var(--navy);
    text-align: center;
    white-space: nowrap;
}

.fish-trend-meta span:last-child[b-jee59uzq5z] {
    text-align: right;
}

.breakdown-item[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

    .breakdown-item.compact[b-jee59uzq5z] {
        grid-template-columns: 1fr auto;
    }

.breakdown-label[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--navy);
    font-weight: 500;
}

.section-dot[b-jee59uzq5z] {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.breakdown-value[b-jee59uzq5z] {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    text-align: right;
}

.breakdown-bar[b-jee59uzq5z] {
    grid-column: 1 / -1;
    height: 5px;
    background: var(--bg-icon);
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill[b-jee59uzq5z] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .bar-fill.paid[b-jee59uzq5z] {
        background: linear-gradient(90deg, var(--green), #3a9278);
    }

    .bar-fill.partial[b-jee59uzq5z] {
        background: linear-gradient(90deg, var(--gold), var(--gold-light));
    }

    .bar-fill.unpaid[b-jee59uzq5z] {
        background: linear-gradient(90deg, var(--red), #b05050);
    }

.status-badge[b-jee59uzq5z] {
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

    .status-badge.paid[b-jee59uzq5z] {
        background: var(--green-bg);
        color: var(--green);
    }

    .status-badge.partial[b-jee59uzq5z] {
        background: rgba(200, 168, 75, 0.14);
        color: #7a5c10;
    }

    .status-badge.unpaid[b-jee59uzq5z] {
        background: var(--red-bg);
        color: var(--red);
    }

.stall-badge[b-jee59uzq5z] {
    padding: 3px 8px;
    background: var(--navy);
    color: var(--gold);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
}

.stall-name[b-jee59uzq5z] {
    font-size: 12.5px;
    color: var(--text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-streak-card[b-jee59uzq5z],
.exposure-card[b-jee59uzq5z] {
    min-height: 224px;
}

.streak-card-header[b-jee59uzq5z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.streak-subtitle[b-jee59uzq5z] {
    margin: -8px 0 0;
    font-size: 12px;
    color: var(--text-subtle);
    font-weight: 600;
}

.streak-score[b-jee59uzq5z] {
    min-width: 78px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    text-align: center;
}

.streak-score span[b-jee59uzq5z] {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--navy);
}

.streak-score small[b-jee59uzq5z] {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.streak-calendar[b-jee59uzq5z] {
    width: 100%;
}

.streak-weekdays[b-jee59uzq5z],
.streak-grid[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.streak-weekdays[b-jee59uzq5z] {
    margin-bottom: 6px;
}

.streak-weekdays span[b-jee59uzq5z] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}

.streak-day[b-jee59uzq5z] {
    aspect-ratio: 1;
    min-height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid transparent;
}

.streak-day.collected[b-jee59uzq5z] {
    background: rgba(45, 122, 95, 0.82);
    color: #fff;
}

.streak-day.missed[b-jee59uzq5z] {
    background: rgba(139, 58, 58, 0.9);
    color: #fff;
}

.streak-day.future[b-jee59uzq5z] {
    background: var(--bg-icon);
    color: var(--text-muted);
    border-color: var(--border);
}

.streak-day.out-of-scope[b-jee59uzq5z] {
    background: #fff;
    color: var(--text-muted);
    border-color: var(--border);
}

.streak-day.empty[b-jee59uzq5z] {
    background: transparent;
    border-color: transparent;
}

.streak-legend[b-jee59uzq5z] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.streak-legend span[b-jee59uzq5z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-subtle);
    font-weight: 600;
}

.legend-swatch[b-jee59uzq5z] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.legend-swatch.collected[b-jee59uzq5z] {
    background: var(--green);
}

.legend-swatch.missed[b-jee59uzq5z] {
    background: var(--red);
}

.legend-swatch.future[b-jee59uzq5z] {
    background: var(--bg-icon);
    border: 1px solid var(--border);
}

.legend-swatch.out-of-scope[b-jee59uzq5z] {
    background: #fff;
    border: 1px solid var(--border);
}

.exposure-stat[b-jee59uzq5z] {
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--border);
}

.exposure-value[b-jee59uzq5z] {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: var(--navy);
}

.exposure-label[b-jee59uzq5z] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-subtle);
}

.exposure-grid[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.exposure-grid div[b-jee59uzq5z] {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

.exposure-grid span[b-jee59uzq5z],
.exposure-grid small[b-jee59uzq5z] {
    display: block;
}

.exposure-grid span[b-jee59uzq5z] {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
}

.exposure-grid small[b-jee59uzq5z] {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

/* Rank number for top stalls */
.stall-rank[b-jee59uzq5z] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ── Modal Footer ───────────────────────────────────────── */
.modal-footer[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1.5px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

.btn[b-jee59uzq5z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1.5px solid;
}

    .btn svg[b-jee59uzq5z] {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.btn-outline[b-jee59uzq5z] {
    background: var(--bg-card);
    color: var(--text-subtle);
    border-color: var(--border);
}

    .btn-outline:hover[b-jee59uzq5z] {
        background: var(--bg);
        color: var(--navy);
        border-color: var(--text-muted);
    }

.btn-primary[b-jee59uzq5z] {
    background: var(--navy);
    color: var(--gold-light);
    border-color: var(--navy);
}

    .btn-primary:hover[b-jee59uzq5z] {
        background: var(--navy-3);
        border-color: var(--navy-3);
        box-shadow: 0 4px 12px rgba(13, 33, 55, 0.2);
    }


/* ── Responsive ─────────────────────────────────────────── */
.context-report-section[b-jee59uzq5z] {
    margin-bottom: 20px;
}

.context-section-title[b-jee59uzq5z] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.context-card-grid[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* ── Updated TPM Context Cards — Match NPM Light Theme ── */
.context-card[b-jee59uzq5z] {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    padding: 20px 22px;
    min-height: 240px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
}

    .context-card:hover[b-jee59uzq5z] {
        border-color: rgba(13, 33, 55, 0.22);
        box-shadow: 0 6px 20px rgba(13, 33, 55, 0.08);
    }

.context-card-header[b-jee59uzq5z] {
    margin-bottom: 12px;
}

.context-pill[b-jee59uzq5z] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(200, 168, 75, 0.14);
    color: #7a5c10;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.context-pill.slh[b-jee59uzq5z] {
    background: rgba(139, 58, 58, 0.12);
    color: #8b3a20;
}

.context-card h3[b-jee59uzq5z] {
    margin: 0 0 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--navy);
}

.context-card p[b-jee59uzq5z] {
    margin: 0 0 16px;
    max-width: 620px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.context-sparkline[b-jee59uzq5z] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    height: 68px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: auto;
    flex: 1;
}

.context-sparkline span[b-jee59uzq5z] {
    width: 10px;
    min-height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    transition: all 0.3s ease;
    cursor: pointer;
}

    .context-sparkline span:hover[b-jee59uzq5z] {
        background: var(--gold);
        transform: scaleY(1.08);
        filter: brightness(1.1);
    }

.context-card-meta[b-jee59uzq5z],
.context-legend[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.context-card-meta strong[b-jee59uzq5z] {
    color: var(--navy);
    font-weight: 700;
}

.context-bar-label[b-jee59uzq5z] {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.context-stacked-bar[b-jee59uzq5z] {
    display: flex;
    height: 20px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    margin-top: auto;
}

.context-stacked-bar .returning[b-jee59uzq5z] {
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.context-stacked-bar .new[b-jee59uzq5z] {
    background: linear-gradient(90deg, #ffd180, #ffe4a8);
}

.context-legend[b-jee59uzq5z] {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
}

.context-legend i[b-jee59uzq5z] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: -1px;
}

.context-legend i.returning[b-jee59uzq5z],
.context-legend i.hog[b-jee59uzq5z] {
    background: var(--gold);
}

.context-legend i.new[b-jee59uzq5z] {
    background: #ffd180;
}

.context-legend i.large-animal[b-jee59uzq5z] {
    background: #e76f3c;
}

.volume-bars[b-jee59uzq5z] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 78px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: auto;
    justify-content: center;
}

.volume-bar-group[b-jee59uzq5z] {
    width: 18px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.volume-bar-fill[b-jee59uzq5z] {
    width: 100%;
    min-height: 8px;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .volume-bar-fill:hover[b-jee59uzq5z] {
        filter: brightness(1.15);
        transform: scaleY(1.05);
    }

.volume-bar-fill.hog[b-jee59uzq5z] {
    background: linear-gradient(180deg, #ff9b7c, #e76f3c);
}

.volume-bar-fill.large-animal[b-jee59uzq5z] {
    background: linear-gradient(180deg, #e76f3c, #c85a2e);
}

.fee-component-list[b-jee59uzq5z] {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.fee-component-row[b-jee59uzq5z] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.fee-component-row strong[b-jee59uzq5z] {
    color: var(--navy);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.fee-component-meter[b-jee59uzq5z] {
    grid-column: 1 / -1;
    height: 5px;
    background: var(--bg-icon);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.fee-component-meter i[b-jee59uzq5z] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #e76f3c, #ff9b7c);
    border-radius: inherit;
    transition: width 0.5s ease;
}

@media (max-width: 1100px) {
    .summary-cards[b-jee59uzq5z] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-section[b-jee59uzq5z] {
        grid-template-columns: 1fr;
    }

    .breakdown-grid[b-jee59uzq5z] {
        grid-template-columns: 1fr;
    }

    .context-card-grid[b-jee59uzq5z] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .modal-reports[b-jee59uzq5z] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .summary-cards[b-jee59uzq5z] {
        grid-template-columns: 1fr 1fr;
    }

    .report-period-selector[b-jee59uzq5z] {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .period-date-selector[b-jee59uzq5z] {
        justify-content: center;
    }

    .modal-footer[b-jee59uzq5z] {
        flex-wrap: wrap;
    }

        .modal-footer .btn[b-jee59uzq5z] {
            flex: 1;
            min-width: 110px;
        }

    .modal-header[b-jee59uzq5z] {
        padding: 18px 20px 16px;
    }
}

@media (max-width: 480px) {
    .summary-cards[b-jee59uzq5z] {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════
   Loading and Error States
   ════════════════════════════════════════════════════════════════ */

.loading-state[b-jee59uzq5z],
.error-state[b-jee59uzq5z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 400px;
}

.loading-state p[b-jee59uzq5z],
.error-state p[b-jee59uzq5z] {
    margin-top: 16px;
    color: var(--text-secondary);
    font-size: 15px;
}

.spinner[b-jee59uzq5z] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-light);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: spin-b-jee59uzq5z 0.8s linear infinite;
}

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

.error-state .error-icon[b-jee59uzq5z] {
    width: 64px;
    height: 64px;
    stroke: var(--status-error);
    stroke-width: 2;
    fill: none;
    margin-bottom: 8px;
}

.error-state .btn[b-jee59uzq5z] {
    margin-top: 20px;
}


/* ════════════════════════════════════════════════════════════════
   SKELETON LOADING  — shimmer placeholders matching real layout
   ════════════════════════════════════════════════════════════════ */

/* ── Shimmer keyframe ── */
@keyframes skel-shimmer-b-jee59uzq5z {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* ── Base skeleton element ── */
.skel[b-jee59uzq5z] {
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--border)         0%,
        rgba(13, 33, 55, 0.06) 40%,
        var(--border)         80%
    );
    background-size: 600px 100%;
    animation: skel-shimmer-b-jee59uzq5z 1.5s ease-in-out infinite;
}

/* ── KPI Cards ── */
.skel-card[b-jee59uzq5z] {
    pointer-events: none;
    cursor: default;
}

.skel-card:hover[b-jee59uzq5z] {
    transform: none;
    box-shadow: none;
}

.skel-icon[b-jee59uzq5z] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.skel-card-body[b-jee59uzq5z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skel-label[b-jee59uzq5z] {
    height: 9px;
    width: 60%;
    border-radius: 4px;
}

.skel-value[b-jee59uzq5z] {
    height: 26px;
    width: 75%;
    border-radius: 5px;
}

.skel-change[b-jee59uzq5z] {
    height: 9px;
    width: 85%;
    border-radius: 4px;
    margin-top: 4px;
}

/* ── Chart card header ── */
.skel-chart-header[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.skel-chart-title[b-jee59uzq5z] {
    height: 18px;
    width: 38%;
    border-radius: 5px;
}

.skel-chart-legend[b-jee59uzq5z] {
    height: 14px;
    width: 25%;
    border-radius: 4px;
}

/* ── Bar chart skeleton ── */
.skel-bar-chart-wrap[b-jee59uzq5z] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 10px;
    height: 260px;
    padding-bottom: 28px;
}

.skel-bar-group[b-jee59uzq5z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    justify-content: flex-end;
}

.skel-bar[b-jee59uzq5z] {
    width: 100%;
    max-width: 44px;
    border-radius: 4px 4px 0 0;
    /* height is set inline per bar */
    animation: skel-shimmer-b-jee59uzq5z 1.5s ease-in-out infinite;
    animation-delay: calc(var(--b, 0) * 0.12s);
}

.skel-bar-group:nth-child(1) .skel-bar[b-jee59uzq5z] { animation-delay: 0s; }
.skel-bar-group:nth-child(2) .skel-bar[b-jee59uzq5z] { animation-delay: 0.10s; }
.skel-bar-group:nth-child(3) .skel-bar[b-jee59uzq5z] { animation-delay: 0.20s; }
.skel-bar-group:nth-child(4) .skel-bar[b-jee59uzq5z] { animation-delay: 0.30s; }
.skel-bar-group:nth-child(5) .skel-bar[b-jee59uzq5z] { animation-delay: 0.40s; }
.skel-bar-group:nth-child(6) .skel-bar[b-jee59uzq5z] { animation-delay: 0.50s; }

.skel-bar-label[b-jee59uzq5z] {
    height: 10px;
    width: 70%;
    border-radius: 4px;
}

/* ── Donut skeleton ── */
.skel-donut-wrap[b-jee59uzq5z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.skel-donut[b-jee59uzq5z] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    /* Ring illusion: transparent center via box-shadow */
    background: transparent;
    box-shadow: 0 0 0 22px var(--border);
    animation: skel-shimmer-b-jee59uzq5z 1.5s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        var(--border)          0%,
        rgba(13,33,55,0.06)   40%,
        var(--border)          80%
    );
    background-size: 600px 100%;
}

.skel-donut-legend-rows[b-jee59uzq5z] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.skel-legend-row[b-jee59uzq5z] {
    height: 12px;
    border-radius: 4px;
}

.skel-legend-row:nth-child(1)[b-jee59uzq5z] { width: 80%; animation-delay: 0s; }
.skel-legend-row:nth-child(2)[b-jee59uzq5z] { width: 65%; animation-delay: 0.15s; }
.skel-legend-row:nth-child(3)[b-jee59uzq5z] { width: 72%; animation-delay: 0.30s; }

/* ── Breakdown section skeleton ── */
.skel-section-title[b-jee59uzq5z] {
    height: 20px;
    width: 28%;
    margin-bottom: 16px;
    border-radius: 5px;
}

.skel-breakdown-title[b-jee59uzq5z] {
    height: 15px;
    width: 50%;
    border-radius: 4px;
    margin-bottom: 18px;
}

.skel-breakdown-row[b-jee59uzq5z] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.skel-breakdown-badge[b-jee59uzq5z] {
    height: 22px;
    width: 60px;
    border-radius: 6px;
    flex-shrink: 0;
}

.skel-breakdown-bar[b-jee59uzq5z] {
    flex: 1;
    height: 10px;
    border-radius: 5px;
}

.skel-breakdown-row:nth-child(2) .skel-breakdown-bar[b-jee59uzq5z] { width: 65%; animation-delay: 0.10s; }
.skel-breakdown-row:nth-child(3) .skel-breakdown-bar[b-jee59uzq5z] { width: 45%; animation-delay: 0.20s; }
.skel-breakdown-row:nth-child(4) .skel-breakdown-bar[b-jee59uzq5z] { width: 30%; animation-delay: 0.30s; }


.empty-report-note[b-jee59uzq5z] {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 8px;
    background: var(--bg-icon);
    color: var(--text-subtle);
    font-size: 0.85rem;
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity header, civic-blue interaction, and FLAT charts: V3 forbids decorative gradients and 3-D
   effects, so bar faces are removed and fills are single colours. Status colours keep their meaning
   (paid green, partial amber, unpaid red); plain collection figures use civic blue, the highlighted
   period navy. Serif headings now use DM Sans; labels were raised to 11px.
   ══════════════════════════════════════════════════════════════ */
.modal-overlay[b-jee59uzq5z] {
    --text-muted: var(--text-tertiary);
}

/* ── Header ── */
.modal-header[b-jee59uzq5z] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

    .modal-header[b-jee59uzq5z]::before,
    .modal-header[b-jee59uzq5z]::after {
        display: none;
    }

.facility-icon[b-jee59uzq5z] {
    border-color: transparent;
    border-radius: 10px;
    background: var(--accent-soft);
}

    .facility-icon svg[b-jee59uzq5z] {
        stroke: var(--navy);
    }

.modal-eyebrow[b-jee59uzq5z] {
    color: var(--text-tertiary);
}

.modal-title[b-jee59uzq5z] {
    color: var(--navy);
}

.modal-subtitle[b-jee59uzq5z] {
    color: var(--text-tertiary);
}

.modal-close[b-jee59uzq5z] {
    border-color: transparent;
    background: transparent;
}

    .modal-close:hover[b-jee59uzq5z] {
        border-color: transparent;
        background: var(--surface-hover);
    }

    .modal-close svg[b-jee59uzq5z],
    .modal-close:hover svg[b-jee59uzq5z] {
        stroke: var(--text-secondary);
    }

    .modal-close:focus-visible[b-jee59uzq5z] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.modal-header-progress[b-jee59uzq5z] {
    height: 3px;
    background: var(--surface-muted);
}

.modal-header-progress-fill[b-jee59uzq5z] {
    background: var(--accent);
}

/* ── Period selector, navigation, buttons ── */
.report-period-selector[b-jee59uzq5z] {
    background: var(--surface-muted);
    border-bottom-width: 1px;
}

.period-tab.active[b-jee59uzq5z] {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.date-nav-btn:hover[b-jee59uzq5z] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

    .date-nav-btn:hover svg[b-jee59uzq5z] {
        stroke: var(--accent);
    }

.btn-primary[b-jee59uzq5z] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

    .btn-primary:hover[b-jee59uzq5z] {
        border-color: var(--accent-hover);
        background: var(--accent-hover);
    }

.stall-badge[b-jee59uzq5z] {
    background: var(--surface-muted);
    color: var(--navy);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.section-title[b-jee59uzq5z]::before {
    background: var(--gold);
}

/* ── Flat charts ── */
.bar[b-jee59uzq5z] {
    background: var(--accent);
    box-shadow: none;
}

    .bar[b-jee59uzq5z]::before,
    .bar[b-jee59uzq5z]::after {
        display: none;
    }

    .bar.highlight[b-jee59uzq5z] {
        background: var(--navy);
    }

.fish-sparkline span[b-jee59uzq5z],
.context-sparkline span[b-jee59uzq5z] {
    background: var(--accent);
}

.bar-fill.paid[b-jee59uzq5z] {
    background: var(--green);
}

.bar-fill.partial[b-jee59uzq5z] {
    background: #c8942c;
}

.bar-fill.unpaid[b-jee59uzq5z] {
    background: var(--red);
}

.context-stacked-bar .returning[b-jee59uzq5z] {
    background: var(--navy);
}

.context-stacked-bar .new[b-jee59uzq5z] {
    background: var(--accent);
}

.volume-bar-fill.hog[b-jee59uzq5z] {
    background: var(--accent);
}

.volume-bar-fill.large-animal[b-jee59uzq5z] {
    background: var(--navy);
}

.fee-component-meter i[b-jee59uzq5z] {
    background: var(--accent);
}

.period-tab:focus-visible[b-jee59uzq5z],
.date-nav-btn:focus-visible[b-jee59uzq5z],
.btn-primary:focus-visible[b-jee59uzq5z] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Modals/PaymentConfirmationModal.razor.rz.scp.css */
/* Payment Confirmation Modal Styles */

.payment-confirm-modal[b-834z9jrft8] {
    max-width: 520px;
}

.confirm-section[b-834z9jrft8] {
    margin-bottom: 20px;
}

.confirm-label[b-834z9jrft8] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.confirm-info-grid[b-834z9jrft8] {
    display: grid;
    gap: 10px;
}

.confirm-info-item[b-834z9jrft8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.confirm-info-key[b-834z9jrft8] {
    font-size: 12px;
    color: var(--text-muted);
}

.confirm-info-val[b-834z9jrft8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.confirm-payment-card[b-834z9jrft8] {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}

.confirm-payment-card.status-paid[b-834z9jrft8] {
    border-color: var(--green);
    background: var(--green-bg);
}

.confirm-payment-card.status-partial[b-834z9jrft8] {
    border-color: var(--gold);
    background: #fffbeb;
}

.confirm-payment-card.status-unpaid[b-834z9jrft8] {
    border-color: var(--red);
    background: var(--red-bg);
}

.confirm-payment-row[b-834z9jrft8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.confirm-payment-row:last-child[b-834z9jrft8] {
    border-bottom: none;
}

.confirm-payment-row.highlight[b-834z9jrft8] {
    background: rgba(200, 168, 75, 0.1);
    margin: 0 -16px;
    padding: 8px 16px;
}

.confirm-payment-label[b-834z9jrft8] {
    font-size: 12px;
    color: var(--text-muted);
}

.confirm-payment-value[b-834z9jrft8] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.confirm-payment-value.mono[b-834z9jrft8] {
    font-family: monospace;
    font-size: 13px;
}

.confirm-payment-value.text-red[b-834z9jrft8] {
    color: var(--red);
}

.confirm-payment-status[b-834z9jrft8] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.confirm-payment-status.status-paid[b-834z9jrft8] {
    background: var(--green);
    color: white;
}

.confirm-payment-status.status-partial[b-834z9jrft8] {
    background: var(--gold);
    color: white;
}

.confirm-payment-status.status-unpaid[b-834z9jrft8] {
    background: var(--red);
    color: white;
}

.confirm-warning[b-834z9jrft8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--red-bg);
    border: 1px solid var(--red);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--red);
    margin-top: 16px;
}

.confirm-warning svg[b-834z9jrft8] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: 2px;
}

.btn-success[b-834z9jrft8] {
    background: var(--green);
    color: white;
}

.btn-success:hover[b-834z9jrft8] {
    background: #236b4f;
}

.btn-warning[b-834z9jrft8] {
    background: var(--gold);
    color: white;
}

.btn-warning:hover[b-834z9jrft8] {
    background: #b89840;
}

.confirm-or-input[b-834z9jrft8] {
    width: 100%;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--navy);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
    box-sizing: border-box;
}

    .confirm-or-input:focus[b-834z9jrft8] {
        border-color: var(--navy-2);
    }

    .confirm-or-input[b-834z9jrft8]::placeholder {
        color: var(--text-muted);
    }


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.eemo-modal-overlay[b-834z9jrft8] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}
/* /Components/Modals/UtilityBillModal.razor.rz.scp.css */
.ub-overlay[b-ph69a8tan5] {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(13, 33, 55, 0.5);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ub-modal[b-ph69a8tan5] {
    background: var(--bg-card, #fff); border-radius: 16px; width: 100%; max-width: 520px;
    /* Taller before it will scroll, since the locked sentence is gone and the two meters now sit side by side. The
       overflow stays as a safety valve rather than being removed: on a short window the Save button has to remain
       reachable, and clipping it would be a worse fault than a scrollbar. */
    max-height: 94vh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(13, 33, 55, 0.28);
}
.ub-modal *[b-ph69a8tan5], .ub-modal *[b-ph69a8tan5]::before, .ub-modal *[b-ph69a8tan5]::after { box-sizing: border-box; }
.ub-head[b-ph69a8tan5] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid var(--border, #dde4ea);
}
.ub-title[b-ph69a8tan5] { font-size: 16px; font-weight: 800; color: var(--navy, #0d2137); }
.ub-sub[b-ph69a8tan5] { font-size: 12.5px; color: var(--text-muted, #6a8aa0); margin-top: 3px; }
.ub-x[b-ph69a8tan5] { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--text-muted, #6a8aa0); cursor: pointer; }

.ub-body[b-ph69a8tan5] { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

/* ── Both utilities: side by side ──────────────────────────────────────────────────────────────────────
   Both panels are always shown now, so the dialog is the same shape for every stall and the two columns balance.
   A utility the stall is not billed for is dimmed and carries no controls: its fields render on the read-only
   path, its status chips are locked and its "Update status" button is withheld, so there is nothing to reach by
   mouse or by keyboard. Dimming alone would not have been enough — the save sends the readings the server seeded
   whether or not they were touched, so a tab-key edit would have been a real one. */
.ub-modal-two[b-ph69a8tan5] { max-width: 940px; }

.ub-meter-off[b-ph69a8tan5] {
    opacity: .55;
    pointer-events: none;
}

.ub-not-billed[b-ph69a8tan5] {
    font-size: 11.5px;
    color: var(--text-muted, #6a8aa0);
}

@media (min-width: 900px) {
    .ub-modal-two .ub-body[b-ph69a8tan5] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }

    /* Anything that is not a meter states something about the bill as a whole. */
    .ub-modal-two .ub-body > :not(.ub-meter)[b-ph69a8tan5] {
        grid-column: 1 / -1;
    }
}

/* ── One meter, stated as a section of the bill ──
   Its own name and unit on the left, the period it bills on the right, then the three readings, then what they
   come to. The office reads a usage figure and an amount due; the multiplication that produced them is not
   spelled out on an official form. */
.ub-meter[b-ph69a8tan5] {
    display: flex; flex-direction: column; gap: 12px;
    border: 1px solid var(--border, #dde4ea); border-radius: 12px; padding: 14px 16px;
    background: var(--bg-card, #fff);
}
.ub-meter-head[b-ph69a8tan5] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding-bottom: 12px; border-bottom: 1px solid var(--border, #dde4ea);
}
.ub-meter-id[b-ph69a8tan5] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ub-meter-badge[b-ph69a8tan5] {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-icon, #eef2f6); color: var(--navy, #0d2137);
}
.ub-meter-name[b-ph69a8tan5] { font-size: 15px; font-weight: 700; color: var(--navy, #0d2137); }
.ub-meter-unit[b-ph69a8tan5] {
    padding-left: 10px; border-left: 1px solid var(--border, #dde4ea);
    font-size: 12px; font-weight: 600; color: var(--text-subtle, #6a8aa0);
}
.ub-meter-period[b-ph69a8tan5] {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-subtle, #6a8aa0); white-space: nowrap;
}
.ub-meter-period strong[b-ph69a8tan5] { color: var(--navy, #0d2137); font-weight: 700; }

.ub-grid3[b-ph69a8tan5] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ub-grid3 label[b-ph69a8tan5], .ub-amount[b-ph69a8tan5] {
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
    font-size: 12px; font-weight: 700; color: var(--navy, #0d2137);
}
/* The unit belongs with the figure, inside the box, so a reading is never read as a bare number. Both kinds of
   box reserve the same right edge, so the units line up whether the figure is typed or stated. */
.ub-field[b-ph69a8tan5] { display: flex; align-items: center; gap: 6px; min-width: 0;
    border: 1px solid var(--border, #dde4ea); border-radius: 9px; padding: 9px 16px 9px 10px; background: #fff; }
.ub-field:focus-within[b-ph69a8tan5] { border-color: var(--navy-3, #1e3a5f); }
.ub-field input[b-ph69a8tan5] {
    width: 100%; min-width: 0; box-sizing: border-box; border: none; outline: none; padding: 0; background: none;
    font: inherit; font-size: 15px; font-weight: 700; color: var(--navy, #0d2137);
    font-variant-numeric: tabular-nums;
}
/* The hint is an instruction, not a figure, so it is set smaller — "Meter now" then fits the box beside its unit
   instead of running under it. */
.ub-field input[b-ph69a8tan5]::placeholder { font-size: 11.5px; font-weight: 600; color: var(--text-muted, #8faabf); }
.ub-amount input[b-ph69a8tan5] {
    width: 100%; min-width: 0; box-sizing: border-box;
    border: 1px solid var(--border, #dde4ea); border-radius: 9px; padding: 9px 10px;
    font-size: 14px; font-weight: 700; color: var(--navy, #0d2137); background: #fff;
}
.ub-amount input:focus[b-ph69a8tan5] { outline: none; border-color: var(--navy-3, #1e3a5f); }
.ub-unit[b-ph69a8tan5] { flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--text-subtle, #6a8aa0); }

/* ── A figure that is a record, not an entry ──
   The previous reading is carried forward from the last bill, so it is shown as the figure it is — same box,
   same size, and the unit at the same place as in the boxes beside it, because the lock or pencil is laid over
   the right edge rather than pushing the unit along. The pencil appears on hover or keyboard focus; a settled
   utility shows a lock and does not open. */
.ub-locked[b-ph69a8tan5] {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-width: 0; box-sizing: border-box;
    border: 1px solid var(--border, #dde4ea); border-radius: 9px; padding: 9px 16px 9px 10px;
    font: inherit; font-size: 15px; font-weight: 700; color: var(--navy, #0d2137);
    background: var(--bg-page, #f0f4f8); cursor: pointer; text-align: left;
}
.ub-locked:hover[b-ph69a8tan5], .ub-locked:focus-visible[b-ph69a8tan5] { border-color: var(--navy-3, #1e3a5f); outline: none; }
.ub-locked-value[b-ph69a8tan5] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ub-locked-mark[b-ph69a8tan5] {
    position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
    display: flex; align-items: center;
    color: var(--text-muted, #8faabf);
}
.ub-locked-mark .ub-ico[b-ph69a8tan5] { width: 11px; height: 11px; }
.ub-locked-mark[b-ph69a8tan5] { flex-shrink: 0; }
/* Revealed by intent: hover, or keyboard focus for anyone not using a pointer. */
.ub-locked-edit[b-ph69a8tan5] { opacity: 0; transition: opacity .12s ease; }
.ub-locked:hover .ub-locked-edit[b-ph69a8tan5], .ub-locked:focus-visible .ub-locked-edit[b-ph69a8tan5] { opacity: 1; }
.ub-locked-fixed[b-ph69a8tan5] { cursor: not-allowed; }

/* ── Locked payment status ──
   A saved status is a receipted fact. The chip holding it carries a small lock, the row stays legible but
   visibly out of reach, and the way to change it appears on hover — and on keyboard focus, or when a locked
   chip is pressed — rather than standing on the form as an instruction. */
.ub-ico[b-ph69a8tan5] {
    width: 12px; height: 12px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

.ub-status-wrap[b-ph69a8tan5] { display: flex; flex-direction: column; gap: 6px; }
.ub-status-wrap.locked .ub-status[b-ph69a8tan5] { cursor: default; color: var(--text-subtle, #6a8aa0); }
.ub-status-wrap.locked .ub-status.on[b-ph69a8tan5] {
    color: var(--navy, #0d2137);
    box-shadow: none;
    border-color: var(--border, #dde4ea);
    background: #fff;
}
.ub-status .ub-ico[b-ph69a8tan5] { color: var(--text-muted, #8faabf); }

.ub-status-unlock[b-ph69a8tan5] {
    position: absolute; right: 0; bottom: 100%; margin-bottom: 6px; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 11.5px; font-weight: 700;
    color: var(--navy, #0d2137); background: #fff;
    border: 1px solid var(--border, #dde4ea); border-radius: 8px; padding: 5px 9px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, border-color .12s ease;
}
.ub-meter:hover .ub-status-unlock[b-ph69a8tan5],
.ub-meter.asked .ub-status-unlock[b-ph69a8tan5],
.ub-status-unlock:focus-visible[b-ph69a8tan5] { opacity: 1; }
.ub-status-unlock:hover[b-ph69a8tan5] { border-color: var(--navy-3, #1e3a5f); }
/* Why a settled utility's readings cannot be touched. A statement of record, not a validation failure, so it
   is not dressed as an error — and it sits on one line with its lock. */
.ub-lock-note[b-ph69a8tan5] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 11.5px;
    color: var(--text-subtle, #6a8aa0);
}
/* A locked figure that offers nothing: same box, no pointer, no hover. */
span.ub-locked[b-ph69a8tan5] { cursor: default; }
/* ── What the readings come to ──
   Usage and amount due, side by side, with the amount ruled under as the figure that will be charged. */
.ub-usage[b-ph69a8tan5] {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-page, #f0f4f8); border-radius: 10px; padding: 12px 16px;
}
.ub-usage-badge[b-ph69a8tan5] {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-icon, #eef2f6); color: var(--navy, #0d2137);
}
.ub-usage-cell[b-ph69a8tan5] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ub-usage-sep[b-ph69a8tan5] { width: 1px; align-self: stretch; background: var(--border, #dde4ea); }
.ub-usage-label[b-ph69a8tan5] { font-size: 11.5px; color: var(--text-subtle, #6a8aa0); display: flex; align-items: baseline; gap: 6px; }
.ub-usage-of[b-ph69a8tan5] { font-size: 10.5px; color: var(--text-muted, #8faabf); }
/* The unit sits at the right edge of its cell, exactly as it does in the reading boxes above, so the figures
   line up down the form and the eye reads value-then-unit in one place. */
.ub-usage-value[b-ph69a8tan5], .ub-usage-amount[b-ph69a8tan5] {
    font-size: 18px; font-weight: 700; color: var(--navy, #0d2137);
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    width: 100%; font-variant-numeric: tabular-nums;
}
.ub-usage-amount[b-ph69a8tan5] { padding-bottom: 1px; }

/* The record's own statement sits left. The way to change it overlays the row's top-right rather than taking a
   row of its own, so a section with nothing to state carries no empty band. */
.ub-meter-foot[b-ph69a8tan5] {
    position: relative; display: flex; align-items: center; gap: 12px;
    font-size: 11.5px; color: var(--text-subtle, #6a8aa0);
}
.ub-lock-badge[b-ph69a8tan5] {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-icon, #eef2f6); color: var(--text-subtle, #6a8aa0);
}
.ub-ico-lg[b-ph69a8tan5] {
    width: 17px; height: 17px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.ub-calc[b-ph69a8tan5] { font-size: 12px; color: var(--text-subtle, #6a8aa0); }
.ub-calc strong[b-ph69a8tan5] { color: var(--navy, #0d2137); }

/* The total is the document's own summing line: a rule above it, the figure stated in the page's ink. A navy
   slab with a gold number belonged on a dashboard, not on an official charge sheet. */
.ub-total[b-ph69a8tan5] {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-card, #fff); color: var(--navy, #0d2137);
    border: 1px solid var(--border, #dde4ea); border-radius: 10px; padding: 12px 16px;
    font-size: 13px; font-weight: 700;
}
.ub-total strong[b-ph69a8tan5] { font-size: 20px; color: var(--navy, #0d2137); font-variant-numeric: tabular-nums; }
/* What is left to collect, stated under the charge rather than replacing it — the office reconciles both. */
.ub-total-due[b-ph69a8tan5] {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: -6px; padding: 0 16px;
    font-size: 12px; color: var(--text-subtle, #6a8aa0);
}
.ub-total-due strong[b-ph69a8tan5] { font-size: 14px; color: var(--navy, #0d2137); font-variant-numeric: tabular-nums; }

.ub-status-row[b-ph69a8tan5] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ub-status[b-ph69a8tan5] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1.5px solid var(--border, #dde4ea); background: var(--bg-page, #f0f4f8);
    border-radius: 10px; padding: 10px 8px; font-size: 12px; font-weight: 800;
    color: var(--navy, #0d2137); cursor: pointer;
}
.ub-status.on[b-ph69a8tan5] { border-color: var(--navy, #0d2137); background: #fff; box-shadow: 0 4px 12px rgba(13, 33, 55, 0.12); }

.ub-error[b-ph69a8tan5] {
    color: var(--red, #8b3a3a); background: var(--red-bg, #fdf0f0);
    border: 1px solid rgba(139, 58, 58, 0.24); border-radius: 10px; padding: 9px 12px; font-size: 12px;
}

.ub-confirm[b-ph69a8tan5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--navy, #0d2137);
    background: rgba(211, 177, 75, 0.12);
    border: 1px solid rgba(211, 177, 75, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
}

.ub-confirm strong[b-ph69a8tan5] {
    font-size: 12.5px;
    font-weight: 900;
}

.ub-confirm span[b-ph69a8tan5] {
    color: var(--text-muted, #6a8aa0);
}

.ub-foot[b-ph69a8tan5] { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border, #dde4ea); }
.ub-cancel[b-ph69a8tan5], .ub-save[b-ph69a8tan5] { flex: 1; min-height: 46px; border-radius: 12px; font-size: 14px; font-weight: 800; cursor: pointer; }
.ub-cancel[b-ph69a8tan5] { border: 1px solid var(--border, #dde4ea); background: #fff; color: var(--text-subtle, #6a8aa0); }
.ub-save[b-ph69a8tan5] { border: 0; background: var(--navy, #0d2137); color: #fff; }
.ub-cancel:disabled[b-ph69a8tan5], .ub-save:disabled[b-ph69a8tan5] { opacity: .65; }


/* No billable utility on this stall — a defensive state; the caller should not offer the dialog at all. */
.ub-none[b-ph69a8tan5] {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text-subtle);
    font-size: 13px;
    line-height: 1.55;
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.ub-overlay[b-ph69a8tan5] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.ub-save[b-ph69a8tan5] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

.ub-save:hover[b-ph69a8tan5] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--surface);
}

.ub-direct-toggle[b-ph69a8tan5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
}

.ub-direct-toggle input:focus-visible[b-ph69a8tan5] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/AccountSetup.razor.rz.scp.css */
/*
   EEMO first-time administrator setup.
   Shares the visual language of the login page (same branding panel, card,
   inputs, and button) while keeping the setup-specific pieces: step indicator,
   password-strength meter, and the two-column password row.
*/

.setup-root[b-7vee5abf23] {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: #f5f7fb;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Civic identity panel ─────────────────────────────────────────────── */
.setup-left[b-7vee5abf23] {
    width: clamp(355px, 38.2vw, 580px);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-color: #0b2846;
    background-image:
        linear-gradient(180deg, rgba(6, 27, 49, 0.84) 0%, rgba(7, 31, 56, 0.91) 58%, rgba(5, 24, 44, 0.97) 100%),
        url('/images/eemo_image.png');
    background-position: center;
    background-size: cover;
}

/* Non-default LGUs: neutral navy backdrop (the building photo carries Cantilan-specific signage). */
.setup-left--neutral[b-7vee5abf23] {
    background-image:
        linear-gradient(180deg, rgba(6, 27, 49, 0.92) 0%, rgba(7, 31, 56, 0.95) 58%, rgba(5, 24, 44, 0.99) 100%);
}

.setup-left[b-7vee5abf23]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(212, 175, 55, 0.13), transparent 34%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px);
    background-size: auto, 62px 62px;
}

.setup-left-inner[b-7vee5abf23] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: min(100%, 395px);
    min-height: 100%;
    margin: 0 auto;
    justify-content: center;
    gap: 24px;
    padding: 48px 38px 34px;
    box-sizing: border-box;
}

.government-seals[b-7vee5abf23] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: auto;
    margin-bottom: 10px;
}

.government-logo-card[b-7vee5abf23] {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 14px 30px rgba(0, 0, 0, 0.22);
}

.government-logo-card img[b-7vee5abf23] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.government-logo-card.stalltrack-logo[b-7vee5abf23] {
    background: transparent;
}

.government-logo-card.stalltrack-logo img[b-7vee5abf23] {
    object-fit: contain;
}

.setup-brand[b-7vee5abf23] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.setup-brand-label[b-7vee5abf23] {
    color: rgba(255, 255, 255, 0.73);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.setup-brand-city[b-7vee5abf23] {
    color: rgba(255, 255, 255, 0.93);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 13px;
}

.setup-brand-title[b-7vee5abf23] {
    color: #e4bf52;
    font-size: clamp(52px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-left: 0.1em;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.22);
}

.setup-brand-sub[b-7vee5abf23] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
}

.login-secure-access[b-7vee5abf23] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    width: min(100%, 320px);
    text-align: center;
    margin: 4px auto 0;
}

.login-secure-icon[b-7vee5abf23] {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    color: #dce8f4;
    border: 1px solid rgba(220, 232, 244, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.login-secure-icon svg[b-7vee5abf23] { width: 24px; height: 24px; }

.login-secure-title[b-7vee5abf23] {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-secure-access p[b-7vee5abf23] {
    margin: 0;
    color: rgba(235, 242, 249, 0.75);
    font-size: 13px;
    line-height: 1.5;
}

.setup-left-footer[b-7vee5abf23] {
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.17);
    width: 100%;
}

.setup-system-name[b-7vee5abf23] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

.setup-version[b-7vee5abf23] { color: rgba(255, 255, 255, 0.62); font-size: 12px; margin-top: 8px; }

/* ── Form surface ────────────────────────────────────────────────────── */
.setup-right[b-7vee5abf23] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    flex: 1;
    min-width: 0;
    height: 100vh;
    padding: clamp(28px, 5vh, 60px) clamp(26px, 5.2vw, 92px);
    overflow-y: auto;
    scrollbar-width: none;              /* Firefox — hide the vertical scrollbar */
    box-sizing: border-box;
    background-color: #eef2f7;
    background-image: linear-gradient(135deg, #fbfcfe 0%, #e9edf3 100%);
}

/* Hide the right-panel scrollbar (WebKit/Blink) — content fits; scroll stays as a fallback. */
.setup-right[b-7vee5abf23]::-webkit-scrollbar { width: 0; height: 0; }

.setup-form-wrap[b-7vee5abf23] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
}

.login-card[b-7vee5abf23] {
    display: block;
    padding: clamp(28px, 3.4vw, 44px);
    background: #ffffff;
    border: 1px solid rgba(13, 42, 71, 0.10);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(13, 42, 71, 0.10), 0 2px 6px rgba(13, 42, 71, 0.04);
}

/* ── Step indicator ── */
.setup-step-row[b-7vee5abf23] {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.setup-step[b-7vee5abf23] { display: flex; align-items: center; gap: 8px; }

.step-dot[b-7vee5abf23] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    flex-shrink: 0;
    transition: all 0.2s;
}

.setup-step.active .step-dot[b-7vee5abf23] {
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(13, 33, 55, 0.12);
}

.setup-step.completed .step-dot[b-7vee5abf23] { background: var(--navy); border-color: var(--navy); }

.step-label[b-7vee5abf23] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.setup-step.active .step-label[b-7vee5abf23],
.setup-step.completed .step-label[b-7vee5abf23] { color: var(--navy); font-weight: 600; }

.setup-step-line[b-7vee5abf23] {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 10px;
    min-width: 24px;
}

/* ── Header ── */
.setup-form-header[b-7vee5abf23] {
    position: relative;
    min-height: 64px;
    margin-bottom: 24px;
    padding: 2px 0 24px 84px;
    border-bottom: 1px solid rgba(13, 42, 71, 0.10);
}

.login-header-icon[b-7vee5abf23] {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: #6b89ab;
    border: 1px solid rgba(25, 63, 100, 0.1);
    border-radius: 50%;
    background: linear-gradient(145deg, #f8fafc, #eef2f7);
}

.login-header-icon svg[b-7vee5abf23] { width: 32px; height: 32px; }

.setup-form-title[b-7vee5abf23] {
    color: #102d4e;
    font-size: clamp(25px, 1.9vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 5px;
}

.setup-form-desc[b-7vee5abf23] {
    color: #637895;
    font-size: 15px;
    line-height: 1.55;
}

/* ── Notice ── */
.setup-notice[b-7vee5abf23] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px 16px;
    color: #536c8e;
    border: 1px solid #d7e2ef;
    border-left: 3px solid #355d87;
    border-radius: 9px;
    background: #f8fbff;
    font-size: 13.5px;
    line-height: 1.5;
}

.setup-notice svg[b-7vee5abf23] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; stroke: #496789; }

/* ── Form fields ── */
.setup-form[b-7vee5abf23] { display: flex; flex-direction: column; gap: 18px; }

.form-row[b-7vee5abf23] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-group[b-7vee5abf23] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }

.form-label[b-7vee5abf23] {
    color: #1b3859;
    font-size: 13px;
    font-weight: 700;
}

.form-hint[b-7vee5abf23] { font-size: 12px; color: #8193ae; margin-top: 2px; }

.form-input-wrap[b-7vee5abf23] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.form-input-wrap-password[b-7vee5abf23] { width: 100%; }

.form-input[b-7vee5abf23] {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 52px;
    padding-left: 48px;
    border: 1.5px solid #dde3ec;
    border-radius: 10px;
    background: #fff;
    color: #173755;
    font-size: 15px;
    outline: none;
}

.form-input[b-7vee5abf23]::placeholder { color: #8193ae; }
.form-input:focus[b-7vee5abf23] { border-color: #315f8d; box-shadow: 0 0 0 4px rgba(49, 95, 141, 0.12); }

.form-input-icon[b-7vee5abf23] { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; transform: translateY(-50%); stroke: #7287a2; pointer-events: none; }
.form-input-password[b-7vee5abf23] { padding-right: 54px; }
.form-eye-btn[b-7vee5abf23] { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: none; cursor: pointer; color: #7287a2; }
.form-eye-btn svg[b-7vee5abf23] { width: 20px; height: 20px; pointer-events: none; }
.form-eye-btn:hover[b-7vee5abf23], .form-eye-btn:focus-visible[b-7vee5abf23] { color: #173755; }
.form-eye-btn:focus-visible[b-7vee5abf23] { outline: 2px solid #315f8d; outline-offset: 2px; border-radius: 4px; }

.form-input-error[b-7vee5abf23] { border-color: var(--red) !important; background: var(--red-bg) !important; }
.form-input-error:focus[b-7vee5abf23] { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(139, 58, 58, 0.11) !important; }

.form-error[b-7vee5abf23] { font-size: 12.5px; color: var(--red); }

/* ── Password strength ── */
.pw-strength[b-7vee5abf23] { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.pw-strength-bars[b-7vee5abf23] { display: flex; gap: 4px; flex: 1; }
.pw-bar[b-7vee5abf23] { height: 4px; flex: 1; border-radius: 2px; background: var(--border); transition: background 0.2s; }
.pw-bar-fill.pw-weak[b-7vee5abf23] { background: var(--red); }
.pw-bar-fill.pw-fair[b-7vee5abf23] { background: #b87333; }
.pw-bar-fill.pw-good[b-7vee5abf23] { background: #4a7c59; }
.pw-bar-fill.pw-strong[b-7vee5abf23] { background: var(--green); }
.pw-strength-label[b-7vee5abf23] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.pw-strength-label.pw-weak[b-7vee5abf23] { color: var(--red); }
.pw-strength-label.pw-fair[b-7vee5abf23] { color: #b87333; }
.pw-strength-label.pw-good[b-7vee5abf23] { color: #4a7c59; }
.pw-strength-label.pw-strong[b-7vee5abf23] { color: var(--green); }

/* ── Error ── */
.setup-error[b-7vee5abf23] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--red);
    border-radius: 9px;
    background: var(--red-bg);
    color: var(--red);
    font-size: 13px;
    font-weight: 500;
}

.setup-error svg[b-7vee5abf23] { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Submit ── */
.setup-submit[b-7vee5abf23] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 3px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient(180deg, #1c3252 0%, #16263c 100%);
    box-shadow: 0 7px 16px rgba(13, 42, 71, 0.16);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.setup-submit svg[b-7vee5abf23] { width: 20px; height: 20px; flex-shrink: 0; }
.setup-submit:hover:not(:disabled)[b-7vee5abf23] { background: linear-gradient(180deg, #16263c 0%, #0f1d30 100%); box-shadow: 0 10px 22px rgba(13, 42, 71, 0.23); }
.setup-submit:focus-visible[b-7vee5abf23] { outline: 3px solid #e4bf52; outline-offset: 3px; }
.setup-submit:disabled[b-7vee5abf23] { opacity: 0.7; cursor: not-allowed; }
.setup-submit-loading[b-7vee5abf23] { opacity: 0.75; }

.setup-spinner[b-7vee5abf23] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-7vee5abf23 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes spin-b-7vee5abf23 { to { transform: rotate(360deg); } }

/* ── Security reassurance note (under the submit button) ── */
.setup-secure-note[b-7vee5abf23] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 6px;
    color: #64788f;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.setup-secure-note svg[b-7vee5abf23] { width: 16px; height: 16px; flex-shrink: 0; stroke: #4a7c59; }

/* ── Footer ── */
.setup-form-footer[b-7vee5abf23] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 11px;
    margin-top: 26px;
    color: #7c8fa8;
    font-size: 12px;
}

.setup-form-footer svg[b-7vee5abf23] { width: 16px; height: 16px; color: #617d9e; }

/* ── Responsive ── */
@media (max-height: 820px) and (min-width: 769px) {
    .setup-left-inner[b-7vee5abf23] { gap: 17px; padding-top: 28px; padding-bottom: 24px; }
    .government-logo-card[b-7vee5abf23] { width: 82px; height: 82px; }
    .setup-brand-city[b-7vee5abf23] { margin-bottom: 6px; }
    .setup-brand-title[b-7vee5abf23] { font-size: 48px; }
    .setup-brand-sub[b-7vee5abf23] { font-size: 14px; }
    .login-secure-access[b-7vee5abf23] { margin-top: 10px; }
    .setup-left-footer[b-7vee5abf23] { padding-top: 18px; }
    .login-card[b-7vee5abf23] { padding-top: 28px; padding-bottom: 28px; }
    .setup-step-row[b-7vee5abf23] { margin-bottom: 20px; }
    .setup-form-header[b-7vee5abf23] { margin-bottom: 18px; padding-bottom: 18px; }
    .setup-form[b-7vee5abf23] { gap: 14px; }
}

@media (max-width: 940px) {
    .setup-left[b-7vee5abf23] { width: clamp(300px, 35vw, 360px); }
    .government-logo-card[b-7vee5abf23] { width: 82px; height: 82px; }
    .setup-left-inner[b-7vee5abf23] { padding-right: 24px; padding-left: 24px; }
    .setup-brand-city[b-7vee5abf23] { font-size: 15px; }
    .setup-brand-title[b-7vee5abf23] { font-size: 48px; }
    .setup-brand-sub[b-7vee5abf23] { font-size: 14px; }
    .login-secure-access[b-7vee5abf23] { width: 100%; }
    .setup-right[b-7vee5abf23] { padding-right: 32px; padding-left: 32px; }
    .login-card[b-7vee5abf23] { padding: 34px; }
}

@media (max-width: 768px) {
    .setup-root[b-7vee5abf23] { display: block; height: auto; min-height: 100vh; overflow-x: hidden; }
    .setup-left[b-7vee5abf23] { width: 100%; height: auto; min-height: 235px; position: relative; }
    .setup-left-inner[b-7vee5abf23] { width: 100%; min-height: 235px; justify-content: center; gap: 12px; padding: 28px 22px; }
    .government-seals[b-7vee5abf23] { gap: 13px; margin: 0; }
    .government-logo-card[b-7vee5abf23] { width: 62px; height: 62px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05); }
    .setup-brand[b-7vee5abf23] { gap: 3px; }
    .setup-brand-label[b-7vee5abf23] { font-size: 9px; }
    .setup-brand-city[b-7vee5abf23] { font-size: 13px; margin-bottom: 5px; }
    .setup-brand-title[b-7vee5abf23] { font-size: 39px; }
    .setup-brand-sub[b-7vee5abf23] { font-size: 12px; }
    .login-secure-access[b-7vee5abf23], .setup-left-footer[b-7vee5abf23] { display: none; }
    .setup-step-row[b-7vee5abf23] { display: none; }
    .setup-right[b-7vee5abf23] { height: auto; min-height: auto; padding: 28px 20px 32px; overflow: visible; }
    .login-card[b-7vee5abf23] { padding: clamp(24px, 7vw, 36px); border-radius: 12px; }
    .form-row[b-7vee5abf23] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .setup-right[b-7vee5abf23] { padding: 16px 12px 24px; }
    .login-card[b-7vee5abf23] { padding: 23px 18px; border-radius: 10px; }
    .setup-form-header[b-7vee5abf23] { min-height: 0; margin-bottom: 22px; padding: 0 0 21px; text-align: center; }
    .login-header-icon[b-7vee5abf23] { position: static; width: 60px; height: 60px; margin: 0 auto 13px; }
    .setup-form-title[b-7vee5abf23] { font-size: 26px; }
    .setup-form-desc[b-7vee5abf23] { font-size: 14px; }
    .setup-form[b-7vee5abf23] { gap: 16px; }
    .setup-form-footer[b-7vee5abf23] { gap: 0 7px; font-size: 10.5px; line-height: 1.8; }
}
/* /Components/Pages/AdminActivate.razor.rz.scp.css */
/*
   Head account-activation (set-password) page.
   Mirrors the first-run administrator setup visual language (AccountSetup): same branding
   panel, card, inputs, and button — kept as a scoped copy because those form/card styles are
   component-scoped (not global).
*/

.setup-root[b-3alii600ft] {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: #f5f7fb;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Civic identity panel ─────────────────────────────────────────────── */
.setup-left[b-3alii600ft] {
    width: clamp(355px, 38.2vw, 580px);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-color: #0b2846;
    background-image:
        linear-gradient(180deg, rgba(6, 27, 49, 0.92) 0%, rgba(7, 31, 56, 0.95) 58%, rgba(5, 24, 44, 0.99) 100%);
    background-position: center;
    background-size: cover;
}

.setup-left[b-3alii600ft]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(212, 175, 55, 0.13), transparent 34%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px);
    background-size: auto, 62px 62px;
}

.setup-left-inner[b-3alii600ft] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: min(100%, 395px);
    min-height: 100%;
    margin: 0 auto;
    justify-content: center;
    gap: 24px;
    padding: 48px 38px 34px;
    box-sizing: border-box;
}

.government-seals[b-3alii600ft] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: auto;
    margin-bottom: 10px;
}

.government-logo-card[b-3alii600ft] {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 14px 30px rgba(0, 0, 0, 0.22);
}

.government-logo-card img[b-3alii600ft] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.government-logo-card.stalltrack-logo[b-3alii600ft] {
    background: transparent;
}

.government-logo-card.stalltrack-logo img[b-3alii600ft] {
    object-fit: contain;
}

.setup-brand[b-3alii600ft] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.setup-brand-label[b-3alii600ft] {
    color: rgba(255, 255, 255, 0.73);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.setup-brand-city[b-3alii600ft] {
    color: rgba(255, 255, 255, 0.93);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 13px;
}

.setup-brand-title[b-3alii600ft] {
    color: #e4bf52;
    font-size: clamp(52px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-left: 0.1em;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.22);
}

.setup-brand-sub[b-3alii600ft] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
}

.login-secure-access[b-3alii600ft] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    width: min(100%, 320px);
    text-align: center;
    margin: 4px auto 0;
}

.login-secure-icon[b-3alii600ft] {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    color: #dce8f4;
    border: 1px solid rgba(220, 232, 244, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.login-secure-icon svg[b-3alii600ft] { width: 24px; height: 24px; }

.login-secure-title[b-3alii600ft] {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-secure-access p[b-3alii600ft] {
    margin: 0;
    color: rgba(235, 242, 249, 0.75);
    font-size: 13px;
    line-height: 1.5;
}

.setup-left-footer[b-3alii600ft] {
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.17);
    width: 100%;
}

.setup-system-name[b-3alii600ft] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

.setup-version[b-3alii600ft] { color: rgba(255, 255, 255, 0.62); font-size: 12px; margin-top: 8px; }

/* ── Form surface ────────────────────────────────────────────────────── */
.setup-right[b-3alii600ft] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    flex: 1;
    min-width: 0;
    height: 100vh;
    padding: clamp(28px, 5vh, 60px) clamp(26px, 5.2vw, 92px);
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    background-color: #eef2f7;
    background-image: linear-gradient(135deg, #fbfcfe 0%, #e9edf3 100%);
}

.setup-right[b-3alii600ft]::-webkit-scrollbar { width: 0; height: 0; }

/* ── Activated (Done) state ───────────────────────────────────────────────────────────────────────
   No background of its own: the panel keeps the same light surface as the password step before it, and as
   the login page the button leads to. Inheriting rather than restating it means there is no third colour to
   keep in step later.

   It used to be washed in deep navy over the municipality backdrop, to stop the confirmation floating in
   whitespace. It did stop that, at the cost of the one screen in the sequence looking like a different
   product: the office set a password on a light panel, pressed Save, landed on a dark one, and went on to a
   light login. Whitespace around a confirmation is not worth that. ── */
.setup-right-activated .login-card[b-3alii600ft] {
    box-shadow: 0 18px 44px rgba(15, 42, 71, 0.10), 0 1px 3px rgba(15, 42, 71, 0.06);
}

.activated-icon[b-3alii600ft] {
    color: #2f7d57 !important;
    border-color: rgba(47, 125, 87, 0.28) !important;
    background: linear-gradient(145deg, #f1faf5, #e5f3ec) !important;
}

.activated-welcome[b-3alii600ft] {
    display: block;
    margin-bottom: 6px;
    color: #102d4e;
    font-weight: 700;
    font-size: 16px;
}

.setup-form-wrap[b-3alii600ft] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
}

/* The card is sized against the HEIGHT of the window as well as its width, so the whole form - four fields, the
   strength meter, the button and its note - stands on one screen instead of asking an office to scroll through its own
   activation. The scroll on .setup-right is kept as a safety valve for a very short window; it should not be reached. */
.login-card[b-3alii600ft] {
    display: block;
    padding: clamp(22px, 3vh, 44px) clamp(24px, 3.4vw, 44px);
    background: #ffffff;
    border: 1px solid rgba(13, 42, 71, 0.10);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(13, 42, 71, 0.10), 0 2px 6px rgba(13, 42, 71, 0.04);
}

/* ── Header ── */
.setup-form-header[b-3alii600ft] {
    position: relative;
    min-height: 64px;
    margin-bottom: clamp(14px, 2.2vh, 24px);
    padding: 2px 0 clamp(14px, 2.2vh, 24px) 84px;
    border-bottom: 1px solid rgba(13, 42, 71, 0.10);
}

.login-header-icon[b-3alii600ft] {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: #6b89ab;
    border: 1px solid rgba(25, 63, 100, 0.1);
    border-radius: 50%;
    background: linear-gradient(145deg, #f8fafc, #eef2f7);
}

.login-header-icon svg[b-3alii600ft] { width: 32px; height: 32px; }

.setup-form-title[b-3alii600ft] {
    color: #102d4e;
    font-size: clamp(25px, 1.9vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 5px;
}

.setup-form-desc[b-3alii600ft] {
    color: #637895;
    font-size: 15px;
    line-height: 1.55;
}

/* ── Form fields ── */
/* Vertical rhythm scales with the window's height for the same reason as the card's padding: the form is meant to
   stand whole on one screen. On a tall window these settle at the values they always had. */
.setup-form[b-3alii600ft] { display: flex; flex-direction: column; gap: clamp(11px, 1.8vh, 18px); }

.form-group[b-3alii600ft] { display: flex; flex-direction: column; gap: clamp(5px, 0.9vh, 8px); margin-bottom: 0; }

.form-label[b-3alii600ft] {
    color: #1b3859;
    font-size: 13px;
    font-weight: 700;
}

.form-input-wrap[b-3alii600ft] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.form-input-wrap-password[b-3alii600ft] { width: 100%; }

.form-input[b-3alii600ft] {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: clamp(44px, 5.6vh, 52px);
    padding-left: 48px;
    border: 1.5px solid #dde3ec;
    border-radius: 10px;
    background: #fff;
    color: #173755;
    font-size: 15px;
    outline: none;
}

.form-input[b-3alii600ft]::placeholder { color: #8193ae; }
.form-input:focus[b-3alii600ft] { border-color: #315f8d; box-shadow: 0 0 0 4px rgba(49, 95, 141, 0.12); }

.form-input-icon[b-3alii600ft] { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; transform: translateY(-50%); stroke: #7287a2; pointer-events: none; }
.form-input-password[b-3alii600ft] { padding-right: 54px; }
.form-eye-btn[b-3alii600ft] { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: none; cursor: pointer; color: #7287a2; }
.form-eye-btn svg[b-3alii600ft] { width: 20px; height: 20px; pointer-events: none; }
.form-eye-btn:hover[b-3alii600ft], .form-eye-btn:focus-visible[b-3alii600ft] { color: #173755; }
.form-eye-btn:focus-visible[b-3alii600ft] { outline: 2px solid #315f8d; outline-offset: 2px; border-radius: 4px; }

.form-input-error[b-3alii600ft] { border-color: var(--red) !important; background: var(--red-bg) !important; }
.form-input-error:focus[b-3alii600ft] { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(139, 58, 58, 0.11) !important; }

.form-error[b-3alii600ft] { font-size: 12.5px; color: var(--red); }

/* ── Password strength ── */
.pw-strength[b-3alii600ft] { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.pw-strength-bars[b-3alii600ft] { display: flex; gap: 4px; flex: 1; }
.pw-bar[b-3alii600ft] { height: 4px; flex: 1; border-radius: 2px; background: var(--border); transition: background 0.2s; }
.pw-bar-fill.pw-weak[b-3alii600ft] { background: var(--red); }
.pw-bar-fill.pw-fair[b-3alii600ft] { background: #b87333; }
.pw-bar-fill.pw-good[b-3alii600ft] { background: #4a7c59; }
.pw-bar-fill.pw-strong[b-3alii600ft] { background: var(--green); }
.pw-strength-label[b-3alii600ft] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.pw-strength-label.pw-weak[b-3alii600ft] { color: var(--red); }
.pw-strength-label.pw-fair[b-3alii600ft] { color: #b87333; }
.pw-strength-label.pw-good[b-3alii600ft] { color: #4a7c59; }
.pw-strength-label.pw-strong[b-3alii600ft] { color: var(--green); }

/* ── Error ── */
.setup-error[b-3alii600ft] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--red);
    border-radius: 9px;
    background: var(--red-bg);
    color: var(--red);
    font-size: 13px;
    font-weight: 500;
}

.setup-error svg[b-3alii600ft] { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Submit ── */
.setup-submit[b-3alii600ft] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: clamp(46px, 6vh, 54px);
    margin-top: 3px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient(180deg, #1c3252 0%, #16263c 100%);
    box-shadow: 0 7px 16px rgba(13, 42, 71, 0.16);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.setup-submit svg[b-3alii600ft] { width: 20px; height: 20px; flex-shrink: 0; }
.setup-submit:hover:not(:disabled)[b-3alii600ft] { background: linear-gradient(180deg, #16263c 0%, #0f1d30 100%); box-shadow: 0 10px 22px rgba(13, 42, 71, 0.23); }
.setup-submit:focus-visible[b-3alii600ft] { outline: 3px solid #e4bf52; outline-offset: 3px; }
.setup-submit:disabled[b-3alii600ft] { opacity: 0.7; cursor: not-allowed; }
.setup-submit-loading[b-3alii600ft] { opacity: 0.75; }

.setup-spinner[b-3alii600ft] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-3alii600ft 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes spin-b-3alii600ft { to { transform: rotate(360deg); } }

/* ── Security reassurance note (under the submit button) ── */
.setup-secure-note[b-3alii600ft] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(8px, 1.4vh, 14px);
    padding: 0 6px;
    color: #64788f;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.setup-secure-note svg[b-3alii600ft] { width: 16px; height: 16px; flex-shrink: 0; stroke: #4a7c59; }

/* ── Responsive ── */
@media (max-height: 820px) and (min-width: 769px) {
    .setup-left-inner[b-3alii600ft] { gap: 17px; padding-top: 28px; padding-bottom: 24px; }
    .government-logo-card[b-3alii600ft] { width: 82px; height: 82px; }
    .setup-brand-city[b-3alii600ft] { margin-bottom: 6px; }
    .setup-brand-title[b-3alii600ft] { font-size: 48px; }
    .setup-brand-sub[b-3alii600ft] { font-size: 14px; }
    .login-secure-access[b-3alii600ft] { margin-top: 10px; }
    .setup-left-footer[b-3alii600ft] { padding-top: 18px; }
    .login-card[b-3alii600ft] { padding-top: 28px; padding-bottom: 28px; }
    .setup-form-header[b-3alii600ft] { margin-bottom: 18px; padding-bottom: 18px; }
    .setup-form[b-3alii600ft] { gap: 14px; }
}

@media (max-width: 940px) {
    .setup-left[b-3alii600ft] { width: clamp(300px, 35vw, 360px); }
    .government-logo-card[b-3alii600ft] { width: 82px; height: 82px; }
    .setup-left-inner[b-3alii600ft] { padding-right: 24px; padding-left: 24px; }
    .setup-brand-city[b-3alii600ft] { font-size: 15px; }
    .setup-brand-title[b-3alii600ft] { font-size: 48px; }
    .setup-brand-sub[b-3alii600ft] { font-size: 14px; }
    .login-secure-access[b-3alii600ft] { width: 100%; }
    .setup-right[b-3alii600ft] { padding-right: 32px; padding-left: 32px; }
    .login-card[b-3alii600ft] { padding: 34px; }
}

@media (max-width: 768px) {
    .setup-root[b-3alii600ft] { display: block; height: auto; min-height: 100vh; overflow-x: hidden; }
    .setup-left[b-3alii600ft] { width: 100%; height: auto; min-height: 235px; position: relative; }
    .setup-left-inner[b-3alii600ft] { width: 100%; min-height: 235px; justify-content: center; gap: 12px; padding: 28px 22px; }
    .government-seals[b-3alii600ft] { gap: 13px; margin: 0; }
    .government-logo-card[b-3alii600ft] { width: 62px; height: 62px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05); }
    .setup-brand[b-3alii600ft] { gap: 3px; }
    .setup-brand-label[b-3alii600ft] { font-size: 9px; }
    .setup-brand-city[b-3alii600ft] { font-size: 13px; margin-bottom: 5px; }
    .setup-brand-title[b-3alii600ft] { font-size: 39px; }
    .setup-brand-sub[b-3alii600ft] { font-size: 12px; }
    .login-secure-access[b-3alii600ft], .setup-left-footer[b-3alii600ft] { display: none; }
    .setup-right[b-3alii600ft] { height: auto; min-height: auto; padding: 28px 20px 32px; overflow: visible; }
    .login-card[b-3alii600ft] { padding: clamp(24px, 7vw, 36px); border-radius: 12px; }
}

@media (max-width: 480px) {
    .setup-right[b-3alii600ft] { padding: 16px 12px 24px; }
    .login-card[b-3alii600ft] { padding: 23px 18px; border-radius: 10px; }
    .setup-form-header[b-3alii600ft] { min-height: 0; margin-bottom: 22px; padding: 0 0 21px; text-align: center; }
    .login-header-icon[b-3alii600ft] { position: static; width: 60px; height: 60px; margin: 0 auto 13px; }
    .setup-form-title[b-3alii600ft] { font-size: 26px; }
    .setup-form-desc[b-3alii600ft] { font-size: 14px; }
    .setup-form[b-3alii600ft] { gap: 16px; }
}
/* /Components/Pages/ChangePassword.razor.rz.scp.css */
/* The change-password card.

   Deliberately NO branding literals here. The left panel is AuthBrandPanel, fed from BrandingState — the signed-in LGU's own
   seal and office name, resolved from the caller's token — so this page states whose office it is without ever hardcoding
   one municipality's identity.

   The page layout is the shared split-auth one (setup-root / setup-left / setup-right / setup-form-wrap in app.css), the same
   as the sign-in and forgot-password screens. That is also what keeps this screen from overflowing: setup-root is height:100vh
   with overflow:hidden and setup-right scrolls internally, so a short window scrolls the FORM COLUMN rather than the whole
   document. */

.cp-form-wrap[b-ajte5bvft1] {
    max-width: 440px;
}

/* The right column's own padding, tightened from the shared 40/32 so the card is not pushed past the fold on a laptop. */
.setup-right[b-ajte5bvft1] {
    padding: 24px 28px;
    align-items: center;
}

.login-card[b-ajte5bvft1] {
    display: block;
    padding: clamp(22px, 2.2vw, 30px);
    background: #ffffff;
    border: 1px solid rgba(13, 42, 71, 0.10);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(13, 42, 71, 0.09), 0 2px 6px rgba(13, 42, 71, 0.04);
}

/* The lock and the heading read as one line, not a stacked mark above a title. */
.cp-heading[b-ajte5bvft1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.login-header-icon[b-ajte5bvft1] {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #6b89ab;
    border: 1px solid rgba(25, 63, 100, 0.1);
    border-radius: 50%;
    background: linear-gradient(145deg, #f8fafc, #eef2f7);
}

    .login-header-icon svg[b-ajte5bvft1] {
        width: 19px;
        height: 19px;
    }

/* Tighter than the app default so all three fields, the rule and both actions fit a laptop window without scrolling. */
.setup-form-header[b-ajte5bvft1] {
    margin-bottom: 16px;
}

.setup-form-title[b-ajte5bvft1] {
    margin: 0;
    font-size: 20px;
}

.setup-form-desc[b-ajte5bvft1] {
    font-size: 12.5px;
    line-height: 1.5;
}

/* ── The fields ────────────────────────────────────────────────────────────────────────────────────────────────
   These have to be stated here, and that is why this card looked broken.

   app.css carries .form-input and .form-input-wrap, but the GLOBAL .form-input sets only padding, border and type — it never
   sets a width. The sign-in card looks right because Login.razor.css redeclares both with width:100%, and Blazor scopes that
   to Login alone. Inheriting only the global rules, the input fell back to its intrinsic size: around twenty characters wide
   inside the card, which truncated its own placeholders.

   Matched to the sign-in card deliberately, so the two password screens are the same object to the eye. There is no leading
   icon here, hence the ordinary left padding. */
.form-input-wrap[b-ajte5bvft1] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.form-input[b-ajte5bvft1] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid #dde3ec;
    border-radius: 10px;
    background: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--navy);
}

    .form-input[b-ajte5bvft1]::placeholder {
        color: #8193ae;
    }

    .form-input:focus[b-ajte5bvft1] {
        border-color: #315f8d;
        box-shadow: 0 0 0 4px rgba(49, 95, 141, 0.12);
        outline: none;
    }

    .form-input:disabled[b-ajte5bvft1] {
        background: #f3f6f9;
    }

/* Room for the reveal control, which sits inside the field's right edge.

   The control itself is NOT styled here. It comes from the shared PasswordRevealButton component, and Blazor's scoped CSS
   cannot reach another component's markup — a .form-eye-btn rule in this file compiles to .form-eye-btn[b-xxxxx] and matches
   nothing. Its position belongs to the global rule in app.css, which is where it was corrected. */
.form-input-password[b-ajte5bvft1] {
    padding-right: 48px;
}

/* The gap that made this card too tall. app.css sets .setup-form to a flex column with gap:18px, and the global .form-group
   ALSO carries margin-bottom:14px — the two stack, so every field sat 32px from the next and the card ran past the fold. One
   source of spacing only: the flex gap, with the group margins cleared. */
.setup-form[b-ajte5bvft1] {
    gap: 12px;
}

    .setup-form .form-group[b-ajte5bvft1] {
        gap: 5px;
        margin-bottom: 0;
    }

.setup-form .form-label[b-ajte5bvft1] {
    margin-bottom: 0;
}

.form-hint[b-ajte5bvft1] {
    margin-top: 0;
    font-size: 11.5px;
    line-height: 1.4;
}

.setup-submit[b-ajte5bvft1] {
    margin-top: 2px;
    padding: 11px 24px;
}

/* Secondary action: Cancel when the change is optional, Sign out when it is required — a required change has no way past
   this screen, and with no app shell there is no menu to sign out from. */
.cp-secondary[b-ajte5bvft1] {
    width: 100%;
    margin-top: 0;
    padding: 9px 24px;
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
/*
   Forgot-password page — right-hand surface (card, fields, buttons).

   Kept as a scoped copy for the same reason AdminActivate.razor.css documents: these form/card styles are
   component-scoped in this codebase, not global, so each auth screen carries its own copy. The LEFT
   branding panel is NOT duplicated here — it comes from the shared <AuthBrandPanel> component, which owns
   its own stylesheet, so the sign-in, forgot-password and reset-password screens cannot drift apart.
*/

.setup-root[b-tgmktb9mnt] {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: #f5f7fb;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Recovery surface ─────────────────────────────────────────────────── */
.setup-right[b-tgmktb9mnt] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    flex: 1;
    min-width: 0;
    height: 100vh;
    padding: clamp(28px, 5vh, 60px) clamp(26px, 5.2vw, 92px);
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    background-color: #eef2f7;
    background-image: linear-gradient(135deg, #fbfcfe 0%, #e9edf3 100%);
}

.setup-right[b-tgmktb9mnt]::-webkit-scrollbar { width: 0; height: 0; }

.activated-icon[b-tgmktb9mnt] {
    color: #2f7d57 !important;
    border-color: rgba(47, 125, 87, 0.28) !important;
    background: linear-gradient(145deg, #f1faf5, #e5f3ec) !important;
}

.setup-form-wrap[b-tgmktb9mnt] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
}

.login-card[b-tgmktb9mnt] {
    display: block;
    padding: clamp(28px, 3.4vw, 44px);
    background: #ffffff;
    border: 1px solid rgba(13, 42, 71, 0.10);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(13, 42, 71, 0.10), 0 2px 6px rgba(13, 42, 71, 0.04);
}

/* ── Header ── */
.setup-form-header[b-tgmktb9mnt] {
    position: relative;
    min-height: 64px;
    margin-bottom: 24px;
    padding: 2px 0 24px 84px;
    border-bottom: 1px solid rgba(13, 42, 71, 0.10);
}

.login-header-icon[b-tgmktb9mnt] {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: #6b89ab;
    border: 1px solid rgba(25, 63, 100, 0.1);
    border-radius: 50%;
    background: linear-gradient(145deg, #f8fafc, #eef2f7);
}

.login-header-icon svg[b-tgmktb9mnt] { width: 32px; height: 32px; }

.setup-form-title[b-tgmktb9mnt] {
    color: #102d4e;
    font-size: clamp(25px, 1.9vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 5px;
}

.setup-form-desc[b-tgmktb9mnt] {
    color: #637895;
    font-size: 15px;
    line-height: 1.55;
}

/* ── Form fields ── */
.setup-form[b-tgmktb9mnt] { display: flex; flex-direction: column; gap: 18px; }

.form-group[b-tgmktb9mnt] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }

.form-label[b-tgmktb9mnt] {
    color: #1b3859;
    font-size: 13px;
    font-weight: 700;
}

.form-input-wrap[b-tgmktb9mnt] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.form-input[b-tgmktb9mnt] {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 52px;
    padding-left: 48px;
    border: 1.5px solid #dde3ec;
    border-radius: 10px;
    background: #fff;
    color: #173755;
    font-size: 15px;
    outline: none;
}

.form-input[b-tgmktb9mnt]::placeholder { color: #8193ae; }
.form-input:focus[b-tgmktb9mnt] { border-color: #315f8d; box-shadow: 0 0 0 4px rgba(49, 95, 141, 0.12); }

.form-input-icon[b-tgmktb9mnt] { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; transform: translateY(-50%); stroke: #7287a2; pointer-events: none; }

.form-input-error[b-tgmktb9mnt] { border-color: var(--red) !important; background: var(--red-bg) !important; }
.form-input-error:focus[b-tgmktb9mnt] { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(139, 58, 58, 0.11) !important; }

.form-error[b-tgmktb9mnt] { font-size: 12.5px; color: var(--red); }

/* ── Submit ── */
.setup-submit[b-tgmktb9mnt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 3px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient(180deg, #1c3252 0%, #16263c 100%);
    box-shadow: 0 7px 16px rgba(13, 42, 71, 0.16);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.setup-submit svg[b-tgmktb9mnt] { width: 20px; height: 20px; flex-shrink: 0; }
.setup-submit:hover:not(:disabled)[b-tgmktb9mnt] { background: linear-gradient(180deg, #16263c 0%, #0f1d30 100%); box-shadow: 0 10px 22px rgba(13, 42, 71, 0.23); }
.setup-submit:focus-visible[b-tgmktb9mnt] { outline: 3px solid #e4bf52; outline-offset: 3px; }
.setup-submit:disabled[b-tgmktb9mnt] { opacity: 0.7; cursor: not-allowed; }
.setup-submit-loading[b-tgmktb9mnt] { opacity: 0.75; }

.setup-spinner[b-tgmktb9mnt] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-tgmktb9mnt 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

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

/* ── Secondary text link (matches the sign-in page's "Forgot password?") ── */
.login-forgot[b-tgmktb9mnt] {
    align-self: center;
    padding: 2px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #2f6db5;
}

.login-forgot:hover[b-tgmktb9mnt] { color: #173e67; text-decoration: underline; }
.login-forgot:focus-visible[b-tgmktb9mnt] { outline: 2px solid #315f8d; outline-offset: 2px; border-radius: 4px; }

/* ── Security reassurance note ── */
.setup-secure-note[b-tgmktb9mnt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 6px;
    color: #64788f;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.setup-secure-note svg[b-tgmktb9mnt] { width: 16px; height: 16px; flex-shrink: 0; stroke: #4a7c59; }

/* ── Responsive (right-hand side) ── */
@media (max-height: 820px) and (min-width: 769px) {
    .login-card[b-tgmktb9mnt] { padding-top: 28px; padding-bottom: 28px; }
    .setup-form-header[b-tgmktb9mnt] { margin-bottom: 18px; padding-bottom: 18px; }
    .setup-form[b-tgmktb9mnt] { gap: 14px; }
}

@media (max-width: 940px) {
    .setup-right[b-tgmktb9mnt] { padding-right: 32px; padding-left: 32px; }
    .login-card[b-tgmktb9mnt] { padding: 34px; }
}

@media (max-width: 768px) {
    .setup-root[b-tgmktb9mnt] { display: block; height: auto; min-height: 100vh; overflow-x: hidden; }
    .setup-right[b-tgmktb9mnt] { height: auto; min-height: auto; padding: 28px 20px 32px; overflow: visible; }
    .login-card[b-tgmktb9mnt] { padding: clamp(24px, 7vw, 36px); border-radius: 12px; }
}

@media (max-width: 480px) {
    .setup-right[b-tgmktb9mnt] { padding: 16px 12px 24px; }
    .login-card[b-tgmktb9mnt] { padding: 23px 18px; border-radius: 10px; }
    .setup-form-header[b-tgmktb9mnt] { min-height: 0; margin-bottom: 22px; padding: 0 0 21px; text-align: center; }
    .login-header-icon[b-tgmktb9mnt] { position: static; width: 60px; height: 60px; margin: 0 auto 13px; }
    .setup-form-title[b-tgmktb9mnt] { font-size: 26px; }
    .setup-form-desc[b-tgmktb9mnt] { font-size: 14px; }
    .setup-form[b-tgmktb9mnt] { gap: 16px; }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/*
   EEMO administrator login
   Purposefully scoped to this page: existing login events, validation, and
   authentication flow remain untouched while the visual hierarchy is renewed.
*/

.setup-root[b-rumua09ke0] {
    min-height: 100vh;
    height: 100vh;
    background: #f5f7fb;
}

/* ── Civic identity panel ─────────────────────────────────────────────── */
/* V3: a civic-blue identity panel — two tonal steps of one blue, no photograph, no glow. The same panel serves every
   municipality, so no LGU's signage ever sits behind another's branding. */
.setup-left[b-rumua09ke0],
.setup-left--neutral[b-rumua09ke0] {
    width: clamp(355px, 38.2vw, 580px);
    background-color: var(--civic-panel);
    background-image: linear-gradient(180deg, var(--civic-panel) 0%, var(--civic-panel-deep) 100%);
}

/* A quiet structural band behind the seals instead of a decorative pattern. */
.setup-left[b-rumua09ke0]::before {
    z-index: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%);
    background-size: auto;
}

.setup-left-inner[b-rumua09ke0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: min(100%, 395px);
    min-height: 100%;
    margin: 0 auto;
    justify-content: center;
    gap: 24px;
    padding: 48px 38px 34px;
    box-sizing: border-box;
}

.government-seals[b-rumua09ke0] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    gap: 14px;
    margin-top: auto;
    margin-bottom: 10px;
}

.government-logo-card[b-rumua09ke0] {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 6px 16px rgba(6, 22, 44, 0.18);
}

.government-logo-card img[b-rumua09ke0] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.government-logo-card.stalltrack-logo[b-rumua09ke0] {
    background: transparent;
}

.government-logo-card.stalltrack-logo img[b-rumua09ke0] {
    object-fit: contain;
}

.setup-brand[b-rumua09ke0] {
    gap: 7px;
}

.setup-brand-label[b-rumua09ke0] {
    color: rgba(255, 255, 255, 0.73);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.setup-brand-city[b-rumua09ke0] {
    color: rgba(255, 255, 255, 0.93);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 13px;
}

.setup-brand-title[b-rumua09ke0] {
    color: #ffffff;
    font-size: clamp(34px, 3.2vw, 44px);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-left: 0.08em;
    text-transform: uppercase;
}

.setup-brand-sub[b-rumua09ke0] {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

/* The one gold accent: a short municipal rule between the government lines and the system name. */
.login-panel-divider[b-rumua09ke0] {
    display: block;
    width: 32px;
    height: 2px;
    margin: 2px auto 10px;
    background: var(--gold);
    border-radius: 2px;
}

.login-secure-access[b-rumua09ke0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    width: min(100%, 320px);
    text-align: center;
    margin: 4px auto 0;
}

.login-secure-icon[b-rumua09ke0] {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    color: #dce8f4;
    border: 1px solid rgba(220, 232, 244, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.login-secure-icon svg[b-rumua09ke0] { width: 24px; height: 24px; }

.login-secure-title[b-rumua09ke0] {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-secure-access p[b-rumua09ke0] {
    margin: 0;
    color: rgba(235, 242, 249, 0.75);
    font-size: 13px;
    line-height: 1.5;
}

.setup-left-footer[b-rumua09ke0] {
    margin-top: auto;
    padding-top: 26px;
    border-top-color: rgba(255, 255, 255, 0.17);
}

.setup-system-name[b-rumua09ke0] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    letter-spacing: 0.1em;
}

.setup-version[b-rumua09ke0] { color: rgba(255, 255, 255, 0.62); font-size: 12px; margin-top: 8px; }

/* ── Login surface ───────────────────────────────────────────────────── */
.setup-right[b-rumua09ke0] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    min-width: 0;
    height: 100vh;
    padding: clamp(28px, 5vh, 60px) clamp(26px, 5.2vw, 92px);
    overflow-y: auto;
    box-sizing: border-box;
    background-color: var(--canvas);
    background-image: none;
}

.setup-right[b-rumua09ke0]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: none;
}

.setup-form-wrap[b-rumua09ke0] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
}

.login-card[b-rumua09ke0] {
    padding: clamp(28px, 3.4vw, 44px);
    background: #ffffff;
    border: 1px solid rgba(13, 42, 71, 0.10);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(13, 42, 71, 0.10), 0 2px 6px rgba(13, 42, 71, 0.04);
}

/* Step indicator only appears in the first-time setup journey. */
.setup-step-row[b-rumua09ke0] { margin-bottom: 32px; }
.setup-step.completed .step-dot[b-rumua09ke0] { background: var(--navy); border-color: var(--navy); }
.setup-step.completed .step-label[b-rumua09ke0] { color: var(--navy); font-weight: 600; }
.setup-step-line-done[b-rumua09ke0] { background: var(--navy) !important; opacity: 0.4; }

.setup-form-header[b-rumua09ke0] {
    position: relative;
    min-height: 64px;
    margin-bottom: 26px;
    padding: 2px 0 0 84px;
    border-bottom: 1px solid rgba(13, 42, 71, 0.10);
    padding-bottom: 24px;
}

.login-header-icon[b-rumua09ke0] {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: #6b89ab;
    border: 1px solid rgba(25, 63, 100, 0.1);
    border-radius: 50%;
    background: linear-gradient(145deg, #f8fafc, #eef2f7);
}

.login-header-icon svg[b-rumua09ke0] { width: 32px; height: 32px; }

.setup-form-eyebrow[b-rumua09ke0] {
    color: #bd8f18;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin-bottom: 7px;
}

.setup-form-title[b-rumua09ke0] {
    color: #102d4e;
    font-size: clamp(25px, 1.9vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 5px;
}

.setup-form-desc[b-rumua09ke0] {
    color: #637895;
    font-size: 15px;
    line-height: 1.55;
}

.setup-notice[b-rumua09ke0] {
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px 16px;
    color: #536c8e;
    border: 1px solid #d7e2ef;
    border-left: 3px solid #355d87;
    border-radius: 9px;
    background: #f8fbff;
    font-size: 14px;
}

.setup-notice svg[b-rumua09ke0] { width: 18px; height: 18px; stroke: #496789; opacity: 1; }

.setup-form[b-rumua09ke0] { gap: 18px; }
.form-group[b-rumua09ke0] { gap: 8px; margin-bottom: 0; }

.form-label[b-rumua09ke0] {
    color: #1b3859;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.form-required[b-rumua09ke0] { color: #ad3939; }

.form-input-wrap[b-rumua09ke0] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.form-input[b-rumua09ke0] {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 52px;
    padding-left: 48px;
    border: 1.5px solid #dde3ec;
    border-radius: 10px;
    background: #fff;
    color: #173755;
    font-size: 15px;
}

.form-input[b-rumua09ke0]::placeholder { color: #8193ae; }
.form-input:focus[b-rumua09ke0] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.form-input:disabled[b-rumua09ke0] { background: #f3f6f9; }

.form-input-icon[b-rumua09ke0] { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; transform: translateY(-50%); stroke: #7287a2; pointer-events: none; }
.form-input-password[b-rumua09ke0] { padding-right: 54px; }
.form-eye-btn[b-rumua09ke0] { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: none; cursor: pointer; color: #7287a2; }
.form-eye-btn svg[b-rumua09ke0] { width: 20px; height: 20px; }
.form-eye-btn:hover[b-rumua09ke0], .form-eye-btn:focus-visible[b-rumua09ke0] { color: #173755; }
.form-eye-btn:focus-visible[b-rumua09ke0] { outline: 2px solid #315f8d; outline-offset: 2px; border-radius: 4px; }

.form-input-error[b-rumua09ke0] { border-color: var(--red) !important; background: var(--red-bg) !important; }
.form-input-error:focus[b-rumua09ke0] { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(139, 58, 58, 0.11) !important; }

.setup-submit[b-rumua09ke0] {
    min-height: 54px;
    margin-top: 3px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: var(--civic-panel);
    box-shadow: 0 1px 2px rgba(13, 33, 55, 0.12);
    font-size: 15.5px;
    font-weight: 700;
}

.setup-submit svg[b-rumua09ke0] { width: 20px; height: 20px; }
.setup-submit:hover:not(:disabled)[b-rumua09ke0] { background: var(--civic-panel-deep); box-shadow: 0 2px 6px rgba(13, 33, 55, 0.16); }
.setup-submit:focus-visible[b-rumua09ke0] { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.setup-submit-locked[b-rumua09ke0] { background: rgba(139, 58, 58, 0.14) !important; color: var(--red) !important; box-shadow: none; }
.setup-submit-locked svg[b-rumua09ke0] { stroke: var(--red) !important; }

.setup-error[b-rumua09ke0], .login-attempts-warn[b-rumua09ke0], .login-locked-banner[b-rumua09ke0] { border-radius: 9px; }

.login-attempts-warn[b-rumua09ke0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    color: #7a4a18;
    border: 1px solid rgba(184, 115, 51, 0.25);
    border-left: 3px solid #b87333;
    border-radius: 8px;
    background: rgba(184, 115, 51, 0.06);
    font-size: 13px;
    line-height: 1.5;
}

.login-attempts-warn svg[b-rumua09ke0] { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; stroke: #b87333; }
.login-attempts-warn strong[b-rumua09ke0] { color: #5a3010; }

.login-locked-banner[b-rumua09ke0] { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1.5px solid rgba(139, 58, 58, 0.25); border-left: 4px solid var(--red); background: var(--red-bg); }
.login-locked-icon[b-rumua09ke0] { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 8px; background: rgba(139, 58, 58, 0.1); }
.login-locked-icon svg[b-rumua09ke0] { width: 17px; height: 17px; stroke: var(--red); }
.login-locked-title[b-rumua09ke0] { margin-bottom: 3px; color: var(--red); font-size: 13.5px; font-weight: 700; }
.login-locked-sub[b-rumua09ke0] { color: rgba(139, 58, 58, 0.8); font-size: 12.5px; line-height: 1.5; }
.login-locked-sub strong[b-rumua09ke0] { color: var(--red); }

.login-monitoring-notice[b-rumua09ke0] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
    padding: 17px 19px;
    color: #4f6788;
    border: 1px solid #d5e4f5;
    border-radius: 9px;
    background: linear-gradient(90deg, #f8fbff, #fdfefe);
    font-size: 14px;
    line-height: 1.5;
}

.login-monitoring-notice[b-rumua09ke0] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
    padding: 16px 18px;
    color: #5b6f8c;
    border: 1px solid #e2eaf3;
    border-radius: 10px;
    background: #f4f8fc;
    font-size: 13.5px;
    line-height: 1.55;
}

.login-monitoring-notice svg[b-rumua09ke0] { width: 24px; height: 24px; flex: 0 0 auto; stroke: #5f86ad; }

/* Remember me + forgot password */
.login-options[b-rumua09ke0] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-remember[b-rumua09ke0] { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: #44597a; user-select: none; }
.login-remember input[b-rumua09ke0] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; flex: 0 0 auto; position: relative;
    border: 1.5px solid #c7d2e0; border-radius: 5px; background: #fff; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.login-remember input:checked[b-rumua09ke0] { background: #173e67; border-color: #173e67; }
.login-remember input:checked[b-rumua09ke0]::after {
    content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.login-remember input:focus-visible[b-rumua09ke0] { outline: 2px solid #315f8d; outline-offset: 2px; }
.login-forgot[b-rumua09ke0] { padding: 2px 2px; border: none; background: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #2f6db5; }
.login-forgot:hover[b-rumua09ke0] { color: #173e67; text-decoration: underline; }
.login-forgot:focus-visible[b-rumua09ke0] { outline: 2px solid #315f8d; outline-offset: 2px; border-radius: 4px; }
.login-forgot-hint[b-rumua09ke0] { padding: 11px 14px; border: 1px solid #d7e4f1; border-radius: 8px; background: #f1f6fb; color: #4f6788; font-size: 13px; line-height: 1.5; }

/* Divider between the action and the security notice */
.login-divider[b-rumua09ke0] { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; color: #9aa9bd; font-size: 13px; font-weight: 500; }
.login-divider[b-rumua09ke0]::before, .login-divider[b-rumua09ke0]::after { content: ''; flex: 1; height: 1px; background: rgba(13, 42, 71, 0.1); }

.setup-form-footer[b-rumua09ke0] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 11px;
    margin-top: 26px;
    padding-top: 0;
    border: 0;
    color: #7c8fa8;
    font-size: 12px;
}

.setup-form-footer svg[b-rumua09ke0] { width: 16px; height: 16px; color: #617d9e; }

/* ── Responsive, including compact laptop heights ─────────────────────── */
@media (max-height: 820px) and (min-width: 769px) {
    .setup-left-inner[b-rumua09ke0] { gap: 17px; padding-top: 28px; padding-bottom: 24px; }
    .government-logo-card[b-rumua09ke0] { width: 82px; height: 82px; }
    .setup-brand-city[b-rumua09ke0] { margin-bottom: 6px; }
    .setup-brand-title[b-rumua09ke0] { font-size: 48px; }
    .setup-brand-sub[b-rumua09ke0] { font-size: 14px; }
    .login-secure-access[b-rumua09ke0] { margin-top: 10px; }
    .setup-left-footer[b-rumua09ke0] { padding-top: 18px; }
    .login-card[b-rumua09ke0] { padding-top: 30px; padding-bottom: 30px; }
    .setup-form-header[b-rumua09ke0] { margin-bottom: 20px; padding-bottom: 20px; }
    .setup-form[b-rumua09ke0] { gap: 15px; }
    .login-monitoring-notice[b-rumua09ke0] { margin-top: 20px; padding: 13px 16px; }
}

@media (max-width: 940px) {
    .setup-left[b-rumua09ke0] { width: clamp(300px, 35vw, 360px); }
    .government-logo-card[b-rumua09ke0] { width: 82px; height: 82px; }
    .setup-left-inner[b-rumua09ke0] { padding-right: 24px; padding-left: 24px; }
    .setup-brand-city[b-rumua09ke0] { font-size: 15px; }
    .setup-brand-title[b-rumua09ke0] { font-size: 48px; }
    .setup-brand-sub[b-rumua09ke0] { font-size: 14px; }
    .login-secure-access[b-rumua09ke0] { width: 100%; }
    .setup-right[b-rumua09ke0] { padding-right: 32px; padding-left: 32px; }
    .login-card[b-rumua09ke0] { padding: 34px; }
}

@media (max-width: 768px) {
    .setup-root[b-rumua09ke0] { display: block; height: auto; min-height: 100vh; overflow-x: hidden; }
    .setup-left[b-rumua09ke0] { width: 100%; height: auto; min-height: 235px; position: relative; }
    .setup-left-inner[b-rumua09ke0] { width: 100%; min-height: 235px; justify-content: center; gap: 12px; padding: 28px 22px; }
    .government-seals[b-rumua09ke0] { gap: 13px; margin: 0; }
    .government-logo-card[b-rumua09ke0] { width: 62px; height: 62px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05); }
    .setup-brand[b-rumua09ke0] { gap: 3px; }
    .setup-brand-label[b-rumua09ke0] { font-size: 9px; }
    .setup-brand-city[b-rumua09ke0] { font-size: 13px; margin-bottom: 5px; }
    .setup-brand-title[b-rumua09ke0] { font-size: 39px; }
    .setup-brand-sub[b-rumua09ke0] { font-size: 12px; }
    .login-panel-divider[b-rumua09ke0], .login-secure-access[b-rumua09ke0], .setup-left-footer[b-rumua09ke0] { display: none; }
    .setup-step-row[b-rumua09ke0] { display: none; }
    .setup-right[b-rumua09ke0] { height: auto; min-height: calc(100vh - 235px); padding: 28px 20px 32px; overflow: visible; }
    .setup-right[b-rumua09ke0]::before { background: rgba(246, 248, 252, 0.88); }
    .login-card[b-rumua09ke0] { padding: clamp(24px, 7vw, 36px); border-radius: 12px; }
}

@media (max-width: 480px) {
    .setup-left[b-rumua09ke0] { min-height: 210px; }
    .setup-left-inner[b-rumua09ke0] { min-height: 210px; padding-top: 23px; padding-bottom: 23px; }
    .setup-right[b-rumua09ke0] { min-height: calc(100vh - 210px); padding: 16px 12px 24px; }
    .login-card[b-rumua09ke0] { padding: 23px 18px; border-radius: 10px; }
    .setup-form-header[b-rumua09ke0] { min-height: 0; margin-bottom: 22px; padding: 0 0 21px; text-align: center; }
    .login-header-icon[b-rumua09ke0] { position: static; width: 60px; height: 60px; margin: 0 auto 13px; }
    .login-header-icon svg[b-rumua09ke0] { width: 32px; height: 32px; }
    .setup-form-title[b-rumua09ke0] { font-size: 29px; }
    .setup-form-desc[b-rumua09ke0] { font-size: 14px; }
    .setup-notice[b-rumua09ke0] { padding: 12px; font-size: 13px; }
    .setup-form[b-rumua09ke0] { gap: 18px; }
    .form-input[b-rumua09ke0] { height: 54px; }
    .setup-submit[b-rumua09ke0] { min-height: 55px; font-size: 15px; }
    .login-monitoring-notice[b-rumua09ke0] { gap: 10px; margin-top: 22px; padding: 13px; font-size: 13px; }
    .login-monitoring-notice svg[b-rumua09ke0] { width: 23px; height: 23px; }
    .setup-form-footer[b-rumua09ke0] { gap: 0 7px; font-size: 10.5px; line-height: 1.8; }
}

@media (max-width: 370px) {
    .government-logo-card[b-rumua09ke0] { width: 54px; height: 54px; }
    .setup-brand-title[b-rumua09ke0] { font-size: 34px; }
    .setup-brand-city[b-rumua09ke0] { font-size: 12px; }
}


/* ── CARCANMADCARLAN network link (replaces the old monitoring notice; → external landing) ── */
.login-network-link[b-rumua09ke0] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(200, 168, 75, .45);
    background: linear-gradient(180deg, #fffdf7 0%, #fbf6ea 100%);
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.login-network-link:hover[b-rumua09ke0] {
    border-color: var(--gold, #c8a84b);
    box-shadow: 0 8px 22px rgba(13, 33, 55, .1);
    transform: translateY(-1px);
}
.login-network-icon[b-rumua09ke0] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy, #0b2239);
    color: var(--gold-light, #e8cc76);
}
.login-network-icon svg[b-rumua09ke0] { width: 22px; height: 22px; stroke-linecap: round; stroke-linejoin: round; }
.login-network-text[b-rumua09ke0] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.login-network-title[b-rumua09ke0] {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--navy, #0b2239);
    line-height: 1.25;
}
.login-network-sub[b-rumua09ke0] { font-size: 11.5px; color: var(--text-muted, #8faabf); }
.login-network-arrow[b-rumua09ke0] {
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold, #c8a84b);
    transition: transform .16s ease;
}
.login-network-link:hover .login-network-arrow[b-rumua09ke0] { transform: translateX(4px); }
/* /Components/Pages/Menus/Accounts.razor.rz.scp.css */
/* ══════════════════════════════════════════
   ACCOUNTS PAGE — Toolbar
   (mirrors the scoped styles used by the Collectors page so the
    shared class names render correctly on this page too)
══════════════════════════════════════════ */
.page-toolbar[b-70q7k64e66] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.toolbar-left[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.search-box[b-70q7k64e66] {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    height: 38px;
    min-width: 260px;
    transition: border-color 0.15s;
}

    .search-box:focus-within[b-70q7k64e66] {
        border-color: var(--accent);
    }

    .search-box svg[b-70q7k64e66] {
        width: 15px;
        height: 15px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .search-box input[b-70q7k64e66] {
        flex: 1;
        border: none;
        outline: none;
        font-family: 'DM Sans', sans-serif;
        font-size: 12.5px;
        color: var(--text);
        background: transparent;
    }

        .search-box input[b-70q7k64e66]::placeholder {
            color: var(--text-muted);
        }

.search-clear[b-70q7k64e66] {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.filter-tabs[b-70q7k64e66] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.filter-tab[b-70q7k64e66] {
    min-height: 32px;
    min-width: 80px;
    padding: 6px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

    .filter-tab:hover[b-70q7k64e66] {
        background: rgba(255, 255, 255, .72);
        border-color: color-mix(in srgb, var(--border) 72%, transparent);
        color: var(--navy);
    }

    .filter-tab.active[b-70q7k64e66] {
        background: var(--accent);
        border-color: color-mix(in srgb, var(--navy) 76%, #fff);
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 13px rgba(9, 31, 52, .14);
    }

/* ══════════════════════════════════════════
   TABLE CELLS
══════════════════════════════════════════ */
.row-inactive td[b-70q7k64e66] {
    opacity: 0.55;
}

.data-table th[b-70q7k64e66] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td[b-70q7k64e66] {
    font-size: 11.5px;
}

.collector-cell[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.collector-email[b-70q7k64e66] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.facility-tags[b-70q7k64e66] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

    .facility-tags span[b-70q7k64e66] {
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
        background: var(--bg-icon);
        color: var(--navy);
        font-weight: 500;
    }

.mono[b-70q7k64e66] {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--text);
}

/* ══════════════════════════════════════════
   ACTION BUTTONS
══════════════════════════════════════════ */
.action-btns[b-70q7k64e66] {
    display: flex;
    gap: 4px;
}

.action-btn[b-70q7k64e66] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

    .action-btn:hover[b-70q7k64e66] {
        background: var(--border);
    }

    /* Locked actions (a peer Head's account, or deactivating yourself): visibly unavailable rather than
       silently failing when clicked. Hover is suppressed so it doesn't read as interactive. */
    .action-btn:disabled[b-70q7k64e66] {
        opacity: 0.42;
        cursor: not-allowed;
    }

        .action-btn:disabled:hover[b-70q7k64e66] {
            background: var(--bg-icon);
        }

    .action-btn svg[b-70q7k64e66] {
        width: 13px;
        height: 13px;
        stroke: var(--text-subtle);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.action-danger[b-70q7k64e66] {
    border-color: rgba(139,58,58,0.2);
    background: var(--red-bg);
}

    .action-danger svg[b-70q7k64e66] {
        stroke: var(--red);
    }

    .action-danger:hover[b-70q7k64e66] {
        background: #f5c6c6;
    }

.action-success[b-70q7k64e66] {
    border-color: rgba(45,122,95,0.2);
    background: var(--green-bg);
}

    .action-success svg[b-70q7k64e66] {
        stroke: var(--green);
    }

.confirm-text[b-70q7k64e66] {
    font-size: 13.5px;
    color: var(--text-subtle);
    line-height: 1.6;
}

/* ══════════════════════════════════════════
   HERO BANNER (vs-hero)
══════════════════════════════════════════ */
.vs-hero[b-70q7k64e66] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 24px 28px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    flex-wrap: wrap;
}

    .vs-hero[b-70q7k64e66]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(200,168,75,.15) 0%, transparent 70%);
        pointer-events: none;
    }

.vs-hero-left[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
    min-width: 240px;
}

.vs-hero-stats[b-70q7k64e66] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.vs-hero-icon[b-70q7k64e66] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .vs-hero-icon svg[b-70q7k64e66] {
        width: 26px;
        height: 26px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.vs-hero-eyebrow[b-70q7k64e66] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.vs-hero-title[b-70q7k64e66] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.vs-hero-sub[b-70q7k64e66] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.vs-hero-stat[b-70q7k64e66] {
    padding: 0 18px;
    text-align: center;
    flex: 1;
    min-width: 140px;
}

    .vs-hero-stat:first-child[b-70q7k64e66] {
        padding-left: 0;
    }

.vs-hero-val[b-70q7k64e66] {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.vs-hero-key[b-70q7k64e66] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.2;
}

.vs-hero-sub2[b-70q7k64e66] {
    font-size: 11px;
    color: rgba(255,255,255,.35);
    margin-top: 1px;
    line-height: 1.2;
}

.vs-hero-divider[b-70q7k64e66] {
    width: 1px;
    height: 50px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
    margin: 0 6px;
}

.vs-hero-progress[b-70q7k64e66] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.vs-hero-progress-fill[b-70q7k64e66] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width .5s ease;
}

@media (max-width: 1100px) {
    .vs-hero-title[b-70q7k64e66] {
        font-size: 18px;
    }

    .vs-hero-val[b-70q7k64e66] {
        font-size: 18px;
    }

    .vs-hero-stat[b-70q7k64e66] {
        padding: 0 14px;
    }
}

@media (max-width: 900px) {
    .vs-hero[b-70q7k64e66] {
        padding: 20px;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .vs-hero[b-70q7k64e66] {
        padding: 16px;
        gap: 12px;
    }

    .vs-hero-title[b-70q7k64e66] {
        font-size: 16px;
    }
}

/* ══════════════════════════════════════════
   RIGHT-SIDE DRAWER
══════════════════════════════════════════ */
.eemo-drawer-overlay[b-70q7k64e66] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 33, 55, 0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .eemo-drawer-overlay.show[b-70q7k64e66] {
        opacity: 1;
        visibility: visible;
    }

.eemo-drawer[b-70q7k64e66] {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 600px;
    max-width: 90vw;
    background: var(--bg-card);
    box-shadow: -4px 0 24px rgba(13, 33, 55, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
}

.eemo-drawer-right[b-70q7k64e66] {
    right: 0;
}

.eemo-drawer.show[b-70q7k64e66] {
    transform: translateX(0);
}

.eemo-drawer-footer[b-70q7k64e66] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

[b-70q7k64e66] .eemo-drawer .eemo-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

@media (max-width: 768px) {
    .eemo-drawer[b-70q7k64e66] {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ══════════════════════════════════════════
   DRAWER HEADER (Navy Gradient)
══════════════════════════════════════════ */
.eemo-drawer-header[b-70q7k64e66] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom: 1px solid rgba(200, 168, 75, 0.2);
    flex-shrink: 0;
}

.eemo-drawer-header-left[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.eemo-drawer-header-icon[b-70q7k64e66] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(200, 168, 75, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .eemo-drawer-header-icon svg[b-70q7k64e66] {
        width: 20px;
        height: 20px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.eemo-drawer-header-title[b-70q7k64e66] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.eemo-drawer-header-sub[b-70q7k64e66] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.eemo-drawer-header-close[b-70q7k64e66] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .eemo-drawer-header-close:hover[b-70q7k64e66] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .eemo-drawer-header-close svg[b-70q7k64e66] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
    }

/* ══════════════════════════════════════════
   OFFICIAL ACCOUNT REGISTRY (table polish)
══════════════════════════════════════════ */

/* Panel header subtitle + footer note */
.panel-subtitle[b-70q7k64e66] {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 2px;
}

.registry-footer[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 60%, var(--bg-card));
    font-size: 11.5px;
    color: var(--text-muted);
    border-radius: 0 0 12px 12px;
}

    .registry-footer svg[b-70q7k64e66] {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        fill: none;
        stroke: var(--gold);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Registry table — comfortable, divided, official rows */
.data-table.registry-table[b-70q7k64e66] {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .data-table.registry-table thead th[b-70q7k64e66] {
        background: color-mix(in srgb, var(--bg) 70%, var(--bg-card));
        color: var(--text-subtle);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 11px 16px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
        text-align: left;
    }

    .data-table.registry-table tbody td[b-70q7k64e66] {
        padding: 12px 16px;
        font-size: 12.5px;
        color: var(--text);
        border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
        vertical-align: middle;
    }

    .data-table.registry-table tbody tr[b-70q7k64e66] {
        transition: background 0.12s ease;
    }

        .data-table.registry-table tbody tr:last-child td[b-70q7k64e66] {
            border-bottom: none;
        }

        .data-table.registry-table tbody tr:hover[b-70q7k64e66] {
            background: var(--accent-hover);
        }

.registry-table .col-actions[b-70q7k64e66] {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

/* Account identity (avatar + name + handle) */
.acct-cell[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.acct-avatar[b-70q7k64e66] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

.acct-id-text[b-70q7k64e66] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.acct-name[b-70q7k64e66] {
    font-size: 13px;
    font-weight: 650;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.acct-handle[b-70q7k64e66] {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

    .acct-handle[b-70q7k64e66]::before {
        content: "@";
        opacity: 0.6;
    }

.acct-email-sub[b-70q7k64e66] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.acct-email[b-70q7k64e66] {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--text-subtle);
}

.acct-meta[b-70q7k64e66] {
    font-size: 12px;
    color: var(--text-subtle);
    white-space: nowrap;
}

/* Role badge — refined, official, on-palette */
.role-badge[b-70q7k64e66] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    color: var(--text-subtle);
}

    .role-badge svg[b-70q7k64e66] {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .role-badge.head[b-70q7k64e66] {
        color: var(--navy);
        background: color-mix(in srgb, var(--gold) 15%, var(--bg-card));
        border-color: color-mix(in srgb, var(--gold) 50%, transparent);
    }

    .role-badge.admin[b-70q7k64e66] {
        color: var(--navy);
        background: var(--bg-icon);
        border-color: var(--border);
    }

/* Role selector — segmented control in the create/edit drawer */
.role-select[b-70q7k64e66] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.role-opt[b-70q7k64e66] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-subtle);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

    .role-opt svg[b-70q7k64e66] {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .role-opt:hover[b-70q7k64e66] {
        border-color: color-mix(in srgb, var(--gold) 45%, var(--border));
        color: var(--navy);
    }

    .role-opt.active[b-70q7k64e66] {
        color: var(--navy);
        background: color-mix(in srgb, var(--gold) 15%, var(--bg-card));
        border-color: color-mix(in srgb, var(--gold) 55%, transparent);
    }

/* Status — compact dot + label */
.acct-status-cell[b-70q7k64e66] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.acct-status[b-70q7k64e66] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

.acct-status-dot[b-70q7k64e66] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.acct-status.is-active[b-70q7k64e66] {
    color: var(--green);
}

    .acct-status.is-active .acct-status-dot[b-70q7k64e66] {
        background: var(--green);
        box-shadow: 0 0 0 3px var(--green-bg);
    }

.acct-status.is-inactive[b-70q7k64e66] {
    color: var(--text-muted);
}

    .acct-status.is-inactive .acct-status-dot[b-70q7k64e66] {
        background: var(--text-muted);
    }

/* Password-reset flag — subtle gold, not alarming */
.acct-flag[b-70q7k64e66] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--navy);
    background: color-mix(in srgb, var(--gold) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    white-space: nowrap;
}

    .acct-flag svg[b-70q7k64e66] {
        width: 10px;
        height: 10px;
        fill: none;
        stroke: var(--gold);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Right-align the action group within its column */
.registry-table .action-btns[b-70q7k64e66] {
    justify-content: flex-end;
}

/* Responsive — drop secondary columns before forcing horizontal scroll */
@media (max-width: 1024px) {
    .registry-table .cell-email[b-70q7k64e66] {
        display: none;
    }
}

@media (max-width: 820px) {
    .registry-table .cell-login[b-70q7k64e66] {
        display: none;
    }

    .data-table.registry-table tbody td[b-70q7k64e66],
    .data-table.registry-table thead th[b-70q7k64e66] {
        padding: 10px 12px;
    }
}

/* ══════════════════════════════════════════
   ACTION MODALS (view / reset / toggle)
══════════════════════════════════════════ */

/* Icon-led modal header */
.modal-head[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.modal-head-icon[b-70q7k64e66] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--bg-icon);
}

    .modal-head-icon svg[b-70q7k64e66] {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: var(--text-subtle);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .modal-head-icon.is-gold[b-70q7k64e66] {
        background: color-mix(in srgb, var(--gold) 15%, var(--bg-card));
        border-color: color-mix(in srgb, var(--gold) 40%, transparent);
    }

        .modal-head-icon.is-gold svg[b-70q7k64e66] {
            stroke: var(--gold);
        }

    .modal-head-icon.is-danger[b-70q7k64e66] {
        background: var(--red-bg);
        border-color: color-mix(in srgb, var(--red) 30%, transparent);
    }

        .modal-head-icon.is-danger svg[b-70q7k64e66] {
            stroke: var(--red);
        }

    .modal-head-icon.is-success[b-70q7k64e66] {
        background: var(--green-bg);
        border-color: color-mix(in srgb, var(--green) 30%, transparent);
    }

        .modal-head-icon.is-success svg[b-70q7k64e66] {
            stroke: var(--green);
        }

/* Larger avatar used in the profile modal header */
.acct-avatar-lg[b-70q7k64e66] {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

/* Highlighted name inside confirmation copy */
.confirm-name[b-70q7k64e66] {
    color: var(--navy);
    font-weight: 650;
}

/* Field hint (replaces ad-hoc inline hints) */
.field-hint[b-70q7k64e66] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    line-height: 1.4;
}

/* Input + inline action button (password generate) */
.input-with-action[b-70q7k64e66] {
    display: flex;
    gap: 8px;
    align-items: stretch;
    /* Wraps rather than squeezing. At this dialog's width, and narrower still where it becomes a bottom sheet on a
       phone, holding the pair on one line pressed the field down to a few visible characters while the button kept
       its full size. Reading the password back is the whole purpose of showing it. */
    flex-wrap: wrap;
}

    .input-with-action .form-input[b-70q7k64e66] {
        /* A floor of roughly ten monospace characters before the button is allowed to drop below instead. */
        flex: 1 1 190px;
        min-width: 0;
    }

    .input-with-action .btn-ghost[b-70q7k64e66] {
        white-space: nowrap;
        flex-shrink: 0;
    }

/* The confirm field, which sits in a .form-input-wrap so the reveal button can be positioned inside its right edge.
   The wrap is a flex container and the global .form-input states no width, so the input took the browser's default
   size of about twenty characters: it stopped well short of the dialog's edge with the eye button stranded at the
   right, which is the field reported as cut off. Every other page that uses the wrap supplies the width in its own
   scoped stylesheet, and this dialog never did. Stated here rather than on the global .form-input, which forty other
   forms share and some of them lay their inputs out inline. */
.form-input-wrap .form-input[b-70q7k64e66] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Profile modal: badge strip + definition grid */
.profile-badges[b-70q7k64e66] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.profile-grid[b-70q7k64e66] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.profile-item[b-70q7k64e66] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.profile-label[b-70q7k64e66] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

.profile-value[b-70q7k64e66] {
    font-size: 13px;
    color: var(--navy);
    word-break: break-word;
}

@media (max-width: 560px) {
    .profile-grid[b-70q7k64e66] {
        grid-template-columns: 1fr;
    }
}

/* Re-auth notice inside the reset modal */
.security-note[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--gold) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--navy);
}

    .security-note svg[b-70q7k64e66] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        fill: none;
        stroke: var(--gold);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ══════════════════════════════════════════
   DRAWER SECTIONS (account overview / quick actions / guidance)
══════════════════════════════════════════ */
.drawer-section[b-70q7k64e66] {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.drawer-section-title[b-70q7k64e66] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 12px;
}

.drawer-actions[b-70q7k64e66] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.drawer-action[b-70q7k64e66] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

    .drawer-action svg[b-70q7k64e66] {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .drawer-action.is-danger[b-70q7k64e66] {
        color: var(--red);
        border-color: color-mix(in srgb, var(--red) 35%, transparent);
    }

        .drawer-action.is-danger:hover[b-70q7k64e66] {
            background: var(--red-bg);
        }

    .drawer-action.is-success[b-70q7k64e66] {
        color: var(--green);
        border-color: color-mix(in srgb, var(--green) 35%, transparent);
    }

        .drawer-action.is-success:hover[b-70q7k64e66] {
            background: var(--green-bg);
        }

/* Guidance panel (create mode) */
.info-panel[b-70q7k64e66] {
    margin-top: 8px;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.info-panel-title[b-70q7k64e66] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 12px;
}

.info-list[b-70q7k64e66] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .info-list li[b-70q7k64e66] {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 12px;
        line-height: 1.45;
        color: var(--text-subtle);
    }

    .info-list svg[b-70q7k64e66] {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        margin-top: 1px;
        fill: none;
        stroke: var(--green);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }





/* ── Table-level loading skeleton (keeps tab chrome + panel visible) ── */
.accounts-table-loading[b-70q7k64e66] {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    padding: 4px 0;
    overflow: hidden;
}

.acct-sk-head[b-70q7k64e66],
.acct-sk-row[b-70q7k64e66] {
    display: grid;
    grid-template-columns: 2.2fr 2fr 1fr 1fr 1.2fr 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
}

.acct-sk-head[b-70q7k64e66] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
}

.acct-sk-row[b-70q7k64e66] {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

    .acct-sk-row:last-child[b-70q7k64e66] {
        border-bottom: none;
    }

.acct-sk-id[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.acct-sk-idtext[b-70q7k64e66] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.accounts-table-loading[b-70q7k64e66]  .acct-sk-gap {
    margin-top: 6px;
}

.accounts-table-loading[b-70q7k64e66]  .acct-sk-right {
    margin-left: auto;
}

@media (max-width: 900px) {
    .acct-sk-head[b-70q7k64e66] {
        display: none;
    }

    .acct-sk-row[b-70q7k64e66] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══════════════════════════════════════════
   RESET PASSWORD — success confirmation
══════════════════════════════════════════ */
.reset-success[b-70q7k64e66] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 4px 4px;
}

.reset-success-badge[b-70q7k64e66] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--green-bg, #e6f4ef);
    color: var(--green, #2d7a5f);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.reset-success-badge svg[b-70q7k64e66] {
    width: 26px;
    height: 26px;
}

.reset-success-title[b-70q7k64e66] {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy, #0d2137);
    margin-bottom: 6px;
}

.reset-success-text[b-70q7k64e66] {
    margin-bottom: 14px;
}

.reset-success-pass[b-70q7k64e66] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 12px;
    border: 1px dashed var(--border, #dde4ea);
    border-radius: 8px;
    background: var(--bg, #f0f4f8);
}

.reset-success-pass-label[b-70q7k64e66] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted, #8faabf);
}

.reset-success-pass-value[b-70q7k64e66] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy, #0d2137);
    letter-spacing: 1px;
    /* Wraps instead of running past the dashed box. The generated password is ten characters and always fitted, but
       a password typed by hand can be any length, and the end of it disappearing is the one part that must not. */
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
}

/* ── Responsive hero (mobile/tablet <=768px). Desktop untouched. ── */
@media (max-width: 768px) {
    .vs-hero[b-70q7k64e66] { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 18px; padding: 16px 16px 18px; }
    .vs-hero-left[b-70q7k64e66] { flex: none; min-width: 0; gap: 14px; }
    .vs-hero-stats[b-70q7k64e66] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; width: 100%; flex: none; }
    .vs-hero-stat[b-70q7k64e66] { min-width: 0; padding: 0; text-align: left; }
    .vs-hero-divider[b-70q7k64e66] { display: none; }
    .vs-hero-icon[b-70q7k64e66] { display: none; }
    .vs-hero-sub2[b-70q7k64e66] { display: none; }
}


/* Confirmation-email sent notice (informational, not an error). */
.acct-notice[b-70q7k64e66] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
    border-radius: 9px;
    background: var(--green-bg);
    color: var(--green);
    font-size: 13px;
    font-weight: 500;
}

.acct-notice svg[b-70q7k64e66] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.vs-hero[b-70q7k64e66] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .vs-hero[b-70q7k64e66]::before,
    .vs-hero[b-70q7k64e66]::after {
        display: none;
    }

.vs-hero-icon[b-70q7k64e66] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .vs-hero-icon svg[b-70q7k64e66] {
        stroke: var(--navy) !important;
    }

.vs-hero-eyebrow[b-70q7k64e66] {
    color: var(--text-tertiary);
}

.vs-hero-title[b-70q7k64e66],
.vs-hero-val[b-70q7k64e66] {
    color: var(--navy);
}

.vs-hero-val[b-70q7k64e66] {
    font-variant-numeric: tabular-nums;
}

.vs-hero-sub[b-70q7k64e66],
.vs-hero-sub2[b-70q7k64e66] {
    color: var(--text-tertiary);
}

.vs-hero-key[b-70q7k64e66] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.vs-hero-divider[b-70q7k64e66] {
    background: var(--border);
}

.vs-hero-progress[b-70q7k64e66] {
    height: 3px;
    background: var(--surface-muted);
}

.vs-hero-progress-fill[b-70q7k64e66] {
    background: var(--accent);
}



/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.eemo-drawer-header[b-70q7k64e66] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.eemo-drawer-header-icon[b-70q7k64e66] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .eemo-drawer-header-icon svg[b-70q7k64e66] {
        stroke: var(--navy);
    }

.eemo-drawer-header-title[b-70q7k64e66] {
    color: var(--navy);
}

.eemo-drawer-header-sub[b-70q7k64e66] {
    color: var(--text-tertiary);
}

.eemo-drawer-header-close[b-70q7k64e66] {
    border-color: transparent;
    background: transparent;
}

    .eemo-drawer-header-close:hover[b-70q7k64e66] {
        border-color: transparent;
        background: var(--surface-hover);
    }

    .eemo-drawer-header-close svg[b-70q7k64e66] {
        stroke: var(--text-secondary);
    }

    .eemo-drawer-header-close:focus-visible[b-70q7k64e66] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
/* /Components/Pages/Menus/Arrears.razor.rz.scp.css */
/* Arrears workspace — V3. Panels, tables and the summary strip come from the v3- layer in app.css. */
.arr-page[b-gr3s3ttrff] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.arr-filters[b-gr3s3ttrff] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

.arr-search[b-gr3s3ttrff] {
    flex: 1 1 280px;
}

.arr-note[b-gr3s3ttrff] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.arr-note-disclosure[b-gr3s3ttrff] { margin-top: 12px; font-size: 0.8125rem; color: var(--text-secondary); }
.arr-note-disclosure summary[b-gr3s3ttrff] { cursor: pointer; width: fit-content; color: var(--accent); font-weight: 600; }
.arr-note-disclosure summary:focus-visible[b-gr3s3ttrff] { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.arr-note-disclosure .arr-note[b-gr3s3ttrff] { margin: 8px 0 0; }
.arr-scope-note[b-gr3s3ttrff] { margin: 0 20px 12px; }
/* /Components/Pages/Menus/AuditTrail.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Audit Trail — professional admin layout (scoped)
══════════════════════════════════════════════════════════════ */

/* The page opens with the shell's hero banner, like the Dashboard and Settings, so the audit record reads as
   part of the portal rather than a loose grid of coloured tiles. */
.content-area[b-njy4meyw9j] {
    padding-top: 14px;
}

/* ── Hero banner (same treatment as the other menu pages) ── */
.vs-hero[b-njy4meyw9j] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 24px 28px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    flex-wrap: wrap;
}

.vs-hero[b-njy4meyw9j]::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(200, 168, 75, .15) 0%, transparent 70%);
    pointer-events: none;
}

.vs-hero-left[b-njy4meyw9j] { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; min-width: 240px; }
.vs-hero-stats[b-njy4meyw9j] { flex: 1; display: flex; align-items: center; gap: 0; flex-wrap: wrap; }

.vs-hero-icon[b-njy4meyw9j] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200, 168, 75, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .vs-hero-icon svg[b-njy4meyw9j] {
        width: 26px;
        height: 26px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.vs-hero-eyebrow[b-njy4meyw9j] { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.vs-hero-title[b-njy4meyw9j] { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; }
.vs-hero-sub[b-njy4meyw9j] { font-size: 13px; color: rgba(255, 255, 255, .55); margin-top: 3px; max-width: 340px; }
.vs-hero-val[b-njy4meyw9j] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.1; }
.vs-hero-key[b-njy4meyw9j] { font-size: 11px; color: rgba(255, 255, 255, .5); margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }
.vs-hero-sub2[b-njy4meyw9j] { font-size: 11px; color: rgba(255, 255, 255, .35); margin-top: 1px; line-height: 1.2; }
.vs-hero-divider[b-njy4meyw9j] { width: 1px; height: 50px; background: rgba(255, 255, 255, .12); flex-shrink: 0; margin: 0 6px; }

/* Each count is also the action filter. It is a button, so it is styled as one — quietly: an underline and a
   brighter label when active, no colour coding. */
.audit-hero-stat[b-njy4meyw9j] {
    padding: 4px 18px;
    text-align: center;
    flex: 1;
    min-width: 132px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    cursor: pointer;
}

    .audit-hero-stat:first-child[b-njy4meyw9j] { padding-left: 0; }

    .audit-hero-stat:hover .vs-hero-key[b-njy4meyw9j] { color: rgba(255, 255, 255, .75); }

    .audit-hero-stat.is-active[b-njy4meyw9j] {
        border-bottom-color: var(--gold);
    }

        .audit-hero-stat.is-active .vs-hero-key[b-njy4meyw9j] { color: var(--accent); }

@media (max-width: 1100px) {
    .vs-hero-title[b-njy4meyw9j] { font-size: 18px; }
    .vs-hero-val[b-njy4meyw9j] { font-size: 18px; }
    .audit-hero-stat[b-njy4meyw9j] { padding: 4px 14px; }
}

@media (max-width: 900px) { .vs-hero[b-njy4meyw9j] { padding: 20px; gap: 16px; } }
@media (max-width: 600px) { .vs-hero[b-njy4meyw9j] { padding: 16px; gap: 12px; } .vs-hero-title[b-njy4meyw9j] { font-size: 16px; } }

/* ── Filter bar ── */
.audit-filters[b-njy4meyw9j] {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.af-field[b-njy4meyw9j] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.af-field > label[b-njy4meyw9j] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.af-search[b-njy4meyw9j] {
    flex: 1 1 0;
    min-width: 150px;
}

.af-search-box[b-njy4meyw9j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0 0.7rem;
    background: var(--bg);
    height: 40px;
}

.af-search-box svg[b-njy4meyw9j] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    flex-shrink: 0;
}

.af-search-box input[b-njy4meyw9j] {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 0.88rem;
    color: var(--text);
}

.af-input[b-njy4meyw9j] {
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0 0.7rem;
    background: var(--bg);
    font-size: 0.88rem;
    color: var(--text);
    outline: none;
    min-width: 120px;
}

.af-input:focus[b-njy4meyw9j],
.af-search-box:focus-within[b-njy4meyw9j] {
    border-color: var(--navy-3);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

/* A field whose control is the portal's own dropdown rather than a native select. */
.af-dd[b-njy4meyw9j] {
    min-width: 150px;
}

    .af-dd[b-njy4meyw9j]  .fh-dd-trigger {
        height: 40px;
        width: 100%;
    }

/* Native date pickers (only shown for a Custom range) — keep them on-brand. */
.af-input[type="date"][b-njy4meyw9j] {
    color-scheme: light;
    cursor: pointer;
    accent-color: var(--navy);
    min-width: 132px;
}
.af-input[type="date"][b-njy4meyw9j]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; }
.af-input[type="date"][b-njy4meyw9j]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Consistent, enhanced native selects (Period / Actor / Entity) with a custom navy chevron. */
select.af-input[b-njy4meyw9j] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2137' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 15px;
}

select.af-input[b-njy4meyw9j]::-ms-expand { display: none; }

.af-actions[b-njy4meyw9j] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.af-clear[b-njy4meyw9j] {
    height: 40px;
    padding: 0 0.95rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-card);
    color: var(--text-subtle);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.af-clear:hover[b-njy4meyw9j] {
    color: var(--red);
    border-color: var(--red);
}

.af-export[b-njy4meyw9j] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 40px;
    padding: 0 1.05rem;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.af-export:hover[b-njy4meyw9j] { background: var(--accent-hover); }
.af-export svg[b-njy4meyw9j] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.af-export.is-disabled[b-njy4meyw9j] { opacity: 0.5; pointer-events: none; }

/* ── Table ── */
.audit-panel[b-njy4meyw9j] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.audit-row[b-njy4meyw9j] {
    display: grid;
    grid-template-columns: 150px 1.5fr 120px 1.3fr 2fr;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.audit-row:last-child[b-njy4meyw9j] { border-bottom: none; }

.audit-row-head[b-njy4meyw9j] {
    background: var(--bg);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.audit-row-head > div[b-njy4meyw9j] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.audit-daygroup[b-njy4meyw9j] {
    background: #f6f9fc;
    padding: 0.5rem 1.25rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border);
}

.ac-time-main[b-njy4meyw9j] { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.ac-time-sub[b-njy4meyw9j] { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }

.ac-actor[b-njy4meyw9j] { display: flex; align-items: center; gap: 0.65rem; }

.ac-avatar[b-njy4meyw9j] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-icon);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.ac-avatar svg[b-njy4meyw9j] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--text-subtle);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ac-actor-name[b-njy4meyw9j] { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.ac-actor-role[b-njy4meyw9j] { font-size: 0.72rem; color: var(--text-muted); }

/* The action is stated, not colour-coded: on a government record the reader wants the fact, and three tinted
   pills per screen made the trail look like a status board. Deleted keeps a restrained red because it is the one
   action an auditor scans for. */
.ac-badge[b-njy4meyw9j] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--navy);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.ac-badge-deleted[b-njy4meyw9j] {
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
    color: var(--red);
}

.ac-entity-name[b-njy4meyw9j] { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.ac-entity-code[b-njy4meyw9j] { font-size: 0.72rem; color: var(--text-muted); font-family: 'DM Sans', monospace; }

/* Details carry the substance of the row, so they read at the same size as the actor's name — and wrap rather
   than truncate, because an auditor must see the whole sentence. */
.ac-details[b-njy4meyw9j] { min-width: 0; }

.ac-details-main[b-njy4meyw9j] {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text);
    overflow-wrap: break-word;
}

.ac-details-changes[b-njy4meyw9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 4px;
}

.ac-change[b-njy4meyw9j] {
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
}

/* ── Skeleton / empty / error ── */
.audit-skeleton .ac-actor[b-njy4meyw9j] { gap: 0.65rem; }

.audit-state[b-njy4meyw9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 3.5rem 1.5rem;
}

.audit-state svg[b-njy4meyw9j] {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 0.4rem;
}

.audit-state-title[b-njy4meyw9j] { font-size: 1rem; font-weight: 600; color: var(--text); }
.audit-state-sub[b-njy4meyw9j] { font-size: 0.85rem; color: var(--text-muted); max-width: 420px; }
.audit-state .af-clear[b-njy4meyw9j] { margin-top: 0.8rem; }

/* ── Footer / pagination ── */
.audit-foot[b-njy4meyw9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg);
}

.audit-foot-info[b-njy4meyw9j] { font-size: 0.82rem; color: var(--text-subtle); }

.audit-foot-pager[b-njy4meyw9j] { display: flex; align-items: center; gap: 1.25rem; }

.audit-pagesize[b-njy4meyw9j] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.audit-pagesize select[b-njy4meyw9j] {
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-card);
    padding: 0 1.7rem 0 0.55rem;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2137' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 13px;
}

.audit-pagesize select[b-njy4meyw9j]::-ms-expand { display: none; }

.audit-pages[b-njy4meyw9j] { display: flex; align-items: center; gap: 0.35rem; }

.pg-current[b-njy4meyw9j] { font-size: 0.82rem; color: var(--text-subtle); padding: 0 0.5rem; }

.pg-btn[b-njy4meyw9j] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.pg-btn:hover:not(:disabled)[b-njy4meyw9j] { border-color: var(--navy); background: var(--bg); }
.pg-btn:disabled[b-njy4meyw9j] { opacity: 0.4; cursor: not-allowed; }

/* ── Responsive ── */
@media (max-width: 1250px) {
    .audit-filters[b-njy4meyw9j] { flex-wrap: wrap; }
    .af-search[b-njy4meyw9j] { flex: 1 1 220px; }
}

@media (max-width: 1100px) {
    .af-dd[b-njy4meyw9j] { min-width: 140px; }
}

@media (max-width: 760px) {
    .audit-row[b-njy4meyw9j] { grid-template-columns: 1fr 1fr; row-gap: 0.5rem; }
    .audit-row-head[b-njy4meyw9j] { display: none; }
    .ac-details[b-njy4meyw9j] { grid-column: 1 / -1; }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.vs-hero[b-njy4meyw9j] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .vs-hero[b-njy4meyw9j]::before,
    .vs-hero[b-njy4meyw9j]::after {
        display: none;
    }

.vs-hero-icon[b-njy4meyw9j] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .vs-hero-icon svg[b-njy4meyw9j] {
        stroke: var(--navy) !important;
    }

.vs-hero-eyebrow[b-njy4meyw9j] {
    color: var(--text-tertiary);
}

.vs-hero-title[b-njy4meyw9j],
.vs-hero-val[b-njy4meyw9j] {
    color: var(--navy);
}

.vs-hero-val[b-njy4meyw9j] {
    font-variant-numeric: tabular-nums;
}

.vs-hero-sub[b-njy4meyw9j],
.vs-hero-sub2[b-njy4meyw9j] {
    color: var(--text-tertiary);
}

.vs-hero-key[b-njy4meyw9j] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.vs-hero-divider[b-njy4meyw9j] {
    background: var(--border);
}

.vs-hero-progress[b-njy4meyw9j] {
    height: 3px;
    background: var(--surface-muted);
}

.vs-hero-progress-fill[b-njy4meyw9j] {
    background: var(--accent);
}
/* /Components/Pages/Menus/Backups.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Backups — Head-only on-demand backups & downloads. Government-restrained:
   neutral white cards, navy headers, gold accent. Reuses the app design tokens.
   Scoped CSS, so the shared card/table/link primitives are declared here too.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cards (mirrors Settings) ── */
.set-card[b-8dnzahtnu3] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 16px;
    box-shadow: 0 1px 2px rgba(13, 33, 55, .04);
    margin-bottom: 18px;
}

.set-card-head[b-8dnzahtnu3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.set-card-icon[b-8dnzahtnu3] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-icon);
    color: var(--navy);
}
.set-card-icon svg[b-8dnzahtnu3] { width: 19px; height: 19px; }
.set-card-titles[b-8dnzahtnu3] { flex: 1; min-width: 0; }
.set-card-title[b-8dnzahtnu3] { font-size: 14.5px; font-weight: 800; color: var(--navy); }
.set-card-sub[b-8dnzahtnu3] { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Cross-link (mirrors Settings) */
.set-link[b-8dnzahtnu3] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--navy); text-decoration: none; background: none; border: none; cursor: pointer; }
.set-link:hover[b-8dnzahtnu3] { color: var(--accent); }
.set-link:disabled[b-8dnzahtnu3] { opacity: .5; cursor: not-allowed; }
.set-link-arrow[b-8dnzahtnu3] { transition: transform .14s ease; }
.set-link:hover .set-link-arrow[b-8dnzahtnu3] { transform: translateX(3px); }
.set-card-head .set-link[b-8dnzahtnu3] { flex-shrink: 0; margin-left: auto; }
.bk-refresh .set-link-arrow[b-8dnzahtnu3] { transition: transform .5s ease; }
.bk-refresh:hover:not(:disabled) .set-link-arrow[b-8dnzahtnu3] { transform: rotate(180deg); }

/* Retry button (mirrors Settings) */
.set-retry[b-8dnzahtnu3] {
    margin-top: 4px;
    font-size: 13px; font-weight: 650;
    color: #fff; background: var(--accent);
    border: none; border-radius: 9px;
    padding: 9px 18px; cursor: pointer;
    transition: background .14s ease;
}
.set-retry:hover[b-8dnzahtnu3] { background: var(--accent-hover); }

/* ── Info card grid ── */
.bk-info-grid[b-8dnzahtnu3] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bk-info[b-8dnzahtnu3] { background: var(--bg); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 10px; padding: 12px 14px; }
.bk-info-key[b-8dnzahtnu3] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 5px; }
.bk-info-val[b-8dnzahtnu3] { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.bk-info-val strong[b-8dnzahtnu3] { color: var(--navy); font-weight: 700; }
@media (max-width: 900px) { .bk-info-grid[b-8dnzahtnu3] { grid-template-columns: 1fr; } }

/* ── Action buttons ── */
.bk-actions[b-8dnzahtnu3] { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.bk-btn[b-8dnzahtnu3] {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 700;
    border-radius: 10px; padding: 11px 18px;
    cursor: pointer; border: 1px solid transparent;
    transition: filter .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.bk-btn svg[b-8dnzahtnu3] { width: 17px; height: 17px; }
.bk-btn:disabled[b-8dnzahtnu3] { opacity: .6; cursor: not-allowed; }
.bk-btn-primary[b-8dnzahtnu3] { background: var(--accent); color: #fff; }
.bk-btn-primary:hover:not(:disabled)[b-8dnzahtnu3] { background: var(--accent-hover); }
.bk-btn-ghost[b-8dnzahtnu3] { background: var(--bg-card); color: var(--navy); border-color: var(--border); }
.bk-btn-ghost:hover:not(:disabled)[b-8dnzahtnu3] { border-color: var(--accent); color: var(--accent); }
.bk-btn-danger[b-8dnzahtnu3] { background: var(--red); color: #fff; border-color: var(--red); }
.bk-btn-danger:hover:not(:disabled)[b-8dnzahtnu3] { background: #762f2f; border-color: #762f2f; }

/* Spinner */
.bk-spin[b-8dnzahtnu3] {
    width: 15px; height: 15px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bkSpin-b-8dnzahtnu3 .7s linear infinite;
}
.bk-spin-dark[b-8dnzahtnu3] { border: 2px solid var(--border); border-top-color: var(--navy); }
@keyframes bkSpin-b-8dnzahtnu3 { to { transform: rotate(360deg); } }

/* Inline alert */
.bk-alert[b-8dnzahtnu3] {
    margin-top: 14px;
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
    border-radius: 9px; padding: 10px 13px;
}
.bk-alert-ok[b-8dnzahtnu3] { background: var(--green-bg); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); }
.bk-alert-err[b-8dnzahtnu3] { background: var(--red-bg); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); }

/* ── Recent runs table (mirrors Settings .set-table) ── */
.set-table[b-8dnzahtnu3] { width: 100%; border-collapse: collapse; font-size: 13px; }
.set-table thead th[b-8dnzahtnu3] {
    text-align: left;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-subtle);
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.set-table th.set-th-r[b-8dnzahtnu3], .set-table td.set-td-r[b-8dnzahtnu3] { text-align: right; }
.set-table td[b-8dnzahtnu3] { padding: 11px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); color: var(--text); }
.set-table tbody tr:last-child td[b-8dnzahtnu3] { border-bottom: none; }
.set-table tbody tr:hover[b-8dnzahtnu3] { background: var(--bg); }
.bk-table td:first-child[b-8dnzahtnu3] { font-weight: 600; color: var(--navy); }

/* Status pills */
.bk-pill[b-8dnzahtnu3] { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; }
.bk-pill-ok[b-8dnzahtnu3] { background: var(--green-bg); color: var(--green); }
.bk-pill-err[b-8dnzahtnu3] { background: var(--red-bg); color: var(--red); }
.bk-pill-warn[b-8dnzahtnu3] { background: #fdf6e3; color: #9a7b1a; }

/* Empty / error states */
.bk-empty[b-8dnzahtnu3] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center; padding: 34px 20px;
}
.bk-empty-title[b-8dnzahtnu3] { font-size: 14px; font-weight: 800; color: var(--navy); }
.bk-empty-text[b-8dnzahtnu3] { font-size: 12.5px; color: var(--text-muted); max-width: 380px; line-height: 1.5; }

/* Skeleton rows */
.bk-rows[b-8dnzahtnu3] { display: flex; flex-direction: column; gap: 10px; }
.bk-run-sk[b-8dnzahtnu3] { display: flex; align-items: center; gap: 14px; padding: 6px 2px; }
.sk[b-8dnzahtnu3] {
    background: linear-gradient(90deg, var(--bg-icon) 25%, #eef3f8 37%, var(--bg-icon) 63%);
    background-size: 400% 100%;
    animation: bkSk-b-8dnzahtnu3 1.4s ease infinite;
    border-radius: 8px;
}
@keyframes bkSk-b-8dnzahtnu3 { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.bk-sk-pill[b-8dnzahtnu3] { width: 74px; height: 20px; border-radius: 999px; }
.bk-sk-line[b-8dnzahtnu3] { flex: 1; height: 12px; }
.bk-sk-short[b-8dnzahtnu3] { width: 90px; height: 12px; }

/* ── Restore info ── */
.bk-restore-text[b-8dnzahtnu3] { font-size: 13px; line-height: 1.6; color: var(--text); margin: 0 0 14px; }
.bk-restore-step[b-8dnzahtnu3] { margin-bottom: 14px; }
.bk-restore-step:last-child[b-8dnzahtnu3] { margin-bottom: 0; }
.bk-restore-step-title[b-8dnzahtnu3] { font-size: 12.5px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.bk-restore-step-text[b-8dnzahtnu3] { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-bottom: 8px; }
.bk-restore-step-text code[b-8dnzahtnu3] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--bg-icon); border-radius: 4px; padding: 1px 5px; color: var(--navy); }
.bk-code[b-8dnzahtnu3] {
    background: var(--accent);
    color: #e8eef5;
    border-radius: 10px;
    padding: 13px 15px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    margin: 0;
}
.bk-code code[b-8dnzahtnu3] { white-space: pre; }

/* ══ View log button (matches .set-link, table-aligned) ══ */
.bk-viewlog[b-8dnzahtnu3] { margin-left: auto; }

/* ══ Run pipeline modal ══ */
.bk-modal-overlay[b-8dnzahtnu3] {
    position: fixed;
    inset: 0;
    background: rgba(13, 33, 55, .48);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
    animation: bkFade-b-8dnzahtnu3 .14s ease;
}
@keyframes bkFade-b-8dnzahtnu3 { from { opacity: 0; } to { opacity: 1; } }

.bk-modal[b-8dnzahtnu3] {
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(13, 33, 55, .28);
    overflow: hidden;
    animation: bkPop-b-8dnzahtnu3 .16s ease;
}
@keyframes bkPop-b-8dnzahtnu3 { from { transform: translateY(8px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }

.bk-modal-head[b-8dnzahtnu3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.bk-modal-titles[b-8dnzahtnu3] { flex: 1; min-width: 0; }
.bk-modal-title[b-8dnzahtnu3] { font-size: 15px; font-weight: 800; color: var(--navy); }
.bk-modal-sub[b-8dnzahtnu3] { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.bk-modal-dot[b-8dnzahtnu3] { color: var(--border); }
.bk-modal-pill[b-8dnzahtnu3] { flex-shrink: 0; }
.bk-modal-close[b-8dnzahtnu3] {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 8px;
    color: var(--text-muted); cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.bk-modal-close:hover[b-8dnzahtnu3] { background: var(--bg-icon); color: var(--navy); }
.bk-modal-close svg[b-8dnzahtnu3] { width: 18px; height: 18px; }

.bk-modal-body[b-8dnzahtnu3] { padding: 18px; overflow-y: auto; }

/* ── Step timeline (the pipeline) ── */
.bk-steps[b-8dnzahtnu3] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bk-step[b-8dnzahtnu3] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    min-height: 34px;
}
/* Vertical rail connecting the dots */
.bk-step-rail[b-8dnzahtnu3] {
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
    transform: translateX(-50%);
    z-index: 0;
}
.bk-step:first-child .bk-step-rail[b-8dnzahtnu3] { top: 50%; }
.bk-step:last-child .bk-step-rail[b-8dnzahtnu3] { bottom: 50%; }

.bk-step-dot[b-8dnzahtnu3] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-icon);
    color: #fff;
    box-shadow: 0 0 0 3px var(--bg-card);
}
.bk-step-dot svg[b-8dnzahtnu3] { width: 13px; height: 13px; }
.bk-step-ok[b-8dnzahtnu3] { background: var(--green); }
.bk-step-err[b-8dnzahtnu3] { background: var(--red); }
.bk-step-neutral[b-8dnzahtnu3] { background: var(--text-muted); }
.bk-step-run[b-8dnzahtnu3] { background: #d6a516; animation: bkPulse-b-8dnzahtnu3 1.3s ease-in-out infinite; }
@keyframes bkPulse-b-8dnzahtnu3 { 0%, 100% { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 3px rgba(214, 165, 22, .35); } 50% { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 7px rgba(214, 165, 22, .12); } }

.bk-step-name[b-8dnzahtnu3] { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--navy); }
.bk-step-dur[b-8dnzahtnu3] { flex-shrink: 0; font-size: 11.5px; font-weight: 650; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Skeleton step rows */
.bk-step-sk[b-8dnzahtnu3] { pointer-events: none; }
.bk-step-dot-sk[b-8dnzahtnu3] { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg-card); position: relative; z-index: 1; }

/* ── Footer ── */
.bk-modal-foot[b-8dnzahtnu3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.bk-modal-github[b-8dnzahtnu3] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 650;
    color: var(--text-muted); text-decoration: none;
    transition: color .12s ease;
}
.bk-modal-github:hover[b-8dnzahtnu3] { color: var(--navy); }
.bk-modal-github .set-link-arrow[b-8dnzahtnu3] { transition: transform .14s ease; }
.bk-modal-github:hover .set-link-arrow[b-8dnzahtnu3] { transform: translateX(3px); }
.bk-modal-closebtn[b-8dnzahtnu3] { margin-left: auto; padding: 8px 16px; font-size: 12.5px; }



/* Live auto-refresh indicator (shown in the run modal while a run is queued/in progress) */
.bk-live[b-8dnzahtnu3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--gold, #c8a84b) 14%, transparent);
    border-radius: 999px;
}

.bk-live-dot[b-8dnzahtnu3] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold, #c8a84b);
    animation: bk-live-pulse-b-8dnzahtnu3 1.1s ease-in-out infinite;
}

@keyframes bk-live-pulse-b-8dnzahtnu3 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}

/* Restore-help icon button in the On-demand card header */
.bk-info-btn[b-8dnzahtnu3] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-subtle, #6a8aa0);
    background: var(--bg-icon, #eef2f6);
    border: 1px solid var(--border, #dde4ea);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bk-info-btn svg[b-8dnzahtnu3] { width: 16px; height: 16px; }
.bk-info-btn:hover[b-8dnzahtnu3] { color: var(--navy, #0d2137); border-color: var(--text-muted, #8faabf); background: #fff; }

/* Top-right toast notifications */
.bk-toast-wrap[b-8dnzahtnu3] {
    position: fixed;
    top: 76px;
    right: 24px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.bk-toast[b-8dnzahtnu3] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 360px;
    max-width: calc(100vw - 48px);
    padding: 13px 14px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #dde4ea);
    border-left: 4px solid var(--text-muted, #8faabf);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(13, 33, 55, .16);
    animation: bk-toast-in-b-8dnzahtnu3 .28s cubic-bezier(.16, 1, .3, 1);
}
.bk-toast-ok[b-8dnzahtnu3] { border-left-color: var(--green, #2d7a5f); }
.bk-toast-err[b-8dnzahtnu3] { border-left-color: var(--red, #8b3a3a); }
.bk-toast-ico[b-8dnzahtnu3] { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.bk-toast-ico svg[b-8dnzahtnu3] { width: 19px; height: 19px; }
.bk-toast-ok .bk-toast-ico[b-8dnzahtnu3] { color: var(--green, #2d7a5f); }
.bk-toast-err .bk-toast-ico[b-8dnzahtnu3] { color: var(--red, #8b3a3a); }
.bk-toast-msg[b-8dnzahtnu3] { flex: 1; font-size: 13.5px; line-height: 1.4; color: var(--text, #0d2137); font-weight: 500; }
.bk-toast-x[b-8dnzahtnu3] {
    flex-shrink: 0;
    display: inline-flex;
    padding: 2px;
    background: none;
    border: none;
    color: var(--text-muted, #8faabf);
    cursor: pointer;
    border-radius: 6px;
}
.bk-toast-x svg[b-8dnzahtnu3] { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; }
.bk-toast-x:hover[b-8dnzahtnu3] { color: var(--navy, #0d2137); background: var(--bg-icon, #eef2f6); }

@keyframes bk-toast-in-b-8dnzahtnu3 {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Danger zone — destructive restore. Clearly separated, red-bordered block.
   ══════════════════════════════════════════════════════════════════════════ */
.bk-danger[b-8dnzahtnu3] {
    background: var(--red-bg);
    border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
    border-radius: 14px;
    padding: 18px 20px 16px;
    margin-bottom: 18px;
}
.bk-danger-head[b-8dnzahtnu3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--red) 20%, transparent);
}
.bk-danger-icon[b-8dnzahtnu3] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--red) 14%, transparent);
    color: var(--red);
}
.bk-danger-icon svg[b-8dnzahtnu3] { width: 20px; height: 20px; }
.bk-danger-titles[b-8dnzahtnu3] { flex: 1; min-width: 0; }
.bk-danger-title[b-8dnzahtnu3] { font-size: 14.5px; font-weight: 800; color: var(--red); }
.bk-danger-sub[b-8dnzahtnu3] { font-size: 11.5px; color: color-mix(in srgb, var(--red) 75%, var(--text-muted)); margin-top: 2px; }
.bk-danger-body[b-8dnzahtnu3] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.bk-danger-copy[b-8dnzahtnu3] { flex: 1; min-width: 220px; }
.bk-danger-copy-title[b-8dnzahtnu3] { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.bk-danger-copy-text[b-8dnzahtnu3] { font-size: 12.5px; line-height: 1.55; color: var(--text); }
.bk-danger-copy-text strong[b-8dnzahtnu3] { color: var(--red); font-weight: 800; }
.bk-danger-body .bk-btn-danger[b-8dnzahtnu3] { flex-shrink: 0; }

/* Danger modal accent */
.bk-modal-danger[b-8dnzahtnu3] { border-top: 3px solid var(--red); }

/* Warning callout inside the restore modal */
.bk-warn[b-8dnzahtnu3] {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--red-bg);
    border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.bk-warn svg[b-8dnzahtnu3] { width: 20px; height: 20px; flex-shrink: 0; color: var(--red); margin-top: 1px; }
.bk-warn-text[b-8dnzahtnu3] { font-size: 12.5px; line-height: 1.55; color: var(--text); }
.bk-warn-text strong[b-8dnzahtnu3] { color: var(--red); font-weight: 800; }

/* Form fields (phrase + password) */
.bk-field[b-8dnzahtnu3] { margin-bottom: 14px; }
.bk-field:last-child[b-8dnzahtnu3] { margin-bottom: 0; }
.bk-label[b-8dnzahtnu3] { display: block; font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.bk-label code[b-8dnzahtnu3] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    background: var(--bg-icon);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--red);
    font-weight: 800;
}
.bk-input[b-8dnzahtnu3] {
    width: 100%;
    box-sizing: border-box;
    font-size: 13.5px;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 10px 12px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.bk-input[b-8dnzahtnu3]::placeholder { color: var(--text-muted); }
.bk-input:focus[b-8dnzahtnu3] {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 15%, transparent);
}
.bk-input:disabled[b-8dnzahtnu3] { opacity: .6; cursor: not-allowed; }
.bk-modal-danger .bk-alert[b-8dnzahtnu3] { margin-top: 14px; }


/* Per-municipality restore form (own LGU) */
.bk-mine-restore[b-8dnzahtnu3] { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.bk-mine-form[b-8dnzahtnu3] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.bk-field[b-8dnzahtnu3] { display: flex; flex-direction: column; gap: 7px; }
.bk-mine-actions[b-8dnzahtnu3] { display: flex; gap: 10px; align-items: center; margin-top: 2px; }

/* Professional file picker (hides the native input, keeps it accessible) */
.bk-filepick[b-8dnzahtnu3] {
    display: flex; align-items: center; gap: 12px;
    border: 1px dashed color-mix(in srgb, var(--navy) 32%, var(--border));
    border-radius: 10px; padding: 11px 14px; background: var(--bg); cursor: pointer;
    transition: border-color .12s, background .12s;
}
.bk-filepick:hover[b-8dnzahtnu3] { border-color: var(--navy); background: #f7fafc; }
.bk-filepick input[type=file][b-8dnzahtnu3] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.bk-filepick-ico[b-8dnzahtnu3] { display: inline-flex; flex: 0 0 auto; color: var(--navy); }
.bk-filepick-ico svg[b-8dnzahtnu3] { width: 20px; height: 20px; }
.bk-filepick-text[b-8dnzahtnu3] { flex: 1 1 auto; font-size: 13px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-filepick.has-file .bk-filepick-text[b-8dnzahtnu3] { color: var(--text); font-weight: 650; }
.bk-filepick-btn[b-8dnzahtnu3] { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--navy); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; background: var(--bg-card); }
.bk-filepick:hover .bk-filepick-btn[b-8dnzahtnu3] { border-color: var(--navy); }


/* Recent-backups row actions — compact icon buttons (View / Download / Restore) */
.bk-actions-row[b-8dnzahtnu3] {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.bk-action[b-8dnzahtnu3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.bk-action svg[b-8dnzahtnu3] {
    width: 14px;
    height: 14px;
}

.bk-action:hover:not(:disabled)[b-8dnzahtnu3] {
    background: var(--bg-icon);
    border-color: var(--gold-light);
    box-shadow: 0 1px 3px rgba(13, 33, 55, .08);
}

.bk-action:disabled[b-8dnzahtnu3] {
    opacity: .5;
    cursor: not-allowed;
}

.bk-action-danger[b-8dnzahtnu3] {
    color: var(--red);
}

.bk-action-danger:hover:not(:disabled)[b-8dnzahtnu3] {
    background: var(--red-bg);
    border-color: var(--red);
    color: #6f2b2b;
}

/* Backup contents (manifest) modal */
.bk-modal-wide[b-8dnzahtnu3] {
    max-width: 620px;
    width: 92%;
}

.bk-contents-summary[b-8dnzahtnu3] {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.bk-contents-stat[b-8dnzahtnu3] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-icon);
}

.bk-contents-num[b-8dnzahtnu3] {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.bk-contents-lbl[b-8dnzahtnu3] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.bk-contents-note[b-8dnzahtnu3] {
    font-size: 12.5px;
    color: var(--text-subtle);
    margin-bottom: 10px;
}

.bk-contents-table[b-8dnzahtnu3] {
    margin-top: 0;
}

.bk-contents-table tbody tr.bk-contents-empty td[b-8dnzahtnu3] {
    color: var(--text-muted);
}

/* Restore-history compact text */
.bk-muted[b-8dnzahtnu3] {
    color: var(--text-muted);
    font-size: 12.5px;
}

/* Clickable manifest rows → drill into a table's records */
.bk-rowlink[b-8dnzahtnu3] {
    cursor: pointer;
    transition: background .12s ease;
}

.bk-rowlink:hover[b-8dnzahtnu3] {
    background: var(--bg-icon);
}

.bk-view-rows[b-8dnzahtnu3] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

/* Back link inside the drill-in view */
.bk-back[b-8dnzahtnu3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 6px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.bk-back:hover[b-8dnzahtnu3] {
    background: var(--bg-icon);
    border-color: var(--gold-light);
}

.bk-back svg[b-8dnzahtnu3] {
    width: 15px;
    height: 15px;
}

.bk-rows-title[b-8dnzahtnu3] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
}

/* Horizontally + vertically scrollable record grid */
.bk-grid-scroll[b-8dnzahtnu3] {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.bk-grid[b-8dnzahtnu3] {
    margin: 0;
    font-size: 12px;
    white-space: nowrap;
}

.bk-grid thead th[b-8dnzahtnu3] {
    position: sticky;
    top: 0;
    background: var(--bg-icon);
    z-index: 1;
    font-size: 11px;
    letter-spacing: .02em;
}

.bk-grid td[b-8dnzahtnu3] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Recent-restores two-line cell */
.bk-restore-cell[b-8dnzahtnu3] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bk-restore-main[b-8dnzahtnu3] {
    font-weight: 600;
    color: var(--text);
}

.bk-restore-sub[b-8dnzahtnu3] {
    font-size: 11.5px;
    color: var(--text-subtle);
}
/* /Components/Pages/Menus/Collector.razor.rz.scp.css */
/* ══════════════════════════════════════════
   COLLECTORS PAGE — Toolbar
══════════════════════════════════════════ */
.page-toolbar[b-u56kd2qwhh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* "Collector app link" toolbar button — constrain the icon (global .btn-ghost has no svg rule). */
.btn-app-link[b-u56kd2qwhh] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

    .btn-app-link svg[b-u56kd2qwhh] {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

/* ── Collector App (bind link) modal — navy header, consistent with the confirm modal ── */
.applink-modal[b-u56kd2qwhh] {
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
}

    .applink-modal .eemo-modal-header[b-u56kd2qwhh] {
        background: var(--navy);
        margin: 0;
        padding: 16px 20px;
        border-bottom: none;
        align-items: flex-start;
    }

    .applink-modal .eemo-modal-title[b-u56kd2qwhh] {
        color: #fff;
    }

    .applink-modal .eemo-modal-sub[b-u56kd2qwhh] {
        color: rgba(255, 255, 255, 0.72);
    }

    .applink-modal .eemo-modal-close[b-u56kd2qwhh] {
        color: var(--accent);
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

        .applink-modal .eemo-modal-close:hover[b-u56kd2qwhh] {
            background: rgba(255, 255, 255, 0.18);
        }

    .applink-modal .eemo-modal-body[b-u56kd2qwhh] {
        padding: 20px;
    }

    .applink-modal .eemo-modal-footer[b-u56kd2qwhh] {
        padding: 14px 20px;
        margin: 0;
        border-top: 1px solid var(--border);
        background: var(--bg);
    }

/* Link + Copy row: the link fills the row (no truncation), Copy stays fixed. */
.applink-row[b-u56kd2qwhh] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.applink-input[b-u56kd2qwhh] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    text-overflow: ellipsis;
}

.applink-copy[b-u56kd2qwhh] {
    flex-shrink: 0;
    white-space: nowrap;
}

.toolbar-left[b-u56kd2qwhh] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.search-box[b-u56kd2qwhh] {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    height: 38px;
    min-width: 260px;
    transition: border-color 0.15s;
}

    .search-box:focus-within[b-u56kd2qwhh] {
        border-color: var(--accent);
    }

    .search-box svg[b-u56kd2qwhh] {
        width: 15px;
        height: 15px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .search-box input[b-u56kd2qwhh] {
        flex: 1;
        border: none;
        outline: none;
        font-family: 'DM Sans', sans-serif;
        font-size: 12.5px;
        color: var(--text);
        background: transparent;
    }

        .search-box input[b-u56kd2qwhh]::placeholder {
            color: var(--text-muted);
        }

.search-clear[b-u56kd2qwhh] {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.filter-tabs[b-u56kd2qwhh] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.filter-tab[b-u56kd2qwhh] {
    min-height: 32px;
    min-width: 80px;
    padding: 6px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

    .filter-tab:hover[b-u56kd2qwhh] {
        background: rgba(255, 255, 255, .72);
        border-color: color-mix(in srgb, var(--border) 72%, transparent);
        color: var(--navy);
    }

    .filter-tab.active[b-u56kd2qwhh] {
        background: var(--accent);
        border-color: color-mix(in srgb, var(--navy) 76%, #fff);
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 13px rgba(9, 31, 52, .14);
    }

/* ══════════════════════════════════════════
   COLLECTORS TABLE CELLS
══════════════════════════════════════════ */
.row-inactive td[b-u56kd2qwhh] {
    opacity: 0.55;
}

.data-table th[b-u56kd2qwhh] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td[b-u56kd2qwhh] {
    font-size: 11.5px;
}

.collector-cell[b-u56kd2qwhh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.collector-avatar[b-u56kd2qwhh] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.collector-name[b-u56kd2qwhh] {
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}

.collector-email[b-u56kd2qwhh] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.facility-tags[b-u56kd2qwhh] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.facility-tags span[b-u56kd2qwhh] {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-icon);
    color: var(--navy);
    font-weight: 500;
}

.collector-loading-table[b-u56kd2qwhh] {
    overflow-x: auto;
}

.collector-loading-table .data-table tbody tr:hover[b-u56kd2qwhh] {
    background: transparent;
}

.collector-loading-name[b-u56kd2qwhh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* ══════════════════════════════════════════
   ACTION BUTTONS
══════════════════════════════════════════ */
/* Three figures rather than four: collected, already remitted, and what the collector still holds. */
.activity-stats-3[b-u56kd2qwhh] {
    grid-template-columns: repeat(3, 1fr);
}

/* The actions column hugs its buttons. As the last column it otherwise absorbed every pixel the data columns did not
   need, leaving a broad empty strip inside the table with the row's controls stranded on the left of it. */
.data-table th:last-child[b-u56kd2qwhh],
.data-table td:last-child[b-u56kd2qwhh] {
    width: 1%;
    white-space: nowrap;
}

.action-btns[b-u56kd2qwhh] {
    display: flex;
    gap: 4px;
}

.action-btn[b-u56kd2qwhh] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

    .action-btn:hover[b-u56kd2qwhh] {
        background: var(--border);
    }

    .action-btn svg[b-u56kd2qwhh] {
        width: 13px;
        height: 13px;
        stroke: var(--text-subtle);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.action-danger[b-u56kd2qwhh] {
    border-color: rgba(139,58,58,0.2);
    background: var(--red-bg);
}

    .action-danger svg[b-u56kd2qwhh] {
        stroke: var(--red);
    }

    .action-danger:hover[b-u56kd2qwhh] {
        background: #f5c6c6;
    }

.action-success[b-u56kd2qwhh] {
    border-color: rgba(45,122,95,0.2);
    background: var(--green-bg);
}

    .action-success svg[b-u56kd2qwhh] {
        stroke: var(--green);
    }

/* ══════════════════════════════════════════
   FACILITY CHECKBOXES (Add/Edit modal)
══════════════════════════════════════════ */
.facility-checkboxes[b-u56kd2qwhh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fac-checkbox[b-u56kd2qwhh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    transition: all 0.15s;
}

    .fac-checkbox:hover[b-u56kd2qwhh] {
        border-color: var(--accent);
        background: rgba(200,168,75,0.05);
    }

    .fac-checkbox.checked[b-u56kd2qwhh] {
        border-color: var(--accent);
        background: rgba(200,168,75,0.08);
    }

.fac-check-box[b-u56kd2qwhh] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.fac-checkbox.checked .fac-check-box[b-u56kd2qwhh] {
    background: var(--green);
    border-color: var(--green);
}

.fac-check-box svg[b-u56kd2qwhh] {
    width: 11px;
    height: 11px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fac-check-name[b-u56kd2qwhh] {
    font-size: 13px;
    color: var(--navy);
    font-weight: 500;
    flex: 1;
}

/* ══════════════════════════════════════════
   ACTIVITY MODAL
══════════════════════════════════════════ */
.activity-stats[b-u56kd2qwhh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.act-stat[b-u56kd2qwhh] {
    background: var(--bg);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.act-stat-val[b-u56kd2qwhh] {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

.act-stat-key[b-u56kd2qwhh] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.act-section-label[b-u56kd2qwhh] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.confirm-text[b-u56kd2qwhh] {
    font-size: 13.5px;
    color: var(--text-subtle);
    line-height: 1.6;
}

/* ══════════════════════════════════════════
   COLLECTOR HERO BANNER (vs-hero)
══════════════════════════════════════════ */
.vs-hero[b-u56kd2qwhh] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 24px 28px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    flex-wrap: wrap;
}

    .vs-hero[b-u56kd2qwhh]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(200,168,75,.15) 0%, transparent 70%);
        pointer-events: none;
    }

.vs-hero-left[b-u56kd2qwhh] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
    min-width: 240px;
}

.vs-hero-stats[b-u56kd2qwhh] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.vs-hero-icon[b-u56kd2qwhh] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .vs-hero-icon svg[b-u56kd2qwhh] {
        width: 26px;
        height: 26px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.vs-hero-eyebrow[b-u56kd2qwhh] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.vs-hero-title[b-u56kd2qwhh] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.vs-hero-sub[b-u56kd2qwhh] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.vs-hero-stat[b-u56kd2qwhh] {
    padding: 0 18px;
    text-align: center;
    flex: 1;
    min-width: 140px;
}

    .vs-hero-stat:first-child[b-u56kd2qwhh] {
        padding-left: 0;
    }

.vs-hero-val[b-u56kd2qwhh] {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.vs-hero-key[b-u56kd2qwhh] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.2;
}

.vs-hero-sub2[b-u56kd2qwhh] {
    font-size: 11px;
    color: rgba(255,255,255,.35);
    margin-top: 1px;
    line-height: 1.2;
}

.vs-hero-divider[b-u56kd2qwhh] {
    width: 1px;
    height: 50px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
    margin: 0 6px;
}

.vs-hero-progress[b-u56kd2qwhh] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.vs-hero-progress-fill[b-u56kd2qwhh] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width .5s ease;
}

@media (max-width: 1100px) {
    .vs-hero-title[b-u56kd2qwhh] {
        font-size: 18px;
    }

    .vs-hero-val[b-u56kd2qwhh] {
        font-size: 18px;
    }

    .vs-hero-stat[b-u56kd2qwhh] {
        padding: 0 14px;
    }
}

@media (max-width: 900px) {
    .vs-hero[b-u56kd2qwhh] {
        padding: 20px;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .vs-hero[b-u56kd2qwhh] {
        padding: 16px;
        gap: 12px;
    }

    .vs-hero-title[b-u56kd2qwhh] {
        font-size: 16px;
    }
}

/* ══════════════════════════════════════════
   RIGHT-SIDE DRAWER STYLES
══════════════════════════════════════════ */

.eemo-drawer-overlay[b-u56kd2qwhh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 33, 55, 0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.eemo-drawer-overlay.show[b-u56kd2qwhh] {
    opacity: 1;
    visibility: visible;
}

.eemo-drawer[b-u56kd2qwhh] {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 600px;
    max-width: 90vw;
    background: var(--bg-card);
    box-shadow: -4px 0 24px rgba(13, 33, 55, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
}

.eemo-drawer-right[b-u56kd2qwhh] {
    right: 0;
}

.eemo-drawer.show[b-u56kd2qwhh] {
    transform: translateX(0);
}

.eemo-drawer-footer[b-u56kd2qwhh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

/* Override modal body to allow scrolling in drawer */
[b-u56kd2qwhh] .eemo-drawer .eemo-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

@media (max-width: 768px) {
    .eemo-drawer[b-u56kd2qwhh] {
        width: 100vw;
        max-width: 100vw;
    }


/* ── Password field show/hide toggle (add/edit collector modal) ── */
.pw-field[b-u56kd2qwhh] {
    position: relative;
}

    .pw-field .form-input[b-u56kd2qwhh] {
        width: 100%;
        padding-right: 40px;
    }

.pw-eye[b-u56kd2qwhh] {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s;
}

    .pw-eye:hover[b-u56kd2qwhh] {
        color: var(--navy);
    }

    .pw-eye svg[b-u56kd2qwhh] {
        width: 17px;
        height: 17px;
    }

}

/* ══════════════════════════════════════════
   DRAWER HEADER STYLES (Navy Gradient)
══════════════════════════════════════════ */

.eemo-drawer-header[b-u56kd2qwhh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom: 1px solid rgba(200, 168, 75, 0.2);
    flex-shrink: 0;
}

.eemo-drawer-header-left[b-u56kd2qwhh] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.eemo-drawer-header-icon[b-u56kd2qwhh] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(200, 168, 75, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eemo-drawer-header-icon svg[b-u56kd2qwhh] {
    width: 20px;
    height: 20px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eemo-drawer-header-title[b-u56kd2qwhh] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.eemo-drawer-header-sub[b-u56kd2qwhh] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.eemo-drawer-header-close[b-u56kd2qwhh] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.eemo-drawer-header-close:hover[b-u56kd2qwhh] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.eemo-drawer-header-close svg[b-u56kd2qwhh] {
    width: 14px;
    height: 14px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ══════════════════════════════════════════
   FORM HINT
══════════════════════════════════════════ */
.form-hint[b-u56kd2qwhh] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Responsive hero (mobile/tablet <=768px). Desktop untouched. ── */
@media (max-width: 768px) {
    .vs-hero[b-u56kd2qwhh] { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 18px; padding: 16px 16px 18px; }
    .vs-hero-left[b-u56kd2qwhh] { flex: none; min-width: 0; gap: 14px; }
    .vs-hero-stats[b-u56kd2qwhh] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; width: 100%; flex: none; }
    .vs-hero-stat[b-u56kd2qwhh] { min-width: 0; padding: 0; text-align: left; }
    .vs-hero-divider[b-u56kd2qwhh] { display: none; }
    .vs-hero-icon[b-u56kd2qwhh] { display: none; }
    .vs-hero-sub2[b-u56kd2qwhh] { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   COLLECTOR APP MODAL — header mark, field hints, QR blocks
   Appended as its own block: the modal's existing navy header and link row are untouched above, so this
   only adds the mark, the per-field guidance and the scan panels.
   ══════════════════════════════════════════════════════════════ */

.applink-head[b-u56kd2qwhh] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.applink-head-icon[b-u56kd2qwhh] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    /* Gold, matching the close button and the hero accents across the portal. */
    color: var(--accent);
}

.applink-head-icon svg[b-u56kd2qwhh] { width: 22px; height: 22px; }

.applink-head-text[b-u56kd2qwhh] { min-width: 0; flex: 1; }

.applink-field + .applink-field[b-u56kd2qwhh] { margin-top: 4px; }

.applink-label[b-u56kd2qwhh] {
    display: block;
    margin-bottom: 7px;
    color: var(--text-subtle);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.applink-hint[b-u56kd2qwhh] {
    margin: 7px 0 0;
    color: var(--text-subtle);
    font-size: 12px;
    line-height: 1.5;
}

.applink-copy svg[b-u56kd2qwhh],
.applink-rotate svg[b-u56kd2qwhh] {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    vertical-align: -3px;
}

.applink-divider[b-u56kd2qwhh] {
    height: 1px;
    margin: 18px 0;
    background: var(--border);
}

/* Scan panel: the QR beside a short instruction, on a quiet surface so it reads as guidance, not decoration. */
.applink-qr[b-u56kd2qwhh] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg);
}

.applink-qr-img[b-u56kd2qwhh] {
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 5px;
    /* A QR must stay pixel-crisp; smoothing softens the modules and can defeat a scan. */
    image-rendering: pixelated;
}

.applink-qr-sm .applink-qr-img[b-u56kd2qwhh] { width: 76px; height: 76px; }

.applink-qr-text[b-u56kd2qwhh] { min-width: 0; }

.applink-qr-title[b-u56kd2qwhh] {
    margin-bottom: 2px;
    color: var(--navy);
    font-size: 13.5px;
    font-weight: 700;
}

.applink-qr-text .applink-hint[b-u56kd2qwhh] { margin-top: 0; }

@media (max-width: 560px) {
    .applink-qr[b-u56kd2qwhh] { flex-direction: column; align-items: flex-start; }
}

/* ── Assigned facilities: two columns with the facility's own mark ────────────────────────────────────
   Eight facilities in a single column ran past the dialog's height and pushed Cancel / Create Account off
   the sheet. Two columns keep the whole assignment visible without scrolling. */
.facility-checkboxes[b-u56kd2qwhh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.fac-check-mark[b-u56kd2qwhh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--navy);
}

/* The name may be long ("Tampak Commercial Center") — it truncates rather than wrapping the row. */
.fac-check-name[b-u56kd2qwhh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .facility-checkboxes[b-u56kd2qwhh] { grid-template-columns: 1fr; }
}

/* A hint under a label, matching the tone used elsewhere in the dialogs. */
.form-hint[b-u56kd2qwhh] {
    margin: -2px 0 8px;
    font-size: 11.5px;
    color: var(--text-subtle);
}

/* The password sits beside the username, so it must be exactly as wide: the eye button is positioned over
   the field rather than taking part in the row's layout.

   position AND the input's width belong here, at the top level. They existed only inside the 768px media query, so on a
   desktop the field fell back to an input's intrinsic ~20 characters - visibly narrower than the username beside it - and
   the absolutely positioned eye had no positioned ancestor to sit against, so it was not over the field at all. */
.pw-field[b-u56kd2qwhh] {
    display: block;
    width: 100%;
    position: relative;
}

    .pw-field .form-input[b-u56kd2qwhh] {
        width: 100%;
        padding-right: 40px;
        box-sizing: border-box;
    }


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.vs-hero[b-u56kd2qwhh] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .vs-hero[b-u56kd2qwhh]::before,
    .vs-hero[b-u56kd2qwhh]::after {
        display: none;
    }

.vs-hero-icon[b-u56kd2qwhh] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .vs-hero-icon svg[b-u56kd2qwhh] {
        stroke: var(--navy) !important;
    }

.vs-hero-eyebrow[b-u56kd2qwhh] {
    color: var(--text-tertiary);
}

.vs-hero-title[b-u56kd2qwhh],
.vs-hero-val[b-u56kd2qwhh] {
    color: var(--navy);
}

.vs-hero-val[b-u56kd2qwhh] {
    font-variant-numeric: tabular-nums;
}

.vs-hero-sub[b-u56kd2qwhh],
.vs-hero-sub2[b-u56kd2qwhh] {
    color: var(--text-tertiary);
}

.vs-hero-key[b-u56kd2qwhh] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.vs-hero-divider[b-u56kd2qwhh] {
    background: var(--border);
}

.vs-hero-progress[b-u56kd2qwhh] {
    height: 3px;
    background: var(--surface-muted);
}

.vs-hero-progress-fill[b-u56kd2qwhh] {
    background: var(--accent);
}



/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.eemo-drawer-header[b-u56kd2qwhh] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.eemo-drawer-header-icon[b-u56kd2qwhh] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .eemo-drawer-header-icon svg[b-u56kd2qwhh] {
        stroke: var(--navy);
    }

.eemo-drawer-header-title[b-u56kd2qwhh] {
    color: var(--navy);
}

.eemo-drawer-header-sub[b-u56kd2qwhh] {
    color: var(--text-tertiary);
}

.eemo-drawer-header-close[b-u56kd2qwhh] {
    border-color: transparent;
    background: transparent;
}

    .eemo-drawer-header-close:hover[b-u56kd2qwhh] {
        border-color: transparent;
        background: var(--surface-hover);
    }

    .eemo-drawer-header-close svg[b-u56kd2qwhh] {
        stroke: var(--text-secondary);
    }

    .eemo-drawer-header-close:focus-visible[b-u56kd2qwhh] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.applink-modal .eemo-modal-header[b-u56kd2qwhh] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--navy);
}

.applink-modal .eemo-modal-title[b-u56kd2qwhh] {
    color: var(--navy);
}

.applink-modal .eemo-modal-sub[b-u56kd2qwhh] {
    color: var(--text-tertiary);
}

/* Operation assignments: a separate group from facilities (an operation is not a facility). */
.op-group[b-u56kd2qwhh] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.op-group legend[b-u56kd2qwhh] {
    padding: 0;
}

.op-input[b-u56kd2qwhh] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.fac-checkbox:has(.op-input:focus-visible)[b-u56kd2qwhh] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.op-unavailable[b-u56kd2qwhh] {
    color: var(--text-secondary);
}

.facility-tags .no-facility[b-u56kd2qwhh] {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-tertiary);
    font-weight: 500;
}
/* /Components/Pages/Menus/ElectricityConsumptionFees.razor.rz.scp.css */
/* ECF workspace — V3. Panels, tables, buttons, fields and notices come from the shared v3- layer in app.css;
   this file holds only the ECF-specific layout. */

/* Period and instrument sit on the hero's subtitle line; the actions are one quiet group on the right beneath it. */
.ecf-hero-meta[b-08ufb4nen0] { display: inline-flex; align-items: center; gap: 10px; }

/* Both columns share one height, so the Current collection panel lines up with the Obligations register. */
.ecf-layout[b-08ufb4nen0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    align-items: stretch;
    gap: 20px;
}

.ecf-meter[b-08ufb4nen0] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ecf-action[b-08ufb4nen0] {
    text-align: right;
    white-space: nowrap;
}

/* ── Current collection side panel ── */
.ecf-collection[b-08ufb4nen0] {
    display: flex;
    flex-direction: column;
}

.ecf-collection-empty[b-08ufb4nen0] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 12rem;
    background: var(--surface-muted);
    border-radius: 0 0 10px 10px;
}

.ecf-collection-empty strong[b-08ufb4nen0] {
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
}

.ecf-collection-empty p[b-08ufb4nen0] {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.ecf-collection-body[b-08ufb4nen0] {
    display: grid;
    gap: 16px;
}

.ecf-refresh[b-08ufb4nen0] {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.ecf-lines[b-08ufb4nen0] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

.ecf-line-head[b-08ufb4nen0] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.ecf-line-amount[b-08ufb4nen0] {
    font-variant-numeric: tabular-nums;
}

.ecf-total[b-08ufb4nen0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.ecf-total span[b-08ufb4nen0] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
}

.ecf-total strong[b-08ufb4nen0] {
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ecf-footnote[b-08ufb4nen0] {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .ecf-layout[b-08ufb4nen0] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ecf-collection-empty[b-08ufb4nen0] {
        min-height: 0;
    }
}

/* Official Receipt: the next assigned receipt is the normal path; choosing another is a secondary recovery action. */

/* The Obligations header carries one aligned control group (search, area, and the ECF pages); it wraps deliberately when the panel is narrow. */
.ecf-panel-header[b-08ufb4nen0] { flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.ecf-panel-title[b-08ufb4nen0] { display: flex; flex-direction: column; gap: 2px; min-width: 9rem; }
.ecf-controls[b-08ufb4nen0] { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.ecf-controls .v3-search[b-08ufb4nen0] { flex: 1 1 13rem; min-width: 10rem; }
.ecf-controls .v3-select[b-08ufb4nen0] { flex: 0 0 auto; min-width: 8rem; }
.ecf-controls .v3-btn-group[b-08ufb4nen0] { flex: 0 0 auto; }

@media (max-width: 720px) {
    .ecf-controls[b-08ufb4nen0] { flex-wrap: wrap; }
    .ecf-controls .v3-search[b-08ufb4nen0] { flex: 1 1 100%; }
}
/* /Components/Pages/Menus/Facilities/BBQ.razor.rz.scp.css */
/* ============================================================
   BBQ.razor.css  —  BBQ Stand page-scoped styles
   Blazor CSS isolation: only applies to BBQ.razor
   Use --* tokens from app.css; do NOT redefine them here.
   ============================================================ */


/* ── Back Button ─────────────────────────────────────────── */
.bbq-back-btn[b-2iegweyxyq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

.bbq-back-btn:hover[b-2iegweyxyq] {
    background: var(--bg-icon);
    color: var(--navy);
    border-color: var(--navy);
}

.bbq-back-btn svg[b-2iegweyxyq] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ── Hero Banner ─────────────────────────────────────────── */
.bbq-hero[b-2iegweyxyq] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 28px 32px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    flex-wrap: wrap;
}

.bbq-hero[b-2iegweyxyq]::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
    pointer-events: none;
}

.bbq-hero-left[b-2iegweyxyq] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 260px;
}

.bbq-hero-icon[b-2iegweyxyq] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bbq-hero-icon svg[b-2iegweyxyq] {
    width: 26px;
    height: 26px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bbq-hero-eyebrow[b-2iegweyxyq] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.bbq-hero-title[b-2iegweyxyq] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.bbq-hero-sub[b-2iegweyxyq] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.bbq-hero-stats[b-2iegweyxyq] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.bbq-hero-stat[b-2iegweyxyq] {
    padding: 0 24px;
    text-align: center;
}

.bbq-hero-stat:first-child[b-2iegweyxyq] {
    padding-left: 0;
}

.bbq-hero-val[b-2iegweyxyq] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.bbq-hero-key[b-2iegweyxyq] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bbq-hero-divider[b-2iegweyxyq] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.bbq-hero-progress[b-2iegweyxyq] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.bbq-hero-progress-fill[b-2iegweyxyq] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width .5s ease;
}


/* ── Toolbar ─────────────────────────────────────────────── */
.page-toolbar[b-2iegweyxyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar-left[b-2iegweyxyq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-outline[b-2iegweyxyq] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}

.btn-outline:hover[b-2iegweyxyq] {
    border-color: var(--gold);
    background: #fffbf0;
}


/* ── Facility Info Bar ───────────────────────────────────── */
.bbq-facility-info[b-2iegweyxyq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}

.bbq-facility-info-left[b-2iegweyxyq] {
    flex: 1 1 300px;
}

.bbq-facility-label[b-2iegweyxyq] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.bbq-facility-desc[b-2iegweyxyq] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

.fee-chips[b-2iegweyxyq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.fee-chip[b-2iegweyxyq] {
    display: inline-block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.bbq-facility-mini-stats[b-2iegweyxyq] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 1 auto;
}

.bbq-mini-stat[b-2iegweyxyq] {
    text-align: center;
    padding: 6px 12px;
}

.bbq-mini-val[b-2iegweyxyq] {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.bbq-mini-key[b-2iegweyxyq] {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.bbq-mini-stat.paid-stat .bbq-mini-val[b-2iegweyxyq] {
    color: var(--green);
}

.bbq-mini-stat.unpaid-stat .bbq-mini-val[b-2iegweyxyq] {
    color: var(--red);
}

.bbq-mini-stat.partial-stat .bbq-mini-val[b-2iegweyxyq] {
    color: #b87333;
}

/* ── Data Table Panel ────────────────────────────────────── */
.panel[b-2iegweyxyq] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}


/* ── Table Rows ──────────────────────────────────────────── */
.row-paid td:first-child[b-2iegweyxyq] {
    border-left: 3px solid var(--green);
}

.row-unpaid td:first-child[b-2iegweyxyq] {
    border-left: 3px solid var(--red);
}

.row-partial td:first-child[b-2iegweyxyq] {
    border-left: 3px solid #b87333;
}

.row-closed[b-2iegweyxyq] {
    opacity: 0.55;
}

.row-closed td:first-child[b-2iegweyxyq] {
    border-left: 3px solid var(--border);
}


/* ── Action Buttons ──────────────────────────────────────── */
.action-btns[b-2iegweyxyq] {
    display: flex;
    gap: 6px;
}

.btn-action[b-2iegweyxyq] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.btn-action:hover[b-2iegweyxyq] {
    background: var(--navy);
    color: var(--gold-light);
    border-color: var(--navy);
}


.btn-action.pay.disabled[b-2iegweyxyq] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-action svg[b-2iegweyxyq] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ── Utilities ───────────────────────────────────────────── */
.mono[b-2iegweyxyq] {
    font-family: 'Consolas', monospace;
    font-size: 12px;
}

.text-muted[b-2iegweyxyq] {
    color: var(--text-muted);
}

.text-subtle[b-2iegweyxyq] {
    color: var(--text-subtle);
}

/* ── Payment Modal Styles ────────────────────────────────── */
.form-group[b-2iegweyxyq] {
    margin-bottom: 20px;
}

.form-label[b-2iegweyxyq] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.req[b-2iegweyxyq] {
    color: var(--red);
}

.pay-fee-block[b-2iegweyxyq] {
    padding: 16px;
    background: var(--bg);
    border-radius: 8px;
    margin-bottom: 12px;
}

.pay-fee-header[b-2iegweyxyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pay-fee-label[b-2iegweyxyq] {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
}

.pay-fee-rate[b-2iegweyxyq] {
    font-size: 11px;
    color: var(--text-muted);
}

.pay-record-row[b-2iegweyxyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
}

.pay-record-key[b-2iegweyxyq] {
    color: var(--text-muted);
}

.pay-record-val[b-2iegweyxyq] {
    font-weight: 600;
}

.pay-record-val.green[b-2iegweyxyq] {
    color: var(--green);
}

.pay-record-val.red[b-2iegweyxyq] {
    color: var(--red);
}

.btn-primary[b-2iegweyxyq],
.btn-ghost[b-2iegweyxyq] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all .15s;
}

.btn-primary[b-2iegweyxyq] {
    background: var(--navy);
    color: #fff;
}

.btn-primary:hover[b-2iegweyxyq] {
    background: rgba(13, 33, 55, 0.9);
}

.btn-ghost[b-2iegweyxyq] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.btn-ghost:hover[b-2iegweyxyq] {
    background: var(--bg);
    border-color: var(--text-muted);
}

/* ── Toolbar Layout ──────────────────────────────────────── */
[b-2iegweyxyq] .page-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-2iegweyxyq] .page-toolbar .toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
}

[b-2iegweyxyq] .page-toolbar .search-box {
    flex-shrink: 0;
    min-width: 200px;
}

[b-2iegweyxyq] .page-toolbar .filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

[b-2iegweyxyq] .page-toolbar .filter-tab {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    [b-2iegweyxyq] .page-toolbar .toolbar-left {
        flex-wrap: wrap;
    }

    [b-2iegweyxyq] .page-toolbar .search-box {
        min-width: 100%;
        order: -1;
        margin-bottom: 8px;
    }

    [b-2iegweyxyq] .page-toolbar .filter-tabs {
        min-width: 100%;
    }
}
/* /Components/Pages/Menus/Facilities/ICEPLANT.razor.rz.scp.css */
/* ============================================================
   Iceplant.razor.css  —  Iceplant page-scoped styles
   Blazor CSS isolation: only applies to Iceplant.razor
   Use --* tokens from app.css; do NOT redefine them here.
   ============================================================ */


/* ── Back Button ─────────────────────────────────────────── */
.ice-back-btn[b-bfw4avbmf9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

    .ice-back-btn:hover[b-bfw4avbmf9] {
        background: var(--bg-icon);
        color: var(--navy);
        border-color: var(--navy);
    }

    .ice-back-btn svg[b-bfw4avbmf9] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* ── Hero Banner ─────────────────────────────────────────── */
.ice-hero[b-bfw4avbmf9] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 28px 32px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    flex-wrap: wrap;
}

    .ice-hero[b-bfw4avbmf9]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
        pointer-events: none;
    }

.ice-hero-left[b-bfw4avbmf9] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 260px;
}

.ice-hero-icon[b-bfw4avbmf9] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ice-hero-icon svg[b-bfw4avbmf9] {
        width: 26px;
        height: 26px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.ice-hero-eyebrow[b-bfw4avbmf9] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.ice-hero-title[b-bfw4avbmf9] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.ice-hero-sub[b-bfw4avbmf9] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.ice-hero-stats[b-bfw4avbmf9] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.ice-hero-stat[b-bfw4avbmf9] {
    padding: 0 24px;
    text-align: center;
}

    .ice-hero-stat:first-child[b-bfw4avbmf9] {
        padding-left: 0;
    }

.ice-hero-val[b-bfw4avbmf9] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.ice-hero-key[b-bfw4avbmf9] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ice-hero-divider[b-bfw4avbmf9] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.ice-hero-progress[b-bfw4avbmf9] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.ice-hero-progress-fill[b-bfw4avbmf9] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width .5s ease;
}


/* ── Info Bar ────────────────────────────────────────────── */
.ice-section-info[b-bfw4avbmf9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ice-section-label[b-bfw4avbmf9] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.ice-section-desc[b-bfw4avbmf9] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

.fee-chips[b-bfw4avbmf9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fee-chip[b-bfw4avbmf9] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--bg-icon);
    color: var(--navy);
    border: 1px solid var(--border);
}

.ice-section-mini-stats[b-bfw4avbmf9] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ice-mini-stat[b-bfw4avbmf9] {
    text-align: center;
    min-width: 60px;
}

.ice-mini-val[b-bfw4avbmf9] {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

.ice-mini-key[b-bfw4avbmf9] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-top: 2px;
}

.ice-mini-stat.unpaid-stat .ice-mini-val[b-bfw4avbmf9] {
    color: var(--red);
}

.ice-mini-stat.partial-stat .ice-mini-val[b-bfw4avbmf9] {
    color: #b07d2b;
}


/* ── Table cells ─────────────────────────────────────────── */
.table-wrap[b-bfw4avbmf9] {
    overflow-x: unset;
}

.stall-num-cell[b-bfw4avbmf9] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stall-num-badge[b-bfw4avbmf9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 24px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    font-family: monospace;
    white-space: nowrap;
}

.td-name[b-bfw4avbmf9] {
    font-weight: 600;
    color: var(--text);
}

.td-contract-name[b-bfw4avbmf9] {
    font-size: 13px;
    color: var(--text-muted);
}

.td-center[b-bfw4avbmf9] {
    text-align: center;
}

.td-date[b-bfw4avbmf9] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.no-contract[b-bfw4avbmf9] {
    font-size: 11px;
    color: var(--text-subtle);
}

.amount-val[b-bfw4avbmf9] {
    font-weight: 600;
    font-family: monospace;
    color: var(--navy);
}

.row-inactive[b-bfw4avbmf9] {
    opacity: .55;
}


/* ── Table Row Accents ───────────────────────────────────── */
.row-paid td:first-child[b-bfw4avbmf9] {
    border-left: 3px solid var(--green);
}

.row-partial td:first-child[b-bfw4avbmf9] {
    border-left: 3px solid #b87333;
}

.row-unpaid td:first-child[b-bfw4avbmf9] {
    border-left: 3px solid var(--red);
}


/* ── Payment Modal ───────────────────────────────────────── */
.pay-options[b-bfw4avbmf9] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pay-option[b-bfw4avbmf9] {
    flex: 1 1 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}

    .pay-option svg[b-bfw4avbmf9] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pay-option:hover[b-bfw4avbmf9] {
        border-color: var(--navy);
        color: var(--navy);
    }

.pay-opt-paid[b-bfw4avbmf9] {
    border-color: var(--green);
    background: var(--green-bg);
    color: var(--green);
}

.pay-opt-partial[b-bfw4avbmf9] {
    border-color: #b07d2b;
    background: #fffbea;
    color: #7a5500;
}

.pay-opt-unpaid[b-bfw4avbmf9] {
    border-color: var(--red);
    background: var(--red-bg);
    color: var(--red);
}

.pay-fee-block[b-bfw4avbmf9] {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    margin-bottom: 10px;
}

.pay-fee-header[b-bfw4avbmf9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pay-fee-label[b-bfw4avbmf9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.pay-fee-rate[b-bfw4avbmf9] {
    font-size: 12px;
    color: var(--text-muted);
}

.pay-record-row[b-bfw4avbmf9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}

.pay-record-key[b-bfw4avbmf9] {
    font-size: 12px;
    color: var(--text-muted);
}

.pay-record-val[b-bfw4avbmf9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

    .pay-record-val.green[b-bfw4avbmf9] {
        color: var(--green);
    }

    .pay-record-val.red[b-bfw4avbmf9] {
        color: var(--red);
    }

    .pay-record-val.mono[b-bfw4avbmf9] {
        font-family: monospace;
    }

.pay-badge-unpaid[b-bfw4avbmf9] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--red-bg);
    color: var(--red);
}

.pay-meta-row[b-bfw4avbmf9] {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.pay-meta-item[b-bfw4avbmf9] {
    flex: 1 1 160px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pay-meta-key[b-bfw4avbmf9] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-subtle);
}

.pay-meta-val[b-bfw4avbmf9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pay-meta-val svg[b-bfw4avbmf9] {
        width: 13px;
        height: 13px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pay-meta-val.mono[b-bfw4avbmf9] {
        font-family: monospace;
    }

.ice-pay-total[b-bfw4avbmf9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--navy);
    margin-top: 12px;
}

.ice-pay-total-label[b-bfw4avbmf9] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
}

.ice-pay-total-sub[b-bfw4avbmf9] {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    margin-top: 3px;
}

.ice-pay-total-val[b-bfw4avbmf9] {
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
    font-family: monospace;
}

.total-unpaid[b-bfw4avbmf9] {
    background: var(--red);
}

.total-partial[b-bfw4avbmf9] {
    background: #7a5500;
}

.total-balance-tag[b-bfw4avbmf9] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    margin-top: 3px;
}


/* ── Payment History Modal ───────────────────────────────── */
.hist-label[b-bfw4avbmf9] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.hist-grid[b-bfw4avbmf9] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.hist-month[b-bfw4avbmf9] {
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    border: 1.5px solid var(--border);
}

.hist-paid[b-bfw4avbmf9] {
    background: var(--green-bg);
    border-color: var(--green);
}

.hist-unpaid[b-bfw4avbmf9] {
    background: var(--red-bg);
    border-color: #d9b0b0;
}

.hist-month-name[b-bfw4avbmf9] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--navy);
}

.hist-month-year[b-bfw4avbmf9] {
    font-size: 10px;
    color: var(--text-subtle);
    margin-top: 1px;
}

.hist-month-icon[b-bfw4avbmf9] {
    font-size: 14px;
    margin-top: 6px;
    color: var(--green);
}

.hist-unpaid .hist-month-icon[b-bfw4avbmf9] {
    color: var(--red);
}

.hist-summary[b-bfw4avbmf9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.act-stat[b-bfw4avbmf9] {
    padding: 12px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: center;
}

.act-stat-val[b-bfw4avbmf9] {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.act-stat-key[b-bfw4avbmf9] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
/* ── Action Buttons ──────────────────────────────────────── */
.action-btns[b-bfw4avbmf9] {
    display: flex;
    gap: 6px;
}

.action-btn[b-bfw4avbmf9] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

    .action-btn:hover[b-bfw4avbmf9] {
        background: var(--navy);
        color: var(--gold-light);
        border-color: var(--navy);
    }

    .action-btn svg[b-bfw4avbmf9] {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .ice-hero[b-bfw4avbmf9] {
        padding: 20px;
        gap: 16px;
    }

    .ice-hero-title[b-bfw4avbmf9] {
        font-size: 18px;
    }

    .ice-hero-val[b-bfw4avbmf9] {
        font-size: 18px;
    }

    .ice-hero-stat[b-bfw4avbmf9] {
        padding: 0 12px;
    }

    .hist-grid[b-bfw4avbmf9] {
        grid-template-columns: repeat(4, 1fr);
    }

    .hist-summary[b-bfw4avbmf9] {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-bfw4avbmf9] .page-toolbar .toolbar-left {
        flex-wrap: wrap;
    }

    [b-bfw4avbmf9] .page-toolbar .search-box {
        min-width: 100%;
        order: -1;
        margin-bottom: 8px;
    }

    [b-bfw4avbmf9] .page-toolbar .filter-tabs {
        min-width: 100%;
    }
}

/* ── Toolbar Layout ──────────────────────────────────────── */
[b-bfw4avbmf9] .page-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-bfw4avbmf9] .page-toolbar .toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
}

[b-bfw4avbmf9] .page-toolbar .search-box {
    flex-shrink: 0;
    min-width: 200px;
}

[b-bfw4avbmf9] .page-toolbar .filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

[b-bfw4avbmf9] .page-toolbar .filter-tab {
    flex-shrink: 0;
    white-space: nowrap;
}
/* /Components/Pages/Menus/Facilities/ImportPaymentHistory.razor.rz.scp.css */
/* Import payment history.
   Deliberately the same chrome as Import Stallholders - hero with steps, dropzone, review bar, editable table,
   footer - because the office meets both screens in the same sitting and a second layout for the same task is a
   second thing to learn. The classes are this component's own; only the visual spec is shared. */

.iph-page[b-c9n2z9zib9] {
    padding: 0 24px 32px;
}

.iph-back-btn[b-c9n2z9zib9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--navy);
}

.iph-back-btn svg[b-c9n2z9zib9] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Hero (V3: light surface, navy text, civic-blue step state) ── */
.iph-hero[b-c9n2z9zib9] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 18px 0 16px;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
    color: var(--navy);
}

.iph-hero-icon[b-c9n2z9zib9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
}

.iph-hero-icon svg[b-c9n2z9zib9] {
    width: 24px;
    height: 24px;
}

.iph-hero-body[b-c9n2z9zib9] {
    flex: 1 1 260px;
}

.iph-hero-eyebrow[b-c9n2z9zib9] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--accent);
}

.iph-hero-title[b-c9n2z9zib9] {
    margin: 2px 0 0;
    font-size: 21px;
    font-weight: 700;
    color: var(--navy);
}

.iph-hero-sub[b-c9n2z9zib9] {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.iph-steps[b-c9n2z9zib9] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.iph-step[b-c9n2z9zib9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.iph-step-no[b-c9n2z9zib9] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--bg-icon);
    color: var(--text-secondary);
}

.iph-step.is-active[b-c9n2z9zib9] {
    color: var(--navy);
}

.iph-step.is-active .iph-step-no[b-c9n2z9zib9] {
    background: var(--accent);
    color: var(--surface);
}

.iph-step.is-done[b-c9n2z9zib9] {
    color: var(--text-secondary);
}

.iph-step.is-done .iph-step-no[b-c9n2z9zib9] {
    background: var(--accent-soft);
    color: var(--accent);
}

.iph-step-line[b-c9n2z9zib9] {
    width: 26px;
    height: 1px;
    background: var(--border-strong);
}

/* ── Card ── */
.iph-card[b-c9n2z9zib9] {
    padding: 22px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.iph-card-flush[b-c9n2z9zib9] {
    padding: 0;
    overflow: hidden;
}

/* ── Step 1: upload ── */
.iph-drop[b-c9n2z9zib9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 40px 20px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.iph-drop:hover[b-c9n2z9zib9] {
    border-color: var(--accent);
    background: var(--bg-page);
}

/* Hides the native input that <InputFile> renders. It lives inside a child component, so a scoped class on the
   element alone does not reach it - ::deep does. Without this the browser's own "Choose File / No file chosen"
   shows through the middle of the dropzone, which is exactly how it looked before. */
.iph-drop[b-c9n2z9zib9]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    color: transparent;
}

.iph-drop-icon[b-c9n2z9zib9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--bg-page);
    color: var(--navy);
}

.iph-drop-icon svg[b-c9n2z9zib9] {
    width: 22px;
    height: 22px;
}

.iph-drop-title[b-c9n2z9zib9] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.iph-drop-sub[b-c9n2z9zib9] {
    font-size: 12.5px;
    color: var(--text-muted);
}

.iph-drop-err[b-c9n2z9zib9] {
    margin-top: 12px;
    padding: 10px 13px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
    background: color-mix(in srgb, var(--red) 7%, transparent);
    font-size: 12.5px;
    color: var(--red);
}

.iph-upload-foot[b-c9n2z9zib9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.iph-foot-sep[b-c9n2z9zib9] {
    color: var(--text-subtle, #9aa7b4);
}

/* No underline: three of these sit in a row, and three underlined phrases read as a paragraph of links rather than
   a set of choices. */
.iph-link[b-c9n2z9zib9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 650;
    color: var(--navy);
    text-decoration: none;
}

.iph-link:hover[b-c9n2z9zib9] {
    color: var(--accent);
}

.iph-link svg[b-c9n2z9zib9] {
    width: 15px;
    height: 15px;
}

/* A button, not a link: it changes state rather than navigating. Styled to match so the row reads as one set of
   choices, as it does on the stallholder import. */
.iph-link-btn[b-c9n2z9zib9] {
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    color: var(--navy);
    cursor: pointer;
}

.iph-link-btn:hover[b-c9n2z9zib9] {
    color: var(--accent);
}

.iph-cols-preview[b-c9n2z9zib9] {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.iph-cols-label[b-c9n2z9zib9] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.iph-cols-chips[b-c9n2z9zib9] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.iph-chip[b-c9n2z9zib9] {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-page);
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
}

.iph-hint[b-c9n2z9zib9] {
    margin-top: 16px;
    padding: 13px 16px;
    border-left: 3px solid var(--navy);
    border-radius: 0 9px 9px 0;
    background: var(--bg-page);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted);
}

.iph-hint code[b-c9n2z9zib9] {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-card);
    font-size: 12.5px;
}

/* ── Step 2: review bar ── */
.iph-review-bar[b-c9n2z9zib9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 14px;
}

.iph-review-left[b-c9n2z9zib9] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.iph-review-count[b-c9n2z9zib9] {
    font-size: 26px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    background: var(--bg-page);
    border-radius: 10px;
    padding: 8px 14px;
    font-variant-numeric: tabular-nums;
}

.iph-review-title[b-c9n2z9zib9] {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

.iph-review-sub[b-c9n2z9zib9] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.iph-review-actions[b-c9n2z9zib9] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Table ── */
.iph-table-wrap[b-c9n2z9zib9] {
    overflow-x: auto;
}

.iph-table[b-c9n2z9zib9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.iph-table th[b-c9n2z9zib9] {
    padding: 11px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.iph-table td[b-c9n2z9zib9] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--navy);
    vertical-align: middle;
}

.iph-table tbody tr:last-child td[b-c9n2z9zib9] {
    border-bottom: none;
}

.iph-th-num[b-c9n2z9zib9] {
    width: 46px;
    text-align: center;
    font-weight: 700;
    color: var(--navy);
}

.iph-th-act[b-c9n2z9zib9] {
    width: 44px;
}

.iph-c[b-c9n2z9zib9] {
    text-align: center;
}

.iph-r[b-c9n2z9zib9] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.iph-reason[b-c9n2z9zib9] {
    color: var(--text-muted);
    min-width: 260px;
}

.iph-input[b-c9n2z9zib9] {
    width: 100%;
    min-width: 110px;
    /* Block, so the cell has no text baseline to sit on. The inputs were inline-block and the payor picker a block
       element, so the picker sat a few pixels higher than the boxes beside it. */
    display: block;
    /* An explicit height, shared with the payor picker (PayorPicker.razor.css uses the same figure). Padding and
       line-height alone did not settle it: a button and an input compute their content height differently, so the two
       controls agreed on padding and still disagreed on height. One number in two places, each pointing at the other,
       is more honest than an arithmetic coincidence. */
    height: 36px;
    box-sizing: border-box;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font: inherit;
    font-size: 13px;
    color: var(--navy);
    outline: none;
    transition: border-color .15s;
}

.iph-input:focus[b-c9n2z9zib9] {
    border-color: var(--accent);
}

/* Left, like every other cell in the row.
   Money is conventionally set to the right in a REPORT, where a column of figures is read down and the decimal points
   must line up. This is a form: the office reads across a row, and one field whose text and placeholder start at the
   far edge while its neighbours start at the near one reads as a mistake. Tabular figures are kept so the digits are
   still even. */
.iph-input-num[b-c9n2z9zib9] {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.iph-row-del[b-c9n2z9zib9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.iph-row-del svg[b-c9n2z9zib9] {
    width: 14px;
    height: 14px;
}

.iph-row-del:hover[b-c9n2z9zib9] {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 40%, transparent);
}

/* ── Step 3: outcome ── */
.iph-summary[b-c9n2z9zib9] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.iph-stat[b-c9n2z9zib9] {
    flex: 1 1 130px;
    padding: 14px 16px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--bg-page);
}

.iph-stat-attention[b-c9n2z9zib9] {
    border-color: color-mix(in srgb, var(--red) 35%, transparent);
}

.iph-stat-val[b-c9n2z9zib9] {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.iph-stat-key[b-c9n2z9zib9] {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.iph-note[b-c9n2z9zib9] {
    margin-top: 16px;
    padding: 13px 16px;
    border-left: 3px solid var(--navy);
    border-radius: 0 9px 9px 0;
    background: var(--bg-page);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted);
}

.iph-error[b-c9n2z9zib9] {
    margin-bottom: 14px;
    padding: 11px 14px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
    background: color-mix(in srgb, var(--red) 7%, transparent);
    font-size: 13px;
    color: var(--red);
}

/* ── Footer ── */
.iph-foot[b-c9n2z9zib9] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.iph-btn[b-c9n2z9zib9] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--navy);
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.iph-btn svg[b-c9n2z9zib9] {
    width: 15px;
    height: 15px;
}

.iph-btn:hover[b-c9n2z9zib9] {
    box-shadow: 0 4px 10px rgba(9, 31, 52, .1);
}

.iph-btn-primary[b-c9n2z9zib9] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.iph-btn:disabled[b-c9n2z9zib9] {
    opacity: .55;
    cursor: default;
    box-shadow: none;
}

@media (max-width: 720px) {
    .iph-page[b-c9n2z9zib9] {
        padding: 0 12px 28px;
    }

    .iph-hero[b-c9n2z9zib9] {
        padding: 16px;
    }

    .iph-hero-title[b-c9n2z9zib9] {
        font-size: 18px;
    }

    .iph-steps[b-c9n2z9zib9] {
        width: 100%;
    }

    .iph-stat[b-c9n2z9zib9] {
        flex: 1 1 100%;
    }
}


/* A period that has not started yet. Marked, not blocked mid-typing: "2026-1" is on its way to "2026-10" and a box
   that fights the clerk as they type is worse than one that tells them where they have got to. Save refuses it. */
.iph-input-bad[b-c9n2z9zib9] {
    border-color: #b3261e;
    background: #fdf6f5;
}

.iph-input-bad:focus[b-c9n2z9zib9] {
    border-color: #b3261e;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}


/* ── Section chooser (market only) ────────────────────────── */
/* The same cards the stallholder import shows, because it is the same question asked of the same office in the same
   sitting. A second design for one question is a second thing to learn. */
.iph-pick[b-c9n2z9zib9] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 1px 2px rgba(13, 33, 55, .04);
}

.iph-pick-head[b-c9n2z9zib9] {
    text-align: center;
    margin-bottom: 22px;
}

.iph-pick-title[b-c9n2z9zib9] {
    font-size: 17px;
    font-weight: 800;
    color: var(--navy);
}

.iph-pick-sub[b-c9n2z9zib9] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 6px auto 0;
    max-width: 560px;
    line-height: 1.5;
}

.iph-pick-grid[b-c9n2z9zib9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.iph-pick-card[b-c9n2z9zib9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 26px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}

    .iph-pick-card:hover[b-c9n2z9zib9] {
        border-color: var(--accent);
        box-shadow: 0 6px 16px rgba(13, 33, 55, .08);
        transform: translateY(-2px);
    }

.iph-pick-icon[b-c9n2z9zib9] {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .iph-pick-icon svg[b-c9n2z9zib9] {
        width: 26px;
        height: 26px;
    }

    .iph-pick-icon.veg[b-c9n2z9zib9] { background: rgba(45, 122, 95, .12); color: #2d7a5f; }
    .iph-pick-icon.fish[b-c9n2z9zib9] { background: rgba(26, 122, 181, .12); color: #1a7ab5; }
    .iph-pick-icon.meat[b-c9n2z9zib9] { background: rgba(181, 86, 47, .12); color: #b5562f; }

.iph-pick-name[b-c9n2z9zib9] {
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
}

.iph-pick-desc[b-c9n2z9zib9] {
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .iph-pick-grid[b-c9n2z9zib9] { grid-template-columns: 1fr; }
}

/* The chosen section, stated in the hero so it is visible while the office works through the table. */
.iph-hero-section[b-c9n2z9zib9] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 20px;
    border: 1px solid rgba(200, 168, 75, .35);
    background: rgba(200, 168, 75, .16);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ── Exact dates (market only) ────────────────────────────── */
/* The toggle reads as pressed while it is on, so the office can see at a glance that the grid below is what will be
   sent rather than a suggestion. */
.iph-btn-on[b-c9n2z9zib9] {
    border-color: var(--navy);
    color: var(--navy);
    background: rgba(13, 33, 55, .05);
}

/* ── Day lines (market, exact dates) ─────────────────────── */
/* Rows of the same table as the one they belong to, tinted so a run of them reads as detail under the row above rather
   than as more rows of the list. A nested table was tried first and could not be made to line up: its columns are
   measured against its own contents, so it sat narrower than its own row with a band of empty space down the right. */
.iph-day-row > td[b-c9n2z9zib9] {
    background: var(--bg, #f6f8fa);
    border-bottom: 1px solid var(--border);
}

.iph-day-caption > td[b-c9n2z9zib9] {
    padding-top: 12px;
    padding-bottom: 6px;
    border-bottom: none;
}

.iph-day-caption-act[b-c9n2z9zib9] {
    text-align: right;
}

.iph-dates-title[b-c9n2z9zib9] {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
}

.iph-dates-sub[b-c9n2z9zib9] {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
}

.iph-dates-fill[b-c9n2z9zib9] {
    font-size: 12px;
    white-space: nowrap;
}

.iph-dates-empty[b-c9n2z9zib9] {
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Stated, not offered for editing: these belong to the row above, and a second editable copy of a value is a second
   version of it. Muted, so it is plain they are being repeated rather than asked for. */
.iph-days-read[b-c9n2z9zib9] {
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* The day's own identity, where the row above states the stall's. */
.iph-day-label[b-c9n2z9zib9] {
    font-weight: 600;
    color: var(--navy);
}

/* What the payor's own record says about the month: settled, or fewer days uncollected than the row claims. Stated
   beside the days rather than left as empty boxes to be puzzled over. */
.iph-days-note[b-c9n2z9zib9] {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.iph-hero[b-c9n2z9zib9] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .iph-hero[b-c9n2z9zib9]::before,
    .iph-hero[b-c9n2z9zib9]::after {
        display: none;
    }

.iph-hero-icon[b-c9n2z9zib9] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .iph-hero-icon svg[b-c9n2z9zib9] {
        stroke: var(--navy) !important;
    }

.iph-hero-eyebrow[b-c9n2z9zib9] {
    color: var(--text-tertiary);
}

.iph-hero-title[b-c9n2z9zib9],
.iph-hero-val[b-c9n2z9zib9] {
    color: var(--navy);
}

.iph-hero-val[b-c9n2z9zib9] {
    font-variant-numeric: tabular-nums;
}

.iph-hero-sub[b-c9n2z9zib9],
.iph-hero-sub2[b-c9n2z9zib9] {
    color: var(--text-tertiary);
}

.iph-hero-key[b-c9n2z9zib9] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.iph-hero-divider[b-c9n2z9zib9] {
    background: var(--border);
}

.iph-hero-progress[b-c9n2z9zib9] {
    height: 3px;
    background: var(--surface-muted);
}

.iph-hero-progress-fill[b-c9n2z9zib9] {
    background: var(--accent);
}
/* /Components/Pages/Menus/Facilities/ImportStallholders.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   ImportStallholders — bulk-import prototype. Government-restrained: navy hero,
   gold accent, neutral white cards. Reuses app design tokens + global chrome
   (topbar / content-area). All page-specific classes are scoped here.
   ══════════════════════════════════════════════════════════════════════════ */

.imp-back-btn[b-u31dfajty5] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--navy);
    text-decoration: none; flex-shrink: 0;
}
.imp-back-btn:hover[b-u31dfajty5] { background: var(--bg-icon); }
.imp-back-btn svg[b-u31dfajty5] { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* NPM section picker (each section is a separate sheet) */
.imp-pick[b-u31dfajty5] {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 26px; box-shadow: 0 1px 2px rgba(13, 33, 55, .04);
}
.imp-pick-head[b-u31dfajty5] { text-align: center; margin-bottom: 22px; }
.imp-pick-title[b-u31dfajty5] { font-size: 17px; font-weight: 800; color: var(--navy); }
.imp-pick-sub[b-u31dfajty5] { font-size: 13px; color: var(--text-muted); margin: 6px auto 0; max-width: 560px; line-height: 1.5; }
.imp-pick-grid[b-u31dfajty5] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.imp-pick-card[b-u31dfajty5] {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 26px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
    cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.imp-pick-card:hover[b-u31dfajty5] { border-color: var(--accent); box-shadow: 0 6px 16px rgba(13, 33, 55, .08); transform: translateY(-2px); }
.imp-pick-icon[b-u31dfajty5] { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.imp-pick-icon svg[b-u31dfajty5] { width: 26px; height: 26px; }
.imp-pick-icon.veg[b-u31dfajty5] { background: rgba(45, 122, 95, .12); color: #2d7a5f; }
.imp-pick-icon.fish[b-u31dfajty5] { background: rgba(26, 122, 181, .12); color: #1a7ab5; }
.imp-pick-icon.meat[b-u31dfajty5] { background: rgba(181, 86, 47, .12); color: #b5562f; }
.imp-pick-name[b-u31dfajty5] { font-size: 15px; font-weight: 800; color: var(--navy); }
.imp-pick-desc[b-u31dfajty5] { font-size: 12px; color: var(--text-muted); }
@media (max-width: 700px) { .imp-pick-grid[b-u31dfajty5] { grid-template-columns: 1fr; } }

/* Chosen-section badge on the upload step */
.imp-section-badge[b-u31dfajty5] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 14px; margin-bottom: 16px; font-size: 13px; color: var(--text);
}
.imp-section-badge strong[b-u31dfajty5] { color: var(--navy); }

/* ── Import setup bar (section · daily fee · utilities) — one professional row ── */
.imp-setup[b-u31dfajty5] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 11px 16px; margin-bottom: 16px; font-size: 13px; color: var(--text);
}
.imp-setup-group[b-u31dfajty5] { display: flex; align-items: center; gap: 10px; }
.imp-setup-key[b-u31dfajty5] {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-subtle);
}
.imp-setup-val[b-u31dfajty5] { font-weight: 700; color: var(--navy); }
.imp-setup-divider[b-u31dfajty5] { width: 1px; align-self: stretch; background: var(--border); }
.imp-rate[b-u31dfajty5] {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px;
}
.imp-rate-peso[b-u31dfajty5], .imp-rate-unit[b-u31dfajty5] { color: var(--text-muted); font-size: 12px; }
.imp-rate input[b-u31dfajty5] {
    width: 78px; border: none; outline: none; background: transparent;
    font-size: 13px; color: var(--navy); font-weight: 600; text-align: right;
}
.imp-util[b-u31dfajty5] {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
    padding: 8px 13px; border-radius: 7px; border: 1.5px solid var(--border);
    background: var(--bg-card); font-weight: 600; font-size: 12.5px; color: var(--text-subtle);
    transition: color .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
    /* The checkbox is the accessible control but the visual is the whole toggle. */
    .imp-util input[b-u31dfajty5] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
    .imp-util svg[b-u31dfajty5] { width: 15px; height: 15px; flex-shrink: 0; }
    .imp-util:hover[b-u31dfajty5] { border-color: var(--text-muted); color: var(--text); }
    .imp-util.on[b-u31dfajty5] {
        border-color: var(--accent);
        color: #fff;
        background: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent-hover);
    }
    /* A small gold check badge on the selected toggle — clear "on" state without a raw checkbox. */
    .imp-util.on[b-u31dfajty5]::after {
        content: '';
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--gold); margin-left: 1px; flex-shrink: 0;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent);
    }

/* ── Auto-continued numbering note ── */
.imp-continue-note[b-u31dfajty5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(200, 168, 75, 0.10);
    border: 1px solid rgba(200, 168, 75, 0.34);
    color: var(--navy);
    font-size: 12.5px;
    line-height: 1.45;
}
.imp-continue-note svg[b-u31dfajty5] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    stroke: var(--gold, #c8a84b);
}
.imp-continue-note strong[b-u31dfajty5] { font-weight: 700; }


/* Spaces this file takes over from a vacated occupancy. Same shape as the renumbering note, in the warning
   colour: it states a consequence the office should see before saving, not merely something that happened. */
.imp-takeover-note[b-u31dfajty5] {
    border-left-color: var(--amber-600, #b45309);
    background: var(--amber-50, #fffbeb);
    color: var(--amber-900, #78350f);
}

.imp-takeover-note svg[b-u31dfajty5] {
    stroke: var(--amber-600, #b45309);
}


/* Queries raised against the sheet's own Delinquent and Whole Year figures. One line per row so the clerk can find the
   row on the sheet in front of them, rather than a paragraph they have to unpick. */
.imp-query-list[b-u31dfajty5] {
    margin: 6px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.imp-query-list li[b-u31dfajty5] {
    font-weight: 500;
}
/* /Components/Pages/Menus/Facilities/NCC.razor.rz.scp.css */
/* ============================================================
   NCC.razor.css  —  New Commercial Center page-scoped styles
   Blazor CSS isolation: only applies to NCC.razor
   Use --* tokens from app.css; do NOT redefine them here.
   ============================================================ */


/* ── Back Button ─────────────────────────────────────────── */
.ncc-back-btn[b-2shzpjtlfi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

.ncc-back-btn:hover[b-2shzpjtlfi] {
    background: var(--bg-icon);
    color: var(--navy);
    border-color: var(--navy);
}

.ncc-back-btn svg[b-2shzpjtlfi] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ── Hero Banner ─────────────────────────────────────────── */
.ncc-hero[b-2shzpjtlfi] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 28px 32px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    flex-wrap: wrap;
}

.ncc-hero[b-2shzpjtlfi]::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
    pointer-events: none;
}

.ncc-hero-left[b-2shzpjtlfi] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 260px;
}

.ncc-hero-icon[b-2shzpjtlfi] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ncc-hero-icon svg[b-2shzpjtlfi] {
    width: 26px;
    height: 26px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ncc-hero-eyebrow[b-2shzpjtlfi] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.ncc-hero-title[b-2shzpjtlfi] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.ncc-hero-sub[b-2shzpjtlfi] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.ncc-hero-stats[b-2shzpjtlfi] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.ncc-hero-stat[b-2shzpjtlfi] {
    padding: 0 24px;
    text-align: center;
}

.ncc-hero-stat:first-child[b-2shzpjtlfi] {
    padding-left: 0;
}

.ncc-hero-val[b-2shzpjtlfi] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.ncc-hero-key[b-2shzpjtlfi] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ncc-hero-divider[b-2shzpjtlfi] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.ncc-hero-progress[b-2shzpjtlfi] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.ncc-hero-progress-fill[b-2shzpjtlfi] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width .5s ease;
}


/* ── Facility Info Bar ───────────────────────────────────── */
.ncc-facility-info[b-2shzpjtlfi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ncc-facility-label[b-2shzpjtlfi] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.ncc-facility-desc[b-2shzpjtlfi] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

.ncc-facility-info-left[b-2shzpjtlfi] {
    flex: 1 1 300px;
}

.ncc-facility-mini-stats[b-2shzpjtlfi] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 1 auto;
}

.ncc-mini-stat[b-2shzpjtlfi] {
    text-align: center;
    padding: 6px 12px;
}

.ncc-mini-val[b-2shzpjtlfi] {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.ncc-mini-key[b-2shzpjtlfi] {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ncc-mini-stat.unpaid-stat .ncc-mini-val[b-2shzpjtlfi] {
    color: var(--red);
}

.ncc-mini-stat.partial-stat .ncc-mini-val[b-2shzpjtlfi] {
    color: #b87333;
}

.fee-chips[b-2shzpjtlfi] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.fee-chip[b-2shzpjtlfi] {
    display: inline-block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}


/* ── Fee Blocks ──────────────────────────────────────────── */
.pay-fee-block[b-2shzpjtlfi] {
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    margin-bottom: 12px;
}

    .pay-fee-block:last-of-type[b-2shzpjtlfi] {
        margin-bottom: 16px;
    }

.pay-fee-header[b-2shzpjtlfi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 12px;
}

.pay-fee-label[b-2shzpjtlfi] {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    flex: 0 0 auto;
}

.pay-fee-rate[b-2shzpjtlfi] {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    flex: 1;
}

.pay-badge-unpaid[b-2shzpjtlfi] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--red-bg);
    color: var(--red);
}

.pay-record-row[b-2shzpjtlfi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    font-size: 13px;
    gap: 12px;
}

    .pay-record-row:first-of-type[b-2shzpjtlfi] {
        margin-top: 0;
        border-top: none;
        padding-top: 0;
    }

.pay-record-key[b-2shzpjtlfi] {
    color: var(--text-muted);
    flex: 1;
}

.pay-record-val[b-2shzpjtlfi] {
    font-weight: 600;
    color: var(--navy);
    flex: 0 0 auto;
    text-align: right;
}

.pay-record-val.green[b-2shzpjtlfi] {
    color: var(--green);
}

.pay-record-val.red[b-2shzpjtlfi] {
    color: var(--red);
}

.pay-record-val.mono[b-2shzpjtlfi] {
    font-family: monospace;
}


/* ── History Grid ────────────────────────────────────────── */
.hist-label[b-2shzpjtlfi] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.hist-grid[b-2shzpjtlfi] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.hist-month[b-2shzpjtlfi] {
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    border: 1.5px solid var(--border);
}

.hist-paid[b-2shzpjtlfi] {
    background: var(--green-bg);
    border-color: var(--green);
}

.hist-unpaid[b-2shzpjtlfi] {
    background: var(--red-bg);
    border-color: #d9b0b0;
}

.hist-month-name[b-2shzpjtlfi] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--navy);
}

.hist-month-year[b-2shzpjtlfi] {
    font-size: 10px;
    color: var(--text-subtle);
    margin-top: 1px;
}

.hist-month-icon[b-2shzpjtlfi] {
    font-size: 14px;
    margin-top: 6px;
    color: var(--green);
}

.hist-unpaid .hist-month-icon[b-2shzpjtlfi] {
    color: var(--red);
}


/* ── History Summary ─────────────────────────────────────── */
.hist-summary[b-2shzpjtlfi] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.act-stat[b-2shzpjtlfi] {
    padding: 12px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: center;
}

.act-stat-val[b-2shzpjtlfi] {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.act-stat-key[b-2shzpjtlfi] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .05em;
}


/* ── Modal Footer ────────────────────────────────────────── */
.eemo-modal-footer[b-2shzpjtlfi] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
}

.btn-ghost[b-2shzpjtlfi],
.btn-primary[b-2shzpjtlfi] {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
}

.btn-ghost[b-2shzpjtlfi] {
    background: var(--bg-card);
    color: var(--text-muted);
}

.btn-ghost:hover[b-2shzpjtlfi] {
    background: var(--bg);
    color: var(--text);
    border-color: var(--text-muted);
}

.btn-primary[b-2shzpjtlfi] {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.btn-primary:hover[b-2shzpjtlfi] {
    background: #051219;
    border-color: #051219;
}


/* ── Utilities ───────────────────────────────────────────── */
.no-contract[b-2shzpjtlfi] {
    color: var(--text-muted);
}

.mono[b-2shzpjtlfi] {
    font-family: 'Consolas', monospace;
}

/* Row status left-border indicators */
.row-paid td:first-child[b-2shzpjtlfi] {
    border-left: 3px solid var(--green);
}

.row-unpaid td:first-child[b-2shzpjtlfi] {
    border-left: 3px solid var(--red);
}

.row-partial td:first-child[b-2shzpjtlfi] {
    border-left: 3px solid #b87333;
}

.row-closed td:first-child[b-2shzpjtlfi] {
    border-left: 3px solid var(--border);
}

.action-btns[b-2shzpjtlfi] {
    display: flex;
    gap: 6px;
}

.action-btn[b-2shzpjtlfi] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.action-btn:hover[b-2shzpjtlfi] {
    background: var(--navy);
    color: var(--gold-light);
    border-color: var(--navy);
}

.action-btn svg[b-2shzpjtlfi] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* /Components/Pages/Menus/Facilities/NPM.razor.rz.scp.css */
/* ============================================================
   NPM_2.razor.css  —  New Public Market page-scoped styles
   Blazor CSS isolation: only applies to NPM_2.razor
   Use --* tokens from app.css; do NOT redefine them here.
   ============================================================ */


/* ── Back Button ─────────────────────────────────────────── */
.npm-back-btn[b-8myr16250c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

    .npm-back-btn:hover[b-8myr16250c] {
        background: var(--bg-icon);
        color: var(--navy);
        border-color: var(--navy);
    }

    .npm-back-btn svg[b-8myr16250c] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.npm-icon-svg[b-8myr16250c] {
    color: var(--gold);
}

/* ── Hero Banner ─────────────────────────────────────────── */
.npm-hero[b-8myr16250c] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 28px 32px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    flex-wrap: wrap;
}

    .npm-hero[b-8myr16250c]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
        pointer-events: none;
    }

.npm-hero-left[b-8myr16250c] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 260px;
}

.npm-hero-icon[b-8myr16250c] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .npm-hero-icon svg[b-8myr16250c] {
        width: 26px;
        height: 26px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.npm-hero-eyebrow[b-8myr16250c] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.npm-hero-title[b-8myr16250c] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.npm-hero-sub[b-8myr16250c] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.npm-hero-stats[b-8myr16250c] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.npm-hero-stat[b-8myr16250c] {
    padding: 0 24px;
    text-align: center;
}

    .npm-hero-stat:first-child[b-8myr16250c] {
        padding-left: 0;
    }

.npm-hero-val[b-8myr16250c] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.npm-hero-key[b-8myr16250c] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.npm-hero-divider[b-8myr16250c] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.npm-hero-progress[b-8myr16250c] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.npm-hero-progress-fill[b-8myr16250c] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width .5s ease;
}


/* ── Section Tabs ────────────────────────────────────────── */
.npm-section-tabs[b-8myr16250c] {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.npm-sec-tab[b-8myr16250c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    position: relative;
    user-select: none;
    flex: 1 1 160px;
}

    .npm-sec-tab:hover[b-8myr16250c] {
        border-color: var(--gold);
        background: #fffdf5;
    }

    .npm-sec-tab.active[b-8myr16250c] {
        border-color: var(--navy);
        background: var(--navy);
    }

.npm-sec-icon[b-8myr16250c] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.npm-sec-tab.active .npm-sec-icon[b-8myr16250c] {
    background: rgba(255,255,255,.12);
}

.npm-sec-icon svg[b-8myr16250c] {
    width: 16px;
    height: 16px;
    stroke: var(--navy);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.npm-sec-tab.active .npm-sec-icon svg[b-8myr16250c] {
    stroke: var(--gold);
}

.npm-sec-name[b-8myr16250c] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.npm-sec-sub[b-8myr16250c] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.npm-sec-tab.active .npm-sec-name[b-8myr16250c],
.npm-sec-tab.active .npm-sec-sub[b-8myr16250c] {
    color: #fff;
}

.npm-sec-tab.active .npm-sec-sub[b-8myr16250c] {
    color: rgba(255,255,255,.6);
}

.npm-sec-badge[b-8myr16250c] {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}


/* ── Section Info Bar ────────────────────────────────────── */
.npm-section-info[b-8myr16250c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.npm-section-label[b-8myr16250c] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.npm-section-desc[b-8myr16250c] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

.fee-chips[b-8myr16250c] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fee-chip[b-8myr16250c] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--bg-icon);
    color: var(--navy);
    border: 1px solid var(--border);
}

.npm-section-mini-stats[b-8myr16250c] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.npm-mini-stat[b-8myr16250c] {
    text-align: center;
    min-width: 60px;
}

.npm-mini-val[b-8myr16250c] {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

.npm-mini-key[b-8myr16250c] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-top: 2px;
}

.npm-mini-stat.unpaid-stat .npm-mini-val[b-8myr16250c] {
    color: var(--red);
}

.npm-mini-stat.partial-stat .npm-mini-val[b-8myr16250c] {
    color: #b07d2b;
}


/* ── Table — NPM-specific cells ─────────────────────────── */
.table-wrap[b-8myr16250c] {
    overflow-x: unset;
}

.stall-num-cell[b-8myr16250c] {
    display: flex;
    align-items: center;
}

.stall-num-badge[b-8myr16250c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    font-family: monospace;
}

.td-name[b-8myr16250c] {
    font-weight: 600;
    color: var(--text);
}

.td-contract-name[b-8myr16250c] {
    font-size: 13px;
    color: var(--text-muted);
}

.td-center[b-8myr16250c] {
    text-align: center;
}

.td-date[b-8myr16250c] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.no-contract[b-8myr16250c] {
    font-size: 11px;
    color: var(--text-subtle);
}

.amount-val[b-8myr16250c] {
    font-weight: 600;
    font-family: monospace;
    color: var(--navy);
}

.row-inactive[b-8myr16250c] {
    opacity: .55;
}

/* Row status left-border indicators (match BBQ style) */
.row-paid td:first-child[b-8myr16250c] {
    border-left: 3px solid var(--green);
}

.row-unpaid td:first-child[b-8myr16250c] {
    border-left: 3px solid var(--red);
}

.row-partial td:first-child[b-8myr16250c] {
    border-left: 3px solid #b87333;
}

.row-closed[b-8myr16250c] {
    opacity: 0.55;
}

.row-closed td:first-child[b-8myr16250c] {
    border-left: 3px solid var(--border);
}


/* ── Record Payment Modal ────────────────────────────────── */
.pay-options[b-8myr16250c] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pay-option[b-8myr16250c] {
    flex: 1 1 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}

    .pay-option svg[b-8myr16250c] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pay-option:hover[b-8myr16250c] {
        border-color: var(--navy);
        color: var(--navy);
    }

.pay-opt-paid[b-8myr16250c] {
    border-color: var(--green);
    background: var(--green-bg);
    color: var(--green);
}

.pay-opt-partial[b-8myr16250c] {
    border-color: #b07d2b;
    background: #fffbea;
    color: #7a5500;
}

.pay-opt-unpaid[b-8myr16250c] {
    border-color: var(--red);
    background: var(--red-bg);
    color: var(--red);
}

.pay-fee-block[b-8myr16250c] {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    margin-bottom: 10px;
}

.pay-fee-header[b-8myr16250c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pay-fee-label[b-8myr16250c] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.pay-fee-rate[b-8myr16250c] {
    font-size: 12px;
    color: var(--text-muted);
}

.npm-pay-total[b-8myr16250c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--navy);
    margin-top: 12px;
}

.npm-pay-total-label[b-8myr16250c] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
}

.npm-pay-total-val[b-8myr16250c] {
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
    font-family: monospace;
}


/* ── Payment History Modal ───────────────────────────────── */
.hist-label[b-8myr16250c] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.hist-grid[b-8myr16250c] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.hist-month[b-8myr16250c] {
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    border: 1.5px solid var(--border);
}

.hist-paid[b-8myr16250c] {
    background: var(--green-bg);
    border-color: var(--green);
}

.hist-unpaid[b-8myr16250c] {
    background: var(--red-bg);
    border-color: #d9b0b0;
}

.hist-month-name[b-8myr16250c] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--navy);
}

.hist-month-year[b-8myr16250c] {
    font-size: 10px;
    color: var(--text-subtle);
    margin-top: 1px;
}

.hist-month-icon[b-8myr16250c] {
    font-size: 14px;
    margin-top: 6px;
    color: var(--green);
}

.hist-unpaid .hist-month-icon[b-8myr16250c] {
    color: var(--red);
}

.hist-summary[b-8myr16250c] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.act-stat[b-8myr16250c] {
    padding: 12px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: center;
}

.act-stat-val[b-8myr16250c] {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.act-stat-key[b-8myr16250c] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .05em;
}


/* ── Payment Record (read-only rows) ─────────────────────── */
.pay-record-row[b-8myr16250c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}

.pay-record-key[b-8myr16250c] {
    font-size: 12px;
    color: var(--text-muted);
}

.pay-record-val[b-8myr16250c] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

    .pay-record-val.green[b-8myr16250c] {
        color: var(--green);
    }

    .pay-record-val.red[b-8myr16250c] {
        color: var(--red);
    }

    .pay-record-val.mono[b-8myr16250c] {
        font-family: monospace;
    }

.pay-badge-unpaid[b-8myr16250c] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--red-bg);
    color: var(--red);
}

/* OR + Collector meta row */
.pay-meta-row[b-8myr16250c] {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.pay-meta-item[b-8myr16250c] {
    flex: 1 1 160px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pay-meta-key[b-8myr16250c] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-subtle);
}

.pay-meta-val[b-8myr16250c] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pay-meta-val svg[b-8myr16250c] {
        width: 13px;
        height: 13px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pay-meta-val.mono[b-8myr16250c] {
        font-family: monospace;
    }

/* Total bar variants */
.npm-pay-total-sub[b-8myr16250c] {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    margin-top: 3px;
}

.total-unpaid[b-8myr16250c] {
    background: var(--red);
}

.total-partial[b-8myr16250c] {
    background: #7a5500;
}

.total-balance-tag[b-8myr16250c] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    margin-top: 3px;
}

/* ── Collector display ───────────────────────────────────── */
.collector-assigned[b-8myr16250c] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-icon);
    color: var(--navy);
    font-weight: 600;
    font-size: 13px;
    cursor: default;
    pointer-events: none;
}

    .collector-assigned svg[b-8myr16250c] {
        width: 14px;
        height: 14px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

/* Pills — used in Payment modal only */
.status-pill[b-8myr16250c] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pill-paid[b-8myr16250c] {
    background: var(--green-bg);
    color: var(--green);
}

.pill-unpaid[b-8myr16250c] {
    background: var(--red-bg);
    color: var(--red);
}

.pill-partial[b-8myr16250c] {
    background: #fff8e1;
    color: #7a5c00;
}

/* ── Action Buttons ──────────────────────────────────────── */
.action-btns[b-8myr16250c] {
    display: flex;
    gap: 6px;
}

.action-btn[b-8myr16250c] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.action-btn:hover[b-8myr16250c] {
    background: var(--navy);
    color: var(--gold-light);
    border-color: var(--navy);
}

.action-btn svg[b-8myr16250c] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* ── Toolbar Layout ──────────────────────────────────────── */
/* Toolbar styles are now in Toolbar.razor.css (reusable component) */


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .npm-hero[b-8myr16250c] {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 14px;
        padding: 16px;
    }

    .npm-hero-left[b-8myr16250c] {
        flex: none;
        min-width: 0;
        gap: 12px;
    }

    .npm-hero-icon[b-8myr16250c] {
        display: none;
    }

    .npm-hero-title[b-8myr16250c] {
        font-size: 19px;
    }

    .npm-hero-stats[b-8myr16250c] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 10px;
        width: 100%;
    }

    .npm-hero-val[b-8myr16250c] {
        font-size: 19px;
    }

    .npm-hero-stat[b-8myr16250c] {
        padding: 0;
        text-align: left;
        min-width: 0;
    }

    .npm-section-tabs[b-8myr16250c] {
        gap: 8px;
    }

    /* One section card per row — a 2-up grid left ~170px per card, too narrow for the icon + name/sub-text
       + unpaid badge, causing the clipped/overlapping cards. */
    .npm-sec-tab[b-8myr16250c] {
        flex: 1 1 100%;
    }

    .hist-grid[b-8myr16250c] {
        grid-template-columns: repeat(4, 1fr);
    }

    .hist-summary[b-8myr16250c] {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-8myr16250c] .page-toolbar .toolbar-left {
        flex-wrap: wrap;
    }

    [b-8myr16250c] .page-toolbar .search-box {
        min-width: 100%;
        order: -1;
        margin-bottom: 8px;
    }

    [b-8myr16250c] .page-toolbar .filter-tabs {
        min-width: 100%;
    }
}

/* ── Per-section group (All Sections view: one table per section) ── */
.npm-sec-group[b-8myr16250c] {
    margin-bottom: 22px;
}

.npm-sec-group-head[b-8myr16250c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px 10px;
}

.npm-sec-group-icon[b-8myr16250c] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.npm-sec-group-icon svg[b-8myr16250c] {
    width: 15px;
    height: 15px;
    stroke: var(--navy);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.npm-sec-group-title[b-8myr16250c] {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: .2px;
}

.npm-sec-group-count[b-8myr16250c] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 10px;
}


/* Custom NPM section — remove control on an empty custom tab + inline error */
.npm-sec-remove[b-8myr16250c] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 6px;
    margin-left: 4px;
}

    .npm-sec-remove:hover[b-8myr16250c] {
        color: var(--red);
        background: var(--red-bg);
    }

.npm-custom-err[b-8myr16250c] {
    margin: 6px 2px 0;
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
}




/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — NPM section info bar (mobile/tablet ≤768px). Desktop untouched.
   Stacks the label above a clean, left-aligned stat grid instead of the
   center-aligned flex-wrap that read unevenly on a phone.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .npm-section-info[b-8myr16250c] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .npm-section-mini-stats[b-8myr16250c] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 8px;
        width: 100%;
    }

    .npm-mini-stat[b-8myr16250c] {
        text-align: left;
        min-width: 0;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md)
   Presentation only: the active section tab follows the civic-blue active state used by the sidebar,
   hovers are blue rather than gold, and small labels use readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.npm-back-btn[b-8myr16250c] {
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .npm-back-btn:hover[b-8myr16250c] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

    .npm-back-btn:focus-visible[b-8myr16250c] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.npm-sec-tab[b-8myr16250c] {
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .npm-sec-tab:hover[b-8myr16250c] {
        border-color: var(--accent);
        background: var(--surface-hover);
    }

    .npm-sec-tab.active[b-8myr16250c] {
        border-color: var(--accent);
        background: var(--accent-soft);
        box-shadow: inset 3px 0 0 var(--accent), var(--elevation-1);
    }

.npm-sec-icon[b-8myr16250c] {
    background: var(--surface-muted);
}

.npm-sec-tab.active .npm-sec-icon[b-8myr16250c] {
    background: var(--surface);
}

.npm-sec-sub[b-8myr16250c] {
    color: var(--text-tertiary);
}

.npm-sec-tab.active .npm-sec-name[b-8myr16250c] {
    color: var(--accent);
}

.npm-sec-tab.active .npm-sec-sub[b-8myr16250c] {
    color: var(--text-secondary);
}

.npm-section-info[b-8myr16250c] {
    align-items: center;
    padding: 14px 20px;
}

.npm-section-desc[b-8myr16250c] {
    color: var(--text-tertiary);
}

.fee-chip[b-8myr16250c] {
    border-radius: 4px;
    background: var(--surface-muted);
    border-color: var(--border-strong);
}

.npm-mini-stat[b-8myr16250c] {
    text-align: right;
}

.npm-mini-val[b-8myr16250c] {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.npm-mini-key[b-8myr16250c] {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.npm-mini-stat.partial-stat .npm-mini-val[b-8myr16250c] {
    color: #9a6a1f;
}

@media (max-width: 768px) {
    .npm-mini-stat[b-8myr16250c] {
        text-align: left;
    }
}

/* ── V3 (2026-10-02): the sections read as ONE joined selector — a single bordered rail, hairline dividers, and a
      civic-blue underline on the active section — instead of separate dashboard cards. Icon, name, stall count and
      the unpaid badge are kept. On a phone the rail stacks into one bordered list. ── */
.npm-section-tabs[b-8myr16250c] {
    gap: 0;
    flex-wrap: nowrap;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
    overflow-x: auto;
}

.npm-sec-tab[b-8myr16250c] {
    flex: 1 1 0;
    min-width: 170px;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
}

    .npm-sec-tab:first-child[b-8myr16250c] {
        border-left: 0;
    }

    .npm-sec-tab:hover[b-8myr16250c] {
        border-color: var(--border);
        background: var(--surface-hover);
    }

    .npm-sec-tab.active[b-8myr16250c] {
        border-color: var(--border);
        background: var(--accent-soft);
        box-shadow: inset 0 -3px 0 var(--accent);
    }

    .npm-sec-tab:focus-visible[b-8myr16250c] {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

@media (max-width: 768px) {
    .npm-section-tabs[b-8myr16250c] {
        flex-direction: column;
        overflow-x: visible;
    }

    .npm-sec-tab[b-8myr16250c] {
        min-width: 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

        .npm-sec-tab:first-child[b-8myr16250c] {
            border-top: 0;
        }

        .npm-sec-tab.active[b-8myr16250c] {
            box-shadow: inset 3px 0 0 var(--accent);
        }
}
/* /Components/Pages/Menus/Facilities/SH.razor.rz.scp.css */
/* ============================================================
   SH.razor.css  —  Slaughterhouse page-scoped styles
   Blazor CSS isolation: only applies to SH.razor
   Use --* tokens from app.css; do NOT redefine them here.
   ============================================================ */


/* -- Back Button ------------------------------------------- */
.slh-back-btn[b-z0iwwb8t3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

    .slh-back-btn:hover[b-z0iwwb8t3w] {
        background: var(--bg-icon);
        color: var(--navy);
        border-color: var(--navy);
    }

    .slh-back-btn svg[b-z0iwwb8t3w] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* -- Toolbar (Unified Design) ------------------------------ */
.toolbar-unified[b-z0iwwb8t3w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
}

.search-box[b-z0iwwb8t3w] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
    flex: 1;
    min-width: 180px;
    max-width: 350px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .search-box:focus-within[b-z0iwwb8t3w] {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(200,168,75,0.08);
    }

    .search-box svg[b-z0iwwb8t3w] {
        width: 14px;
        height: 14px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .search-box input[b-z0iwwb8t3w] {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 12px;
        color: var(--text);
        outline: none;
        min-width: 0;
    }

        .search-box input[b-z0iwwb8t3w]::placeholder {
            color: var(--text-muted);
        }

.search-clear[b-z0iwwb8t3w] {
    font-size: 16px;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
    user-select: none;
}

    .search-clear:hover[b-z0iwwb8t3w] {
        color: var(--text);
    }

.filter-tabs-inline[b-z0iwwb8t3w] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.filter-tab[b-z0iwwb8t3w] {
    padding: 6px 12px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.15s;
    white-space: nowrap;
}

    .filter-tab:hover[b-z0iwwb8t3w] {
        background: var(--bg-icon);
        color: var(--text-subtle);
    }

    .filter-tab.active[b-z0iwwb8t3w] {
        background: var(--navy);
        color: #fff;
        font-weight: 600;
    }

        .filter-tab.active:hover[b-z0iwwb8t3w] {
            background: #051219;
        }

.toolbar-middle[b-z0iwwb8t3w] {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.toolbar-actions[b-z0iwwb8t3w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn[b-z0iwwb8t3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    height: auto;
    text-decoration: none;
}

    .btn svg[b-z0iwwb8t3w] {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

.btn-primary[b-z0iwwb8t3w] {
    background: var(--navy);
    color: var(--gold);
    border-color: var(--navy);
}

    .btn-primary:hover[b-z0iwwb8t3w] {
        background: #051219;
        border-color: #051219;
        color: #d4af70;
    }

.btn-outline[b-z0iwwb8t3w] {
    background: var(--bg-card);
    color: var(--text-muted);
    border-color: var(--border);
}

    .btn-outline:hover[b-z0iwwb8t3w] {
        background: var(--bg);
        color: var(--text-subtle);
        border-color: var(--text-muted);
    }


/* -- Facility Info Bar ------------------------------------- */
.slh-facility-info[b-z0iwwb8t3w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}

.slh-facility-info-left[b-z0iwwb8t3w] {
    flex: 1 1 300px;
}

.slh-facility-label-row[b-z0iwwb8t3w] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slh-facility-label[b-z0iwwb8t3w] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.slh-facility-desc[b-z0iwwb8t3w] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}


/* -- Info Icon + Tooltip ----------------------------------- */
.slh-info-wrap[b-z0iwwb8t3w] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.slh-info-icon[b-z0iwwb8t3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-subtle);
    transition: color .15s;
    flex-shrink: 0;
}

    .slh-info-icon:hover[b-z0iwwb8t3w] {
        color: var(--navy);
    }

    .slh-info-icon svg[b-z0iwwb8t3w] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.slh-tooltip[b-z0iwwb8t3w] {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: var(--navy);
    color: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    width: 260px;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    pointer-events: none;
}

    .slh-tooltip[b-z0iwwb8t3w]::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid var(--navy);
    }

.slh-info-wrap:hover .slh-tooltip[b-z0iwwb8t3w] {
    display: block;
}

.slh-tooltip-title[b-z0iwwb8t3w] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--gold);
    margin-bottom: 10px;
}

.slh-tooltip-section[b-z0iwwb8t3w] {
    margin-bottom: 4px;
}

.slh-tooltip-animal[b-z0iwwb8t3w] {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.slh-tooltip-breakdown[b-z0iwwb8t3w] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 12px;
    padding-left: 4px;
}

    .slh-tooltip-breakdown span:nth-child(odd)[b-z0iwwb8t3w] {
        font-size: 11px;
        color: rgba(255,255,255,.65);
    }

    .slh-tooltip-breakdown span:nth-child(even)[b-z0iwwb8t3w] {
        font-size: 11px;
        font-weight: 600;
        color: var(--gold-light);
        text-align: right;
    }

.slh-tooltip-divider[b-z0iwwb8t3w] {
    height: 1px;
    background: rgba(255,255,255,.12);
    margin: 10px 0;
}


/* -- Facility Mini Stats ----------------------------------- */
.slh-facility-mini-stats[b-z0iwwb8t3w] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 1 auto;
}

.slh-mini-stat[b-z0iwwb8t3w] {
    text-align: center;
    padding: 6px 12px;
}

.slh-mini-val[b-z0iwwb8t3w] {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.slh-mini-key[b-z0iwwb8t3w] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.slh-mini-stat.hog-stat .slh-mini-val[b-z0iwwb8t3w] {
    color: var(--green);
}

.slh-mini-stat.carabao-stat .slh-mini-val[b-z0iwwb8t3w] {
    color: #2e7bb5;
}

.slh-mini-stat.cow-stat .slh-mini-val[b-z0iwwb8t3w] {
    color: #b87333;
}

.slh-mini-stat.others-stat .slh-mini-val[b-z0iwwb8t3w] {
    color: #8b5a3c;
}


/* -- Table Row Accents ------------------------------------- */
.row-hog[b-z0iwwb8t3w] {
    border-left: 3px solid var(--green);
}

.row-carabao[b-z0iwwb8t3w] {
    border-left: 3px solid #2e7bb5;
}

.row-cow[b-z0iwwb8t3w] {
    border-left: 3px solid #b87333;
}

/* Custom animal types (Others) - brown left border */
.row-other[b-z0iwwb8t3w] {
    border-left: 3px solid #8b5a3c;
}

/* -- Expandable Rows --------------------------------------- */
.has-children[b-z0iwwb8t3w] {
    cursor: pointer;
}

.animal-type-group[b-z0iwwb8t3w] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.animal-count-badge[b-z0iwwb8t3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: var(--gold);
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.expand-icon[b-z0iwwb8t3w] {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s;
}

.expanded .expand-icon[b-z0iwwb8t3w] {
    transform: rotate(180deg);
}

.detail-row[b-z0iwwb8t3w] {
    background: var(--bg) !important;
}

    .detail-row td[b-z0iwwb8t3w] {
        border-left: none !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

.detail-animal-type[b-z0iwwb8t3w] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 20px;
    font-size: 12px;
    color: var(--text-subtle);
}

    .detail-animal-type svg[b-z0iwwb8t3w] {
        width: 12px;
        height: 12px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* -- History Toggle Button --------------------------------- */
.btn-history-toggle[b-z0iwwb8t3w] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-subtle);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

    .btn-history-toggle:hover[b-z0iwwb8t3w] {
        background: var(--navy);
        color: var(--gold-light);
        border-color: var(--navy);
    }

    .btn-history-toggle svg[b-z0iwwb8t3w] {
        width: 12px;
        height: 12px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s;
    }

        .btn-history-toggle svg.expanded[b-z0iwwb8t3w] {
            transform: rotate(180deg);
        }

/* -- History Rows ------------------------------------------ */
.history-row[b-z0iwwb8t3w] {
    background: rgba(200,168,75,0.04) !important;
}

    .history-row td[b-z0iwwb8t3w] {
        border-left: none !important;
    }

    .history-row td:first-child[b-z0iwwb8t3w] {
        border-left: 3px solid var(--gold) !important;
    }

.history-owner-name[b-z0iwwb8t3w] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 12px;
    font-size: 12px;
    color: var(--text-subtle);
}

    .history-owner-name svg[b-z0iwwb8t3w] {
        width: 12px;
        height: 12px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.history-detail-row[b-z0iwwb8t3w] {
    background: rgba(200,168,75,0.02) !important;
}

/* -- Action Buttons ---------------------------------------- */
.action-btns[b-z0iwwb8t3w] {
    display: flex;
    gap: 6px;
}

.btn-action[b-z0iwwb8t3w] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

    .btn-action:hover[b-z0iwwb8t3w] {
        background: var(--navy);
        color: var(--gold-light);
        border-color: var(--navy);
    }

    .btn-action svg[b-z0iwwb8t3w] {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* -- Utilities --------------------------------------------- */
.mono[b-z0iwwb8t3w] {
    font-family: 'Consolas', monospace;
    font-size: 11px;
}

.empty-state[b-z0iwwb8t3w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 32px;
    color: var(--text-muted);
    font-size: 13px;
    width: 100%;
}

    .empty-state svg[b-z0iwwb8t3w] {
        width: 22px;
        height: 22px;
        stroke: var(--text-subtle);
        fill: none;
        stroke-width: 1.75;
        display: block;
    }

/* Loading table mirrors the real slaughterhouse transaction table. */
.slh-loading-table[b-z0iwwb8t3w] {
    overflow-x: auto;
}

    .slh-loading-table tbody tr[b-z0iwwb8t3w] {
        pointer-events: none;
    }

        .slh-loading-table tbody tr:hover[b-z0iwwb8t3w] {
            background: transparent;
        }

.slh-loading-actions[b-z0iwwb8t3w] {
    gap: 6px;
    pointer-events: none;
}



/* ══════════════════════════════════════════
   RESPONSIVE — SLH toolbar (mobile/tablet ≤768px)
   Desktop (≥769px) is untouched.
══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Desktop packs search + animal filter tabs + action buttons into one non-wrapping row (search has a
       180px min-width, tabs/buttons are flex-shrink:0) — nothing can give, so it overflows on a phone.
       Stack them instead: search full-width, tabs scrollable, actions wrap. */
    .toolbar-unified[b-z0iwwb8t3w] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .search-box[b-z0iwwb8t3w] {
        min-width: 100%;
        max-width: 100%;
        order: 1;
    }

    .filter-tabs-inline[b-z0iwwb8t3w] {
        order: 2;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .filter-tabs-inline[b-z0iwwb8t3w]::-webkit-scrollbar { display: none; }

    .toolbar-actions[b-z0iwwb8t3w] {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
    }

        .toolbar-actions .btn[b-z0iwwb8t3w] {
            flex: 1 1 auto;
        }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md)
   Presentation only: this page keeps its own toolbar and buttons, so they get the same V3 treatment as the
   shared Toolbar. Readable tertiary text replaces the legacy muted grey; civic blue replaces gold for
   interaction. Small labels were raised to 11px.
   ══════════════════════════════════════════════════════════════ */
.topbar[b-z0iwwb8t3w],
.content-area[b-z0iwwb8t3w] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.filter-tab[b-z0iwwb8t3w] {
    border-radius: 6px;
    color: var(--text-secondary);
    font-weight: 600;
}

    .filter-tab:hover[b-z0iwwb8t3w] {
        background: var(--surface-hover);
        color: var(--navy);
    }

    .filter-tab.active[b-z0iwwb8t3w] {
        background: var(--accent-soft);
        color: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent);
    }

        .filter-tab.active:hover[b-z0iwwb8t3w] {
            background: var(--accent-soft);
        }

.btn-primary[b-z0iwwb8t3w] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

    .btn-primary:hover[b-z0iwwb8t3w] {
        border-color: var(--accent-hover);
        background: var(--accent-hover);
        color: var(--surface);
    }

.btn-outline[b-z0iwwb8t3w] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .btn-outline:hover[b-z0iwwb8t3w] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.btn-history-toggle:hover[b-z0iwwb8t3w],
.btn-action:hover[b-z0iwwb8t3w] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.filter-tab:focus-visible[b-z0iwwb8t3w],
.btn-primary:focus-visible[b-z0iwwb8t3w],
.btn-outline:focus-visible[b-z0iwwb8t3w],
.btn-history-toggle:focus-visible[b-z0iwwb8t3w],
.btn-action:focus-visible[b-z0iwwb8t3w] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.detail-fee-items[b-z0iwwb8t3w] {
    margin-top: 2px;
    padding-left: 22px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Menus/Facilities/TCC.razor.rz.scp.css */
/* ============================================================
   TCC.razor.css  —  Tampak Commercial Center page-scoped styles
   Blazor CSS isolation: only applies to TCC.razor
   Use --* tokens from app.css; do NOT redefine them here.
   ============================================================ */


/* ── Back Button ─────────────────────────────────────────── */
.tcc-back-btn[b-b3rrxdqqui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

    .tcc-back-btn:hover[b-b3rrxdqqui] {
        background: var(--bg-icon);
        color: var(--navy);
        border-color: var(--navy);
    }

    .tcc-back-btn svg[b-b3rrxdqqui] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* ── Hero Banner ─────────────────────────────────────────── */
.tcc-hero[b-b3rrxdqqui] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 28px 32px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    flex-wrap: wrap;
}

    .tcc-hero[b-b3rrxdqqui]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
        pointer-events: none;
    }

.tcc-hero-left[b-b3rrxdqqui] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 260px;
}

.tcc-hero-icon[b-b3rrxdqqui] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .tcc-hero-icon svg[b-b3rrxdqqui] {
        width: 26px;
        height: 26px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.tcc-hero-eyebrow[b-b3rrxdqqui] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.tcc-hero-title[b-b3rrxdqqui] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.tcc-hero-sub[b-b3rrxdqqui] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.tcc-hero-stats[b-b3rrxdqqui] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.tcc-hero-stat[b-b3rrxdqqui] {
    padding: 0 24px;
    text-align: center;
}

    .tcc-hero-stat:first-child[b-b3rrxdqqui] {
        padding-left: 0;
    }

.tcc-hero-val[b-b3rrxdqqui] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.tcc-hero-key[b-b3rrxdqqui] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tcc-hero-divider[b-b3rrxdqqui] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.tcc-hero-progress[b-b3rrxdqqui] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.tcc-hero-progress-fill[b-b3rrxdqqui] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width .5s ease;
}


/* ── Info Bar ────────────────────────────────────────────── */
.tcc-section-info[b-b3rrxdqqui] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.tcc-section-info-left[b-b3rrxdqqui] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tcc-section-label[b-b3rrxdqqui] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.tcc-section-desc[b-b3rrxdqqui] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

.fee-chips[b-b3rrxdqqui] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fee-chip[b-b3rrxdqqui] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--bg-icon);
    color: var(--navy);
    border: 1px solid var(--border);
}

.tcc-section-mini-stats[b-b3rrxdqqui] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.tcc-mini-stat[b-b3rrxdqqui] {
    text-align: center;
    min-width: 60px;
}

.tcc-mini-val[b-b3rrxdqqui] {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

.tcc-mini-key[b-b3rrxdqqui] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-top: 2px;
}

.tcc-mini-stat.unpaid-stat .tcc-mini-val[b-b3rrxdqqui] {
    color: var(--red);
}

.tcc-mini-stat.partial-stat .tcc-mini-val[b-b3rrxdqqui] {
    color: #b07d2b;
}


/* ── Table cells ─────────────────────────────────────────── */
.table-wrap[b-b3rrxdqqui] {
    overflow-x: unset;
}

.stall-num-cell[b-b3rrxdqqui] {
    display: flex;
    align-items: center;
}

.stall-num-badge[b-b3rrxdqqui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    font-family: monospace;
}

.td-name[b-b3rrxdqqui] {
    font-weight: 600;
    color: var(--text);
}

.td-contract-name[b-b3rrxdqqui] {
    font-size: 13px;
    color: var(--text-muted);
}

.td-center[b-b3rrxdqqui] {
    text-align: center;
}

.td-date[b-b3rrxdqqui] {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.corner-badge[b-b3rrxdqqui] {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: #fff8e1;
    color: #7a5500;
    border: 1px solid #e8d48a;
    white-space: nowrap;
}

.no-contract[b-b3rrxdqqui] {
    font-size: 11px;
    color: var(--text-subtle);
}

.amount-val[b-b3rrxdqqui] {
    font-weight: 600;
    font-family: monospace;
    color: var(--navy);
}

.mono[b-b3rrxdqqui] {
    font-family: 'Consolas', monospace;
}

.row-inactive[b-b3rrxdqqui] {
    opacity: .55;
}

/* Row status left-border indicators */
.row-paid td:first-child[b-b3rrxdqqui] {
    border-left: 3px solid var(--green);
}

.row-unpaid td:first-child[b-b3rrxdqqui] {
    border-left: 3px solid var(--red);
}

.row-partial td:first-child[b-b3rrxdqqui] {
    border-left: 3px solid #b87333;
}

.row-closed[b-b3rrxdqqui] {
    opacity: 0.55;
}

.row-closed td:first-child[b-b3rrxdqqui] {
    border-left: 3px solid var(--border);
}


/* ── Fee Blocks (Payment Modal) ──────────────────────────── */
.pay-options[b-b3rrxdqqui] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pay-option[b-b3rrxdqqui] {
    flex: 1 1 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}

    .pay-option svg[b-b3rrxdqqui] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pay-option:hover[b-b3rrxdqqui] {
        border-color: var(--navy);
        color: var(--navy);
    }

.pay-opt-paid[b-b3rrxdqqui] {
    border-color: var(--green);
    background: var(--green-bg);
    color: var(--green);
}

.pay-opt-partial[b-b3rrxdqqui] {
    border-color: #b07d2b;
    background: #fffbea;
    color: #7a5500;
}

.pay-opt-unpaid[b-b3rrxdqqui] {
    border-color: var(--red);
    background: var(--red-bg);
    color: var(--red);
}

.pay-fee-block[b-b3rrxdqqui] {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    margin-bottom: 10px;
}

.pay-fee-header[b-b3rrxdqqui] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pay-fee-label[b-b3rrxdqqui] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.pay-fee-rate[b-b3rrxdqqui] {
    font-size: 12px;
    color: var(--text-muted);
}

.tcc-pay-total[b-b3rrxdqqui] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--navy);
    margin-top: 12px;
}

.tcc-pay-total-label[b-b3rrxdqqui] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
}

.tcc-pay-total-val[b-b3rrxdqqui] {
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
    font-family: monospace;
}

.pay-record-row[b-b3rrxdqqui] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}

.pay-record-key[b-b3rrxdqqui] {
    font-size: 12px;
    color: var(--text-muted);
}

.pay-record-val[b-b3rrxdqqui] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

    .pay-record-val.green[b-b3rrxdqqui] {
        color: var(--green);
    }

    .pay-record-val.red[b-b3rrxdqqui] {
        color: var(--red);
    }

    .pay-record-val.mono[b-b3rrxdqqui] {
        font-family: monospace;
    }

.pay-badge-unpaid[b-b3rrxdqqui] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--red-bg);
    color: var(--red);
}

/* OR + Collector meta row */
.pay-meta-row[b-b3rrxdqqui] {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.pay-meta-item[b-b3rrxdqqui] {
    flex: 1 1 160px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pay-meta-key[b-b3rrxdqqui] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-subtle);
}

.pay-meta-val[b-b3rrxdqqui] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pay-meta-val svg[b-b3rrxdqqui] {
        width: 13px;
        height: 13px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pay-meta-val.mono[b-b3rrxdqqui] {
        font-family: monospace;
    }

/* Total bar variants */
.tcc-pay-total-sub[b-b3rrxdqqui] {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    margin-top: 3px;
}

.total-unpaid[b-b3rrxdqqui] {
    background: var(--red);
}

.total-partial[b-b3rrxdqqui] {
    background: #7a5500;
}

.total-balance-tag[b-b3rrxdqqui] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    margin-top: 3px;
}

/* ── Collector display ───────────────────────────────────── */
.collector-assigned[b-b3rrxdqqui] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-icon);
    color: var(--navy);
    font-weight: 600;
    font-size: 13px;
    cursor: default;
    pointer-events: none;
}

    .collector-assigned svg[b-b3rrxdqqui] {
        width: 14px;
        height: 14px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

/* Pills — used in Payment modal only */
.status-pill[b-b3rrxdqqui] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pill-paid[b-b3rrxdqqui] {
    background: var(--green-bg);
    color: var(--green);
}

.pill-unpaid[b-b3rrxdqqui] {
    background: var(--red-bg);
    color: var(--red);
}

.pill-partial[b-b3rrxdqqui] {
    background: #fff8e1;
    color: #7a5c00;
}


/* ── Payment History Modal ───────────────────────────────── */
.hist-label[b-b3rrxdqqui] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.hist-grid[b-b3rrxdqqui] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.hist-month[b-b3rrxdqqui] {
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    border: 1.5px solid var(--border);
}

.hist-paid[b-b3rrxdqqui] {
    background: var(--green-bg);
    border-color: var(--green);
}

.hist-unpaid[b-b3rrxdqqui] {
    background: var(--red-bg);
    border-color: #d9b0b0;
}

.hist-month-name[b-b3rrxdqqui] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--navy);
}

.hist-month-year[b-b3rrxdqqui] {
    font-size: 10px;
    color: var(--text-subtle);
    margin-top: 1px;
}

.hist-month-icon[b-b3rrxdqqui] {
    font-size: 14px;
    margin-top: 6px;
    color: var(--green);
}

.hist-unpaid .hist-month-icon[b-b3rrxdqqui] {
    color: var(--red);
}

.hist-summary[b-b3rrxdqqui] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.act-stat[b-b3rrxdqqui] {
    padding: 12px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: center;
}

.act-stat-val[b-b3rrxdqqui] {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}

.act-stat-key[b-b3rrxdqqui] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Action Buttons ──────────────────────────────────────── */
.action-btns[b-b3rrxdqqui] {
    display: flex;
    gap: 6px;
}

.action-btn[b-b3rrxdqqui] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

    .action-btn:hover[b-b3rrxdqqui] {
        background: var(--navy);
        color: var(--gold-light);
        border-color: var(--navy);
    }

    .action-btn svg[b-b3rrxdqqui] {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
/* ── Toolbar Layout ──────────────────────────────────────── */
[b-b3rrxdqqui] .page-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-b3rrxdqqui] .page-toolbar .toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
}

[b-b3rrxdqqui] .page-toolbar .search-box {
    flex-shrink: 0;
    min-width: 200px;
}

[b-b3rrxdqqui] .page-toolbar .filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

[b-b3rrxdqqui] .page-toolbar .filter-tab {
    flex-shrink: 0;
    white-space: nowrap;
}


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .tcc-hero[b-b3rrxdqqui] {
        padding: 20px;
        gap: 16px;
    }

    .tcc-hero-title[b-b3rrxdqqui] {
        font-size: 18px;
    }

    .tcc-hero-val[b-b3rrxdqqui] {
        font-size: 18px;
    }

    .tcc-hero-stat[b-b3rrxdqqui] {
        padding: 0 12px;
    }

    .hist-grid[b-b3rrxdqqui] {
        grid-template-columns: repeat(4, 1fr);
    }

    .hist-summary[b-b3rrxdqqui] {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-b3rrxdqqui] .page-toolbar .toolbar-left {
        flex-wrap: wrap;
    }

    [b-b3rrxdqqui] .page-toolbar .search-box {
        min-width: 100%;
        order: -1;
        margin-bottom: 8px;
    }

    [b-b3rrxdqqui] .page-toolbar .filter-tabs {
        min-width: 100%;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md)
   Presentation only: matches the shared FacilityPage info bar and back button.
   ══════════════════════════════════════════════════════════════ */
.tcc-back-btn[b-b3rrxdqqui] {
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .tcc-back-btn:hover[b-b3rrxdqqui] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

    .tcc-back-btn:focus-visible[b-b3rrxdqqui] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.tcc-section-info[b-b3rrxdqqui] {
    align-items: center;
    padding: 14px 20px;
    background: var(--surface);
}

.tcc-section-desc[b-b3rrxdqqui] {
    color: var(--text-tertiary);
}

.tcc-mini-stat[b-b3rrxdqqui] {
    text-align: right;
}

.tcc-mini-val[b-b3rrxdqqui] {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.tcc-mini-key[b-b3rrxdqqui] {
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.tcc-mini-stat.partial-stat .tcc-mini-val[b-b3rrxdqqui] {
    color: #9a6a1f;
}

@media (max-width: 768px) {
    .tcc-mini-stat[b-b3rrxdqqui] {
        text-align: left;
    }
}
/* /Components/Pages/Menus/Facilities/TPM.razor.rz.scp.css */
.tpm-topbar[b-mi2pwshi8f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 2rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.tpm-topbar-left[b-mi2pwshi8f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tpm-back-btn[b-mi2pwshi8f],
.tpm-report-back[b-mi2pwshi8f] {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
}

.tpm-back-btn:hover[b-mi2pwshi8f],
.tpm-report-back:hover[b-mi2pwshi8f] {
    background: var(--bg);
    border-color: var(--navy-2);
}

.tpm-back-btn svg[b-mi2pwshi8f],
.tpm-report-back svg[b-mi2pwshi8f] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tpm-topbar-title[b-mi2pwshi8f] {
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
}

.tpm-topbar-breadcrumb[b-mi2pwshi8f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 12px;
}

.tpm-breadcrumb-link[b-mi2pwshi8f] {
    color: var(--text-muted);
    text-decoration: none;
}

.tpm-breadcrumb-link:hover[b-mi2pwshi8f] {
    color: var(--gold);
}

.tpm-breadcrumb-sep[b-mi2pwshi8f] {
    color: var(--border);
}

.tpm-breadcrumb-active[b-mi2pwshi8f] {
    color: var(--gold);
    font-weight: 600;
}

.tpm-topbar-date[b-mi2pwshi8f] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.tpm-topbar-date svg[b-mi2pwshi8f] {
    width: 14px;
    height: 14px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tpm-content-area[b-mi2pwshi8f] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

.tpm-hero-glyph[b-mi2pwshi8f] {
    width: 26px;
    height: 26px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tpm-columns[b-mi2pwshi8f] {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.65fr);
    align-items: start;
    gap: 1.1rem;
}

.tpm-panel[b-mi2pwshi8f] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-self: start;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.tpm-panel-header[b-mi2pwshi8f] {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.tpm-panel-title[b-mi2pwshi8f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.tpm-panel-title svg[b-mi2pwshi8f] {
    width: 15px;
    height: 15px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tpm-cal-nav[b-mi2pwshi8f] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.tpm-cal-nav-btn[b-mi2pwshi8f] {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.tpm-cal-nav-btn:hover:not(:disabled)[b-mi2pwshi8f] {
    background: var(--bg);
    border-color: var(--navy-2);
}

.tpm-cal-nav-btn:disabled[b-mi2pwshi8f] {
    cursor: not-allowed;
    opacity: 0.42;
}

.tpm-cal-nav-btn svg[b-mi2pwshi8f] {
    width: 12px;
    height: 12px;
    stroke: var(--navy);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tpm-cal-month[b-mi2pwshi8f] {
    min-width: 92px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 650;
    text-align: center;
    white-space: nowrap;
}

.tpm-cal-desc[b-mi2pwshi8f] {
    padding: 0.55rem 1.1rem;
    color: var(--text-muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 11.5px;
}

.tpm-friday-list[b-mi2pwshi8f] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
}

.tpm-friday-item[b-mi2pwshi8f] {
    display: flex;
    width: 100%;
    min-height: 68px;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    color: inherit;
    text-align: left;
    background: var(--bg-card);
    border: 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.tpm-friday-item:last-child[b-mi2pwshi8f] {
    border-bottom: 0;
}

.tpm-friday-item:hover:not(:disabled)[b-mi2pwshi8f] {
    background: var(--bg);
}

.tpm-friday-item:focus-visible[b-mi2pwshi8f],
.tpm-cal-nav-btn:focus-visible[b-mi2pwshi8f],
.tpm-report-btn:focus-visible[b-mi2pwshi8f],
.tpm-load-error button:focus-visible[b-mi2pwshi8f],
.tpm-search-input:focus-visible[b-mi2pwshi8f] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.tpm-friday-item.friday-selected[b-mi2pwshi8f] {
    background: rgba(200, 168, 75, 0.07);
    box-shadow: inset 3px 0 var(--gold);
}

.tpm-friday-item:disabled[b-mi2pwshi8f] {
    cursor: default;
    opacity: 0.68;
}

.tpm-friday-date-block[b-mi2pwshi8f] {
    display: flex;
    width: 40px;
    flex: 0 0 40px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tpm-friday-day[b-mi2pwshi8f] {
    color: var(--navy);
    font-size: 20px;
    font-weight: 750;
    line-height: 1.05;
}

.tpm-friday-label[b-mi2pwshi8f] {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tpm-friday-info[b-mi2pwshi8f] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.tpm-friday-full[b-mi2pwshi8f] {
    overflow: hidden;
    color: var(--navy);
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpm-friday-meta[b-mi2pwshi8f] {
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-meta-none[b-mi2pwshi8f],
.tpm-meta-future[b-mi2pwshi8f] {
    color: var(--text-subtle);
}

.tpm-entry-count[b-mi2pwshi8f] {
    display: inline-flex;
    min-width: 28px;
    height: 26px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    color: var(--navy);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.tpm-cal-footer[b-mi2pwshi8f] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.8rem 0.9rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.tpm-cal-sum-item[b-mi2pwshi8f] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

.tpm-cal-sum-val[b-mi2pwshi8f] {
    color: var(--navy);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    white-space: nowrap;
}

.tpm-cal-sum-key[b-mi2pwshi8f] {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.035em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tpm-entries-header[b-mi2pwshi8f] {
    align-items: flex-start;
}

.tpm-entries-heading[b-mi2pwshi8f] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.tpm-selected-eyebrow[b-mi2pwshi8f] {
    color: var(--gold);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tpm-entries-title[b-mi2pwshi8f] {
    color: var(--navy);
    font-size: 16px;
    font-weight: 750;
}

.tpm-selected-date[b-mi2pwshi8f] {
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-report-btn[b-mi2pwshi8f] {
    display: inline-flex;
    min-height: 34px;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.75rem;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
}

.tpm-report-btn:hover[b-mi2pwshi8f] {
    background: var(--bg);
    border-color: var(--navy-2);
}

.tpm-report-btn svg[b-mi2pwshi8f] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tpm-attendance-info[b-mi2pwshi8f] {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: 1.4rem;
    padding: 0.65rem 1.1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.tpm-attend-stat[b-mi2pwshi8f] {
    display: flex;
    min-width: 72px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.tpm-attend-val[b-mi2pwshi8f] {
    color: var(--navy);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.tpm-attend-key[b-mi2pwshi8f] {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tpm-instrument-context[b-mi2pwshi8f] {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0 0.45rem;
    margin-left: auto;
    color: var(--navy);
    font-size: 11px;
    font-weight: 650;
}

.tpm-instrument-mark[b-mi2pwshi8f] {
    display: inline-flex;
    min-width: 25px;
    height: 21px;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.tpm-instrument-context small[b-mi2pwshi8f] {
    grid-column: 2;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 450;
}

.tpm-search-wrap[b-mi2pwshi8f] {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 0.55rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--border);
}

.tpm-search-wrap:focus-within[b-mi2pwshi8f] {
    box-shadow: inset 0 0 0 1px var(--gold);
}

.tpm-search-wrap svg[b-mi2pwshi8f] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.tpm-search-input[b-mi2pwshi8f] {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0;
    color: var(--navy);
    background: transparent;
    border: 0;
    font-size: 12px;
}

.tpm-search-input[b-mi2pwshi8f]::placeholder {
    color: var(--text-muted);
}

.tpm-search-input:focus-visible[b-mi2pwshi8f] {
    outline-offset: 1px;
}

.tpm-entry-context[b-mi2pwshi8f] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem 0;
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-source-label[b-mi2pwshi8f] {
    color: var(--gold);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tpm-vendor-table-wrap[b-mi2pwshi8f] {
    width: 100%;
    overflow-x: auto;
}

.tpm-vendor-table[b-mi2pwshi8f] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 12px;
}

.tpm-vendor-table thead tr[b-mi2pwshi8f] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.tpm-vendor-table th[b-mi2pwshi8f] {
    padding: 0.55rem 0.75rem;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.tpm-vendor-table th:first-child[b-mi2pwshi8f],
.tpm-vendor-table td:first-child[b-mi2pwshi8f] {
    width: 42px;
    padding-left: 1.1rem;
}

.tpm-vendor-table th:last-child[b-mi2pwshi8f],
.tpm-vendor-table td:last-child[b-mi2pwshi8f] {
    width: 130px;
    padding-right: 1.1rem;
    text-align: right;
}

.tpm-vendor-table tbody tr[b-mi2pwshi8f] {
    border-bottom: 1px solid var(--border);
}

.tpm-vendor-table tbody tr:last-child[b-mi2pwshi8f] {
    border-bottom: 0;
}

.tpm-vendor-table tbody tr:hover[b-mi2pwshi8f] {
    background: var(--bg);
}

.tpm-vendor-table td[b-mi2pwshi8f] {
    padding: 0.72rem 0.75rem;
    color: var(--navy);
    vertical-align: middle;
}

.tpm-row-num[b-mi2pwshi8f] {
    color: var(--text-muted) !important;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tpm-vendor-name-cell[b-mi2pwshi8f] {
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
}

.tpm-goods-cell[b-mi2pwshi8f] {
    color: var(--text-muted) !important;
    font-size: 11.5px;
}

.tpm-fee-cell[b-mi2pwshi8f] {
    color: var(--navy);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    white-space: nowrap;
}

.tpm-empty[b-mi2pwshi8f] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.6rem 1.2rem;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.tpm-empty svg[b-mi2pwshi8f] {
    width: 26px;
    height: 26px;
    stroke: var(--border);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tpm-page-state[b-mi2pwshi8f] {
    padding: 2rem;
    color: var(--text-muted);
    text-align: center;
}

.tpm-load-error[b-mi2pwshi8f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 8px;
    font-size: 12px;
}

.tpm-load-error button[b-mi2pwshi8f] {
    padding: 0.4rem 0.7rem;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.tpm-loading-table[b-mi2pwshi8f] {
    padding-top: 0.5rem;
}

@media (max-width: 1050px) {
    .tpm-columns[b-mi2pwshi8f] {
        grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.35fr);
    }

    .tpm-cal-footer[b-mi2pwshi8f] {
        padding-inline: 0.6rem;
    }

    .tpm-cal-sum-key[b-mi2pwshi8f] {
        font-size: 8px;
    }
}

@media (max-width: 760px) {
    .tpm-topbar[b-mi2pwshi8f] {
        min-height: 58px;
        padding: 0 1rem;
    }

    .tpm-topbar-date[b-mi2pwshi8f] {
        font-size: 11px;
    }

    .tpm-content-area[b-mi2pwshi8f] {
        padding: 1rem;
    }

    .tpm-columns[b-mi2pwshi8f] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

    .tpm-panel-header[b-mi2pwshi8f] {
        padding-inline: 0.9rem;
    }

    .tpm-friday-item[b-mi2pwshi8f] {
        min-height: 64px;
        padding-inline: 0.9rem;
    }
}

@media (max-width: 430px) {
    .tpm-topbar-date[b-mi2pwshi8f] {
        gap: 0;
        font-size: 0;
    }

    .tpm-topbar-date svg[b-mi2pwshi8f] {
        width: 16px;
        height: 16px;
    }

    .tpm-attendance-info[b-mi2pwshi8f] {
        gap: 0.8rem;
        padding-inline: 0.85rem;
    }

    .tpm-attend-stat[b-mi2pwshi8f] {
        min-width: 60px;
    }

    .tpm-instrument-context[b-mi2pwshi8f] {
        gap: 0 0.3rem;
        font-size: 11px;
    }

    .tpm-cal-footer[b-mi2pwshi8f] {
        gap: 0.25rem;
    }

    .tpm-cal-sum-val[b-mi2pwshi8f] {
        font-size: 12px;
    }

    .tpm-cal-sum-key[b-mi2pwshi8f] {
        max-width: 100px;
        font-size: 7.5px;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md)
   Presentation only. Inside this page, the legacy muted grey becomes the readable tertiary text and the gold
   interaction accent (selection, focus, active markers) becomes civic blue. Small labels were raised to 11px.
   ══════════════════════════════════════════════════════════════ */
.tpm-topbar[b-mi2pwshi8f],
.tpm-content-area[b-mi2pwshi8f] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}
/* /Components/Pages/Menus/Facilities/TrmLegacyTrips.razor.rz.scp.css */
/* ---------------------------------------------------
   TRM.razor.css � Transport Terminal
   All classes scoped under trm- prefix.
   Uses EEMO CSS variables from app.css.
--------------------------------------------------- */

/* This page's content area fills the shell height so the panels stretch to the viewport bottom
   WITHOUT overflowing (the lists scroll internally). Scoped to TRM's content-area only. */
.content-area[b-irllse6u6a] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* -- Two-column layout ---------------------------- */
.trm-columns[b-irllse6u6a] {
    display: grid;
    grid-template-columns: 380px 1fr;
    align-items: stretch;
    gap: 1.25rem;
    margin-top: 1.25rem;
    /* Fill the remaining height under the hero, but never past the viewport (panels scroll inside). */
    flex: 1;
    min-height: 0;
}

/* -- Panel card ------------------------------------ */
.trm-panel[b-irllse6u6a] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.trm-panel-header[b-irllse6u6a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.trm-panel-title[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .trm-panel-title svg[b-irllse6u6a] {
        width: 15px;
        height: 15px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.trm-panel-desc[b-irllse6u6a] {
    padding: 0.55rem 1.25rem;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}

.trm-queue-desc[b-irllse6u6a] {
    padding: 0.55rem 1.25rem;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}

.trm-log-date[b-irllse6u6a] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* -- Add transporter button ------------------------ */
.trm-add-btn[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    white-space: nowrap;
}

    .trm-add-btn:hover[b-irllse6u6a] {
        background: var(--navy-3);
    }

    .trm-add-btn svg[b-irllse6u6a] {
        width: 13px;
        height: 13px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
    }

/* -- Search ---------------------------------------- */
.trm-search-wrap[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

    .trm-search-wrap svg[b-irllse6u6a] {
        width: 14px;
        height: 14px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        flex-shrink: 0;
    }

.trm-search-input[b-irllse6u6a] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--navy);
    background: transparent;
    font-family: inherit;
}

    .trm-search-input[b-irllse6u6a]::placeholder {
        color: var(--text-muted);
    }

/* -- Empty state ----------------------------------- */
.trm-empty[b-irllse6u6a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3.5rem 1.5rem;
    color: var(--text-muted);
    font-size: 13px;
    flex: 1;
}

    .trm-empty svg[b-irllse6u6a] {
        width: 36px;
        height: 36px;
        stroke: var(--border);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* -- Transporter list ------------------------------ */
.trm-transporter-list[b-irllse6u6a] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.trm-transporter-item[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.13s;
}

    .trm-transporter-item:last-child[b-irllse6u6a] {
        border-bottom: none;
    }

    .trm-transporter-item:hover[b-irllse6u6a] {
        background: var(--bg);
    }

.trm-item-active[b-irllse6u6a] {
    background: rgba(200, 168, 75, 0.08);
    border-left: 3px solid var(--gold);
}

    .trm-item-active:hover[b-irllse6u6a] {
        background: rgba(200, 168, 75, 0.12);
    }

.trm-transporter-icon[b-irllse6u6a] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .trm-transporter-icon svg[b-irllse6u6a] {
        width: 18px;
        height: 18px;
        stroke: var(--navy-3);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.trm-transporter-info[b-irllse6u6a] {
    flex: 1;
    min-width: 0;
}

.trm-transporter-name[b-irllse6u6a] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trm-transporter-meta[b-irllse6u6a] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trm-org-tag[b-irllse6u6a] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--navy-3);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.trm-transporter-right[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.trm-trips-today-badge[b-irllse6u6a] {
    padding: 0.25rem 0.6rem;
    background: var(--green-bg);
    color: var(--green);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.trm-chevron[b-irllse6u6a] {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -- Queue list ---------------------------------- */
.trm-queue-list[b-irllse6u6a] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
}

.trm-queue-item[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.13s;
}

    .trm-queue-item:last-child[b-irllse6u6a] {
        border-bottom: none;
    }

    .trm-queue-item:hover[b-irllse6u6a] {
        background: var(--bg);
    }

.trm-queue-next[b-irllse6u6a] {
    background: rgba(200, 168, 75, 0.08);
    border-left: 3px solid var(--gold);
}

    .trm-queue-next:hover[b-irllse6u6a] {
        background: rgba(200, 168, 75, 0.12);
    }

.trm-queue-pos[b-irllse6u6a] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-3);
}

.pos-next[b-irllse6u6a] {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

    .pos-next svg[b-irllse6u6a] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: #fff;
        stroke-width: 0;
    }

.trm-queue-info[b-irllse6u6a] {
    flex: 1;
    min-width: 0;
}

.trm-driver-name[b-irllse6u6a] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trm-driver-meta[b-irllse6u6a] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.trm-queue-actions[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.trm-dispatch-btn[b-irllse6u6a] {
    padding: 0.45rem 1rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    white-space: nowrap;
}

    .trm-dispatch-btn:hover[b-irllse6u6a] {
        background: var(--navy-3);
    }

.trm-remove-btn[b-irllse6u6a] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

    .trm-remove-btn:hover[b-irllse6u6a] {
        background: var(--red-bg);
        border-color: var(--red);
    }

    .trm-remove-btn svg[b-irllse6u6a] {
        width: 13px;
        height: 13px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .trm-remove-btn:hover svg[b-irllse6u6a] {
        stroke: var(--red);
    }

/* -- Trip log table -------------------------------- */
.trm-log-table-wrap[b-irllse6u6a] {
    overflow-x: auto;
    flex: 1;
}

.trm-log-table[b-irllse6u6a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .trm-log-table thead tr[b-irllse6u6a] {
        border-bottom: 1px solid var(--border);
        background: var(--bg);
    }

    .trm-log-table th[b-irllse6u6a] {
        padding: 0.6rem 1rem;
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        white-space: nowrap;
    }

    .trm-log-table tbody tr[b-irllse6u6a] {
        border-bottom: 1px solid var(--border);
        transition: background 0.13s;
    }

        .trm-log-table tbody tr:last-child[b-irllse6u6a] {
            border-bottom: none;
        }

.trm-log-row[b-irllse6u6a] {
    cursor: pointer;
}

    .trm-log-row:hover[b-irllse6u6a] {
        background: var(--bg) !important;
    }

    .trm-log-table td[b-irllse6u6a] {
        padding: 0.75rem 1rem;
        color: var(--navy);
        vertical-align: middle;
    }

.trm-trip-no[b-irllse6u6a] {
    font-weight: 400;
    font-size: 12px;
}

.trm-driver-cell[b-irllse6u6a] {
    font-weight: 400;
    white-space: nowrap;
}

.trm-org-cell[b-irllse6u6a] {
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.trm-plate-cell[b-irllse6u6a] {
    font-size: 12px;
    font-family: monospace;
    font-weight: 400;
    white-space: nowrap;
}

.trm-route-cell[b-irllse6u6a] {
    font-size: 12.5px;
    font-weight: 400;
}

.trm-time-cell[b-irllse6u6a] {
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.trm-fee-cell[b-irllse6u6a] {
    font-weight: 700;
    color: var(--green) !important;
}

/* Status pills */
.trm-status-pill[b-irllse6u6a] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .trm-status-pill svg[b-irllse6u6a] {
        width: 12px;
        height: 12px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.trm-pill-paid[b-irllse6u6a] {
    background: var(--green-bg);
    color: var(--green);
}

.trm-pill-pending[b-irllse6u6a] {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Row actions */
.trm-row-actions[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.trm-action-btn[b-irllse6u6a] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

    .trm-action-btn:hover[b-irllse6u6a] {
        background: var(--bg);
        border-color: var(--navy-3);
    }

    .trm-action-btn svg[b-irllse6u6a] {
        width: 13px;
        height: 13px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .trm-action-btn:hover svg[b-irllse6u6a] {
        stroke: var(--navy);
    }

.trm-action-or[b-irllse6u6a] {
    border-color: var(--gold);
}

    .trm-action-or svg[b-irllse6u6a] {
        stroke: var(--gold);
    }

    .trm-action-or:hover[b-irllse6u6a] {
        background: rgba(200, 168, 75, 0.08);
    }

/* OR badge */
.trm-or-badge[b-irllse6u6a] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--green-bg);
    color: var(--green);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* OR entry button */
.trm-or-btn[b-irllse6u6a] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

    .trm-or-btn:hover[b-irllse6u6a] {
        border-color: var(--gold);
        color: var(--gold);
    }

    .trm-or-btn svg[b-irllse6u6a] {
        width: 10px;
        height: 10px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
    }

/* -- OR modal trip info block --------- */
.trm-or-trip-info[b-irllse6u6a] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trm-or-row[b-irllse6u6a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.trm-or-key[b-irllse6u6a] {
    color: var(--text-muted);
    font-weight: 500;
}

.trm-or-val[b-irllse6u6a] {
    color: var(--navy);
    font-weight: 600;
}

.trm-or-fee[b-irllse6u6a] {
    color: var(--green);
    font-size: 14px;
}

/* -- Slide-in profile panel ------------------------ */
.trm-backdrop[b-irllse6u6a] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 33, 55, 0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
}

.trm-profile-panel[b-irllse6u6a] {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(13, 33, 55, 0.12);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trm-profile-open[b-irllse6u6a] {
    right: 0;
}

.trm-profile-header[b-irllse6u6a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom: 1px solid rgba(200, 168, 75, 0.2);
    flex-shrink: 0;
}

.trm-profile-header-left[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.trm-profile-icon[b-irllse6u6a] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(200, 168, 75, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .trm-profile-icon svg[b-irllse6u6a] {
        width: 20px;
        height: 20px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.trm-profile-name[b-irllse6u6a] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.trm-profile-meta[b-irllse6u6a] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.trm-profile-close[b-irllse6u6a] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .trm-profile-close:hover[b-irllse6u6a] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .trm-profile-close svg[b-irllse6u6a] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
    }

.trm-profile-body[b-irllse6u6a] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trm-profile-info-block[b-irllse6u6a] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trm-profile-info-row[b-irllse6u6a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.trm-profile-info-key[b-irllse6u6a] {
    color: var(--text-muted);
    font-weight: 500;
}

.trm-profile-info-val[b-irllse6u6a] {
    color: var(--navy);
    font-weight: 600;
}

.trm-fee-green[b-irllse6u6a] {
    color: var(--green) !important;
    font-size: 14px;
}

.trm-profile-stats[b-irllse6u6a] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.trm-profile-stat[b-irllse6u6a] {
    text-align: center;
}

.trm-profile-stat-val[b-irllse6u6a] {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

.trm-profile-stat-key[b-irllse6u6a] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trm-profile-stat-div[b-irllse6u6a] {
    width: 1px;
    height: 32px;
    background: var(--border);
}

.trm-profile-record-btn[b-irllse6u6a] {
    width: 100%;
    padding: 0.75rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .trm-profile-record-btn:hover[b-irllse6u6a] {
        background: var(--navy-3);
    }

    .trm-profile-record-btn svg[b-irllse6u6a] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
    }

.trm-profile-already-trip[b-irllse6u6a] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.4;
}

    .trm-profile-already-trip svg[b-irllse6u6a] {
        width: 16px;
        height: 16px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        flex-shrink: 0;
    }

.trm-profile-history-label[b-irllse6u6a] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
}

.trm-profile-empty[b-irllse6u6a] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.trm-profile-trip-list[b-irllse6u6a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trm-profile-trip-item[b-irllse6u6a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: background 0.13s;
}

    .trm-profile-trip-item:hover[b-irllse6u6a] {
        background: #fff;
    }

.trm-profile-trip-left[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.trm-profile-trip-no[b-irllse6u6a] {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
}

.trm-profile-trip-info[b-irllse6u6a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trm-profile-trip-plate[b-irllse6u6a] {
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    font-family: monospace;
}

.trm-profile-trip-route[b-irllse6u6a] {
    font-size: 11px;
    color: var(--text-muted);
}

.trm-profile-trip-right[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trm-profile-trip-time[b-irllse6u6a] {
    font-size: 11px;
    color: var(--text-muted);
}

/* -- Modal info blocks ---------------------------- */
.trm-record-info-block[b-irllse6u6a] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trm-record-info-row[b-irllse6u6a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.trm-record-info-key[b-irllse6u6a] {
    color: var(--text-muted);
    font-weight: 500;
}

.trm-record-info-val[b-irllse6u6a] {
    color: var(--navy);
    font-weight: 600;
}

/* -- Responsive ------------------------------------ */
@media (max-width: 1024px) {
    .trm-columns[b-irllse6u6a] {
        grid-template-columns: 1fr;
    }

    .trm-profile-panel[b-irllse6u6a] {
        width: 100%;
        right: -100%;
    }
}

/* ---------------------------------------------------
   ADD TRANSPORTER SLIDE-IN PANEL
--------------------------------------------------- */

/* -- Backdrop ------------------------------------ */
.trm-add-backdrop[b-irllse6u6a] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 33, 55, 0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
}

/* -- Slide-in Panel ------------------------------ */
.trm-add-panel[b-irllse6u6a] {
    position: fixed;
    top: 0;
    right: -480px;
    width: 480px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(13, 33, 55, 0.12);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trm-add-panel-open[b-irllse6u6a] {
    right: 0;
}

/* -- Panel Header -------------------------------- */
.trm-add-panel-header[b-irllse6u6a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom: 1px solid rgba(200, 168, 75, 0.2);
    flex-shrink: 0;
}

.trm-add-panel-header-left[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.trm-add-panel-icon[b-irllse6u6a] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(200, 168, 75, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .trm-add-panel-icon svg[b-irllse6u6a] {
        width: 20px;
        height: 20px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.trm-add-panel-title[b-irllse6u6a] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.trm-add-panel-sub[b-irllse6u6a] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.trm-add-panel-close[b-irllse6u6a] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .trm-add-panel-close:hover[b-irllse6u6a] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .trm-add-panel-close svg[b-irllse6u6a] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
    }

/* -- Panel Body ---------------------------------- */
.trm-add-panel-body[b-irllse6u6a] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* -- Form Elements ------------------------------- */
.trm-add-form-group[b-irllse6u6a] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.trm-add-form-label[b-irllse6u6a] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}

.trm-add-form-input[b-irllse6u6a] {
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--navy);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

    .trm-add-form-input:focus[b-irllse6u6a] {
        border-color: var(--navy-2);
    }

    .trm-add-form-input[b-irllse6u6a]::placeholder {
        color: var(--text-muted);
    }

.trm-add-form-error[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--red-bg);
    border: 1px solid rgba(139, 58, 58, 0.2);
    border-radius: 6px;
    font-size: 12px;
    color: var(--red);
    font-weight: 500;
}

    .trm-add-form-error svg[b-irllse6u6a] {
        width: 14px;
        height: 14px;
        stroke: var(--red);
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
    }

/* -- Submit Button ------------------------------- */
.trm-add-submit-btn[b-irllse6u6a] {
    width: 100%;
    padding: 0.75rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .trm-add-submit-btn:hover[b-irllse6u6a] {
        background: var(--navy-3);
    }

    .trm-add-submit-btn svg[b-irllse6u6a] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* -- Responsive ---------------------------------- */
@media (max-width: 1024px) {
    .trm-add-panel[b-irllse6u6a] {
        width: 100%;
        right: -100%;
    }
}

/* ---------------------------------------------------
   QUICK OR INPUT BLOCK (INLINE IN PROFILE)
--------------------------------------------------- */

.trm-quick-or-block[b-irllse6u6a] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.trm-quick-or-label[b-irllse6u6a] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}

.trm-quick-or-input[b-irllse6u6a] {
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--navy);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

    .trm-quick-or-input:focus[b-irllse6u6a] {
        border-color: var(--navy-2);
    }

    .trm-quick-or-input[b-irllse6u6a]::placeholder {
        color: var(--text-muted);
    }

.trm-quick-or-actions[b-irllse6u6a] {
    display: flex;
    gap: 0.5rem;
}

.trm-quick-or-cancel[b-irllse6u6a] {
    flex: 1;
    padding: 0.6rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

    .trm-quick-or-cancel:hover[b-irllse6u6a] {
        background: var(--bg);
        border-color: var(--navy-3);
        color: var(--navy);
    }

.trm-quick-or-save[b-irllse6u6a] {
    flex: 1;
    padding: 0.6rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
}

    .trm-quick-or-save:hover[b-irllse6u6a] {
        background: var(--navy-3);
    }

    .trm-quick-or-save svg[b-irllse6u6a] {
        width: 13px;
        height: 13px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.trm-profile-error[b-irllse6u6a] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    background: var(--red-bg);
    border: 1px solid rgba(139, 58, 58, 0.2);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--red);
    font-weight: 500;
}

    .trm-profile-error svg[b-irllse6u6a] {
        width: 14px;
        height: 14px;
        stroke: var(--red);
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
    }

/* Loading states keep the real TRM panel structure visible while data resolves. */
.trm-loading-search[b-irllse6u6a],
.trm-loading-list[b-irllse6u6a],
.trm-loading-table[b-irllse6u6a] {
    pointer-events: none;
}

.trm-loading-item[b-irllse6u6a] {
    cursor: default;
}

    .trm-loading-item:hover[b-irllse6u6a],
    .trm-loading-table tbody tr:hover[b-irllse6u6a] {
        background: transparent;
    }


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md)
   Presentation only. Drawer headers become light (navy title on white, thin divider) instead of navy
   gradients; primary buttons use civic blue; readable tertiary text replaces the legacy muted grey and
   civic blue replaces gold for interaction. Small labels were raised to 11px.
   ══════════════════════════════════════════════════════════════ */
.topbar[b-irllse6u6a],
.content-area[b-irllse6u6a],
.trm-profile-panel[b-irllse6u6a],
.trm-add-panel[b-irllse6u6a] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.trm-profile-header[b-irllse6u6a],
.trm-add-panel-header[b-irllse6u6a] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.trm-profile-icon[b-irllse6u6a],
.trm-add-panel-icon[b-irllse6u6a] {
    background: var(--accent-soft);
}

    .trm-profile-icon svg[b-irllse6u6a],
    .trm-add-panel-icon svg[b-irllse6u6a] {
        stroke: var(--navy);
    }

.trm-profile-name[b-irllse6u6a],
.trm-add-panel-title[b-irllse6u6a] {
    color: var(--navy);
}

.trm-profile-meta[b-irllse6u6a],
.trm-add-panel-sub[b-irllse6u6a] {
    color: var(--text-tertiary);
}

.trm-profile-close[b-irllse6u6a],
.trm-add-panel-close[b-irllse6u6a] {
    border-color: transparent;
    background: transparent;
}

    .trm-profile-close:hover[b-irllse6u6a],
    .trm-add-panel-close:hover[b-irllse6u6a] {
        border-color: transparent;
        background: var(--surface-hover);
    }

    .trm-profile-close svg[b-irllse6u6a],
    .trm-add-panel-close svg[b-irllse6u6a] {
        stroke: var(--text-secondary);
    }

.trm-add-btn[b-irllse6u6a],
.trm-dispatch-btn[b-irllse6u6a],
.trm-profile-record-btn[b-irllse6u6a],
.trm-add-submit-btn[b-irllse6u6a],
.trm-quick-or-save[b-irllse6u6a] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

    .trm-add-btn:hover[b-irllse6u6a],
    .trm-dispatch-btn:hover[b-irllse6u6a],
    .trm-profile-record-btn:hover[b-irllse6u6a],
    .trm-add-submit-btn:hover[b-irllse6u6a],
    .trm-quick-or-save:hover[b-irllse6u6a] {
        border-color: var(--accent-hover);
        background: var(--accent-hover);
        color: var(--surface);
    }

    .trm-add-btn svg[b-irllse6u6a],
    .trm-profile-record-btn svg[b-irllse6u6a],
    .trm-add-submit-btn svg[b-irllse6u6a],
    .trm-quick-or-save svg[b-irllse6u6a] {
        stroke: var(--surface);
    }

.trm-add-btn:focus-visible[b-irllse6u6a],
.trm-profile-record-btn:focus-visible[b-irllse6u6a],
.trm-add-submit-btn:focus-visible[b-irllse6u6a],
.trm-quick-or-save:focus-visible[b-irllse6u6a],
.trm-profile-close:focus-visible[b-irllse6u6a],
.trm-add-panel-close:focus-visible[b-irllse6u6a] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/Menus/FacilityConfiguration.razor.rz.scp.css */
/* Facility Configuration — component-scoped styling on the app.css V3 tokens. The page is a V3 workspace
   (WorkspaceHeader + .v3-panel registers); the configure drawer and its dialogs keep their own cfg-/hist- parts. */

.set-state[b-hcihji8szd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    min-height: 320px;
    padding: 40px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.set-state-title[b-hcihji8szd] { font-size: 15px; font-weight: 700; color: var(--navy); }
.set-state-text[b-hcihji8szd] { font-size: 13px; color: var(--text-muted); max-width: 420px; line-height: 1.5; }

/* ── Configured facilities register ── */
.fac-panel-title[b-hcihji8szd] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.fac-table td[b-hcihji8szd] {
    vertical-align: middle;
}

.fac-billing[b-hcihji8szd] {
    white-space: nowrap;
}

.fac-ident[b-hcihji8szd] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 14rem;
}

.fac-badge[b-hcihji8szd] {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--navy);
}

.fac-badge-code[b-hcihji8szd] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.fac-titles[b-hcihji8szd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.fac-name[b-hcihji8szd] {
    color: var(--navy);
    font-weight: 600;
}

.fac-code[b-hcihji8szd] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.fac-rates[b-hcihji8szd] {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 12rem;
    max-width: 22rem;
}

.fac-rate[b-hcihji8szd] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.fac-rate-label[b-hcihji8szd] {
    color: var(--text-secondary);
}

.fac-rate-amt[b-hcihji8szd] {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fac-pill[b-hcihji8szd] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.fac-pill-on[b-hcihji8szd] {
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
    background: var(--green-bg);
    color: var(--green);
}

.fac-row-inactive .fac-name[b-hcihji8szd],
.fac-row-inactive td[b-hcihji8szd] {
    color: var(--text-tertiary);
}

.fac-row-inactive .fac-badge[b-hcihji8szd] {
    background: var(--surface-muted);
}

.fac-actions[b-hcihji8szd] {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.fac-empty[b-hcihji8szd] {
    padding: 28px 20px;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    text-align: center;
}

.fac-scope[b-hcihji8szd] {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.fac-scope a[b-hcihji8szd] {
    color: var(--accent);
    font-weight: 600;
}

.fac-scope a:focus-visible[b-hcihji8szd] {
    border-radius: 2px;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Available to add: one row per standard type ── */
.avail-list[b-hcihji8szd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.avail-row[b-hcihji8szd] {
    display: flex;
    min-height: 60px;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
}

.avail-badge[b-hcihji8szd] {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
}

.avail-row-custom .avail-badge[b-hcihji8szd] {
    border-style: dashed;
    color: var(--accent);
    font-size: 1rem;
}

.avail-body[b-hcihji8szd] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.avail-name[b-hcihji8szd] {
    color: var(--navy);
    font-weight: 600;
}

.avail-model[b-hcihji8szd] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.fac-addform[b-hcihji8szd] {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--bg);
}

.fac-addform-head[b-hcihji8szd] {
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.fac-addform-title[b-hcihji8szd] { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.fac-addform-sub[b-hcihji8szd] { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.fac-addform-sub strong[b-hcihji8szd] { color: var(--text-subtle); }

.fac-addform-grid[b-hcihji8szd] {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 12px 14px;
}

.fac-field[b-hcihji8szd] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fac-field-full[b-hcihji8szd] { grid-column: 1 / -1; }
.fac-field-wide[b-hcihji8szd] { grid-column: 1 / -1; }
.fac-field-label[b-hcihji8szd] { font-size: 11.5px; font-weight: 600; color: var(--text-subtle); }
.fac-field-opt[b-hcihji8szd] { font-weight: 400; color: var(--text-muted); }

/* A note under a field, explaining what was filled in and that it can be changed. Muted, so it reads as
   guidance rather than as a value. */
.cfg-field-note[b-hcihji8szd] { display: block; margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--text-muted); }

.fac-input[b-hcihji8szd] {
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0 12px;
    font-size: 13.5px;
    color: var(--text);
    background: var(--bg-card);
    transition: border-color .14s ease, box-shadow .14s ease;
    width: 100%;
}

.fac-input:focus[b-hcihji8szd] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent);
}

/* ── The market day dropdowns ──────────────────────────────────────────────────────────────────────────
   These use FhSelect, the portal's own dropdown, rather than a browser <select>: a native option panel is
   drawn by the operating system, in its colours and its type, which in the middle of a styled government
   form reads as something borrowed from elsewhere.

   FhSelect is built for the Follow-up History pickers, which stand alone on a toolbar, so its trigger is
   slightly taller and heavier than a field in this drawer: 42px against 40px, a 1.5px border against 1px,
   and its value set in bold navy where an input's is regular ink. Sitting under "Held on", beside the rate
   fields, that difference reads as two kinds of control rather than one form. Matched here, in this
   drawer only, so the component keeps its own look everywhere else it is used. Geometry only: the panel,
   the chevron and the checkmark are the component's. */
.fac-field[b-hcihji8szd]  .fh-dd-trigger {
    height: 40px;
    border-width: 1px;
    border-radius: 9px;
    padding: 0 12px;
}

.fac-field[b-hcihji8szd]  .fh-dd-val {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    margin-top: 0;
}

/* The focus ring the rest of the drawer uses, so tabbing through the form does not change colour partway. */
.fac-field[b-hcihji8szd]  .fh-dd-trigger.open {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent);
}

/* Matched to the fields, and capped in height: a date list runs to eight or nine choices, which at full
   height would overrun the drawer, so the panel scrolls at roughly six, where the next month's dates begin. */
.fac-field[b-hcihji8szd]  .fh-dd-menu {
    border-width: 1px;
    border-radius: 9px;
    max-height: 236px;
}

.fac-field[b-hcihji8szd]  .fh-dd-name {
    font-size: 13px;
}

.fac-addform-error[b-hcihji8szd] {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid #e6c4c4;
    border-radius: 9px;
    padding: 9px 12px;
}

.fac-addform-actions[b-hcihji8szd] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.fac-btn[b-hcihji8szd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    padding: 9px 18px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .14s ease, border-color .14s ease, color .14s ease, filter .14s ease;
}

.fac-btn:disabled[b-hcihji8szd] { opacity: .6; cursor: not-allowed; }

.fac-btn-primary[b-hcihji8szd] { background: var(--accent); color: #fff; }
.fac-btn-primary:hover:not(:disabled)[b-hcihji8szd] { background: var(--accent-hover); }

.fac-btn-ghost[b-hcihji8szd] { background: transparent; color: var(--text-subtle); border-color: var(--border); }
.fac-btn-ghost:hover:not(:disabled)[b-hcihji8szd] { border-color: var(--accent); color: var(--navy); }

@media (max-width: 560px) {
    .fac-addform-grid[b-hcihji8szd] { grid-template-columns: 1fr; }
}

/* ── Slide-over configuration drawer ── */
.cfg-scrim[b-hcihji8szd] {
    position: fixed;
    inset: 0;
    background: rgba(13, 33, 55, .45);
    backdrop-filter: blur(2px);
    z-index: 1000;
    animation: cfgFade-b-hcihji8szd .18s ease;
}
@keyframes cfgFade-b-hcihji8szd { from { opacity: 0; } to { opacity: 1; } }

.cfg-drawer[b-hcihji8szd] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(440px, 100vw);
    background: var(--bg-card);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: -18px 0 48px rgba(13, 33, 55, .22);
    animation: cfgSlide-b-hcihji8szd .22s cubic-bezier(.22, .61, .36, 1);
}
@keyframes cfgSlide-b-hcihji8szd { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cfg-head[b-hcihji8szd] {
    position: relative;
    background: var(--accent);
    color: #fff;
    padding: 22px 24px 18px;
    flex: 0 0 auto;
    overflow: hidden;
}
.cfg-head[b-hcihji8szd]::before {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
    pointer-events: none;
}
.cfg-head-eyebrow[b-hcihji8szd] { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.cfg-head-title[b-hcihji8szd] { font-size: 19px; font-weight: 700; line-height: 1.2; margin-top: 4px; }
.cfg-head-sub[b-hcihji8szd] { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 3px; }
.cfg-close[b-hcihji8szd] {
    position: absolute;
    top: 16px; right: 16px;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background .14s ease;
}
.cfg-close:hover[b-hcihji8szd] { background: rgba(255,255,255,.24); }

.cfg-body[b-hcihji8szd] { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }

.cfg-section-label[b-hcihji8szd] {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-subtle);
    margin-top: 4px;
}

.cfg-field-row[b-hcihji8szd] { display: flex; gap: 12px; align-items: flex-end; }
.cfg-field-row .fac-field[b-hcihji8szd] { flex: 1 1 auto; }
.cfg-field-code[b-hcihji8szd] { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
.cfg-code-chip[b-hcihji8szd] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 9px;
    background: var(--bg-icon);
    color: var(--navy);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .04em;
}

.cfg-summary[b-hcihji8szd] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cfg-summary-item[b-hcihji8szd] {
    flex: 1 1 90px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cfg-summary-item span[b-hcihji8szd] { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.cfg-summary-item strong[b-hcihji8szd] { font-size: 13.5px; color: var(--text); font-weight: 700; }
.cfg-on[b-hcihji8szd] { color: var(--green) !important; }
.cfg-off[b-hcihji8szd] { color: var(--text-subtle) !important; }

.cfg-rate-list[b-hcihji8szd] { display: flex; flex-direction: column; gap: 10px; }
.cfg-rate[b-hcihji8szd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg);
}
.cfg-rate-info[b-hcihji8szd] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cfg-rate-label[b-hcihji8szd] { font-size: 13px; font-weight: 600; color: var(--text); }

/* The three canonical areas, stated as a record until the office presses Edit names. Built on the rate rows' geometry so
   the drawer reads as one document, but kept as its own classes: a stated NAME and a stated RATE look alike and are not
   the same thing, and the rate classes are read elsewhere as meaning a rate. */
.cfg-name-list[b-hcihji8szd] { display: flex; flex-direction: column; gap: 10px; }
.cfg-name[b-hcihji8szd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg);
}
.cfg-name-info[b-hcihji8szd] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cfg-name-label[b-hcihji8szd] { font-size: 13px; font-weight: 600; color: var(--text); }
.cfg-name-tag[b-hcihji8szd] {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-subtle); background: var(--bg-icon);
    border-radius: 5px; padding: 2px 6px;
}
/* The name itself, which is the figure of this row. */
.cfg-name-value[b-hcihji8szd] {
    flex: 0 1 auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cfg-name-edit[b-hcihji8szd] { flex: 0 0 auto; margin-top: 10px; }

/* The office's own market sections. Each is a small record, not a row of controls: its name, what is filed under it and
   what it costs on one line beneath, and its actions to the right. The old single line crowded a name, a stall count, a
   fee, two checkboxes and two buttons together, and a two-word section name wrapped underneath itself. */
.cfg-sec[b-hcihji8szd] {
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg);
    padding: 11px 13px;
}
.cfg-sec-head[b-hcihji8szd] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cfg-sec-ident[b-hcihji8szd] { min-width: 0; }
.cfg-sec-name[b-hcihji8szd] { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cfg-sec-meta[b-hcihji8szd] { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.cfg-sec-actions[b-hcihji8szd] { flex: 0 0 auto; display: flex; gap: 8px; }

/* Open only while the office is editing that section: the fee and the meters, saved together. */
.cfg-sec-edit[b-hcihji8szd] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cfg-sec-edit-actions[b-hcihji8szd] { display: flex; justify-content: flex-end; gap: 8px; }
.cfg-sec-utils[b-hcihji8szd] { display: flex; gap: 16px; flex-wrap: wrap; }
.cfg-sec-add-open[b-hcihji8szd] { align-self: flex-start; }
.cfg-sec-count[b-hcihji8szd] { font-size: 11.5px; color: var(--text-muted); }

/* A rate as a stated figure, before the office says it is editing one. */
.cfg-rate-value[b-hcihji8szd] { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cfg-sec-remove[b-hcihji8szd] {
    flex: 0 0 auto;
    padding: 6px 11px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--red);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
.cfg-sec-remove:hover:not(:disabled)[b-hcihji8szd] { border-color: var(--red); background: var(--red-bg); }
.cfg-sec-remove:disabled[b-hcihji8szd] { opacity: .6; cursor: not-allowed; }
.cfg-sec-add[b-hcihji8szd] { flex: 0 0 auto; }
/* The fee sits beside the name when a section is added: narrow, because it holds a figure and not a sentence.
   Sized to its content rather than to a fixed 110px, which was 17px narrower than the box it holds (a 92px input, 20px of
   padding, the peso sign and the gap) and pushed the figure out of its own field. */
.cfg-sec-fee[b-hcihji8szd] { flex: 0 0 auto; min-width: 0; }
.cfg-sec-fee .cfg-rate-input[b-hcihji8szd] { width: 100%; }
.cfg-sec-fee .cfg-rate-input input[b-hcihji8szd] { width: 100%; min-width: 0; }
/* A section's metering default, stated on its row beside the fee. */
.cfg-sec-util[b-hcihji8szd] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-subtle); white-space: nowrap; }
.cfg-sec-util input[b-hcihji8szd] { accent-color: var(--navy); }
/* Setting a fee is an ordinary act; only removal is destructive, so only removal is red. */
.cfg-sec-set[b-hcihji8szd] {
    flex: 0 0 auto;
    padding: 6px 11px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-subtle);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
.cfg-sec-set:hover:not(:disabled)[b-hcihji8szd] { border-color: var(--accent); color: var(--navy); }
.cfg-sec-set:disabled[b-hcihji8szd] { opacity: .6; cursor: not-allowed; }
.cfg-rate-tag[b-hcihji8szd] {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-subtle); background: var(--bg-icon);
    border-radius: 5px; padding: 2px 6px;
}
.cfg-rate-input[b-hcihji8szd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0 10px;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.cfg-rate-input:focus-within[b-hcihji8szd] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); }
.cfg-peso[b-hcihji8szd] { color: var(--text-muted); font-size: 13px; font-weight: 700; }
.cfg-rate-input input[b-hcihji8szd] {
    width: 92px;
    height: 38px;
    border: none;
    background: transparent;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    outline: none;
    -moz-appearance: textfield;
}
.cfg-rate-input input[b-hcihji8szd]::-webkit-outer-spin-button,
.cfg-rate-input input[b-hcihji8szd]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cfg-hint[b-hcihji8szd] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-icon);
    color: var(--text-subtle);
    font-size: 12px;
    line-height: 1.45;
}
.cfg-hint svg[b-hcihji8szd] { flex: 0 0 auto; width: 15px; height: 15px; color: var(--accent); margin-top: 1px; }

.cfg-error[b-hcihji8szd] {
    font-size: 12.5px; color: var(--red);
    background: var(--red-bg); border: 1px solid #e6c4c4; border-radius: 9px; padding: 9px 12px;
}
.cfg-success[b-hcihji8szd] {
    font-size: 12.5px; color: var(--green);
    background: var(--green-bg); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
    border-radius: 9px; padding: 9px 12px;
}

.cfg-foot[b-hcihji8szd] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

@media (max-width: 560px) {
    .cfg-drawer[b-hcihji8szd] { width: 100vw; }
}

/* ── Status & history controls (drawer) ── */
.cfg-history-btn[b-hcihji8szd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px 14px;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.cfg-history-btn svg[b-hcihji8szd] { width: 16px; height: 16px; color: var(--accent); }
.cfg-history-btn:hover[b-hcihji8szd] { border-color: var(--accent); background: color-mix(in srgb, var(--gold) 8%, var(--bg-card)); }

.cfg-deactivate[b-hcihji8szd] {
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--red);
    background: transparent;
    border: 1px solid #e6c4c4;
    border-radius: 9px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background .14s ease;
}
.cfg-deactivate:hover:not(:disabled)[b-hcihji8szd] { background: var(--red-bg); }
.cfg-deactivate:disabled[b-hcihji8szd] { opacity: .6; cursor: not-allowed; }

.cfg-danger[b-hcihji8szd] {
    border: 1px solid #e6c4c4;
    background: var(--red-bg);
    border-radius: 11px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cfg-danger-text[b-hcihji8szd] { font-size: 12.5px; color: var(--red); line-height: 1.45; }
.cfg-danger-actions[b-hcihji8szd] { display: flex; justify-content: flex-end; gap: 10px; }
.fac-btn-danger[b-hcihji8szd] { background: var(--red); color: #fff; }
.fac-btn-danger:hover:not(:disabled)[b-hcihji8szd] { filter: brightness(1.05); }

.cfg-inactive-note[b-hcihji8szd] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-icon);
    color: var(--text-subtle);
    font-size: 12px;
    line-height: 1.45;
}
.cfg-inactive-note svg[b-hcihji8szd] { flex: 0 0 auto; width: 15px; height: 15px; color: var(--text-muted); margin-top: 1px; }
.cfg-reactivate[b-hcihji8szd] { align-self: flex-start; }

/* ── History modal ── */
.hist-modal[b-hcihji8szd] {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(1040px, 95vw);
    max-height: 84vh;
    background: var(--bg-card);
    border-radius: 16px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(13, 33, 55, .32);
    animation: histPop-b-hcihji8szd .2s cubic-bezier(.22, .61, .36, 1);
}
@keyframes histPop-b-hcihji8szd { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }

.hist-head[b-hcihji8szd] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--accent);
    color: #fff;
    flex: 0 0 auto;
}
.hist-head-titles[b-hcihji8szd] { flex: 1 1 auto; min-width: 0; }
.hist-title[b-hcihji8szd] { font-size: 17px; font-weight: 700; line-height: 1.2; margin-top: 3px; }
.hist-yearnav[b-hcihji8szd] { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.hist-yearnav button[b-hcihji8szd] {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background .14s ease;
}
.hist-yearnav button:hover:not(:disabled)[b-hcihji8szd] { background: rgba(255,255,255,.28); }
.hist-yearnav button:disabled[b-hcihji8szd] { opacity: .4; cursor: not-allowed; }
.cfg-close-dark[b-hcihji8szd] { position: static; }

.hist-summary[b-hcihji8szd] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: baseline;
    padding: 12px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    font-size: 13px;
    color: var(--text-muted);
}
.hist-summary strong[b-hcihji8szd] { color: var(--navy); font-size: 15px; font-weight: 700; }
.hist-summary .hist-out[b-hcihji8szd] { color: var(--red); }
.hist-summary-muted[b-hcihji8szd] { margin-left: auto; color: var(--text-subtle); font-size: 12px; }

.hist-body[b-hcihji8szd] { padding: 8px 22px 18px; overflow-y: auto; }
.hist-loading[b-hcihji8szd] { display: grid; place-items: center; min-height: 200px; }
.hist-table[b-hcihji8szd] { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist-table thead th[b-hcihji8szd] {
    position: sticky; top: 0;
    text-align: left;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-subtle);
    padding: 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.hist-table th.hist-r[b-hcihji8szd], .hist-table td.hist-r[b-hcihji8szd] { text-align: right; }
.hist-table td[b-hcihji8szd] { padding: 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); color: var(--text); }
.hist-table tbody tr:last-child td[b-hcihji8szd] { border-bottom: none; }
.hist-table tbody tr:hover[b-hcihji8szd] { background: var(--bg); }
.hist-stall[b-hcihji8szd] { font-weight: 700; color: var(--navy); }
.hist-or[b-hcihji8szd] { color: var(--text-muted); }

.hist-status[b-hcihji8szd] {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
    background: var(--bg-icon); color: var(--text-subtle);
}
.hist-paid[b-hcihji8szd] { background: var(--green-bg); color: var(--green); }
.hist-partial[b-hcihji8szd] { background: #fdf4e3; color: #9a6b00; }
.hist-unpaid[b-hcihji8szd], .hist-delinquent[b-hcihji8szd] { background: var(--red-bg); color: var(--red); }

@media (max-width: 560px) {
    .hist-head[b-hcihji8szd] { flex-wrap: wrap; }
    .hist-table[b-hcihji8szd] { font-size: 12px; }
}

/* No ordinance rates stated yet. Said plainly, because a blank panel reads as a page that failed to load rather than
   as configuration still to do. */
.fac-rate-none[b-hcihji8szd] {
    color: var(--text-tertiary);
}

/* Closing a section sits under the fee, separated: it is a different kind of act from setting a figure. */
.cfg-sec-close[b-hcihji8szd] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cfg-sec-close-warn[b-hcihji8szd] { margin-top: 12px; }

/* ── The market's month rule ──
   A small centred dialog rather than another drawer: it asks one question, and the office reads both answers in its own
   figures before choosing. Built from the same tokens as the drawer so the two do not look like different products. */
.cfg-basis[b-hcihji8szd] {
    position: fixed; z-index: 1001; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(9, 31, 52, .22);
}
.cfg-basis-title[b-hcihji8szd] { font-size: 16px; font-weight: 700; color: var(--navy); }
/* Side by side, so the two rules are read against each other rather than one after the other. Stacks on a narrow
   screen, where a two-column row would wrap into something worse than a stack. */
.cfg-basis-choices[b-hcihji8szd] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
@media (max-width: 560px) { .cfg-basis-choices[b-hcihji8szd] { grid-template-columns: 1fr; } }
.cfg-basis-choice[b-hcihji8szd] {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px;
    align-items: start;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg);
    cursor: pointer;
}
.cfg-basis-choice input[b-hcihji8szd] { grid-row: 1 / span 2; margin-top: 3px; accent-color: var(--navy); }
.cfg-basis-on[b-hcihji8szd] { border-color: var(--accent); }
.cfg-basis-name[b-hcihji8szd] { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cfg-basis-meta[b-hcihji8szd] { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.cfg-basis-actions[b-hcihji8szd] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.cfg-head[b-hcihji8szd],
.hist-head[b-hcihji8szd] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--navy);
}

.cfg-head-sub[b-hcihji8szd] {
    color: var(--text-tertiary);
}

/* V3 drawer: a white header with no decoration, a plain scrim, a visible close control and quiet facts. */
.cfg-head[b-hcihji8szd]::before {
    display: none;
}

.cfg-head-eyebrow[b-hcihji8szd] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.cfg-head-title[b-hcihji8szd] {
    color: var(--navy);
    font-size: 1.125rem;
    font-weight: 700;
}

.cfg-close[b-hcihji8szd] {
    background: transparent;
    color: var(--text-tertiary);
    font-size: 1rem;
}

.cfg-close:hover[b-hcihji8szd] {
    background: var(--surface-hover);
    color: var(--navy);
}

.cfg-close:focus-visible[b-hcihji8szd] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cfg-scrim[b-hcihji8szd] {
    background: rgba(13, 33, 55, .38);
    backdrop-filter: none;
}

.cfg-summary-item[b-hcihji8szd] {
    border-radius: 8px;
    background: var(--surface-muted);
}

.cfg-summary-item span[b-hcihji8szd] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
}

.cfg-summary-item strong[b-hcihji8szd] {
    font-size: 0.8125rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .cfg-scrim[b-hcihji8szd],
    .cfg-drawer[b-hcihji8szd] {
        animation: none;
    }
}
/* /Components/Pages/Menus/Fines.razor.rz.scp.css */
/* Fines — V3. Panels, tables and forms come from the v3- layer in app.css; this file adds the workspace's own register polish. */

.fn-page[b-m2sehrzhvl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────────
   The shared hero carries its own bottom margin; the page gap already spaces it from the tabs. */
.fn-page[b-m2sehrzhvl]  .v3h { margin-bottom: 0; }
.fn-page[b-m2sehrzhvl]  .v3h-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }

/* The Official Receipt marker sits on the blue band as a light pill so it reads as an official context indicator. */
.fn-or[b-m2sehrzhvl] { display: inline-flex; }
.fn-or[b-m2sehrzhvl]  .ic {
    gap: 8px;
    padding: 3px 12px 3px 4px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.fn-or[b-m2sehrzhvl]  .ic-code {
    height: 20px;
    border-color: var(--gold);
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 22%, #ffffff);
    color: var(--navy);
    font-weight: 700;
}
.fn-or[b-m2sehrzhvl]  .ic-name { color: var(--navy); font-size: 0.8125rem; font-weight: 600; }

/* ── Section tabs: pinned under the viewport top while a long register scrolls ── */
.fn-nav[b-m2sehrzhvl] {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-top: 4px;
    background: var(--canvas);
    border-bottom: 1px solid var(--border);
}
.fn-tabs[b-m2sehrzhvl] { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; }
.fn-tab[b-m2sehrzhvl] {
    min-height: 44px;
    padding: 0 16px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.fn-tab:hover[b-m2sehrzhvl] { color: var(--accent); }
.fn-tab.active[b-m2sehrzhvl] { border-bottom-color: var(--accent); color: var(--navy); }
.fn-tab:focus-visible[b-m2sehrzhvl] { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }

/* ── Panel header and toolbar ── */
.fn-page .v3-panel-header[b-m2sehrzhvl] { flex-wrap: wrap; gap: 10px 16px; }
.fn-meta[b-m2sehrzhvl] { margin-right: auto; }
.fn-header-actions[b-m2sehrzhvl] { display: inline-flex; gap: 8px; }
.fn-search[b-m2sehrzhvl] { gap: 10px; }
.fn-search .v3-field:first-child[b-m2sehrzhvl] { flex: 1 1 260px; max-width: 440px; }
.fn-search .v3-field[b-m2sehrzhvl] { min-width: 0; }
.fn-search input[b-m2sehrzhvl], .fn-search select[b-m2sehrzhvl] { width: 100%; }

.fn-period[b-m2sehrzhvl] { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 500; }
.fn-notice[b-m2sehrzhvl] { margin: 12px 20px 0; }

/* ── Registers ── */
.fn-table th[b-m2sehrzhvl] { padding-top: 11px; padding-bottom: 11px; }
.fn-table td[b-m2sehrzhvl] { padding-top: 14px; padding-bottom: 14px; vertical-align: top; }
.fn-table tbody tr:hover td[b-m2sehrzhvl] { background: var(--accent-soft); }
.fn-table tbody tr:hover .v3-empty[b-m2sehrzhvl] { background: var(--surface); }
.fn-table td > strong[b-m2sehrzhvl] { display: block; color: var(--navy); font-weight: 600; }
.fn-nowrap[b-m2sehrzhvl] { white-space: nowrap; }
.fn-secondary[b-m2sehrzhvl] { color: var(--text-secondary); }
.fn-date[b-m2sehrzhvl] { color: var(--text); font-weight: 600; }
.fn-src[b-m2sehrzhvl] { color: var(--text-secondary); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.75rem; letter-spacing: .02em; }
.fn-rule[b-m2sehrzhvl] { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); }

/* Fine source: a small label, one per row, so direct cash and assessed settlements read apart at a glance. */
.fn-kind[b-m2sehrzhvl] {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .03em;
}
.fn-kind-direct[b-m2sehrzhvl] { border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); color: #7a5c10; }
.fn-kind-assessed[b-m2sehrzhvl] { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); color: var(--accent); }

.fn-reason[b-m2sehrzhvl] {
    max-width: 38ch;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fn-amount[b-m2sehrzhvl] { color: var(--navy); font-size: 0.9375rem; font-weight: 700; }
.fn-amount-void[b-m2sehrzhvl] { color: var(--text-tertiary); }
.fn-amount .v3-block[b-m2sehrzhvl] { font-size: 0.6875rem; font-weight: 500; }

/* Row actions stay together at the right edge, quiet until hovered. */
.fn-row-actions[b-m2sehrzhvl] { width: 1%; white-space: nowrap; }
.fn-row-actions .v3-btn[b-m2sehrzhvl] { gap: 6px; }

.fn-table tfoot td[b-m2sehrzhvl] {
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid var(--border-strong);
    background: var(--surface-muted);
}
.fn-table tfoot .v3-num[b-m2sehrzhvl] { font-size: 0.9375rem; font-weight: 700; color: var(--navy); }

.fn-table .v3-empty[b-m2sehrzhvl] { padding: 36px 20px; }
.fn-table .v3-empty-block svg[b-m2sehrzhvl] { width: 32px; height: 32px; }

/* ── Penalty definition form ── */
.fn-form[b-m2sehrzhvl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}
.fn-check[b-m2sehrzhvl] { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; }
.fn-note[b-m2sehrzhvl] { margin: 0; color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.45; }
.fn-actions[b-m2sehrzhvl] { display: flex; justify-content: flex-end; gap: 8px; }

.v3-panel-note a[b-m2sehrzhvl] { color: var(--accent); font-weight: 600; }

@media (max-width: 768px) {
    .fn-tab[b-m2sehrzhvl] { flex: 1 1 auto; padding: 0 10px; }
    .fn-nav[b-m2sehrzhvl] { margin-top: 0; }
}

@media (max-width: 480px) {
    .fn-period[b-m2sehrzhvl] { width: 100%; }
    .fn-search[b-m2sehrzhvl] { align-items: stretch; }
    .fn-header-actions[b-m2sehrzhvl] { width: 100%; }
    .fn-header-actions .v3-btn[b-m2sehrzhvl] { flex: 1 1 0; }
    .fn-tab[b-m2sehrzhvl] { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fn-tab[b-m2sehrzhvl] { transition: none; }
}
/* /Components/Pages/Menus/FishMeatVendorFees.razor.rz.scp.css */
/* Fish / Meat Vendors — V3. Hero and toolbar are the shared FacilityHero and Toolbar (as Kanmanggay); panels, tables and buttons come from the v3- layer in app.css. */

/* The links and actions inside the shared Toolbar: the same size and rhythm as the Kanmanggay bar. */
.fmv-actions-bar[b-uy6putk9va] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fmv-actions-bar .btn-outline[b-uy6putk9va],
.fmv-actions-bar .btn-primary[b-uy6putk9va] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.fmv-panel-tools[b-uy6putk9va] { display: inline-flex; align-items: center; gap: 12px; }

.fmv-saved[b-uy6putk9va] { margin: 16px 0 0; }
.fmv-notice[b-uy6putk9va] { margin: 12px 20px 0; }
.fmv-sub[b-uy6putk9va] { font-size: 0.75rem; color: var(--text-subtle); }
.fmv-src[b-uy6putk9va] { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Both lists are bounded: about five rows show, the rest scroll inside the panel under a held heading. */
.fmv-scroll[b-uy6putk9va] { max-height: 21rem; overflow-y: auto; overscroll-behavior: contain; }
.fmv-scroll thead th[b-uy6putk9va] { position: sticky; top: 0; z-index: 2; background: var(--surface-muted); }
/* /Components/Pages/Menus/FishMeatVendorImport.razor.rz.scp.css */
/* The Fish / Meat vendor import's own bits: everything else is the shared Import* components. */
.fmi[b-esmtdencum] { display: flex; flex-direction: column; gap: 16px; }

.fmi-year[b-esmtdencum] { display: inline-flex; margin-bottom: 12px; }

.fmi-status[b-esmtdencum] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fmi-chip[b-esmtdencum] { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-muted); color: var(--text-secondary); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.fmi-chip.fmi-ready[b-esmtdencum] { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); background: var(--green-bg); color: var(--green); }
.fmi-chip.fmi-invalid[b-esmtdencum] { border-color: color-mix(in srgb, var(--red) 30%, var(--border)); background: var(--red-bg); color: var(--red); }
.fmi-chip.fmi-review[b-esmtdencum] { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--navy); }
.fmi-why[b-esmtdencum] { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.fmi-confirm[b-esmtdencum] { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-size: 12px; font-weight: 600; cursor: pointer; }
.fmi-confirm input[b-esmtdencum] { width: 16px; height: 16px; accent-color: var(--accent); }
.fmi-confirm:focus-within[b-esmtdencum] { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.fmi-foot-note[b-esmtdencum] { margin-right: auto; color: var(--text-muted); font-size: 12.5px; }
/* /Components/Pages/Menus/FishMeatVendorManage.razor.rz.scp.css */
/* Manage Fish / Meat Vendors — calm and administrative. Panels, tables and buttons come from the v3- layer in app.css; the Toolbar is the shared one. */
.fmm-head[b-f0w2sl017x] { margin: 4px 0 16px; }

.fmm-back[b-f0w2sl017x] {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.fmm-back:hover[b-f0w2sl017x] { text-decoration: underline; }
.fmm-back:focus-visible[b-f0w2sl017x] { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.fmm-title[b-f0w2sl017x] {
    margin: 0;
    color: var(--navy);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.fmm-controls[b-f0w2sl017x] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.fmm-saved[b-f0w2sl017x] { margin: 16px 0 0; }
.fmm-notice[b-f0w2sl017x] { margin: 12px 20px 0; }
.fmm-sub[b-f0w2sl017x] { font-size: 0.75rem; color: var(--text-subtle); }

.fmm-status[b-f0w2sl017x] { font-size: 0.8125rem; font-weight: 600; color: var(--green, #1f7a4d); }
.fmm-status-closed[b-f0w2sl017x] { color: var(--text-secondary); }

.fmm-actions[b-f0w2sl017x] { white-space: nowrap; text-align: right; }
.fmm-actions .v3-btn + .v3-btn[b-f0w2sl017x] { margin-left: 6px; }

/* The list is bounded: about eight rows show, the rest scroll inside the panel under a held heading. */
.fmm-scroll[b-f0w2sl017x] { max-height: 30rem; overflow-y: auto; overscroll-behavior: contain; }
.fmm-scroll thead th[b-f0w2sl017x] { position: sticky; top: 0; z-index: 2; background: var(--surface-muted); }

.fmm-foot[b-f0w2sl017x] { margin: 0; padding: 12px 20px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 0.8125rem; }

/* Facts inside the drawers: a plain two-column list, quiet labels, strong values. */
.fmm-facts[b-f0w2sl017x] { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 8px 0; margin: 0 0 20px; font-size: 0.875rem; }
.fmm-facts dt[b-f0w2sl017x] { padding-right: 16px; color: var(--text-secondary); }
.fmm-facts dd[b-f0w2sl017x] { margin: 0; color: var(--navy); font-weight: 500; overflow-wrap: anywhere; }
.fmm-facts dd.v3-num[b-f0w2sl017x] { text-align: left; font-variant-numeric: tabular-nums; }
.fmm-facts .fmm-total[b-f0w2sl017x] { padding-top: 8px; border-top: 1px solid var(--border); font-weight: 700; }
.fmm-facts-title[b-f0w2sl017x] { margin: 0 0 8px; color: var(--navy); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
.fmm-audit[b-f0w2sl017x] { margin: 0; color: var(--text-tertiary); font-size: 0.75rem; }
.fmm-close-text[b-f0w2sl017x] { margin: 0 0 16px; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; }
/* /Components/Pages/Menus/Menu.razor.rz.scp.css */
/* ══════════════════════════════════════════
   DASHBOARD / MENU — Facility grid & Bottom row
══════════════════════════════════════════ */
.facility-grid[b-m631hrp4de] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.facility-card[b-m631hrp4de] {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}

    .facility-card[b-m631hrp4de]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
        opacity: 0;
        transition: opacity 0.2s;
    }

    .facility-card:hover[b-m631hrp4de] {
        box-shadow: 0 6px 24px rgba(13,33,55,0.1);
        transform: translateY(-2px);
    }

        .facility-card:hover[b-m631hrp4de]::before {
            opacity: 1;
        }

    .facility-card.has-alert[b-m631hrp4de] {
        border-color: rgba(139,58,58,0.2);
    }

.facility-card-header[b-m631hrp4de] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.facility-card-icon[b-m631hrp4de] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .facility-card-icon svg[b-m631hrp4de] {
        width: 18px;
        height: 18px;
        stroke: var(--navy);
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .facility-card-icon img[b-m631hrp4de] {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: contain;
        background: #fff;
    }

.facility-card-code[b-m631hrp4de] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.facility-card-name[b-m631hrp4de] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.2;
}

.fac-model-tag[b-m631hrp4de] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--bg-icon, #eef2f6);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Paid-on-service indicator (SLH/TRM/TPM) replaces the rate progress bar — kept slim so it doesn't
   bloat the card relative to the stall cards' thin progress row. */
.facility-onservice[b-m631hrp4de] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--green-bg, #e9f5ee);
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
}

    .facility-onservice svg[b-m631hrp4de] {
        width: 12px;
        height: 12px;
        stroke: var(--green);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

.facility-card-stats[b-m631hrp4de] {
    display: flex;
    gap: 0;
}

.fac-stat[b-m631hrp4de] {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    background: var(--bg);
    border-radius: 8px;
}

    .fac-stat + .fac-stat[b-m631hrp4de] {
        margin-left: 6px;
    }

.fac-stat-val[b-m631hrp4de] {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
}

    .fac-stat-val.unpaid-val[b-m631hrp4de] {
        color: var(--red);
    }

    .fac-stat-val.paid-val[b-m631hrp4de] {
        color: var(--navy);
    }

    .fac-stat-val.partial-val[b-m631hrp4de] {
        color: var(--navy);
    }

.fac-stat-key[b-m631hrp4de] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 2px;
}

.facility-progress-wrap[b-m631hrp4de] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.facility-progress-bar[b-m631hrp4de] {
    flex: 1;
    height: 5px;
    background: var(--bg-icon);
    border-radius: 3px;
    overflow: hidden;
}

.facility-progress-fill[b-m631hrp4de] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.facility-progress-pct[b-m631hrp4de] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-subtle);
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
}

.fee-chips[b-m631hrp4de] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.fee-chip[b-m631hrp4de] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(200,168,75,0.1);
    color: #7a5010;
    border: 1px solid rgba(200,168,75,0.25);
    letter-spacing: 0.3px;
}

.facility-card-btn[b-m631hrp4de] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px;
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--navy);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: auto;
    text-decoration: none;
}

    .facility-card-btn:hover[b-m631hrp4de] {
        background: var(--bg);
        border-color: var(--text-subtle);
    }

    .facility-card-btn svg[b-m631hrp4de] {
        width: 14px;
        height: 14px;
        stroke: var(--navy);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ══════════════════════════════════════════
   BOTTOM ROW (Dashboard)
══════════════════════════════════════════ */
.bottom-row[b-m631hrp4de] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}

.delinquent-list[b-m631hrp4de] {
    padding: 8px 0;
}

.delinquent-empty[b-m631hrp4de] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
}

.delinquent-empty svg[b-m631hrp4de] {
    width: 32px;
    height: 32px;
    color: var(--green);
    stroke: var(--green);
}

.delinquent-empty-title[b-m631hrp4de] {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

.delinquent-empty-sub[b-m631hrp4de] {
    font-size: 12px;
    color: var(--text-muted);
}

.delinquent-item[b-m631hrp4de] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--bg-icon);
    gap: 12px;
    transition: background 0.12s;
    cursor: pointer;
}

    .delinquent-item:hover[b-m631hrp4de] {
        background: var(--bg);
    }

    .delinquent-item:last-child[b-m631hrp4de] {
        border-bottom: none;
    }

.delinquent-name[b-m631hrp4de] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--navy);
}

.delinquent-meta[b-m631hrp4de] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 10.5px;
    color: var(--text-muted);
}

.delinquent-right[b-m631hrp4de] {
    text-align: right;
    flex-shrink: 0;
}

.delinquent-amount[b-m631hrp4de] {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--red);
}

.delinquent-months[b-m631hrp4de] {
    font-size: 11px;
    margin-top: 2px;
}

/* Dashboard "Revenue by Facility" report-action tabs */
.section-header-actions[b-m631hrp4de] {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}

/* The five shortcuts wrap onto a second line on a narrower desktop instead of pushing the page sideways. */
.dashboard-report-tabs[b-m631hrp4de] {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    padding: 4px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 11px;
}

.dashboard-report-tab[b-m631hrp4de] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

a.dashboard-report-tab[b-m631hrp4de] {
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

a.dashboard-report-tab:hover[b-m631hrp4de] {
    color: var(--navy);
}

.dashboard-report-tab.active[b-m631hrp4de] {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 3px 9px rgba(13,33,55,.18);
}

.dashboard-report-tab:disabled[b-m631hrp4de] {
    cursor: not-allowed;
    opacity: .62;
}

.dashboard-report-soon[b-m631hrp4de] {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(200,168,75,.18);
    color: #8a6d1b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .section-header-actions[b-m631hrp4de] { width: 100%; }
    .dashboard-report-tabs[b-m631hrp4de] { width: 100%; }
    .dashboard-report-tab[b-m631hrp4de] { flex: 1; padding: 0 10px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — dashboard (mobile/tablet ≤768px)
   Desktop (≥769px) is untouched: these rules only exist below the breakpoint.
══════════════════════════════════════════ */
@media (max-width: 768px) {
/* Report shortcut tabs scroll horizontally instead of overflowing the row. */
    .section-header-actions[b-m631hrp4de] { width: 100%; }

    .dashboard-report-tabs[b-m631hrp4de] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .dashboard-report-tabs[b-m631hrp4de]::-webkit-scrollbar { display: none; }

    .dashboard-report-tab[b-m631hrp4de] { flex-shrink: 0; }

    /* Recent transactions + overdue panels stack into one column. */
    .bottom-row[b-m631hrp4de] { grid-template-columns: 1fr; }

    /* Recent Transactions (OR#/Payor/Facility/Amount/Recorded By/Time) doesn't fit a phone width even
       scrolled. Drop the least essential columns (1st = OR#, last = Time) and tighten padding so the
       remaining ones (Payor, Facility, Amount, Recorded By) read cleanly with no wrapped multi-line cells.
       Scoped to THIS page's table only — other pages' data-tables are untouched. */
    .panel .data-table th:first-child[b-m631hrp4de],
    .panel .data-table td:first-child[b-m631hrp4de],
    .panel .data-table th:last-child[b-m631hrp4de],
    .panel .data-table td:last-child[b-m631hrp4de] {
        display: none;
    }

    .panel .data-table thead th[b-m631hrp4de],
    .panel .data-table tbody td[b-m631hrp4de] {
        padding: 9px 8px;
        white-space: normal;
    }

    .panel .data-table[b-m631hrp4de] {
        font-size: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */

/* Non-status tag: neutral, not gold (V3). */
.dashboard-report-soon[b-m631hrp4de] {
    background: var(--surface-muted);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border);
}

/* ── Facility snapshot, V3 (2026-10-02): a pale civic-blue supporting surface that relates to the hero without
      competing with it. White figure tiles inside; civic-blue progress; no gold gradient or lift on hover. ── */
.facility-card[b-m631hrp4de] {
    border-color: var(--border-blue-subtle);
    border-radius: 10px;
    background: var(--surface-blue-subtle);
    box-shadow: none;
}

    .facility-card[b-m631hrp4de]::before {
        display: none;
    }

    .facility-card:hover[b-m631hrp4de] {
        border-color: var(--accent);
        box-shadow: var(--elevation-1);
        transform: none;
    }

    .facility-card.has-alert[b-m631hrp4de] {
        border-color: var(--border-blue-subtle);
    }

.facility-card-icon[b-m631hrp4de] {
    border: 1px solid var(--border-blue-subtle);
    background: var(--surface);
}

.fac-model-tag[b-m631hrp4de] {
    background: var(--accent-soft);
    color: var(--accent-hover);
}

.fac-stat[b-m631hrp4de] {
    border: 1px solid var(--border-blue-subtle);
    background: var(--surface);
}

.fac-stat-val[b-m631hrp4de] {
    font-variant-numeric: tabular-nums;
}

.fac-stat-key[b-m631hrp4de] {
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 500;
    color: var(--text-tertiary);
}

.facility-progress-bar[b-m631hrp4de] {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-blue-subtle);
}

.facility-progress-fill[b-m631hrp4de] {
    background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .facility-card[b-m631hrp4de],
    .facility-progress-fill[b-m631hrp4de] {
        transition: none;
    }
}

.facility-card-btn[b-m631hrp4de] {
    border-color: var(--border-blue-subtle);
    color: var(--accent-hover);
}

    .facility-card-btn:hover[b-m631hrp4de] {
        background: var(--accent-soft);
        border-color: var(--accent);
    }

    .facility-card-btn:focus-visible[b-m631hrp4de] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* The overview heading keeps to one line beside the report links; below laptop width it may wrap again. */
.section-title-block .section-heading[b-m631hrp4de] { white-space: nowrap; }

@media (max-width: 1100px) {
    .section-title-block .section-heading[b-m631hrp4de] { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════
   ONE MANAGERIAL REGION, TWO VIEWS (Operations | Revenue sources)
   A local view selector beside the report shortcuts — not navigation. Both views stay mounted; the inactive one is hidden.
   ══════════════════════════════════════════════════════════════ */

.dashboard-view-switch[b-m631hrp4de] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
}

.dashboard-view-tab[b-m631hrp4de] {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dashboard-view-tab:hover[b-m631hrp4de] { background: var(--accent-soft); color: var(--accent-hover); }
.dashboard-view-tab.active[b-m631hrp4de] { background: var(--accent); color: var(--surface); }
.dashboard-view-tab:focus-visible[b-m631hrp4de],
.dashboard-view-retry:focus-visible[b-m631hrp4de] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The visible view fades in with a slight rise over a short, fixed time. Only opacity and a small transform move, so no height
   is animated and the scroll position holds. */
.dash-view[b-m631hrp4de] { animation: dash-view-in-b-m631hrp4de 220ms ease-out; }
.dash-view[hidden][b-m631hrp4de] { display: none; }

@keyframes dash-view-in-b-m631hrp4de {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.dash-subhead[b-m631hrp4de] {
    margin: 0 0 10px;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dash-note[b-m631hrp4de] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 28px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13px;
}

.dash-note-error[b-m631hrp4de] { border-color: color-mix(in srgb, var(--red) 30%, var(--border)); background: var(--red-bg); color: var(--red); }

.dashboard-view-retry[b-m631hrp4de] {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.dashboard-view-retry:hover[b-m631hrp4de] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* One compact management header per view. Operations: the section title with the shortcuts and view switch at its right.
   Revenue sources: the same toolbar sits inside the panel's own header (see RevenueSourcePerformancePanel). The toolbar never
   wraps internally, so the switch stays beside the shortcuts; the header wraps as a whole onto a second row when width runs out. */
.dash-ops-head[b-m631hrp4de] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 0 12px;
}

.dash-ops-head .dash-subhead[b-m631hrp4de] { margin: 0; }

.dash-toolbar[b-m631hrp4de] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 10px;
    min-width: 0;
}

.dash-toolbar .dashboard-report-tabs[b-m631hrp4de] { flex-wrap: wrap; justify-content: flex-start; }
.dash-toolbar .dashboard-report-tab[b-m631hrp4de] { flex-shrink: 0; }
.dashboard-view-switch[b-m631hrp4de] { flex-shrink: 0; height: 48px; box-sizing: border-box; }

/* Loading stand-in for the Revenue header: the same title and toolbar, so nothing jumps when the panel arrives. */
.dash-rev-head[b-m631hrp4de] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 0 12px;
}

.dash-rev-title[b-m631hrp4de] { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--navy); }

/* "More reports": a keyboard-operable disclosure, not a script menu. Opens as a small list under its button. */
.dashboard-more[b-m631hrp4de] { position: relative; }
.dashboard-more > summary[b-m631hrp4de] { list-style: none; cursor: pointer; }
.dashboard-more > summary[b-m631hrp4de]::-webkit-details-marker { display: none; }
.dashboard-more > summary[b-m631hrp4de]::after { content: "▾"; margin-left: 6px; font-size: 10px; }
.dashboard-more[open] > summary[b-m631hrp4de] { color: var(--navy); }
.dashboard-more > summary:focus-visible[b-m631hrp4de] { outline: 2px solid var(--accent); outline-offset: 2px; }

.dashboard-more-menu[b-m631hrp4de] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(13,33,55,.14);
}

.dashboard-more-link[b-m631hrp4de] {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 7px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-more-link:hover[b-m631hrp4de] { background: var(--accent-soft); color: var(--accent-hover); }
.dashboard-more-link:focus-visible[b-m631hrp4de] { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 768px) {
    /* Phone / tablet: the switch comes first and spans the width, then the shortcuts wrap — nothing hides off a scroll edge. */
    .dash-ops-head[b-m631hrp4de], .dash-rev-head[b-m631hrp4de] { flex-direction: column; align-items: stretch; }
    .dash-toolbar[b-m631hrp4de] { flex-direction: column-reverse; align-items: stretch; }
    .dashboard-view-switch[b-m631hrp4de] { display: flex; width: 100%; }
    .dashboard-view-tab[b-m631hrp4de] { flex: 1 1 0; }
    .dash-toolbar .dashboard-report-tabs[b-m631hrp4de] { overflow: visible; }
    .dash-toolbar .dashboard-report-tab[b-m631hrp4de] { flex: 1 1 auto; padding: 0 12px; }
    .dashboard-more-menu[b-m631hrp4de] { right: auto; left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-view[b-m631hrp4de] { animation: none; }
    .dashboard-view-tab[b-m631hrp4de] { transition: none; }
}

/* ── Revenue header (compact toolbar): shortcuts, switch and source selector share the title's row at desktop widths ──
   Every control is 42px tall, the same as the source selector beside it, with tight padding so the row fits the content width
   left by the sidebar. Below that width the header wraps as a whole (see the panel's header), never clips or overlaps. */
@media (min-width: 769px) {
    .dash-toolbar-compact[b-m631hrp4de] { flex-wrap: nowrap; gap: 8px; }
    .dash-toolbar-compact .dashboard-report-tabs[b-m631hrp4de] { flex-wrap: nowrap; gap: 2px; padding: 3px; height: 42px; box-sizing: border-box; border-radius: 10px; }
    .dash-toolbar-compact .dashboard-report-tab[b-m631hrp4de] { min-height: 34px; padding: 0 9px; gap: 4px; font-size: 12.5px; }
    .dash-toolbar-compact .dashboard-more > summary[b-m631hrp4de]::after { margin-left: 4px; }
    .dash-toolbar-compact .dashboard-view-switch[b-m631hrp4de] { height: 42px; padding: 3px; gap: 2px; }
    .dash-toolbar-compact .dashboard-view-tab[b-m631hrp4de] { min-height: 34px; padding: 0 11px; font-size: 12.5px; }
}

/* The full wording "More reports" appears when the row has room for it; the accessible name is always complete. */
@media (min-width: 769px) and (max-width: 1559px) {
    .dash-toolbar-compact .dashboard-more-sfx[b-m631hrp4de] { display: none; }
}

@media (min-width: 769px) and (max-width: 1559px) {
    .dash-toolbar-compact[b-m631hrp4de] { gap: 6px; }
    .dash-toolbar-compact .dashboard-report-tab[b-m631hrp4de] { padding: 0 7px; font-size: 12px; }
    .dash-toolbar-compact .dashboard-view-tab[b-m631hrp4de] { padding: 0 8px; font-size: 12px; }
}

@media (min-width: 769px) and (max-width: 1559px) {
    .dash-toolbar-compact .dashboard-report-tab[b-m631hrp4de] { padding: 0 6px; }
    .dash-toolbar-compact .dashboard-view-tab[b-m631hrp4de] { padding: 0 7px; }
}
/* /Components/Pages/Menus/OfficeProfile.razor.rz.scp.css */
/* The sheet used to be a 620px strip centred in the page, which left a wide empty band down each side and read as an
   unfinished form. It now takes the width it is given, up to a comfortable reading measure, and lays its content in two
   columns: the office's editable identity on the left, what was set at onboarding on the right. One column below
   1000px, where two would be too narrow to read. */
.op-form-wrap[b-c3he1sst04] {
    display: flex;
    justify-content: center;
    padding: 8px 0 40px;
}

.op-form-card[b-c3he1sst04] {
    width: min(1180px, 100%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 28px 24px;
    box-shadow: 0 14px 36px rgba(13, 33, 55, 0.09);
    position: relative;
    overflow: hidden;
}

.op-form-accent[b-c3he1sst04] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
}

.op-form-head[b-c3he1sst04] {
    margin-bottom: 20px;
}

.op-form-title[b-c3he1sst04] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.op-form-sub[b-c3he1sst04] {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--text-subtle);
}

.op-banner[b-c3he1sst04] {
    margin-bottom: 16px;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
}

.op-banner-ok[b-c3he1sst04] {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}

.op-banner-error[b-c3he1sst04] {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
}

.op-form-loading[b-c3he1sst04] {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 10px 0;
}

.op-form-loading-lines[b-c3he1sst04] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.op-logo-row[b-c3he1sst04] {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 6px 0 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.op-logo-preview[b-c3he1sst04] {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
}

    .op-logo-preview img[b-c3he1sst04] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.op-logo-placeholder svg[b-c3he1sst04] {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.op-logo-actions[b-c3he1sst04] {
    flex: 1;
    min-width: 0;
}

.op-logo-label[b-c3he1sst04] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.op-file-wrap[b-c3he1sst04]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.op-upload-btn[b-c3he1sst04] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

    .op-upload-btn:hover[b-c3he1sst04] {
        opacity: 0.9;
    }

    .op-upload-btn svg[b-c3he1sst04] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.op-logo-hint[b-c3he1sst04] {
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--text-subtle);
}

.op-field-row[b-c3he1sst04] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
}

    .op-field-row .form-group[b-c3he1sst04] {
        margin-bottom: 0;
    }

.op-opt[b-c3he1sst04] {
    color: var(--text-subtle);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.op-section-label[b-c3he1sst04] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 4px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.op-lock[b-c3he1sst04] {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-icon);
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: none;
}

.op-divider[b-c3he1sst04] {
    height: 1px;
    background: var(--border);
    margin: 22px 0 18px;
}

.op-hint[b-c3he1sst04] {
    font-size: 0.76rem;
    color: var(--text-subtle);
    margin-top: 6px;
}

.op-readonly[b-c3he1sst04] {
    background: var(--bg-icon) !important;
    color: var(--text-subtle) !important;
    cursor: not-allowed;
}

.op-form-actions[b-c3he1sst04] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.breadcrumb-link[b-c3he1sst04] {
    color: var(--text-subtle);
    text-decoration: none;
}

    .breadcrumb-link:hover[b-c3he1sst04] {
        color: var(--accent);
    }

@media (max-width: 560px) {
    .op-field-row[b-c3he1sst04] {
        grid-template-columns: 1fr;
    }
}

/* The two columns, and the rule between them. */
.op-columns[b-c3he1sst04] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 30px;
}

.op-columns > .op-col + .op-col[b-c3he1sst04] {
    border-left: 1px solid var(--border);
    padding-left: 30px;
}

@media (max-width: 1000px) {
    .op-columns[b-c3he1sst04] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .op-columns > .op-col + .op-col[b-c3he1sst04] {
        border-left: none;
        padding-left: 0;
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid var(--border);
    }
}

/* Where the office's identity ends up. Reference, not controls, so it is set as quiet text. */
.op-appears[b-c3he1sst04] {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-subtle);
}
/* /Components/Pages/Menus/OnlinePayments.razor.rz.scp.css */
.op-intro[b-512pe7gyw2] {
    margin-bottom: 1rem;
}

.op-intro-title[b-512pe7gyw2] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.op-intro-sub[b-512pe7gyw2] {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--text-subtle);
    max-width: 70ch;
}

.op-banner[b-512pe7gyw2] {
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
}

.op-banner-ok[b-512pe7gyw2] {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}

.op-banner-error[b-512pe7gyw2] {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
}

.op-empty[b-512pe7gyw2] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-subtle);
}

.op-loading[b-512pe7gyw2] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(180px, 28%);
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    min-height: 96px;
    border-radius: 12px;
    background: var(--bg-card);
}

.op-loading-icon[b-512pe7gyw2] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--bg-icon);
    color: var(--navy);
}

.op-loading-icon svg[b-512pe7gyw2] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.op-loading-title[b-512pe7gyw2] {
    font-weight: 700;
    color: var(--text);
}

.op-loading-sub[b-512pe7gyw2] {
    margin-top: 3px;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-subtle);
}

.op-loading-lines[b-512pe7gyw2] {
    display: grid;
    gap: 0.65rem;
}

.op-loading-lines span[b-512pe7gyw2] {
    position: relative;
    overflow: hidden;
    display: block;
    height: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 72%, #fff);
}

.op-loading-lines span:last-child[b-512pe7gyw2] {
    width: 72%;
}

.op-loading-lines span[b-512pe7gyw2]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: opShimmer-b-512pe7gyw2 1.1s ease-in-out infinite;
}

@keyframes opShimmer-b-512pe7gyw2 {
    100% {
        transform: translateX(100%);
    }
}

.op-table-wrap[b-512pe7gyw2] {
    width: 100%;
}

.op-table[b-512pe7gyw2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

/* Table scrolls horizontally within its panel on mobile instead of overflowing the page (the dark bleed
   behind the table in the screenshot was the sidebar/backdrop showing through the overflowed content). */
@media (max-width: 768px) {
    .op-table-wrap[b-512pe7gyw2] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .op-table[b-512pe7gyw2] {
        min-width: 640px;
    }
}

.op-table thead th[b-512pe7gyw2] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.op-table tbody td[b-512pe7gyw2] {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.op-strong[b-512pe7gyw2] {
    font-weight: 600;
    color: var(--text);
}

.op-muted[b-512pe7gyw2] {
    font-size: 0.78rem;
    color: var(--text-subtle);
}

.op-mono[b-512pe7gyw2] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8rem;
    color: var(--text-subtle);
}

.op-amt[b-512pe7gyw2] {
    text-align: right;
}

.op-input[b-512pe7gyw2] {
    width: 100%;
    min-width: 150px;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text);
    background: var(--bg-card);
}

.op-input:focus[b-512pe7gyw2] {
    outline: none;
    border-color: var(--accent);
}

.op-btn[b-512pe7gyw2] {
    border: 0;
    background: var(--accent);
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.op-btn:disabled[b-512pe7gyw2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.op-btn:not(:disabled):hover[b-512pe7gyw2] {
    background: var(--accent-hover);
}

@media (max-width: 720px) {
    .op-loading[b-512pe7gyw2] {
        grid-template-columns: 44px 1fr;
    }

    .op-loading-lines[b-512pe7gyw2] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .op-loading-lines span[b-512pe7gyw2]::after {
        animation: none;
    }
}



/* ── Online payment account: centered first-time setup card + compact status ── */
.op-setup[b-512pe7gyw2] {
    display: flex;
    justify-content: center;
    /* Room beneath the card. It used to be 8px, which was fine for a short form; the card now carries a status rail, the
       webhook address and two actions, so on a laptop viewport the buttons ended up flush against the bottom edge. */
    padding: 24px 0 32px;
}

.op-setup-card[b-512pe7gyw2] {
    /* Widened from 560px because the head now holds the connection status beside the title. At 560 the two competed: the
       title wrapped onto two lines and the description was squeezed into a narrow column beside a rail of figures. */
    width: min(720px, 100%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 28px 24px;
    box-shadow: 0 14px 36px rgba(13, 33, 55, 0.09);
    position: relative;
    overflow: hidden;
}

    /* subtle gold/navy letterhead accent */
    .op-setup-card[b-512pe7gyw2]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--accent);
    }

.op-setup-head[b-512pe7gyw2] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    /* The status rail drops BELOW the title on a narrow card rather than crushing it. Without this the description was
       compressed into a column a few words wide while the rail kept its own width. */
    flex-wrap: wrap;
}

.op-setup-badge[b-512pe7gyw2] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .op-setup-badge svg[b-512pe7gyw2] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.op-setup-head-text[b-512pe7gyw2] {
    flex: 1;
    /* A floor rather than 0: below this the title is not worth reading, so the rail wraps underneath instead. */
    min-width: 240px;
}

.op-setup-title[b-512pe7gyw2] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.op-setup-sub[b-512pe7gyw2] {
    margin-top: 3px;
    font-size: 0.85rem;
    color: var(--text-subtle);
}

.op-help-btn[b-512pe7gyw2] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    color: var(--text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .op-help-btn:hover[b-512pe7gyw2] { color: var(--navy); border-color: var(--accent); }
    .op-help-btn.active[b-512pe7gyw2] { background: var(--accent); color: #fff; border-color: var(--accent); }

    .op-help-btn svg[b-512pe7gyw2] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.op-help[b-512pe7gyw2] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

/* Structured, numbered configure steps (help modal) */
.op-steps[b-512pe7gyw2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.op-step[b-512pe7gyw2] {
    display: flex;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

    .op-step:first-child[b-512pe7gyw2] { padding-top: 2px; }
    .op-step:last-child[b-512pe7gyw2] { border-bottom: none; padding-bottom: 2px; }

.op-step-no[b-512pe7gyw2] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-step-main[b-512pe7gyw2] {
    flex: 1;
    min-width: 0;
}

.op-step-title[b-512pe7gyw2] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.op-step-text[b-512pe7gyw2] {
    font-size: 0.83rem;
    color: var(--text-subtle);
    line-height: 1.55;
}

.op-setup-actions[b-512pe7gyw2] {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.op-account[b-512pe7gyw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
}

.op-account.is-own[b-512pe7gyw2] {
    background: var(--green-bg);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

/* ── Treasury KPI cards ── */
.op-kpis[b-512pe7gyw2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 1.25rem;
}

.op-kpi[b-512pe7gyw2] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}

    .op-kpi[b-512pe7gyw2]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: var(--accent);
    }

.op-kpi-label[b-512pe7gyw2] {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.op-kpi-value[b-512pe7gyw2] {
    margin-top: 6px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

    .op-kpi-value.is-attention[b-512pe7gyw2] {
        color: var(--red);
    }

.op-kpi-sub[b-512pe7gyw2] {
    margin-top: 4px;
    font-size: 0.76rem;
    color: var(--text-subtle);
}

/* KPI + history loading skeletons */
.op-kpi-sk[b-512pe7gyw2] {
    margin-top: 8px;
}

.op-kpi-sk-sm[b-512pe7gyw2] {
    margin-top: 8px;
}

.op-history-sk[b-512pe7gyw2] {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.op-history-sk-row[b-512pe7gyw2] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

    .op-history-sk-row > :nth-child(2)[b-512pe7gyw2] {
        flex: 1;
    }

/* history section spacing */
.op-history-head[b-512pe7gyw2] {
    margin-top: 1.75rem;
}

/* awaiting-OR header row with the configure gear on the right */
.op-intro-row[b-512pe7gyw2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.op-config-btn[b-512pe7gyw2] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-subtle);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

    .op-config-btn:hover[b-512pe7gyw2] {
        border-color: var(--accent);
        color: var(--navy);
    }

    .op-config-btn svg[b-512pe7gyw2] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.op-config-status[b-512pe7gyw2] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-icon);
    color: var(--text-muted);
    white-space: nowrap;
}

    .op-config-status.is-own[b-512pe7gyw2] {
        background: var(--green-bg);
        color: var(--green);
    }

.op-pw-note[b-512pe7gyw2] {
    font-size: 0.85rem;
    color: var(--text-subtle);
    line-height: 1.5;
    margin-bottom: 14px;
}

/* Confirm-it's-you modal: navy header, restrained corners (overrides the global modal only here). */
.eemo-modal.op-confirm[b-512pe7gyw2] {
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
}

    .op-confirm .eemo-modal-header[b-512pe7gyw2] {
        background: var(--navy);
        margin: 0;
        padding: 16px 20px;
        border-bottom: none;
        align-items: center;
    }

    .op-confirm .eemo-modal-title[b-512pe7gyw2] {
        color: #fff;
    }

    .op-confirm .eemo-modal-close[b-512pe7gyw2] {
        color: var(--accent);
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

        .op-confirm .eemo-modal-close:hover[b-512pe7gyw2] {
            background: rgba(255, 255, 255, 0.18);
        }

    .op-confirm .eemo-modal-body[b-512pe7gyw2] {
        padding: 20px;
    }

    .op-confirm .eemo-modal-footer[b-512pe7gyw2] {
        padding: 14px 20px;
        margin: 0;
        border-top: 1px solid var(--border);
        background: var(--bg);
    }

    .op-confirm .form-input[b-512pe7gyw2] {
        border-radius: 8px;
    }

/* status badge in the history table */
.op-status[b-512pe7gyw2] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

    .op-status.is-done[b-512pe7gyw2] {
        background: var(--green-bg);
        color: var(--green);
    }

    .op-status.is-await[b-512pe7gyw2] {
        background: color-mix(in srgb, var(--gold) 18%, transparent);
        color: color-mix(in srgb, var(--gold) 82%, #6a4b00);
    }

@media (max-width: 1024px) {
    .op-kpis[b-512pe7gyw2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .op-kpis[b-512pe7gyw2] {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Connection state, the webhook address, and the advanced disclosure.

   Added when the webhook signing secret stopped being described as optional: an office needs to see whether
   its connection can actually confirm a payment, and to copy its OWN webhook address rather than assemble
   one. Restrained on purpose - a status line, a read-only field, and a disclosure.
   ══════════════════════════════════════════════════════════════════════ */
.op-conn[b-512pe7gyw2] {
    margin: 0;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.op-conn-row[b-512pe7gyw2] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
}

.op-conn-row:last-child[b-512pe7gyw2] {
    border-bottom: 0;
    padding-bottom: 0;
}

.op-conn dt[b-512pe7gyw2] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-subtle, #6a8aa0);
}

.op-conn dd[b-512pe7gyw2] {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    text-align: right;
}

/* Three states, and only the incomplete one is coloured: "ready" is the expected case and does not need
   announcing, while "not connected" is already plain from the form beneath it. */
.op-conn-warn[b-512pe7gyw2] { color: var(--gold-ink, #8a6d1f); }

.op-conn-off[b-512pe7gyw2] { color: var(--text-subtle, #6a8aa0); font-weight: 600; }

/* ── The office's own webhook address ── */
.op-copy-row[b-512pe7gyw2] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.op-copy-input[b-512pe7gyw2] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    background: color-mix(in srgb, var(--border) 26%, #fff);
    color: var(--navy);
}

.op-copy-btn[b-512pe7gyw2] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Says the field fills itself, where "(optional)" would have said the field does not matter. It matters - it is what proves
   a notification came from PayMongo - so the note describes who fills it rather than whether it is needed. */
.op-auto[b-512pe7gyw2] {
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-subtle, #6a8aa0);
}

.op-field-hint[b-512pe7gyw2] {
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-subtle, #6a8aa0);
}

.op-field-hint code[b-512pe7gyw2] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--navy);
}

/* ── Advanced: the public key this integration does not use ── */
.op-advanced[b-512pe7gyw2] {
    margin: 4px 0 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--border) 16%, #fff);
}

.op-advanced > summary[b-512pe7gyw2] {
    cursor: pointer;
    padding: 10px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
}

.op-advanced[open] > summary[b-512pe7gyw2] {
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.op-confirm .eemo-modal-header[b-512pe7gyw2] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--navy);
}

.op-setup-card[b-512pe7gyw2]::before {
    background: var(--accent);
}

.op-confirm .eemo-modal-title[b-512pe7gyw2] {
    color: var(--navy);
}
/* /Components/Pages/Menus/Operations.razor.rz.scp.css */
/* Operations directory — StallTrack V3 pilot (docs/interface/STALLTRACK_UI_V3_DIRECTION.md).
   One sheet-like register mirroring the office Monthly Income grouping; row details appear in a
   CSS-only card on hover/focus (no server round-trip). Tokens only. */

.ops-page[b-ele04z6n0n] {
    min-height: 100vh;
    padding: 28px 32px 48px;
    background: var(--canvas);
    color: var(--text);
}

/* ── Page header ── */
.ops-header[b-ele04z6n0n] {
    margin-bottom: 20px;
}

.ops-title[b-ele04z6n0n] {
    margin: 0;
    color: var(--navy);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.ops-subtitle[b-ele04z6n0n] {
    margin: 4px 0 0;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* ── Load / failure / empty notices ── */
.ops-notice[b-ele04z6n0n] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ops-notice p[b-ele04z6n0n] {
    margin: 0;
}

.ops-notice-error[b-ele04z6n0n] {
    color: var(--red);
    font-weight: 500;
}

.ops-retry[b-ele04z6n0n] {
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--accent);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.ops-retry:hover[b-ele04z6n0n] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* ── Sheet surface: one register, like the office report ── */
.ops-sheet[b-ele04z6n0n] {
    --ops-cols: minmax(0, 1fr) 8rem minmax(9rem, 18rem) 1.25rem;
    border: 1px solid var(--border);
    border-top: 3px solid var(--navy);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1), 0 8px 24px -16px rgba(13, 33, 55, .18);
}

.ops-sheet-other[b-ele04z6n0n] {
    margin-top: 20px;
}

.ops-columns[b-ele04z6n0n] {
    display: grid;
    grid-template-columns: var(--ops-cols);
    column-gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ops-columns[b-ele04z6n0n],
.ops-sheet-other .ops-group-title[b-ele04z6n0n] {
    border-radius: 7px 7px 0 0;
}

/* ── Group band ── */
.ops-group + .ops-group[b-ele04z6n0n] {
    border-top: 1px solid var(--border);
}

.ops-group-title[b-ele04z6n0n] {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px 20px 10px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--navy) 3%, var(--surface));
    color: var(--navy);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.ops-group-count[b-ele04z6n0n] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Restrained municipal accent marking each official grouping. */
.ops-group-title[b-ele04z6n0n]::before {
    position: absolute;
    top: 12px;
    bottom: 10px;
    left: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--gold);
    content: "";
}

/* ── Register rows ── */
.ops-rows[b-ele04z6n0n] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ops-item[b-ele04z6n0n] {
    position: relative;
    min-width: 0;
}

.ops-item + .ops-item[b-ele04z6n0n] {
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.ops-row[b-ele04z6n0n] {
    display: grid;
    grid-template-columns: var(--ops-cols);
    align-items: center;
    column-gap: 16px;
    min-height: 44px;
    padding: 10px 20px 10px 32px;
    color: var(--text);
    text-decoration: none;
}

.ops-row-name[b-ele04z6n0n] {
    min-width: 0;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ops-row-code[b-ele04z6n0n] {
    margin-left: 8px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.ops-row-receipts[b-ele04z6n0n] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ops-row-pages[b-ele04z6n0n] {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.ops-row:not(.ops-row-link) .ops-row-pages[b-ele04z6n0n] {
    color: var(--text-disabled);
}

.ops-row-go[b-ele04z6n0n] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--text-tertiary);
}

.ops-row-go svg[b-ele04z6n0n] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s ease;
}

.ops-row-link[b-ele04z6n0n] {
    transition: background-color .15s ease;
}

.ops-row-link:hover[b-ele04z6n0n] {
    background: var(--surface-hover);
}

.ops-row-link:hover .ops-row-name[b-ele04z6n0n],
.ops-row-link:hover .ops-row-go[b-ele04z6n0n] {
    color: var(--accent);
}

.ops-row-link:hover .ops-row-go svg[b-ele04z6n0n] {
    transform: translateX(2px);
}

.ops-group:last-child .ops-item:last-child .ops-row[b-ele04z6n0n] {
    border-radius: 0 0 9px 9px;
}

.ops-item-placeholder .ops-row[b-ele04z6n0n] {
    grid-template-columns: minmax(0, 1fr);
}

.ops-item-note[b-ele04z6n0n] {
    padding: 12px 20px 12px 32px;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* ── OR / CT markers: the letters carry the meaning, the tint only groups them ── */
.ops-instrument[b-ele04z6n0n] {
    display: inline-flex;
    min-width: 30px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--navy);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}

.ops-instrument-or[b-ele04z6n0n] {
    border-color: color-mix(in srgb, var(--gold) 55%, var(--border));
    background: color-mix(in srgb, var(--gold) 9%, var(--surface));
}

/* ── Detail card: revealed on hover (after a short intent delay) or keyboard focus ── */
.ops-card[b-ele04z6n0n] {
    position: absolute;
    z-index: 20;
    top: calc(100% - 6px);
    right: 2.5rem;   /* under the Pages column, next to the links it expands */
    width: 19rem;
    padding-top: 6px;   /* transparent bridge so the pointer can travel from row to card */
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}

.ops-item:hover .ops-card[b-ele04z6n0n] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .15s ease .25s, transform .15s ease .25s, visibility 0s linear .25s;
}

.ops-item:focus-within .ops-card[b-ele04z6n0n] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
}

.ops-card-body[b-ele04z6n0n] {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 12px 32px -8px rgba(13, 33, 55, .22), var(--elevation-1);
}

.ops-card-title[b-ele04z6n0n] {
    margin: 0 0 10px;
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.ops-card-facts[b-ele04z6n0n] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 12px;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ops-card-facts dt[b-ele04z6n0n] {
    color: var(--text-tertiary);
}

.ops-card-facts dd[b-ele04z6n0n] {
    margin: 0;
    color: var(--text);
    font-weight: 500;
}

.ops-card-links[b-ele04z6n0n] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.ops-card-links a[b-ele04z6n0n] {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.ops-card-links a:first-child[b-ele04z6n0n] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--surface);
}

.ops-card-links a:hover[b-ele04z6n0n] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.ops-card-links a:first-child:hover[b-ele04z6n0n] {
    background: var(--accent-hover);
}

/* ── Focus ── */
.ops-row-link:focus-visible[b-ele04z6n0n],
.ops-card-links a:focus-visible[b-ele04z6n0n],
.ops-retry:focus-visible[b-ele04z6n0n] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px var(--accent-ring);
}

.ops-card-links a:focus-visible[b-ele04z6n0n] {
    outline-offset: 1px;
}

.ops-sr-only[b-ele04z6n0n] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive ── */
/* Narrow screens have no hover and little room: the row itself remains the link; the card stays out. */
@media (max-width: 900px) {
    .ops-card[b-ele04z6n0n] {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Clear the fixed drawer button the sidebar places at the top-left on narrow screens. */
    .ops-page[b-ele04z6n0n] {
        padding: 64px 20px 40px;
    }
}

@media (max-width: 560px) {
    .ops-page[b-ele04z6n0n] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .ops-sheet[b-ele04z6n0n] {
        --ops-cols: minmax(0, 1fr) auto 1rem;
    }

    .ops-row-pages[b-ele04z6n0n],
    .ops-columns > :nth-child(3)[b-ele04z6n0n] {
        display: none;
    }

    .ops-columns[b-ele04z6n0n] {
        display: none;
    }

    .ops-group-title[b-ele04z6n0n] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .ops-row[b-ele04z6n0n],
    .ops-item-note[b-ele04z6n0n] {
        padding-right: 14px;
        padding-left: 20px;
    }

    .ops-row[b-ele04z6n0n] {
        column-gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ops-retry[b-ele04z6n0n],
    .ops-row-link[b-ele04z6n0n],
    .ops-row-go svg[b-ele04z6n0n],
    .ops-card[b-ele04z6n0n],
    .ops-item:hover .ops-card[b-ele04z6n0n],
    .ops-card-links a[b-ele04z6n0n] {
        transition: none;
    }

    .ops-row-link:hover .ops-row-go svg[b-ele04z6n0n],
    .ops-card[b-ele04z6n0n] {
        transform: none;
    }
}

/* A quiet supporting line under an operation that spans several official report rows (Income From Terminal). */
.ops-row-detail[b-ele04z6n0n] {
    display: block;
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
}
/* /Components/Pages/Menus/RemittanceDetail.razor.rz.scp.css */
/* Remittance & Liquidation — V3. Panels, tables, fields and buttons come from the v3- layer in app.css. */

.rm-page[b-18bc20w8vu] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* The civic-blue band every V3 workspace shares: same height, radius and padding as the facility hero. */
.rd-header[b-18bc20w8vu] { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 24px; border: 0; border-radius: 10px; background: var(--civic-panel); color: #ffffff; }
.rd-title[b-18bc20w8vu] { display: flex; gap: 12px; align-items: center; }
.rd-title h1[b-18bc20w8vu] { margin: 0; color: #ffffff; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.rd-header p[b-18bc20w8vu] { margin: 4px 0 0; font-size: .8125rem; color: rgba(255, 255, 255, 0.85); }
.rm-header-actions[b-18bc20w8vu] { display: flex; gap: 8px; flex-shrink: 0; }
.rm-header-actions .v3-btn[b-18bc20w8vu] { border-color: #ffffff; background: #ffffff; color: var(--navy); }
.rm-header-actions .v3-btn-primary[b-18bc20w8vu] { border-color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.rm-header-actions .v3-btn-primary:hover[b-18bc20w8vu] { background: rgba(255, 255, 255, 0.26); }
.rd-status[b-18bc20w8vu] { padding: 3px 10px; border: 1px solid #e2bcbc; border-radius: 999px; color: #842626; background: #fff5f5; font-size: .75rem; font-weight: 700; }
/* One compact grid: label above value, left-aligned, as many columns as fit. */
.rd-facts[b-18bc20w8vu] { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 32px; padding: 16px 20px 20px; }
.rd-facts > div[b-18bc20w8vu] { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
.rd-facts dd[b-18bc20w8vu] { text-align: left; }
/* Up to ten rows show at once (header + 10 x 48px); more scroll vertically under the sticky header. */
.rd-covered[b-18bc20w8vu] { max-height: calc(44px + 10 * 48px); overflow: auto; }
.rd-covered tbody td[b-18bc20w8vu] { height: 48px; }
.rd-covered thead th[b-18bc20w8vu] { position: sticky; top: 0; z-index: 1; background: var(--surface-muted, #f4f7fa); }
@media (max-width: 640px) { .rd-header[b-18bc20w8vu] { flex-direction: column; align-items: flex-start; padding: 18px; } .rd-facts[b-18bc20w8vu] { grid-template-columns: 1fr; } }
@media print { .rd-covered[b-18bc20w8vu] { max-height: none; overflow: visible; } .rd-covered thead[b-18bc20w8vu] { display: table-header-group; } .rd-covered thead th[b-18bc20w8vu] { position: static; } .rm-page tr[b-18bc20w8vu], .rm-page tfoot[b-18bc20w8vu] { break-inside: avoid; } }

.rm-filters[b-18bc20w8vu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.rm-form[b-18bc20w8vu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
}

.rm-form-row[b-18bc20w8vu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.rm-breakdown h3[b-18bc20w8vu] {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.rm-note[b-18bc20w8vu],
.rm-scope[b-18bc20w8vu] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.rm-forms[b-18bc20w8vu] {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}

.rm-legacy[b-18bc20w8vu] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.rm-diff[b-18bc20w8vu] {
    margin: 0;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.rm-diff-flag[b-18bc20w8vu] {
    color: var(--danger, #b42318);
    font-weight: 600;
}

.rm-actions[b-18bc20w8vu] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.rm-print-head[b-18bc20w8vu] {
    display: none;
}

@media print {
    .rm-print-head[b-18bc20w8vu] {
        display: block;
    }

    .rm-filters[b-18bc20w8vu],
    .rm-actions[b-18bc20w8vu],
    .rm-form[b-18bc20w8vu] {
        display: none;
    }
}

.rm-group-link[b-18bc20w8vu] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.rm-group-link a[b-18bc20w8vu] {
    color: var(--accent);
    font-weight: 600;
}

@media print {
    .no-print[b-18bc20w8vu],
    .rm-group-link[b-18bc20w8vu] {
        display: none;
    }
}

/* Print / Save as PDF: the letterhead replaces the on-screen header; nothing scrolls or clips on paper. */
@media print {
    .rm-page[b-18bc20w8vu]  .wh {
        display: none;
    }

    .rm-page[b-18bc20w8vu]  .v3-table-wrap {
        overflow: visible;
    }

    .rm-page[b-18bc20w8vu]  .v3-table {
        width: 100%;
        font-size: 0.75rem;
    }

    .rm-page[b-18bc20w8vu]  .v3-panel {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        break-inside: auto;
    }
}

.rm-trace[b-18bc20w8vu] {
    color: var(--v3-text-muted, #475467);
    font-size: 0.75rem;
    white-space: nowrap;
}

@media print {
    .rm-page[b-18bc20w8vu]  .v3-btn {
        display: none;
    }
}
/* /Components/Pages/Menus/Remittances.razor.rz.scp.css */
/* Remittance & Liquidation — V3. Panels, tables, fields and buttons come from the v3- layer in app.css. */

.rm-page[b-8z1comqd56] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Filters sit on one quiet surface, like the other V3 toolbars, with Apply aligned to the inputs. */
.rm-filters[b-8z1comqd56] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

.rm-filters .v3-btn[type="submit"][b-8z1comqd56] {
    margin-left: auto;
}

.rm-form[b-8z1comqd56] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
}

.rm-form-row[b-8z1comqd56] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.rm-note[b-8z1comqd56],
.rm-scope[b-8z1comqd56] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.rm-legacy[b-8z1comqd56] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.rm-diff-flag[b-8z1comqd56] {
    color: var(--danger, #b42318);
    font-weight: 600;
}

.rm-actions[b-8z1comqd56] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.rm-print-head[b-8z1comqd56] {
    display: none;
}

@media print {
    .rm-print-head[b-8z1comqd56] {
        display: block;
    }

    .rm-filters[b-8z1comqd56],
    .rm-actions[b-8z1comqd56],
    .rm-form[b-8z1comqd56] {
        display: none;
    }
}

/* ── Multi-collector New Remittance ── */
.rm-collectors[b-8z1comqd56] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.rm-collectors legend[b-8z1comqd56] {
    margin-bottom: 8px;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.rm-collector-picks[b-8z1comqd56] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rm-pick[b-8z1comqd56] {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.8125rem;
    cursor: pointer;
}

.rm-pick:hover[b-8z1comqd56] {
    border-color: var(--border-strong);
}

.rm-pick.is-on[b-8z1comqd56] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--navy);
    font-weight: 600;
}

.rm-pick input[b-8z1comqd56] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}

.rm-pick:focus-within[b-8z1comqd56] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.rm-draft[b-8z1comqd56] {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.rm-draft-head[b-8z1comqd56] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}

.rm-draft-head h3[b-8z1comqd56] {
    margin: 0;
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 700;
}

.rm-draft-figures[b-8z1comqd56] {
    display: flex;
    gap: 20px;
    margin: 0;
}

.rm-draft-figures > div[b-8z1comqd56] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.rm-draft-figures dt[b-8z1comqd56] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.rm-draft-figures dd[b-8z1comqd56] {
    margin: 0;
    color: var(--navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rm-check[b-8z1comqd56] {
    width: 40px;
    text-align: center;
}

.rm-check input[b-8z1comqd56] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.rm-row-action[b-8z1comqd56] {
    white-space: nowrap;
    text-align: right;
}

.rm-row-action .v3-btn + .v3-btn[b-8z1comqd56] {
    margin-left: 6px;
}

.rm-collector-cell[b-8z1comqd56] {
    white-space: nowrap;
}

.rm-more[b-8z1comqd56] {
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.rm-more:focus-visible[b-8z1comqd56] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Inline, not a floating popover: the register scrolls inside its panel and would clip an absolutely placed list. */
.rm-members[b-8z1comqd56] {
    min-width: 14rem;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    font-weight: 400;
}

.rm-members li[b-8z1comqd56] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
}

.rm-members li + li[b-8z1comqd56] {
    border-top: 1px solid var(--border);
}

.rm-help summary[b-8z1comqd56] {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.rm-help p[b-8z1comqd56] {
    margin: 6px 0 0;
    max-width: 38rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.v3-table tbody tr.rm-detail td[b-8z1comqd56],
.v3-table tbody tr.rm-detail:hover td[b-8z1comqd56] {
    background: var(--surface-muted);
}

.rm-forms-table[b-8z1comqd56] {
    width: 100%;
    max-width: 44rem;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.rm-forms-table th[b-8z1comqd56],
.rm-forms-table td[b-8z1comqd56] {
    padding: 4px 12px 4px 0;
    text-align: left;
}

.rm-forms-table thead th[b-8z1comqd56] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.rm-reconcile[b-8z1comqd56] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    font-variant-numeric: tabular-nums;
}

.rm-reconcile > div[b-8z1comqd56] {
    display: grid;
    gap: 2px;
    padding: 8px 14px;
}

.rm-reconcile > div + div[b-8z1comqd56] {
    border-left: 1px solid var(--border);
}

.rm-reconcile dt[b-8z1comqd56] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.rm-reconcile dd[b-8z1comqd56] {
    margin: 0;
    color: var(--navy);
    font-weight: 700;
}

.rm-reconcile-flag dd[b-8z1comqd56] {
    color: var(--danger, #b42318);
}

.rm-result p[b-8z1comqd56] {
    margin: 0;
}

.rm-result-table[b-8z1comqd56] {
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.rm-result-table th[b-8z1comqd56],
.rm-result-table td[b-8z1comqd56] {
    padding: 3px 24px 3px 0;
    text-align: left;
}

.rm-result-table .v3-num[b-8z1comqd56] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rm-wide[b-8z1comqd56] {
    flex: 1 1 16rem;
}

.rm-batch-total[b-8z1comqd56] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
}

.rm-batch-total > div[b-8z1comqd56] {
    display: grid;
    gap: 2px;
    padding: 10px 14px;
}

.rm-batch-total > div + div[b-8z1comqd56] {
    border-left: 1px solid var(--border);
}

.rm-batch-total dt[b-8z1comqd56] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.rm-batch-total dd[b-8z1comqd56] {
    margin: 0;
    color: var(--navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@media (max-width: 640px) {
    .rm-reconcile[b-8z1comqd56] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rm-batch-total[b-8z1comqd56] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rm-batch-total > div:nth-child(3)[b-8z1comqd56] {
        border-left: 0;
    }
}

/* The nested form-count table sits inside a v3-table cell: keep its row header a plain label, not a column header. */
.rm-forms-table tbody th[b-8z1comqd56] {
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.rm-forms-table thead th[b-8z1comqd56] {
    border: 0;
    background: transparent;
}

.rm-pill[b-8z1comqd56] {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--v3-border, #e3e8ef);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rm-header[b-8z1comqd56] { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border: 0; border-radius: 10px; background: var(--civic-panel); color: #ffffff; }
.rm-header h1[b-8z1comqd56] { margin: 0; color: #ffffff; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.rm-header p[b-8z1comqd56] { margin: 4px 0 0; color: rgba(255, 255, 255, 0.85); font-size: .8125rem; }
/* Three actions, one height, one row: Print summary (neutral) < Void Remittance (secondary) < New Remittance (primary). */
.rm-header-actions[b-8z1comqd56] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.rm-header-actions .v3-btn[b-8z1comqd56] { box-sizing: border-box; min-height: 40px; padding: 0 16px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: #ffffff; font-weight: 600; }
.rm-header-actions .v3-btn:hover[b-8z1comqd56] { background: rgba(255, 255, 255, 0.14); }
.rm-header-actions .v3-btn:focus-visible[b-8z1comqd56] { outline: 2px solid #ffffff; outline-offset: 2px; }
.rm-header-actions .rm-act-secondary[b-8z1comqd56] { border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.16); }
.rm-header-actions .rm-act-secondary:hover[b-8z1comqd56] { background: rgba(255, 255, 255, 0.26); }
.rm-header-actions .v3-btn-primary[b-8z1comqd56] { border-color: #ffffff; background: #ffffff; color: var(--navy); font-weight: 700; }
.rm-header-actions .v3-btn-primary:hover[b-8z1comqd56] { background: #eef3f9; }
.rm-section-actions[b-8z1comqd56] { display: flex; align-items: center; gap: 12px; }
.rm-preview[b-8z1comqd56] { max-height: 320px; overflow: auto; }
.rm-preview tbody td[b-8z1comqd56] { height: 56px; }
.rm-ready-list[b-8z1comqd56] { max-height: 62vh; overflow: auto; }
.rm-history-preview[b-8z1comqd56] { max-height: 380px; overflow: auto; }
.rm-preview thead th[b-8z1comqd56], .rm-ready-list thead th[b-8z1comqd56], .rm-history-preview thead th[b-8z1comqd56] { position: sticky; top: 0; z-index: 1; background: var(--surface-muted, #f4f7fa); }
.rm-selection[b-8z1comqd56] { position: sticky; bottom: 16px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; border: 1px solid #b8cde3; border-radius: 10px; background: #f4f8fd; }
.rm-selection dl[b-8z1comqd56] { display: flex; gap: 28px; margin: 0; }
.rm-selection dt[b-8z1comqd56] { font-size: .75rem; color: var(--text-secondary); }
.rm-selection dd[b-8z1comqd56] { margin: 3px 0 0; font-weight: 700; color: #173b64; font-variant-numeric: tabular-nums; }
.rm-review-meta[b-8z1comqd56] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); align-items: end; gap: 16px; }
.rm-review-facts[b-8z1comqd56] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
@media (max-width: 640px) { .rm-review-meta[b-8z1comqd56] { grid-template-columns: 1fr; } }
.rm-review-facts dt[b-8z1comqd56] { font-size: .75rem; color: var(--text-secondary); }
.rm-review-facts dd[b-8z1comqd56] { margin: 4px 0 0; font-size: .8125rem; font-weight: 600; }
.rm-pill-void[b-8z1comqd56] { color: #9b2c2c; border-color: #e5bcbc; background: #fff5f5; }
.rm-position td:last-child[b-8z1comqd56] { color: #173b64; background: #f4f8fd; }
.rm-check input:focus-visible[b-8z1comqd56] { outline: 2px solid #245c91; outline-offset: 3px; }
.rm-filters .v3-field[b-8z1comqd56] { flex: 1 1 130px; min-width: 0; }
.rm-filters .v3-field:nth-child(3)[b-8z1comqd56] { flex-grow: 1.5; }
.rm-filters input[b-8z1comqd56], .rm-filters select[b-8z1comqd56] { width: 100%; min-width: 0; }
@media (max-width: 640px) {
    .rm-header[b-8z1comqd56] { align-items: flex-start; flex-direction: column; padding: 18px; }
    .rm-selection[b-8z1comqd56] { position: static; flex-direction: column; align-items: stretch; }
    .rm-selection dl[b-8z1comqd56] { justify-content: space-between; gap: 12px; }
}
@media print {
    .no-print[b-8z1comqd56] { display: none !important; }
    .rm-preview[b-8z1comqd56], .rm-ready-list[b-8z1comqd56], .rm-history-preview[b-8z1comqd56] { max-height: none; overflow: visible; }
    .rm-page thead[b-8z1comqd56] { display: table-header-group; }
    .rm-page thead th[b-8z1comqd56] { position: static; }
    .rm-page tr[b-8z1comqd56], .rm-page tfoot[b-8z1comqd56] { break-inside: avoid; }
}

/* Filters: predictable widths, so the row reads as one intentional toolbar rather than uneven gaps. */
.rm-filters .v3-field[b-8z1comqd56] {
    flex: 0 0 176px;
    min-width: 140px;
}

.rm-filters .v3-field input[b-8z1comqd56],
.rm-filters .v3-field select[b-8z1comqd56] {
    width: 100%;
}

/* A selected row reads as selected: a quiet civic-blue tint, never a loud fill. */
.rm-collections tbody tr:has(input:checked)[b-8z1comqd56] {
    background: var(--accent-soft, #eef4ff);
}

/* Paper carries figures, not controls. */
@media print {
    .rm-page[b-8z1comqd56]  .v3-btn,
    .rm-page[b-8z1comqd56]  .v3-btn-sm {
        display: none;
    }
}

/* Collector multi-select: a compact trigger that summarises the choice, with a searchable list in a small popover. */
.rm-picker[b-8z1comqd56] { position: relative; }
.rm-picker-btn[b-8z1comqd56] { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--navy); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.rm-picker-btn > span[b-8z1comqd56] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-picker-btn svg[b-8z1comqd56] { flex-shrink: 0; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-picker-btn:focus-visible[b-8z1comqd56], .rm-picker-search:focus-visible[b-8z1comqd56] { outline: 2px solid var(--accent); outline-offset: 2px; }
.rm-picker-backdrop[b-8z1comqd56] { position: fixed; inset: 0; z-index: 20; border: 0; background: transparent; cursor: default; }
.rm-picker-pop[b-8z1comqd56] { position: absolute; top: calc(100% + 4px); left: 0; z-index: 21; width: max(100%, 260px); padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 18px rgba(13, 33, 55, .12); }
.rm-picker-search[b-8z1comqd56] { box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: .8125rem; }
.rm-picker-list[b-8z1comqd56] { max-height: 220px; margin: 8px 0; padding: 0; overflow: auto; list-style: none; }
.rm-picker-list label[b-8z1comqd56] { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px; border-radius: 6px; font-size: .875rem; cursor: pointer; }
.rm-picker-list label:hover[b-8z1comqd56] { background: var(--surface-hover); }
.rm-picker-foot[b-8z1comqd56] { display: flex; justify-content: flex-end; }
.rm-picker .rm-picker-list label[b-8z1comqd56] { flex-direction: row; align-items: center; width: 100%; color: var(--navy); }
.rm-picker .rm-picker-list input[type=checkbox][b-8z1comqd56] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; }
.rm-picker .rm-picker-list label > span[b-8z1comqd56] { flex: 1; font-size: .875rem; font-weight: 400; color: var(--navy); }
/* /Components/Pages/Menus/RemittanceSubmission.razor.rz.scp.css */
/* Remittance & Liquidation — V3. Panels, tables, fields and buttons come from the v3- layer in app.css. */

.rm-page[b-if7r3j6gcd] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rs-header[b-if7r3j6gcd] { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; border: 1px solid #244d79; border-radius: 12px; background: var(--civic-panel, #173b64); color: white; }
.rs-header a[b-if7r3j6gcd] { color: #dce8f5; font-size: .75rem; }
.rs-header h1[b-if7r3j6gcd] { margin: 6px 0 0; color: white; font-size: 1.5rem; letter-spacing: -.025em; }
.rs-header p[b-if7r3j6gcd] { margin: 5px 0 0; color: #dce8f5; font-size: .8125rem; }
.rs-header .v3-btn[b-if7r3j6gcd] { background: white; color: #173b64; border-color: white; }
.rs-status[b-if7r3j6gcd] { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #fff5f5; color: #842626; font-size: .75rem; }
.rs-covered[b-if7r3j6gcd] { max-height: 400px; overflow: auto; }
.rs-covered thead th[b-if7r3j6gcd] { position: sticky; top: 0; z-index: 1; background: var(--surface-muted, #f4f7fa); }
.rs-breakdown[b-if7r3j6gcd] { max-width: 700px; padding: 16px 20px; }
.rs-breakdown h3[b-if7r3j6gcd] { margin: 0 0 8px; font-size: .875rem; }
@media (max-width: 640px) { .rs-header[b-if7r3j6gcd] { flex-direction: column; align-items: flex-start; padding: 18px; } }
@media print { .rs-covered[b-if7r3j6gcd] { max-height: none; overflow: visible; } .rs-covered thead[b-if7r3j6gcd] { display: table-header-group; } .rs-covered thead th[b-if7r3j6gcd] { position: static; } .rm-page tr[b-if7r3j6gcd], .rs-breakdown[b-if7r3j6gcd] { break-inside: avoid; } }

.rm-filters[b-if7r3j6gcd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.rm-form[b-if7r3j6gcd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
}

.rm-form-row[b-if7r3j6gcd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.rm-breakdown h3[b-if7r3j6gcd] {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.rm-note[b-if7r3j6gcd],
.rm-scope[b-if7r3j6gcd] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.rm-forms[b-if7r3j6gcd] {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}

.rm-legacy[b-if7r3j6gcd] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.rm-diff[b-if7r3j6gcd] {
    margin: 0;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.rm-diff-flag[b-if7r3j6gcd] {
    color: var(--danger, #b42318);
    font-weight: 600;
}

.rm-actions[b-if7r3j6gcd] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.rm-print-head[b-if7r3j6gcd] {
    display: none;
}

@media print {
    .rm-print-head[b-if7r3j6gcd] {
        display: block;
    }

    .rm-filters[b-if7r3j6gcd],
    .rm-actions[b-if7r3j6gcd],
    .rm-form[b-if7r3j6gcd] {
        display: none;
    }
}

.rm-group-link[b-if7r3j6gcd] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.rm-group-link a[b-if7r3j6gcd] {
    color: var(--accent);
    font-weight: 600;
}

@media print {
    .no-print[b-if7r3j6gcd],
    .rm-group-link[b-if7r3j6gcd] {
        display: none;
    }
}

/* Print / Save as PDF: the letterhead replaces the on-screen header; nothing scrolls or clips on paper. */
@media print {
    .rm-page[b-if7r3j6gcd]  .wh {
        display: none;
    }

    .rm-page[b-if7r3j6gcd]  .v3-table-wrap {
        overflow: visible;
    }

    .rm-page[b-if7r3j6gcd]  .v3-table {
        width: 100%;
        font-size: 0.75rem;
    }

    .rm-page[b-if7r3j6gcd]  .v3-panel {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        break-inside: auto;
    }
}

.rm-trace[b-if7r3j6gcd] {
    color: var(--v3-text-muted, #475467);
    font-size: 0.75rem;
    white-space: nowrap;
}
/* /Components/Pages/Menus/RemittanceVoid.razor.rz.scp.css */
.rv-page[b-xx83ebwjvq] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rv-filters[b-xx83ebwjvq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

.rv-action[b-xx83ebwjvq] {
    text-align: right;
    white-space: nowrap;
}

.rv-muted[b-xx83ebwjvq] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

@media print {
    .rv-page[b-xx83ebwjvq] {
        display: none;
    }
}
/* /Components/Pages/Menus/RemittanceVoidReview.razor.rz.scp.css */
.rv-page[b-gf7isc2zuz] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rvr-facts[b-gf7isc2zuz] {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px 32px;
    padding: 16px 20px;
}

    .rvr-facts > div[b-gf7isc2zuz] {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2px;
    }

    .rvr-facts dd[b-gf7isc2zuz] {
        text-align: left;
    }

.rvr-form[b-gf7isc2zuz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px 20px;
}

.rvr-consequence[b-gf7isc2zuz] {
    margin: 0;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
}

.rvr-actions[b-gf7isc2zuz] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Destructive styling appears only here, on the one action that voids. */
.rvr-danger[b-gf7isc2zuz] {
    border-color: var(--red);
    background: var(--red);
    color: #ffffff;
}

    .rvr-danger:hover:not(:disabled)[b-gf7isc2zuz] {
        border-color: var(--red);
        background: var(--red);
        filter: brightness(0.92);
        color: #ffffff;
    }

    .rvr-danger:disabled[b-gf7isc2zuz] {
        border-color: var(--border);
        background: var(--surface-muted);
        color: var(--text-disabled);
    }

@media print {
    .rv-page[b-gf7isc2zuz] {
        display: none;
    }
}
/* /Components/Pages/Menus/Report.razor.rz.scp.css */
/* ============================================================
   Reports.razor.css — Financial Reports page
   Global tokens (--navy, --gold, etc.) defined in app.css
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   FILTER PANEL v3
   ══════════════════════════════════════════════════════════════ */

.rpt-filter-panel[b-s5bas2yqx4] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 1px 6px rgba(13, 33, 55, .05);
    margin-bottom: 24px;
}

/* ── Top row ── */
.rfp-top[b-s5bas2yqx4] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 20px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

/* Individual control block (label above + control below) */
.rfp-ctrl[b-s5bas2yqx4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* Uppercase micro-label */
.rfp-label[b-s5bas2yqx4] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-subtle);
    white-space: nowrap;
}

/* ── Period pills (only 3 — compact, stays as pills) ── */
/* The period pills wear the same track as the section tabs and facility chips: 4px around a 34px pill, so all three come
   to 42px and sit level with the year and month dropdowns. They were 36px against the others' 46px. */
.rfp-period-pills[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 11px;
}

.rpp[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

    .rpp:hover:not(.on)[b-s5bas2yqx4] {
        color: var(--navy);
    }

    .rpp.on[b-s5bas2yqx4] {
        background: var(--bg-card);
        color: var(--navy);
        font-weight: 600;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    }

/* ── Dropdown select ── */
.rfp-sel-wrap[b-s5bas2yqx4] {
    position: relative;
}

    .rfp-sel-wrap[b-s5bas2yqx4]::after {
        content: '';
        position: absolute;
        right: 11px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid var(--text-muted);
        pointer-events: none;
    }

.rfp-select[b-s5bas2yqx4] {
    appearance: none;
    -webkit-appearance: none;
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-card);
    color: var(--navy);
    font-size: 13px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    outline: none;
    min-width: 130px;
    transition: border-color .12s;
}

    .rfp-select:hover[b-s5bas2yqx4] {
        border-color: #aab6c4;
    }

    .rfp-select:focus[b-s5bas2yqx4] {
        border-color: var(--navy);
    }

/* ── Export buttons ── */
.rfp-export[b-s5bas2yqx4] {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Section tabs. Copied from the dashboard's report tabs so the two read as the same control, with the active pill given
   the same raised-white treatment as the Monthly/Annual pills on this very row. */
.rpt-sec-tabs[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 11px;
}

.rpt-sec-tab[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

    .rpt-sec-tab:hover:not(.on)[b-s5bas2yqx4] {
        color: var(--navy);
    }

    .rpt-sec-tab.on[b-s5bas2yqx4] {
        background: var(--bg-card);
        color: var(--navy);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    }

/* Sections not currently selected. SCREEN ONLY — deliberately not a plain display:none, because the printed report is
   assembled by the @media print block below from the whole markup. Hiding these for print as well would make Export
   Summary PDF depend on which tab the office happened to have open. */
@media screen {
    .rpt-sec-off[b-s5bas2yqx4] {
        display: none !important;
    }
}

.rpt-btn-pdf[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s;
}

    .rpt-btn-pdf svg[b-s5bas2yqx4] {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }

    .rpt-btn-pdf:hover[b-s5bas2yqx4] {
        border-color: var(--navy);
        color: var(--navy);
        background: var(--bg-card);
    }

.rpt-btn-excel[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s;
}

    .rpt-btn-excel svg[b-s5bas2yqx4] {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }

    .rpt-btn-excel:hover[b-s5bas2yqx4] {
        background: var(--accent-hover);
    }

/* ── Divider ── */
.rfp-divider[b-s5bas2yqx4] {
    height: 1px;
    background: var(--border);
}

/* ── Bottom row ── */
.rfp-bottom[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 20px;
    background: #f8fafb;
    flex-wrap: wrap;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.rfp-fac-row[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* Inline variant of the label (same row as chips) */
.rfp-label-inline[b-s5bas2yqx4] {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* ── Facility chips — horizontally scrollable ── */
.rfp-chips[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow-x: auto;
    flex: 0 1 auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .rfp-chips[b-s5bas2yqx4]::-webkit-scrollbar {
        display: none;
    }

/* Facility chips wear the section tabs' clothes: one grey track holding pills, the selected one raised in white. The row
   keeps its horizontal scroll, because there are nine of these and a narrow screen must still reach the last. */
.rfp-chip[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

    .rfp-chip:hover:not(.on)[b-s5bas2yqx4] {
        color: var(--navy);
    }

    .rfp-chip.on[b-s5bas2yqx4] {
        background: var(--bg-card);
        color: var(--navy);
        border-color: transparent;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    }

/* Code badge inside chip */
.rfp-chip-code[b-s5bas2yqx4] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    background: #eef2f6;
    color: var(--navy);
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.6;
    transition: background .12s, color .12s;
}

.rfp-chip.on .rfp-chip-code[b-s5bas2yqx4] {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* ── Active filter summary badge ── */
.rfp-badge[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

    .rfp-badge svg[b-s5bas2yqx4] {
        width: 12px;
        height: 12px;
        opacity: .4;
        flex-shrink: 0;
    }

    .rfp-badge strong[b-s5bas2yqx4] {
        color: var(--navy);
    }

/* ══════════════════════════════════════════════════════════════
   KPI ROW
   ══════════════════════════════════════════════════════════════ */
.kpi-row[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

/* ══════════════════════════════════════════════════════════════
   TWO COLUMN LAYOUT
   ══════════════════════════════════════════════════════════════ */
.two-col[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════
   SECTION CARD
   ══════════════════════════════════════════════════════════════ */
.section-card[b-s5bas2yqx4] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.section-header[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
}

.section-title[b-s5bas2yqx4] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
}

.section-sub[b-s5bas2yqx4] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* The rate-basis mark beside the By facility period, and the note it opens. A mark rather than a sub-line: the rule is
   only wanted when the figure is questioned, and the office does not want the report explaining itself unprompted.
   Shown on hover and on keyboard focus, and pinned by a press so a touch screen can reach it. */
.rpt-rule-wrap[b-s5bas2yqx4] {
    position: relative;
    display: inline-block;
    margin-left: 7px;
    vertical-align: 1px;
}

.rpt-rule-mark[b-s5bas2yqx4] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-subtle);
    cursor: pointer;
    line-height: 0;
    display: block;
}

    .rpt-rule-mark svg[b-s5bas2yqx4] {
        width: 15px;
        height: 15px;
        display: block;
    }

    .rpt-rule-wrap:hover .rpt-rule-mark[b-s5bas2yqx4],
    .rpt-rule-mark[aria-expanded="true"][b-s5bas2yqx4] {
        color: var(--navy);
    }

    .rpt-rule-mark:focus-visible[b-s5bas2yqx4] {
        outline: 2px solid var(--navy);
        outline-offset: 2px;
        border-radius: 50%;
    }

.rpt-rule-pop[b-s5bas2yqx4] {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: -10px;
    z-index: 30;
    width: max-content;
    max-width: 420px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 35, 65, .12);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-muted);
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
}

    .rpt-rule-wrap:hover .rpt-rule-pop[b-s5bas2yqx4],
    .rpt-rule-wrap:focus-within .rpt-rule-pop[b-s5bas2yqx4],
    .rpt-rule-pop.is-open[b-s5bas2yqx4] {
        display: block;
    }

    .rpt-rule-pop strong[b-s5bas2yqx4] {
        color: var(--navy);
        font-weight: 600;
    }

.rpt-rule-line[b-s5bas2yqx4] {
    display: block;
    margin-top: 6px;
}

/* Used by the Miscellaneous section to state that a period carries no bill. A flat statement on the card's own 22px
   content edge, so its label lines up with the section title above instead of sitting in an inset box. */
.rpt-rule-note[b-s5bas2yqx4] {
    margin: 0;
    padding: 16px 22px 20px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}

    .rpt-rule-note > div + div[b-s5bas2yqx4] {
        margin-top: 4px;
    }

.rpt-rule-key[b-s5bas2yqx4] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* The Miscellaneous close: a label on the left, its figures on the right, on one baseline with equal space above and
   below. The line had padding at the top only, which is what left it sitting unbalanced against the rule. */
.rpt-misc-close[b-s5bas2yqx4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 18px;
    min-height: 44px;
    padding: 0 22px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}

.rpt-misc-close-val[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .rpt-misc-close-val strong[b-s5bas2yqx4] {
        color: var(--green);
        font-family: 'DM Mono', monospace;
    }

.rpt-misc-close-sep[b-s5bas2yqx4] {
    color: var(--border);
}

.rpt-misc-close-aside[b-s5bas2yqx4] {
    color: var(--text-muted);
}

/* Where the whole-term figure lives, stated once beside the twelve-month one. */
.rpt-attention-span a[b-s5bas2yqx4] {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 2px;
}

.rpt-attention-span a:hover[b-s5bas2yqx4] {
    text-decoration-color: var(--text-muted);
}

.section-action[b-s5bas2yqx4] {
    font-size: 12px;
    color: var(--text-muted);    border: 1.5px solid var(--border);
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    background: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    transition: all .15s;
}

    .section-action:hover[b-s5bas2yqx4] {
        border-color: var(--navy);
        color: var(--navy);
    }

/* ══════════════════════════════════════════════════════════════
   BAR CHART
   ══════════════════════════════════════════════════════════════ */
.chart-wrap[b-s5bas2yqx4] {
    padding: 20px 22px;
}

.bar-chart[b-s5bas2yqx4] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 180px;
    padding: 0 2px;
}

.bar-group[b-s5bas2yqx4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bar-wrap[b-s5bas2yqx4] {
    width: 100%;
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 160px;
}

.bar[b-s5bas2yqx4] {
    --depth: 6px;
    flex: 1;
    position: relative;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
    filter: drop-shadow(3px 6px 8px color-mix(in srgb, var(--navy) 8%, transparent));
}

    .bar:hover[b-s5bas2yqx4] {
        transform: translateY(-2px);
        filter: drop-shadow(5px 9px 11px color-mix(in srgb, var(--navy) 13%, transparent)) brightness(1.04);
    }

    /* Top face (leans up-right by --depth) */
    .bar[b-s5bas2yqx4]::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 100%;
        width: 100%;
        height: var(--depth);
        transform-origin: left bottom;
        transform: skewX(-45deg);
        pointer-events: none;
    }
    /* Right side face (leans up-right by --depth) */
    .bar[b-s5bas2yqx4]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 100%;
        width: var(--depth);
        height: 100%;
        transform-origin: left top;
        transform: skewY(-45deg);
        pointer-events: none;
    }

    .bar.collected[b-s5bas2yqx4] {
        background: var(--accent);
        z-index: 1;
    }
    .bar.collected[b-s5bas2yqx4]::before { background: #2e4d6e; }
    .bar.collected[b-s5bas2yqx4]::after  { background: #081626; }

    .bar.gold-bar[b-s5bas2yqx4] {
        background: linear-gradient(180deg, #d8bc63 0%, #c8a84b 100%);
        z-index: 1;
    }
    .bar.gold-bar[b-s5bas2yqx4]::before { background: #e6cd78; }
    .bar.gold-bar[b-s5bas2yqx4]::after  { background: #a8842f; }

    /* Current-period unpaid sits "in front" so the side faces layer cleanly */
    .bar.unpaid[b-s5bas2yqx4] {
        background: linear-gradient(180deg, #e7edf2 0%, #d3dbe3 100%);
        z-index: 2;
    }
    .bar.unpaid[b-s5bas2yqx4]::before { background: #f1f5f8; }
    .bar.unpaid[b-s5bas2yqx4]::after  { background: #b9c4ce; }

.bar-month[b-s5bas2yqx4] {
    font-size: 10.5px;
    color: var(--text-subtle);
    font-weight: 500;
}

.chart-legend[b-s5bas2yqx4] {
    display: flex;
    gap: 18px;
    padding: 0 2px 4px;
    margin-top: 8px;
}

.legend-item[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.legend-dot[b-s5bas2yqx4] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.rpt-chart-summary[b-s5bas2yqx4] {
    margin-top: 18px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    display: flex;
}

.rpt-chart-summary-col[b-s5bas2yqx4] {
    flex: 1;
    text-align: center;
    border-left: 1px solid var(--border);
}

    .rpt-chart-summary-col:first-child[b-s5bas2yqx4] {
        border-left: none;
    }

.rpt-chart-val[b-s5bas2yqx4] {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
}

    .rpt-chart-val.gold-text[b-s5bas2yqx4] {
        color: var(--accent);
    }

.rpt-chart-sublabel[b-s5bas2yqx4] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   FACILITY TABLE
   ══════════════════════════════════════════════════════════════ */
.fac-table[b-s5bas2yqx4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .fac-table th[b-s5bas2yqx4] {
        text-align: left;
        padding: 10px 22px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .7px;
        text-transform: uppercase;
        color: var(--text-subtle);
        background: #f8fafb;
        border-bottom: 1px solid var(--border);
    }

    .fac-table td[b-s5bas2yqx4] {
        padding: 13px 22px;
        border-bottom: 1px solid #f0f4f8;
        vertical-align: middle;
    }

    .fac-table tr:last-child td[b-s5bas2yqx4] {
        border-bottom: none;
    }

    .fac-table tr:hover td[b-s5bas2yqx4] {
        background: #fafcfd;
    }

.fac-name[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-cell[b-s5bas2yqx4] {
    min-width: 120px;
}

.progress-bar-bg[b-s5bas2yqx4] {
    background: #eef2f6;
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
}

.progress-bar-fill[b-s5bas2yqx4] {
    height: 100%;
    border-radius: 99px;
    background: var(--gold);
    transition: width .3s;
}

.mono-num[b-s5bas2yqx4] {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════
   DELINQUENCY PANEL
   ══════════════════════════════════════════════════════════════ */
.delinq-list[b-s5bas2yqx4] {
    padding: 0;
    /* Five rows (each ≈53px with its border), then scroll. The section carries two of these side by side, so a
       fifty-account list would otherwise push the rest of the report off the page. */
    max-height: 265px;
    overflow-y: auto;
}

/* Per-column search: quiet, aligned to the rows below it, no colour of its own. */
.attn-search[b-s5bas2yqx4] {
    padding: 0 22px 10px;
}

    .attn-search input[b-s5bas2yqx4] {
        width: 100%;
        padding: 7px 10px;
        font: inherit;
        font-size: 12px;
        color: var(--text-primary);
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 6px;
    }

    .attn-search input:focus[b-s5bas2yqx4] {
        outline: none;
        border-color: var(--text-muted);
    }

/* States the account's term has run out while the tenant is still there — it is collected, and it wants renewing. */
.attn-lapsed[b-s5bas2yqx4] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.delinq-item[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
    border-bottom: 1px solid #f0f4f8;
    cursor: pointer;
    transition: background .12s;
}

    .delinq-item:last-child[b-s5bas2yqx4] {
        border-bottom: none;
    }

    .delinq-item:hover[b-s5bas2yqx4] {
        background: #fafcfd;
    }

.delinq-avatar[b-s5bas2yqx4] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

.delinq-info[b-s5bas2yqx4] {
    flex: 1;
    min-width: 0;
}

.delinq-name[b-s5bas2yqx4] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delinq-loc[b-s5bas2yqx4] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.delinq-amount[b-s5bas2yqx4] {
    text-align: right;
}

.delinq-amt-val[b-s5bas2yqx4] {
    font-family: 'DM Mono', monospace;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--red);
}

.delinq-months[b-s5bas2yqx4] {
    font-size: 11px;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   RECENT TRANSACTIONS
   ══════════════════════════════════════════════════════════════ */
.tx-table[b-s5bas2yqx4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .tx-table th[b-s5bas2yqx4] {
        text-align: left;
        padding: 10px 22px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .7px;
        text-transform: uppercase;
        color: var(--text-subtle);
        background: #f8fafb;
        border-bottom: 1px solid var(--border);
    }

    .tx-table td[b-s5bas2yqx4] {
        padding: 12px 22px;
        border-bottom: 1px solid #f0f4f8;
        vertical-align: middle;
    }

    .tx-table tr:last-child td[b-s5bas2yqx4] {
        border-bottom: none;
    }

    /* The Miscellaneous table is a register of charges, so its figures are ruled right like every other money column on
       the page. The trend table states the same two rules for itself; these are the register's. */
    .tx-table th.r[b-s5bas2yqx4],
    .tx-table td.r[b-s5bas2yqx4] {
        text-align: right;
        font-family: 'DM Mono', monospace;
    }

    .tx-table th.r[b-s5bas2yqx4] {
        font-family: inherit;
    }

    .tx-table td.is-owed[b-s5bas2yqx4] {
        color: var(--red);
    }

    /* Scoped to Miscellaneous deliberately: the register's tfoot is its print spacer, and giving that a fill would paint
       a band across the foot of every printed page — the problem that took five attempts to get off the sheet. */
    #rpt-misc .tx-table tfoot td[b-s5bas2yqx4] {
        border-top: 1px solid var(--border);
        border-bottom: none;
        background: #fafcfd;
    }

    .tx-table tr:hover td[b-s5bas2yqx4] {
        background: #fafcfd;
    }

.tx-id[b-s5bas2yqx4] {
    font-family: 'DM Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
}

.pay-method[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    background: var(--bg-icon);
    color: var(--text-muted);
    padding: 3px 9px;
    border-radius: 6px;
    font-weight: 500;
}

.amount-green[b-s5bas2yqx4] {
    color: var(--green);
    font-weight: 600;
    font-family: 'DM Mono', monospace;
}

/* ══════════════════════════════════════════════════════════════
   SUMMARY BOTTOM GRID
   ══════════════════════════════════════════════════════════════ */
.summary-grid[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.summary-card[b-s5bas2yqx4] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
}

.summary-card-title[b-s5bas2yqx4] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-subtle);
    margin-bottom: 14px;
}

.donut-row[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.donut-wrap[b-s5bas2yqx4] {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

    .donut-wrap svg[b-s5bas2yqx4] {
        width: 80px;
        height: 80px;
    }

.donut-center[b-s5bas2yqx4] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.donut-legend[b-s5bas2yqx4] {
    flex: 1;
}

.donut-legend-item[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 12.5px;
}

.donut-legend-label[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
}

.donut-dot[b-s5bas2yqx4] {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.donut-legend-val[b-s5bas2yqx4] {
    font-weight: 600;
    color: var(--navy);
}

.mini-list-item[b-s5bas2yqx4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0f4f8;
    font-size: 13px;
}

    .mini-list-item:last-child[b-s5bas2yqx4] {
        border-bottom: none;
    }

.mini-list-label[b-s5bas2yqx4] {
    color: var(--text-muted);
}

.mini-list-val[b-s5bas2yqx4] {
    font-weight: 600;
    font-family: 'DM Mono', monospace;
    color: var(--navy);
}

.collection-rate-bar[b-s5bas2yqx4] {
    margin-top: 14px;
}

.cr-row[b-s5bas2yqx4] {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 7px;
}

.cr-val[b-s5bas2yqx4] {
    font-weight: 700;
    color: var(--navy);
}

.cr-bar-bg[b-s5bas2yqx4] {
    height: 8px;
    background: #eef2f6;
    border-radius: 99px;
    overflow: hidden;
}

.cr-bar-fill[b-s5bas2yqx4] {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

/* ══════════════════════════════════════════════════════════════
   LINKS & INTERACTIVE
   ══════════════════════════════════════════════════════════════ */

/* Register actions: print this document, or leave for the full ledger. Both are baseline-aligned and the same height, so
   the button and the link read as one row of actions rather than two things that happen to sit near each other. */
.rpt-register-actions[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: 18px;
}

    /* The link is given the button's box so their text sits on one line. */
    .rpt-register-actions .rpt-attn-link[b-s5bas2yqx4] {
        display: inline-flex;
        align-items: center;
        align-self: auto;
        min-height: 32px;
        margin-left: 0;
    }

.rpt-register-print[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--navy);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .rpt-register-print:hover:not(:disabled)[b-s5bas2yqx4] {
        background: #f4f8fb;
        border-color: #c9d6e0;
    }

    .rpt-register-print:disabled[b-s5bas2yqx4] {
        color: var(--text-subtle);
        cursor: default;
    }

/* Handoff from the Attention section to the queue that can act on it. Restrained: navy text on the card, no button
   chrome, since it leads elsewhere rather than doing something here. Hidden in print — a paper report has no links. */
.rpt-attn-link[b-s5bas2yqx4] {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 18px;
    font-size: 12px;
    font-weight: 650;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
}

    .rpt-attn-link:hover[b-s5bas2yqx4] {
        text-decoration: underline;
    }

/* Delinquent item as clickable link */
.delinq-item-link[b-s5bas2yqx4] {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all .15s;
}

    .delinq-item-link:hover[b-s5bas2yqx4] {
        text-decoration: none;
    }

    .delinq-item-link:hover .delinq-item[b-s5bas2yqx4] {
        background-color: rgba(201, 168, 75, 0.05);
        border-color: var(--accent);
    }

/* Vendor/stall link in transaction table */
.vendor-link[b-s5bas2yqx4] {
    color: var(--navy);
    text-decoration: none;
    font-weight: 500;
    transition: all .15s;
    cursor: pointer;
}

    .vendor-link:hover[b-s5bas2yqx4] {
        color: var(--accent);
        text-decoration: underline;
    }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .kpi-row[b-s5bas2yqx4] {
        grid-template-columns: repeat(2, 1fr);
    }

    .two-col[b-s5bas2yqx4] {
        grid-template-columns: 1fr;
    }

    .summary-grid[b-s5bas2yqx4] {
        grid-template-columns: 1fr 1fr;
    }

    .rpt-attention[b-s5bas2yqx4] {
        grid-template-columns: 1fr;
    }

    .attn-col:first-child[b-s5bas2yqx4] {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 900px) {
    .rfp-top[b-s5bas2yqx4] {
        gap: 10px;
        padding: 14px;
    }

    .rfp-export[b-s5bas2yqx4] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 680px) {
    .kpi-row[b-s5bas2yqx4] {
        grid-template-columns: 1fr;
    }

    .summary-grid[b-s5bas2yqx4] {
        grid-template-columns: 1fr;
    }

    .rfp-bottom[b-s5bas2yqx4] {
        flex-direction: column;
        align-items: flex-start;
    }

    .rfp-badge[b-s5bas2yqx4] {
        display: none;
    }

    /* Belt-and-suspenders against horizontal page overflow: constrain every level of the filter panel
       explicitly. A flex child with an internal overflow-x:auto scroller (the facility chip strip) can,
       in some browsers, still report its unclipped natural width to ancestors during layout — which
       widened the whole page and let it be dragged sideways (the dark bleed past the white content). */
    .rpt-filter-panel[b-s5bas2yqx4],
    .rfp-top[b-s5bas2yqx4],
    .rfp-bottom[b-s5bas2yqx4],
    .rfp-fac-row[b-s5bas2yqx4] {
        max-width: 100%;
    }

    .rfp-fac-row[b-s5bas2yqx4] {
        width: 100%;
        flex-wrap: wrap;
    }

    .rfp-chips[b-s5bas2yqx4] {
        max-width: 100%;
    }

    .rfp-top[b-s5bas2yqx4] {
        gap: 10px;
    }
}

/* ══════════════════════════════════════════════════════════════
   REPORT SCOPE BANNER
   ══════════════════════════════════════════════════════════════ */



/* Export note ties controls to scope */
.rfp-export-note[b-s5bas2yqx4] {
    align-self: center;
    font-size: 10.5px;
    color: var(--text-subtle);
    margin-right: 2px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   ATTENTION & FOLLOW-UP
   ══════════════════════════════════════════════════════════════ */
.rpt-attention[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

/* One side empty: give it only the width it needs rather than half the sheet, and let the populated list have the rest.
   Both columns still state their figure — a nil is information on a financial report — but a nil does not need half a page.
   Equal-height grid cells keep the divider continuous without moving either column's content. */
.rpt-attention.is-lopsided[b-s5bas2yqx4] {
    grid-template-columns: minmax(0, 34%) 1fr;
}

.attn-col[b-s5bas2yqx4] {
    padding: 6px 0 8px;
}

    .attn-col:first-child[b-s5bas2yqx4] {
        border-right: 1px solid var(--border);
    }

.attn-col-head[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px 2px;
}

.attn-col-title[b-s5bas2yqx4] {
    font-size: 13px;
    font-weight: 700;
}

    .attn-col-title.attn-delinquent[b-s5bas2yqx4] {
        color: var(--red);
    }

    .attn-col-title.attn-arrears[b-s5bas2yqx4] {
        color: #a9791b;
    }

.attn-count[b-s5bas2yqx4] {
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 8px;
    line-height: 1.6;
}

.attn-count-red[b-s5bas2yqx4] {
    color: var(--red);
    background: var(--red-bg, #fdecec);
}

.attn-count-amber[b-s5bas2yqx4] {
    color: #a9791b;
    background: rgba(200, 168, 75, .16);
}

.attn-col-note[b-s5bas2yqx4] {
    font-size: 11px;
    color: var(--text-subtle);
    padding: 0 22px 8px;
}

.attn-age-red[b-s5bas2yqx4] {
    color: var(--red) !important;
}

.attn-age-amber[b-s5bas2yqx4] {
    color: #a9791b !important;
}

.delinq-amt-val.amber[b-s5bas2yqx4] {
    color: #a9791b;
}

/* ══════════════════════════════════════════════════════════════
   TREND — y-axis scale + ytd note
   ══════════════════════════════════════════════════════════════ */
.rpt-trend-plot[b-s5bas2yqx4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rpt-yaxis[b-s5bas2yqx4] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 160px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-subtle);
    text-align: right;
    flex-shrink: 0;
    font-family: 'DM Mono', monospace;
}

/* Plot area: bars sit above a gridline overlay that always matches the y-axis labels. */
.rpt-plot[b-s5bas2yqx4] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.rpt-grid[b-s5bas2yqx4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.rpt-grid-line[b-s5bas2yqx4] {
    width: 100%;
    height: 1px;
    background: #eef2f6;
}

.rpt-plot .bar-chart[b-s5bas2yqx4] {
    position: relative;
    z-index: 1;
}

/* Bars grow upward on load/filter (GPU-friendly transform, not height). */
@keyframes rpt-bar-grow-b-s5bas2yqx4 {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.rpt-plot .bar[b-s5bas2yqx4] {
    transform-origin: bottom;
    animation: rpt-bar-grow-b-s5bas2yqx4 .55s cubic-bezier(.22, 1, .36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .rpt-plot .bar[b-s5bas2yqx4] { animation: none; }
}

.rpt-ytd-note[b-s5bas2yqx4] {
    margin-top: 14px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    font-size: 12.5px;
    color: var(--text-muted);
}

    .rpt-ytd-note strong[b-s5bas2yqx4] {
        color: var(--green);
        font-family: 'DM Mono', monospace;
    }

/* Movement sits on the same line as the total, so it is spaced rather than boxed. */
.rpt-ytd-move[b-s5bas2yqx4] {
    margin-left: 4px;
    font-weight: 700;
    font-family: 'DM Mono', monospace;
}

.rpt-ytd-move.is-up[b-s5bas2yqx4] {
    color: var(--green);
}

.rpt-ytd-move.is-down[b-s5bas2yqx4] {
    color: var(--red);
}

.rpt-ytd-base[b-s5bas2yqx4] {
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   FACILITY TABLE — model badge, inactive rows, footer, legend
   ══════════════════════════════════════════════════════════════ */
.rpt-table-scroll[b-s5bas2yqx4] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fac-model[b-s5bas2yqx4] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-icon, #eef2f6);
    border-radius: 6px;
    padding: 3px 9px;
    white-space: nowrap;
}

.fac-row-inactive td[b-s5bas2yqx4] {
    background: #fafbfc;
    color: var(--text-subtle);
}

.fac-table tfoot .fac-foot td[b-s5bas2yqx4] {
    border-top: 2px solid var(--border);
    border-bottom: none;
    background: #f8fafb;
    padding-top: 12px;
    padding-bottom: 12px;
}

.status-pill.muted[b-s5bas2yqx4] {
    background: var(--bg-icon, #eef2f6);
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   LOADING / ERROR / EMPTY STATES
   ══════════════════════════════════════════════════════════════ */
.rpt-state[b-s5bas2yqx4] {
    padding: 48px 20px;
    text-align: center;
    color: var(--text-subtle);
    font-size: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.rpt-state-error[b-s5bas2yqx4] {
    color: var(--red);
}

.rpt-retry[b-s5bas2yqx4] {
    margin-left: 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.rpt-empty[b-s5bas2yqx4] {
    padding: 20px 22px;
    font-size: 12.5px;
    color: var(--text-subtle);
}

    /* Where the money is, when this list is empty but former occupancies still owe. Built from the same idiom as the
       "Balances from former occupancies" card below — light border, tinted panel, the figure in red — but on one line,
       because repeating that card here would state the same amount twice on one screen. */
    .rpt-empty-note[b-s5bas2yqx4] {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        margin-top: 10px;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: #fafcfd;
        text-decoration: none;
        transition: background .12s, border-color .12s;
    }

        .rpt-empty-note:hover[b-s5bas2yqx4] {
            background: #f4f8fb;
            border-color: #c9d6e0;
        }

    .rpt-empty-note-val[b-s5bas2yqx4] {
        font-weight: 700;
        font-size: .95rem;
        color: var(--red);
    }

    .rpt-empty-note-text[b-s5bas2yqx4] {
        font-size: .8rem;
        color: var(--text-subtle);
    }

    .rpt-empty-note-go[b-s5bas2yqx4] {
        font-size: .8rem;
        color: var(--navy);
    }

/* Receivable aging schedule. Sits above the two account lists and frames them: the lists say who owes, this says how long
   it has been owed. Plain figures rather than a chart — an office reading a printed report needs the amounts. */
.rpt-aging[b-s5bas2yqx4] {
    margin: 0 22px 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fafcfd;
}

.rpt-aging-head[b-s5bas2yqx4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.rpt-aging-label[b-s5bas2yqx4] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* Only the bands that hold something, so the columns are sized to what is there rather than to a fixed four. */
.rpt-aging-bands[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: repeat(var(--rpt-aging-count, 4), minmax(0, 1fr));
    gap: 10px;
}

/* Closing statement under the facility table: what the total row cannot say, at the rows it describes. */
/* A ruled strip on the table's own 22px cell edge (not an inset box), so "Billed facilities" starts where "Facility"
   does and the two halves read as a continuation of the register. */
.fac-close[b-s5bas2yqx4] {
    margin: 0;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border);
}

.fac-close-split[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
}

    .fac-close-part + .fac-close-part[b-s5bas2yqx4] {
        padding-left: 22px;
        border-left: 1px solid var(--border);
    }

.fac-close-key[b-s5bas2yqx4] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.fac-close-val[b-s5bas2yqx4] {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}

.fac-close-aside[b-s5bas2yqx4] {
    font-weight: 400;
    color: var(--text-muted);
}

.fac-close-note[b-s5bas2yqx4] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}

    .fac-close-note strong[b-s5bas2yqx4] {
        color: var(--red);
        font-weight: 700;
    }

@media (max-width: 680px) {
    .fac-close-split[b-s5bas2yqx4] {
        grid-template-columns: 1fr;
    }

        .fac-close-part + .fac-close-part[b-s5bas2yqx4] {
            padding-left: 0;
            border-left: 0;
        }
}

/* The exact figures behind the chart. A register of periods, so it is ruled rather than boxed. */
.rpt-trend-table-wrap[b-s5bas2yqx4] {
    margin: 14px 22px 0;
    overflow-x: auto;
}

.rpt-trend-table[b-s5bas2yqx4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .rpt-trend-table th[b-s5bas2yqx4] {
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--text-subtle);
        text-align: left;
        white-space: nowrap;
    }

    .rpt-trend-table td[b-s5bas2yqx4] {
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        color: var(--text-muted);
        white-space: nowrap;
    }

    .rpt-trend-table .r[b-s5bas2yqx4] {
        text-align: right;
    }

    .rpt-trend-table .is-owed[b-s5bas2yqx4] {
        color: var(--red);
    }

    .rpt-trend-table tbody tr:last-child td[b-s5bas2yqx4] {
        border-bottom: none;
    }

    /* The period the rest of the report is about, marked so the table and the chart agree at a glance. */
    .rpt-trend-table tr.is-selected td[b-s5bas2yqx4] {
        background: #f6f9fc;
        color: var(--navy);
        font-weight: 700;
    }

.rpt-trend-here[b-s5bas2yqx4] {
    margin-left: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--accent);
}

/* The Attention header's figures. Value above its label, so the eye lands on the number rather than on a sentence — the
   header is where the office reads what it is being asked to act on. */
.rpt-attn-stats[b-s5bas2yqx4] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-top: 8px;
}

.rpt-attn-stat-val[b-s5bas2yqx4] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

    .rpt-attn-stat-val.is-owed[b-s5bas2yqx4] {
        color: var(--red);
    }

.rpt-attn-stat-key[b-s5bas2yqx4] {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--text-subtle);
}

/* The lean form, when there is no spread worth a schedule but a lapsed term still wants renewing. */
.rpt-aging-lean[b-s5bas2yqx4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.rpt-aging-none[b-s5bas2yqx4] {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-subtle);
}

.rpt-aging-band-span[b-s5bas2yqx4] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.rpt-aging-band-val[b-s5bas2yqx4] {
    margin-top: 3px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
}

.rpt-aging-band-count[b-s5bas2yqx4] {
    font-size: 11.5px;
    color: var(--text-subtle);
}

    /* Kept for the empty-band case; no band is rendered with a zero figure any more. */
    .rpt-aging-band.is-empty .rpt-aging-band-val[b-s5bas2yqx4],
    .rpt-aging-band.is-empty .rpt-aging-band-count[b-s5bas2yqx4] {
        color: var(--text-subtle);
        font-weight: 600;
    }

.rpt-aging-lapsed[b-s5bas2yqx4] {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

    .rpt-aging-lapsed strong[b-s5bas2yqx4] {
        color: var(--navy);
        font-weight: 700;
    }

@media (max-width: 680px) {
    .rpt-aging-bands[b-s5bas2yqx4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The Overview's body: two panels answering what the four cards cannot. Two columns on a desk, one on a narrow screen. */
.rpt-panels[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: -6px 0 20px;
}

.rpt-panel[b-s5bas2yqx4] {
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.rpt-panel-title[b-s5bas2yqx4] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.rpt-panel-note[b-s5bas2yqx4] {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-subtle);
}

.rpt-panel-foot[b-s5bas2yqx4] {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}

    .rpt-panel-foot strong[b-s5bas2yqx4] {
        color: var(--navy);
        font-weight: 700;
    }

.rpt-panel-aside[b-s5bas2yqx4] {
    color: var(--text-subtle);
}

/* Collection by model: two parts of one total, so they carry equal weight rather than one leading. */
.rpt-split[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.rpt-split-val[b-s5bas2yqx4] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
}

.rpt-split-label[b-s5bas2yqx4] {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.rpt-split-sub[b-s5bas2yqx4] {
    margin-top: 1px;
    font-size: 11px;
    color: var(--text-subtle);
}

/* Outstanding position: a list of scopes, so each reads as its own statement rather than as a column of comparable sums. */
.rpt-pos[b-s5bas2yqx4] {
    margin-top: 12px;
}

.rpt-pos-row[b-s5bas2yqx4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

    .rpt-pos-row:last-child[b-s5bas2yqx4] {
        border-bottom: none;
    }

    /* Every label starts on the same line, including the one that is part of the figure above it. The relationship is
       carried by the wording ("within whole account"), not by an indent that leaves one row out of alignment with the
       rest — on a government form a column of labels should have one starting point. */

.rpt-pos-of[b-s5bas2yqx4] {
    color: var(--text-subtle);
}

.rpt-pos-label[b-s5bas2yqx4] {
    font-size: 12px;
    color: var(--text-muted);
}

.rpt-pos-val[b-s5bas2yqx4] {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    text-align: right;
}

.rpt-pos-count[b-s5bas2yqx4] {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-subtle);
}

@media (max-width: 1100px) {
    .rpt-panels[b-s5bas2yqx4] {
        grid-template-columns: 1fr;
    }
}

/* Divider inside a coverage figure ("284 / 310"): the denominator is context, not a second number of equal weight. */
.fac-cov-sep[b-s5bas2yqx4] {
    color: var(--text-subtle);
    font-weight: 400;
}

/* Exists only to hold whitespace at the foot of a printed continuation sheet; it must never take up a row on screen. */
.tx-print-foot[b-s5bas2yqx4] {
    display: none;
}

/* Who recorded a collection. Present for the audit trail, so it must not compete with the amount beside it. */
.tx-actor[b-s5bas2yqx4] {
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* The space a collection was taken on, under the payor's name. */
.tx-sub[b-s5bas2yqx4] {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-subtle);
}


/* ══════════════════════════════════════════════════════════════
   EXPANDABLE FACILITY DETAIL (NPM)
   ══════════════════════════════════════════════════════════════ */
.fac-expandable[b-s5bas2yqx4] {
    cursor: pointer;
}

.fac-expandable:hover td[b-s5bas2yqx4] {
    background: #fafcfd;
}

.fac-caret[b-s5bas2yqx4] {
    display: inline-block;
    font-size: 11px;
    color: var(--text-muted);
    margin-right: 7px;
    transition: transform .12s ease;
}

.fac-caret.open[b-s5bas2yqx4] {
    transform: rotate(90deg);
}

.fac-detail-row td[b-s5bas2yqx4] {
    background: #f8fafb;
    padding: 0;
    border-bottom: 1px solid #f0f4f8;
}

.fac-detail[b-s5bas2yqx4] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 48px;
    padding: 16px 22px 16px 44px;
}

.fac-detail-group[b-s5bas2yqx4] {
    min-width: 240px;
}

.fac-detail-heading[b-s5bas2yqx4] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 8px;
}

.fac-detail-item[b-s5bas2yqx4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 3px 0;
}

.fac-detail-item strong[b-s5bas2yqx4] {
    color: var(--navy);
    font-family: 'DM Mono', monospace;
}

.fac-detail-item.fac-detail-total[b-s5bas2yqx4] {
    border-top: 1px solid var(--border);
    margin-top: 5px;
    padding-top: 7px;
}

.fac-detail-red[b-s5bas2yqx4] {
    color: var(--red) !important;
}

.fac-detail-amber[b-s5bas2yqx4] {
    color: #b5872a !important;
}

/* ══════════════════════════════════════════════════════════════
   TREND BAR HOVER TOOLTIP
   ══════════════════════════════════════════════════════════════ */
.rpt-plot .bar-wrap[b-s5bas2yqx4] {
    position: relative;
}

.bar-tip[b-s5bas2yqx4] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 30;
    min-width: 160px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(13, 33, 55, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.bar-wrap:hover .bar-tip[b-s5bas2yqx4] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* little pointer */
.bar-tip[b-s5bas2yqx4]::after {
    display: none;
}

.bar-tip-title[b-s5bas2yqx4] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.bar-tip-row[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-subtle);
    margin-top: 4px;
    line-height: 1.6;
}

.bar-tip-key[b-s5bas2yqx4] {
    color: var(--text-subtle);
}

.bar-tip-val[b-s5bas2yqx4] {
    margin-left: auto;
    font-family: 'DM Mono', monospace;
    font-weight: 700;
    color: var(--navy);
}

.bar-tip-dot[b-s5bas2yqx4] {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.bar-tip-dot.tip-collected[b-s5bas2yqx4] { background: var(--gold); }
.bar-tip-dot.tip-unpaid[b-s5bas2yqx4] { background: #b9c4ce; }

/* Clarification note under the Paid-collection-records KPI */
.kpi-note[b-s5bas2yqx4] {
    margin-top: 6px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--text-muted);
    max-width: 300px;
}

/* Refreshing cue — shown while a new period loads, so the report never blank-flashes. It lives at the right
   of the scope rail, which was otherwise empty. */
.rpt-scope-state[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.rpt-refreshing-dot[b-s5bas2yqx4] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold, #c8a84b);
    animation: rpt-refresh-pulse-b-s5bas2yqx4 0.9s ease-in-out infinite;
}
@keyframes rpt-refresh-pulse-b-s5bas2yqx4 {
    0%, 100% { opacity: .3; }
    50% { opacity: 1; }
}


/* ══ Export PDF (browser print) — scoped to the Financial Reports page ══
   The Export PDF button calls window.print(); these rules narrow the printed
   sheet to a formal header + KPI cards + the trend chart + Revenue by Facility,
   hiding all page chrome and the sections outside that scope. Landscape A4, so
   the chart and the seven-column facility table keep the shape they have on
   screen; the paper margin comes from padding because the page margin is zero
   (a zero margin leaves the browser nowhere to print its own date/URL header). */
.rpt-pdf-header[b-s5bas2yqx4] { display: none; }

@media print {
    .topbar[b-s5bas2yqx4],
    .rpt-filter-panel[b-s5bas2yqx4],
    .rpt-state[b-s5bas2yqx4] { display: none !important; }

    /* Only header + KPIs + trend + Revenue by Facility print (Attention & Recent Records are excluded). */
    .content-area > .section-card:not(.pdf-include)[b-s5bas2yqx4] { display: none !important; }

    /* ── Register print ──────────────────────────────────────────────────────────────────────────────────────
       The second document this page produces: the letterhead and the collection register, the evidence behind the
       summary's figures. The register is deliberately NOT added to the summary export — fifty rows a period would turn
       the report the office signs into something else — so it prints on its own and the summary is left as it was.

       The id in these selectors is doing real work: the rule above hides every section-card without pdf-include, and
       #rpt-records is one of them, so an id is what outranks it. The section-tab class hides only on screen, which is
       why the register prints whatever tab the office happens to have open. */
    .print-register .kpi-row[b-s5bas2yqx4],
    .print-register .rpt-panels[b-s5bas2yqx4],
    .print-register #rpt-trend[b-s5bas2yqx4],
    .print-register #rpt-facility[b-s5bas2yqx4] { display: none !important; }

    /* The spacer belongs to the facility card, and forces a page break to keep it clear of the paper's edge. With that
       card hidden the break remained, so the register began with one or two empty sheets — the fault this hides. */
    .print-register .rpt-page-space[b-s5bas2yqx4] { display: none !important; }

    /* The page margin is ZERO so Chromium has no margin box to print its date, title and URL into. The sheet's whitespace
       comes from .content-area's own print padding below (10mm 12mm), which covers the sides of every page and the top and
       bottom of the flow, and from the table's repeated header and footer rows, which cover the top and bottom of each
       continuation sheet. A rule was added here to set that padding and it lost to .content-area's later one; there is no
       need for two. */

    .print-register #rpt-records[b-s5bas2yqx4] { display: block !important; }

    /* Strip the card off the register for print. A bordered, filled panel broken across sheets draws its border only where
       it truly starts and ends, so on every page between them the background ran to the paper's edge and looked like the
       table was falling off it. A printed register is a ruled table on paper, not a panel on a screen — so the chrome goes
       and the clearance comes from the page padding and the repeated header and footer rows. */
    .print-register #rpt-records[b-s5bas2yqx4] {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* The register's own heading is dropped from the print: the letterhead above it already states the office and the
       period, so "Collection register — September 2026" repeated the period under a rule that had just stated it. The cap
       note goes with it, and the actions were already no-print. */
    .print-register #rpt-records .section-header[b-s5bas2yqx4] { display: none !important; }

    .print-register #rpt-records .rpt-table-scroll[b-s5bas2yqx4] {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    /* A register is read down its rows, so it may break across sheets — but never mid-row, and every sheet repeats the
       column headings, or a page of figures arrives with nothing saying what they are.

       The vertical whitespace on a continuation sheet can only come from these two: the page margin is zero, so the
       container's padding applies once at each end of the flow and not per page. A repeated header row carries the space at
       the top, a repeated footer row carries it at the bottom, and both have no border so they read as margin. */
    .print-register #rpt-records[b-s5bas2yqx4] { break-inside: auto !important; }
    .print-register #rpt-records thead[b-s5bas2yqx4] { display: table-header-group; }
    .print-register #rpt-records tfoot[b-s5bas2yqx4] { display: table-footer-group; }
    .print-register #rpt-records thead th[b-s5bas2yqx4] { padding-top: 6mm !important; border-top: none !important; }
    .print-register #rpt-records tfoot td[b-s5bas2yqx4] { height: 8mm !important; border: none !important; padding: 0 !important; }
    .print-register #rpt-records tr[b-s5bas2yqx4] { break-inside: avoid; page-break-inside: avoid; }

    /* An official tab (Monthly Income, Collections, Accountability) prints its own report, never the legacy summary sections that
       are otherwise always part of the Export Summary PDF (IA-052). */
    .print-official .pdf-include[b-s5bas2yqx4],
    .print-official .rpt-pdf-header[b-s5bas2yqx4],
    .print-official .rpt-page-space[b-s5bas2yqx4] { display: none !important; }

    /* Seven columns on a portrait sheet. The cells carry the screen's 22px side padding, which was enough to wrap
       "OR / Ref #" and "Payor / Stall" onto two lines and leave the headings twice as tall as the rows they label.
       Tighter cells, one line each, and the payor column takes the room the rest give back. */
    .print-register #rpt-records .tx-table th[b-s5bas2yqx4],
    .print-register #rpt-records .tx-table td[b-s5bas2yqx4] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .print-register #rpt-records .tx-table th[b-s5bas2yqx4] { white-space: nowrap; }

    /* The office reads a register by its rows, so give them the width the summary's cards were using. */
    .print-register #rpt-records .rpt-table-scroll[b-s5bas2yqx4] { overflow: visible !important; }
    .print-register #rpt-records .tx-table[b-s5bas2yqx4] { font-size: 9.5pt !important; }

    /* ── PRINT MISC ─────────────────────────────────────────────────────────────────────────────────────
       The third document: the letterhead and the month's electricity and water, per payor. Same mechanism as the
       register above — one print helper, one shape of stylesheet — so there is no second way of printing a section.

       The ids do the same work here: the rule further up hides every section-card without pdf-include, and #rpt-misc is
       one of them, so an id is what outranks it. */
    .print-misc .kpi-row[b-s5bas2yqx4],
    .print-misc .rpt-panels[b-s5bas2yqx4],
    .print-misc #rpt-trend[b-s5bas2yqx4],
    .print-misc #rpt-facility[b-s5bas2yqx4] { display: none !important; }

    /* Belongs to the facility card and forces a break; with that card hidden it would open this document with a blank
       sheet — the same fault the register had. */
    .print-misc .rpt-page-space[b-s5bas2yqx4] { display: none !important; }

    .print-misc #rpt-misc[b-s5bas2yqx4] { display: block !important; }

    /* Card chrome off, for the reason the register's is: a bordered, filled panel broken across sheets draws its
       background to the paper's edge on every page between its first and last. */
    .print-misc #rpt-misc[b-s5bas2yqx4] {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* The letterhead above already states the office and the period, so the section's own heading would repeat it. The
       actions beside it are no-print already. */
    .print-misc #rpt-misc .section-header[b-s5bas2yqx4] { display: none !important; }

    .print-misc #rpt-misc .rpt-table-scroll[b-s5bas2yqx4] {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .print-misc #rpt-misc[b-s5bas2yqx4] { break-inside: auto !important; }
    .print-misc #rpt-misc thead[b-s5bas2yqx4] { display: table-header-group; }
    .print-misc #rpt-misc tr[b-s5bas2yqx4] { break-inside: avoid; page-break-inside: avoid; }

    /* No 10mm above the column headings here. The register needs it — its table can run for pages and each one must open
       clear of the edge — but this table is one row per metered space, so the padding only ever appeared as a gap between
       the letterhead and the first heading. The sheet's own padding is the clearance. */
    .print-misc #rpt-misc thead th[b-s5bas2yqx4] {
        padding-top: 4px !important;
        border-top: none !important;
    }

    /* Unlike the register's, this table's tfoot is a REAL row — the period's total. A tfoot is a footer group by default,
       which would print "Total" at the foot of every sheet as though each page were complete. It prints once, at the end,
       where a total belongs. The register carries its per-page bottom clearance in a spacer footer; this table cannot, and
       does not need to: a market bills one utility row per space, so the sheet is one page. */
    .print-misc #rpt-misc tfoot[b-s5bas2yqx4] { display: table-row-group; }
    .print-misc #rpt-misc tfoot td[b-s5bas2yqx4] { background: transparent !important; }

    .print-misc #rpt-misc .tx-table[b-s5bas2yqx4] { font-size: 9.5pt !important; }

    /* Eight columns on a portrait sheet: the cells carry the screen's 22px side padding, which pushed "OR No." onto two
       lines and squeezed the payor. Tighter cells, and the figures stay on one line each. */
    .print-misc #rpt-misc .tx-table th[b-s5bas2yqx4],
    .print-misc #rpt-misc .tx-table td[b-s5bas2yqx4] {
        padding-left: 6px !important;
        padding-right: 6px !important;
        white-space: nowrap;
    }

    /* The closing line is a screen aid — the printed sheet is the filed table, and its figures are in the total row. */
    .print-misc #rpt-misc .rpt-misc-close[b-s5bas2yqx4] { display: none !important; }

    .content-area[b-s5bas2yqx4] { page: report-doc; padding: 10mm 12mm !important; background: #fff !important; }

    .rpt-pdf-header[b-s5bas2yqx4] {
        display: block !important;
        text-align: center;
        padding-bottom: 14px;
        margin-bottom: 16px;
        border-bottom: 2px solid #111827;
        color: #111827;
    }
    .rpt-pdf-logo[b-s5bas2yqx4] { display: block; width: 54px; height: 54px; object-fit: contain; margin: 0 auto 8px; }
    .rpt-pdf-republic[b-s5bas2yqx4] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
    .rpt-pdf-office[b-s5bas2yqx4] { font-size: 15px; font-weight: 700; margin: 4px 0 0; }
    .rpt-pdf-muni[b-s5bas2yqx4] { font-size: 11px; color: #4b5563; }
    .rpt-pdf-title[b-s5bas2yqx4] { margin-top: 12px; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; font-weight: 800; }
    .rpt-pdf-meta[b-s5bas2yqx4] { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 11px; color: #4b5563; }

    /* Paper-friendly cards/sections: no shadows, keep each block whole. */
    .kpi-row[b-s5bas2yqx4] { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; margin-bottom: 14px !important; }
    .kpi-card[b-s5bas2yqx4],
    .section-card[b-s5bas2yqx4] { box-shadow: none !important; border: 1px solid #cfd6de !important; break-inside: avoid; page-break-inside: avoid; }
    .section-card[b-s5bas2yqx4] { margin-bottom: 12px !important; }

    /* A page margin of zero leaves no room above a card that starts a continuation sheet, and a margin on the
       card itself is dropped at a forced break. A print-only spacer that owns the break carries the whitespace
       instead, so the whole card sits clear of the paper's edge without changing the card's own padding. */
    .rpt-page-space[b-s5bas2yqx4] {
        display: block !important;
        break-before: page;
        page-break-before: always;
        height: 10mm;
    }

    /* The sheet's own letterhead states the office, the scope and the period, so the chart's heading would only repeat
       them. Movement no longer lives here — it closes the section below the table, in the facility close's treatment — so
       the whole header goes again, as it did before that move. */
    .rpt-trend-card .section-header[b-s5bas2yqx4] { display: none !important; }

    /* The closing statement prints with the facility table it explains: on paper the total row's 19% is exactly the figure
       a reader would otherwise take at face value. Side margins drop, as the card's own padding carries them in print. */
    .fac-close[b-s5bas2yqx4] { margin-left: 0 !important; margin-right: 0 !important; }

    /* The exact figures behind the chart print with it: on paper a bar two millimetres tall says nothing, and the table is
       what can be read at a desk. Its horizontal scroll must be released or the last column is clipped off the sheet —
       the same trap the register's table had. */
    .rpt-trend-table-wrap[b-s5bas2yqx4] { overflow: visible !important; margin-left: 0 !important; margin-right: 0 !important; }
    .rpt-trend-table[b-s5bas2yqx4] { font-size: 9.5pt !important; }
    .rpt-trend-table tr[b-s5bas2yqx4] { break-inside: avoid; page-break-inside: avoid; }

    /* Trend bars animate + show hover tooltips on screen — freeze/hide for a static print, and keep their
       fill: without this the printer drops the gradients and the chart comes out as empty outlines. */
    .bar-tip[b-s5bas2yqx4] { display: none !important; }
    .bar[b-s5bas2yqx4] { animation: none !important; }
    .bar[b-s5bas2yqx4], .bar[b-s5bas2yqx4]::before, .bar[b-s5bas2yqx4]::after, .legend-dot[b-s5bas2yqx4], .rpt-grid-line[b-s5bas2yqx4] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Compact the 7-column facility table so it fits the page. */
    .rpt-table-scroll[b-s5bas2yqx4] { overflow: visible !important; }
    .fac-table[b-s5bas2yqx4] { font-size: 10.5px !important; }
    .fac-table th[b-s5bas2yqx4],
    .fac-table td[b-s5bas2yqx4] { padding: 4px 7px !important; }

    /* Nothing on paper can be expanded, so the disclosure arrow is only ink. */
    .fac-caret[b-s5bas2yqx4] { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   CONTEXTUAL LOADING SKELETON (screen only — mirrors the report layout)
   ══════════════════════════════════════════════════════════════ */
.rpt-loading[b-s5bas2yqx4] {
    margin-top: 4px;
}

/* KPI card body: stack the three shimmer lines like the real value/label/sub */
.rpt-loading-kpi[b-s5bas2yqx4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Two-column body: wide chart panel + narrow side list (mirrors .two-col) */
.rpt-loading-grid[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    margin-top: 20px;
}

/* Two panels of equal weight — the Overview's pair, and the two follow-up columns. */
.rpt-loading-grid-even[b-s5bas2yqx4] {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 1100px) {
    .rpt-loading-grid[b-s5bas2yqx4],
    .rpt-loading-grid-even[b-s5bas2yqx4] {
        grid-template-columns: 1fr;
    }
}

/* A ruled line of the shape a table row has: the first cell wide, the rest of the figures to its right. Used for the
   panels' label-and-figure lines and for the table sections, which is what By facility, the register and
   Miscellaneous all are. */
.rpt-loading-line[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}

    .rpt-loading-line:first-of-type[b-s5bas2yqx4] {
        border-top: none;
    }

.rpt-loading-line-head[b-s5bas2yqx4] {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.rpt-loading-panel[b-s5bas2yqx4] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px;
}

.rpt-loading-panel-head[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

/* Bar-chart placeholder: equal-width columns anchored to the baseline */
.rpt-loading-bars[b-s5bas2yqx4] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 220px;
    padding-top: 8px;
}

    .rpt-loading-bars[b-s5bas2yqx4]  .skeleton {
        flex: 1 1 0;
    }

/* Side list rows: avatar + two text lines + trailing amount */
.rpt-loading-row[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}

    .rpt-loading-row:first-of-type[b-s5bas2yqx4] {
        border-top: none;
    }

.rpt-loading-row-text[b-s5bas2yqx4] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 980px) {
    .rpt-loading-grid[b-s5bas2yqx4] {
        grid-template-columns: 1fr;
    }

    .rpt-loading-bars[b-s5bas2yqx4] {
        height: 180px;
    }
}

/* ── Closed / expired accounts with balance — a distinct, non-delinquency follow-up note ── */
/* The same pointer when there is nothing outstanding on a closed account: one quiet line, so the two lists above
   are never mistaken for the whole picture. */
.rpt-closed-hint[b-s5bas2yqx4] {
    display: block;
    margin: 4px 22px 18px;
    font-size: 11.5px;
    color: var(--text-subtle);
    text-decoration: none;
}
.rpt-closed-hint:hover[b-s5bas2yqx4] { color: var(--navy); text-decoration: underline; }

.rpt-closed-note[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 22px 18px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fafcfd;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

    .rpt-closed-note:hover[b-s5bas2yqx4] {
        background: #f4f8fb;
        border-color: #c9d6e0;
    }

.rpt-closed-note-title[b-s5bas2yqx4] {
    font-weight: 600;
    color: var(--text);
    font-size: .92rem;
}

.rpt-closed-note-sub[b-s5bas2yqx4] {
    color: var(--text-subtle);
    font-size: .78rem;
    margin-top: 2px;
}

.rpt-closed-note-amount[b-s5bas2yqx4] {
    text-align: right;
    white-space: nowrap;
}

.rpt-closed-note-val[b-s5bas2yqx4] {
    font-weight: 700;
    color: var(--red);
    font-size: 1rem;
}

.rpt-closed-note-count[b-s5bas2yqx4] {
    color: var(--text-subtle);
    font-size: .76rem;
    margin-top: 2px;
}

/* Screen-side the spacer is nothing at all; it only exists to carry the page break and its whitespace. */
.rpt-page-space[b-s5bas2yqx4] {
    display: none;
}

/* Shown only when a follow-up list is capped. Restrained on purpose: it is a note about the LIST, not a warning about
   the money — the figures above it already count every account. */
.attn-capped[b-s5bas2yqx4] {
    padding: 10px 22px 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-subtle);
    border-top: 1px solid var(--border);
    margin-top: 6px;
}

/* ══════════════════════════════════════════════════════════════
   V3 DOCUMENT-FIRST CHROME (2026-10-01)
   One section strip, one period toolbar, then the report. Replaces the
   large filter panel; later rules win over the older ones above.
   ══════════════════════════════════════════════════════════════ */
.rpt-nav[b-s5bas2yqx4] {
    margin: 0 0 12px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.rpt-nav[b-s5bas2yqx4]::-webkit-scrollbar {
    display: none;
}

.rpt-nav .rpt-sec-tabs[b-s5bas2yqx4] {
    display: flex;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.rpt-nav .rpt-sec-tab[b-s5bas2yqx4] {
    position: relative;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

.rpt-nav .rpt-sec-tab:hover:not(.on)[b-s5bas2yqx4] {
    color: var(--navy);
    background: var(--surface-hover);
}

.rpt-nav .rpt-sec-tab.on[b-s5bas2yqx4] {
    background: transparent;
    box-shadow: none;
    color: var(--navy);
}

.rpt-nav .rpt-sec-tab.on[b-s5bas2yqx4]::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--accent);
}

.rpt-nav .rpt-sec-tab:focus-visible[b-s5bas2yqx4] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Period toolbar: one line, controls left, contextual action right. */
.rpt-toolbar[b-s5bas2yqx4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin: 0 0 16px;
}

/* One joined control: a single outer border and radius, an internal divider only. The older .rpp rules above give a
   selected pill its own radius, border and shadow; each is reset here, because any one of them reads as a seam. */
.rpt-seg[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: stretch;
    align-self: flex-end;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
}

.rpt-seg .rpp[b-s5bas2yqx4] {
    margin: 0;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.rpt-seg .rpp + .rpp[b-s5bas2yqx4] {
    border-left: 1px solid var(--border);
}

.rpt-seg .rpp.on[b-s5bas2yqx4] {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: none;
}

.rpt-seg .rpp:focus-visible[b-s5bas2yqx4] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.rpt-tool[b-s5bas2yqx4] {
    min-width: 140px;
}

.rpt-tool-source[b-s5bas2yqx4] {
    min-width: 220px;
}

.rpt-toolbar-end[b-s5bas2yqx4] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    align-self: flex-end;
}

.rpt-btn-export[b-s5bas2yqx4] {
    min-height: 36px;
}

.rpt-scope-line[b-s5bas2yqx4] {
    margin: -8px 0 14px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.rpt-scope-line strong[b-s5bas2yqx4] {
    color: var(--navy);
}

/* Reports use the full main column: no narrow centred sheet. */
.content-area[b-s5bas2yqx4] {
    max-width: none;
}

/* Summary: the four headline figures as one statement strip — no icon tiles, hairline dividers, tabular figures. */
.kpi-row[b-s5bas2yqx4] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.kpi-row .kpi-card[b-s5bas2yqx4] {
    padding: 14px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.kpi-row .kpi-card + .kpi-card[b-s5bas2yqx4] {
    border-left: 1px solid var(--border);
}

.kpi-row .kpi-icon-wrap[b-s5bas2yqx4] {
    display: none;
}

.kpi-row .kpi-value[b-s5bas2yqx4] {
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kpi-row .kpi-label[b-s5bas2yqx4] {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.kpi-row .kpi-sub[b-s5bas2yqx4] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

@media (max-width: 1100px) {
    .kpi-row[b-s5bas2yqx4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-row .kpi-card:nth-child(3)[b-s5bas2yqx4] {
        border-left: 0;
    }

    .kpi-row .kpi-card:nth-child(n + 3)[b-s5bas2yqx4] {
        border-top: 1px solid var(--border);
    }
}

.rpt-legacy-note[b-s5bas2yqx4] {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* Receivables and Trends sections share the statement's document language: a navy top rule, modest radius, a quiet
   header band and 40px register rows. Content and logic are unchanged. */
@media screen {
    .section-card[b-s5bas2yqx4] {
        border-top: 3px solid var(--navy);
        border-radius: 10px;
        box-shadow: none;
    }

    .section-card .section-header[b-s5bas2yqx4] {
        padding: 14px 20px 12px;
        background: var(--surface);
    }

    .section-card .section-title[b-s5bas2yqx4] {
        font-size: 1rem;
        letter-spacing: -0.005em;
    }

    .section-card table td[b-s5bas2yqx4],
    .section-card table th[b-s5bas2yqx4] {
        font-variant-numeric: tabular-nums;
    }
}

/* Collections tab: the legacy-source register sits under the official Collections panels, so it takes their frame (a
   hairline, not the statement's navy rule) and its table meets its header — the global .section-header margin left an
   empty band between them. */
@media screen {
    #rpt-records[b-s5bas2yqx4] {
        border-top-width: 1px;
        border-top-color: var(--border);
        box-shadow: var(--elevation-1);
    }

    #rpt-records .section-header[b-s5bas2yqx4] {
        margin-bottom: 0;
    }
}

/* ── V3 consistency (2026-10-01): one control grammar for the report scope ──
   The period values and the facility / source analysis scope form one joined group — one border, one radius, internal
   dividers only — at the same height as the Monthly | Annual control beside it. */
.rpt-toolgroup[b-s5bas2yqx4] {
    display: inline-flex;
    align-items: stretch;
    align-self: flex-end;
    overflow: visible;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
}

    .rpt-toolgroup .rpt-tool[b-s5bas2yqx4] {
        display: flex;
        min-width: 120px;
    }

    .rpt-toolgroup .rpt-tool-source[b-s5bas2yqx4] {
        min-width: 220px;
    }

    .rpt-toolgroup .rpt-tool + .rpt-tool[b-s5bas2yqx4] {
        border-left: 1px solid var(--border);
    }

    .rpt-toolgroup[b-s5bas2yqx4]  .fh-dd,
    .rpt-toolgroup[b-s5bas2yqx4]  .fh-dd-trigger {
        width: 100%;
    }

    .rpt-toolgroup[b-s5bas2yqx4]  .fh-dd-trigger {
        min-height: 44px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .rpt-toolgroup .rpt-tool:first-child[b-s5bas2yqx4]  .fh-dd-trigger {
        border-radius: 7px 0 0 7px;
    }

    .rpt-toolgroup .rpt-tool:last-child[b-s5bas2yqx4]  .fh-dd-trigger {
        border-radius: 0 7px 7px 0;
    }

    .rpt-toolgroup[b-s5bas2yqx4]  .fh-dd-trigger:hover,
    .rpt-toolgroup[b-s5bas2yqx4]  .fh-dd-trigger.open {
        background: var(--accent-soft);
        box-shadow: none;
    }

    .rpt-toolgroup[b-s5bas2yqx4]  .fh-dd-trigger:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

.rpt-seg .rpp[b-s5bas2yqx4] {
    min-height: 44px;
}

/* The section strip stays reachable on long reports: a quiet sticky band under the page header, not the whole toolbar. */
.rpt-nav[b-s5bas2yqx4] {
    position: sticky;
    top: var(--topbar-h);
    z-index: 20;
    background: var(--canvas);
}

@media print {
    .rpt-nav[b-s5bas2yqx4] {
        position: static;
    }
}
/* /Components/Pages/Menus/ReportSignatories.razor.rz.scp.css */
.rs-page[b-fcjr26tv72] { max-width: 720px; }

.rs-form[b-fcjr26tv72] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
}

.rs-role[b-fcjr26tv72] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0;
    padding: 12px 16px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.rs-role legend[b-fcjr26tv72] {
    padding: 0 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--navy);
}

.rs-actions[b-fcjr26tv72] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .rs-role[b-fcjr26tv72] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Menus/RevenueSetup.razor.rz.scp.css */
/* Revenue Setup: one full-width register; details, history and changes open in the shared V3 right-side drawer
   (app.css .v3-drawer). Only page-specific parts live here. */

/* ── Feedback ── */
.rev-feedback[b-09xja38d3z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rev-feedback.is-success[b-09xja38d3z] {
    border-left-color: var(--green);
    color: var(--green);
}

.rev-feedback button[b-09xja38d3z] {
    width: 28px;
    height: 28px;
    flex: none;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.rev-feedback button:hover[b-09xja38d3z] {
    background: var(--surface-hover);
    color: var(--navy);
}

/* ── Register toolbar ── */
.rev-search[b-09xja38d3z] {
    max-width: 440px;
}

.rev-filter[b-09xja38d3z] {
    min-width: 150px;
}

.rev-asof[b-09xja38d3z] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.rev-asof input[b-09xja38d3z] {
    min-width: 9.5rem;
}

/* ── Register rows ── */
.rev-table td[b-09xja38d3z] {
    vertical-align: middle;
}

.rev-table tbody tr.is-selected td[b-09xja38d3z] {
    background: var(--accent-soft);
}

.rev-table tbody tr.is-selected td:first-child[b-09xja38d3z] {
    box-shadow: inset 3px 0 var(--accent);
}

.rev-source-name[b-09xja38d3z] {
    color: var(--navy);
    font-weight: 600;
}

.rev-source-code[b-09xja38d3z],
.rev-detail-reference[b-09xja38d3z] {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.rev-source-code code[b-09xja38d3z],
.rev-detail-reference code[b-09xja38d3z],
.rev-code[b-09xja38d3z] {
    margin-left: 4px;
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.75rem;
}

.rev-code[b-09xja38d3z] {
    margin-left: 0;
}

.rev-date[b-09xja38d3z] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rev-actions-cell[b-09xja38d3z] {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* ── Status markers: the words carry the meaning; the tint only groups them ── */
.rev-status[b-09xja38d3z] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rev-status.is-active[b-09xja38d3z] {
    border-color: color-mix(in srgb, var(--green) 28%, transparent);
    background: var(--green-bg);
    color: var(--green);
}

.rev-status.is-pending[b-09xja38d3z] {
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
    background: var(--accent-soft);
    color: var(--accent-hover);
}

/* ── States ── */
.rev-state[b-09xja38d3z] {
    display: flex;
    min-height: 10rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 20px;
    text-align: center;
}

.rev-state h3[b-09xja38d3z] {
    margin: 0;
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 600;
}

.rev-state p[b-09xja38d3z] {
    margin: 0 0 8px;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

.rev-state-compact[b-09xja38d3z] {
    min-height: 7rem;
}

.rev-skeleton-row td[b-09xja38d3z] {
    height: 3.5rem;
}

.rev-skeleton-row td:first-child[b-09xja38d3z] {
    min-width: 13rem;
}

.rev-skeleton-row span[b-09xja38d3z],
.rev-skeleton-row i[b-09xja38d3z] {
    display: block;
    width: 7.5rem;
    height: 10px;
    border-radius: 3px;
    background: var(--surface-hover);
    animation: rev-pulse-b-09xja38d3z 1.4s ease-in-out infinite;
}

.rev-skeleton-row td:first-child span[b-09xja38d3z] {
    width: 10rem;
}

.rev-skeleton-row i[b-09xja38d3z] {
    width: 5rem;
    height: 8px;
    margin-top: 6px;
}

@keyframes rev-pulse-b-09xja38d3z {
    50% { opacity: .45; }
}

/* ── Drawer and dialog parts ── */
/* The drawer and dialogs render outside .v3-page, so they set the V3 body size themselves. */
.rev-drawer[b-09xja38d3z],
.rev-modal[b-09xja38d3z] {
    color: var(--text);
    font-size: 0.875rem;
}

.rev-drawer-header[b-09xja38d3z] {
    align-items: flex-start;
}

.rev-drawer-identity[b-09xja38d3z] {
    min-width: 0;
    flex: 1 1 auto;
}

.rev-drawer-identity h2[b-09xja38d3z] {
    overflow-wrap: anywhere;
}

.rev-modal-close[b-09xja38d3z] {
    width: 32px;
    height: 32px;
    flex: none;
    margin-left: auto;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.rev-modal-close:hover:not(:disabled)[b-09xja38d3z] {
    background: var(--surface-hover);
    color: var(--navy);
}

.rev-modal-close:disabled[b-09xja38d3z] {
    cursor: not-allowed;
    opacity: .6;
}

/* Policy facts: label above value, three across, the description on its own row. */
.rev-facts[b-09xja38d3z] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
}

.rev-facts > div[b-09xja38d3z] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
}

.rev-facts dd[b-09xja38d3z] {
    font-size: 0.8125rem;
    text-align: left;
    overflow-wrap: anywhere;
}

.rev-fact-description[b-09xja38d3z] {
    grid-column: 1 / -1;
}

.rev-fact-description dd[b-09xja38d3z] {
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.45;
}

.rev-history-heading[b-09xja38d3z] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.rev-history-heading h3[b-09xja38d3z] {
    margin: 0;
    color: var(--navy);
    font-size: 0.8125rem;
    font-weight: 700;
}

.rev-history-heading p[b-09xja38d3z],
.rev-history-note[b-09xja38d3z],
.rev-hint[b-09xja38d3z] {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.rev-history-wrap[b-09xja38d3z] {
    border: 1px solid var(--border);
    border-radius: 8px;
}

.rev-history-table th:first-child[b-09xja38d3z],
.rev-history-table td:first-child[b-09xja38d3z] {
    padding-left: 12px;
}

.rev-history-table th:last-child[b-09xja38d3z],
.rev-history-table td:last-child[b-09xja38d3z] {
    padding-right: 12px;
}

.rev-history-name[b-09xja38d3z] {
    font-weight: 600;
}

.rev-drawer-footer[b-09xja38d3z] {
    justify-content: space-between;
}

/* ── Forms ── */
.rev-form[b-09xja38d3z] {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.rev-field-pair[b-09xja38d3z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem;
    gap: 12px;
}

.rev-field > span b[b-09xja38d3z] {
    color: var(--red);
}

.rev-field > span small[b-09xja38d3z] {
    color: var(--text-tertiary);
    font-weight: 400;
}

.rev-field > small[b-09xja38d3z] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.rev-field textarea[b-09xja38d3z] {
    width: 100%;
    min-height: 5rem;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.45;
    resize: vertical;
}

.rev-field textarea:focus[b-09xja38d3z] {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ── Retire confirmation, above the drawer ── */
.rev-confirm-backdrop[b-09xja38d3z] {
    z-index: 950;
}

.rev-confirm[b-09xja38d3z] {
    width: min(100%, 28rem);
}

.rev-confirm-text[b-09xja38d3z] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.rev-confirm-text strong[b-09xja38d3z] {
    color: var(--navy);
}

.rev-button-quiet-danger[b-09xja38d3z] {
    color: var(--red);
}

.rev-button-quiet-danger:hover:not(:disabled)[b-09xja38d3z] {
    border-color: color-mix(in srgb, var(--red) 40%, transparent);
    background: var(--red-bg);
    color: var(--red);
}

.rev-button-danger[b-09xja38d3z] {
    border-color: var(--red);
    background: var(--red);
    color: var(--surface);
}

.rev-button-danger:hover:not(:disabled)[b-09xja38d3z] {
    border-color: var(--red);
    background: color-mix(in srgb, var(--red) 86%, black);
    color: var(--surface);
}

.rev-feedback button:focus-visible[b-09xja38d3z],
.rev-modal-close:focus-visible[b-09xja38d3z],
.rev-field textarea:focus-visible[b-09xja38d3z] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .rev-asof[b-09xja38d3z] {
        width: 100%;
        margin-left: 0;
    }

    .rev-asof .v3-period[b-09xja38d3z] {
        flex: 1 1 auto;
    }

    .rev-search[b-09xja38d3z],
    .rev-filter[b-09xja38d3z] {
        max-width: none;
        flex: 1 1 100%;
    }

    .rev-table[b-09xja38d3z] {
        min-width: 640px;
    }

    .rev-history-table[b-09xja38d3z] {
        min-width: 560px;
    }

    .rev-field-pair[b-09xja38d3z],
    .rev-facts[b-09xja38d3z] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rev-skeleton-row span[b-09xja38d3z],
    .rev-skeleton-row i[b-09xja38d3z] {
        animation: none;
    }
}

/* Accountable instrument as a small segmented choice (three real states: OR, CT, or none configured yet). */
.rev-instrument[b-09xja38d3z] {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

    .rev-instrument legend[b-09xja38d3z] {
        margin-bottom: 6px;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text);
    }

.rev-instrument-options[b-09xja38d3z] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
}

.rev-instrument-option[b-09xja38d3z] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 10px;
    border-left: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

    .rev-instrument-option:first-child[b-09xja38d3z] {
        border-left: 0;
    }

    .rev-instrument-option input[b-09xja38d3z] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .rev-instrument-option.is-on[b-09xja38d3z] {
        background: var(--accent-soft);
        color: var(--accent-hover);
        box-shadow: inset 0 -2px 0 var(--accent);
    }

    .rev-instrument-option:focus-within[b-09xja38d3z] {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

@media (max-width: 480px) {
    .rev-instrument-options[b-09xja38d3z] {
        grid-template-columns: 1fr;
    }

    .rev-instrument-option[b-09xja38d3z] {
        justify-content: flex-start;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

        .rev-instrument-option:first-child[b-09xja38d3z] {
            border-top: 0;
        }
}
/* /Components/Pages/Menus/Settings.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Settings — system configuration overview. Government-restrained: neutral
   white cards, navy headers, gold accent. Reuses the app design tokens and the
   shared vs-hero stat strip (vs-hero is defined per page, so it lives here too).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero banner + KPI strip ── */
.vs-hero[b-8sxb9hhbkf] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 24px 28px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    flex-wrap: wrap;
}
.vs-hero[b-8sxb9hhbkf]::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(200, 168, 75, .15) 0%, transparent 70%);
    pointer-events: none;
}
.vs-hero-left[b-8sxb9hhbkf] { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; min-width: 240px; }
.vs-hero-stats[b-8sxb9hhbkf] { flex: 1; display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.vs-hero-icon[b-8sxb9hhbkf] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200, 168, 75, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vs-hero-icon svg[b-8sxb9hhbkf] {
    width: 26px;
    height: 26px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.vs-hero-eyebrow[b-8sxb9hhbkf] { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.vs-hero-title[b-8sxb9hhbkf] { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; }
.vs-hero-sub[b-8sxb9hhbkf] { font-size: 13px; color: rgba(255, 255, 255, .55); margin-top: 3px; }
.vs-hero-stat[b-8sxb9hhbkf] { padding: 0 18px; text-align: center; flex: 1; min-width: 140px; }
.vs-hero-stat:first-child[b-8sxb9hhbkf] { padding-left: 0; }
.vs-hero-val[b-8sxb9hhbkf] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.1; }
.vs-hero-key[b-8sxb9hhbkf] { font-size: 11px; color: rgba(255, 255, 255, .5); margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }
.vs-hero-sub2[b-8sxb9hhbkf] { font-size: 11px; color: rgba(255, 255, 255, .35); margin-top: 1px; line-height: 1.2; }
.vs-hero-divider[b-8sxb9hhbkf] { width: 1px; height: 50px; background: rgba(255, 255, 255, .12); flex-shrink: 0; margin: 0 6px; }
@media (max-width: 1100px) {
    .vs-hero-title[b-8sxb9hhbkf] { font-size: 18px; }
    .vs-hero-val[b-8sxb9hhbkf] { font-size: 18px; }
    .vs-hero-stat[b-8sxb9hhbkf] { padding: 0 14px; }
}
@media (max-width: 900px) { .vs-hero[b-8sxb9hhbkf] { padding: 20px; gap: 16px; } }
@media (max-width: 600px) { .vs-hero[b-8sxb9hhbkf] { padding: 16px; gap: 12px; } .vs-hero-title[b-8sxb9hhbkf] { font-size: 16px; } }

/* ── Cards ── */
.set-grid[b-8sxb9hhbkf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}
.set-card[b-8sxb9hhbkf] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 16px;
    box-shadow: 0 1px 2px rgba(13, 33, 55, .04);
    margin-bottom: 18px;
}
.set-grid .set-card[b-8sxb9hhbkf] { margin-bottom: 0; }

.set-card-head[b-8sxb9hhbkf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.set-card-icon[b-8sxb9hhbkf] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-icon);
    color: var(--navy);
}
.set-card-icon svg[b-8sxb9hhbkf] { width: 19px; height: 19px; }
.set-card-titles[b-8sxb9hhbkf] { flex: 1; min-width: 0; }
.set-card-title[b-8sxb9hhbkf] { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.set-card-sub[b-8sxb9hhbkf] { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ── Facility rules table ── */
.set-table[b-8sxb9hhbkf] { width: 100%; border-collapse: collapse; font-size: 13px; }
.set-table thead th[b-8sxb9hhbkf] {
    text-align: left;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-subtle);
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.set-table th.set-th-r[b-8sxb9hhbkf], .set-table td.set-td-r[b-8sxb9hhbkf] { text-align: right; }
.set-table td[b-8sxb9hhbkf] { padding: 11px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); color: var(--text); }
.set-table tbody tr:last-child td[b-8sxb9hhbkf] { border-bottom: none; }
.set-table tbody tr:hover[b-8sxb9hhbkf] { background: var(--bg); }
.set-fac[b-8sxb9hhbkf] { font-weight: 700; color: var(--navy); }
.set-code[b-8sxb9hhbkf] {
    margin-left: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: var(--text-subtle);
    background: var(--bg-icon);
    border-radius: 5px; padding: 2px 6px;
    vertical-align: middle;
}
.set-td-r[b-8sxb9hhbkf] { color: var(--text-muted); font-weight: 600; }

/* ── Key/value rows ── */
.set-rows[b-8sxb9hhbkf] { display: flex; flex-direction: column; }
.set-row[b-8sxb9hhbkf] {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
    font-size: 13px;
}
.set-row:last-child[b-8sxb9hhbkf] { border-bottom: none; }
.set-key[b-8sxb9hhbkf] { color: var(--text-muted); flex-shrink: 0; }
.set-val[b-8sxb9hhbkf] { color: var(--text); font-weight: 600; text-align: right; display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.set-val.mono[b-8sxb9hhbkf] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.set-val.set-val-wrap[b-8sxb9hhbkf] { flex-wrap: wrap; white-space: normal; text-align: right; }

/* Status pills */
.set-pill[b-8sxb9hhbkf] { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; }
.pill-ok[b-8sxb9hhbkf] { background: var(--green-bg); color: var(--green); }

/* Notes + cross-links */
.set-note[b-8sxb9hhbkf] {
    margin-top: 12px;
    font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
    background: var(--bg); border: 1px dashed var(--border); border-radius: 9px; padding: 9px 11px;
}
.set-links[b-8sxb9hhbkf] { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.set-card-head .set-link[b-8sxb9hhbkf] { flex-shrink: 0; margin-left: auto; padding-top: 0; border: none; }
.set-link[b-8sxb9hhbkf] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--navy); text-decoration: none; }
.set-link:hover[b-8sxb9hhbkf] { color: var(--accent); }
.set-link-arrow[b-8sxb9hhbkf] { transition: transform .14s ease; }
.set-link:hover .set-link-arrow[b-8sxb9hhbkf] { transform: translateX(3px); }

/* ── Footer ── */
.set-foot[b-8sxb9hhbkf] { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11.5px; line-height: 1.9; color: var(--text-subtle); }

/* ── Loading / error states ── */
.set-state[b-8sxb9hhbkf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    min-height: 320px;
    padding: 40px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    /* Same gap the card grid leaves, so the state never sits flush against the Session card below it. */
    margin-bottom: 18px;
}
.set-state-title[b-8sxb9hhbkf] { font-size: 15px; font-weight: 700; color: var(--navy); }
.set-state-text[b-8sxb9hhbkf] { font-size: 13px; color: var(--text-muted); max-width: 420px; line-height: 1.5; }
.set-spinner[b-8sxb9hhbkf] {
    width: 34px; height: 34px;
    border: 3px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: setSpin-b-8sxb9hhbkf .8s linear infinite;
}
@keyframes setSpin-b-8sxb9hhbkf { to { transform: rotate(360deg); } }
.set-retry[b-8sxb9hhbkf] {
    margin-top: 4px;
    font-size: 13px; font-weight: 650;
    color: #fff; background: var(--accent);
    border: none; border-radius: 9px;
    padding: 9px 18px; cursor: pointer;
    transition: background .14s ease;
}
.set-retry:hover[b-8sxb9hhbkf] { background: var(--accent-hover); }

@media (max-width: 900px) { .set-grid[b-8sxb9hhbkf] { grid-template-columns: 1fr; } }


/* ── Session / sign out ─────────────────────────────────── */
.set-session[b-8sxb9hhbkf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.set-session-left[b-8sxb9hhbkf] { display: flex; align-items: center; gap: 0.85rem; }

.set-session-icon[b-8sxb9hhbkf] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: var(--bg-icon);
    color: var(--navy);
}

.set-session-icon svg[b-8sxb9hhbkf] { width: 1.25rem; height: 1.25rem; }
.set-session-title[b-8sxb9hhbkf] { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.set-session-sub[b-8sxb9hhbkf] { color: var(--text-subtle); font-size: 0.8rem; }

.set-session-right[b-8sxb9hhbkf] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.set-session-ask[b-8sxb9hhbkf] { color: var(--text); font-size: 0.85rem; font-weight: 600; }

.set-signout[b-8sxb9hhbkf],
.set-signout-yes[b-8sxb9hhbkf],
.set-signout-no[b-8sxb9hhbkf] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 10px;
    padding: 0.55rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}

.set-signout svg[b-8sxb9hhbkf] { width: 1.05rem; height: 1.05rem; }
.set-signout[b-8sxb9hhbkf] { background: var(--red-bg); color: var(--red); border-color: #e6c4c4; }
.set-signout:hover[b-8sxb9hhbkf] { filter: brightness(0.97); }

.set-signout-yes[b-8sxb9hhbkf] { background: var(--red); color: #fff; }
.set-signout-yes:hover:not(:disabled)[b-8sxb9hhbkf] { filter: brightness(1.05); }

.set-signout-no[b-8sxb9hhbkf] { background: transparent; color: var(--text-subtle); border-color: var(--border); }
.set-signout-no:hover:not(:disabled)[b-8sxb9hhbkf] { border-color: var(--accent); color: var(--navy); }

.set-signout-yes:disabled[b-8sxb9hhbkf],
.set-signout-no:disabled[b-8sxb9hhbkf] { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 560px) {
    .set-session[b-8sxb9hhbkf] { flex-direction: column; align-items: stretch; }
    .set-session-right[b-8sxb9hhbkf] { justify-content: flex-end; }
}


/* ── Skeleton helpers ───────────────────────────────────────
   The page keeps its shell (topbar + hero + card frames/headers) visible at all
   times; only the data regions swap in the shared <Skeleton> shimmer while loading.
   These helpers center hero-stat placeholders and right-align table-cell ones. */
.set-sk-center[b-8sxb9hhbkf] { margin-left: auto; margin-right: auto; }
.set-sk-gap[b-8sxb9hhbkf] { margin-top: 6px; }
.set-sk-right[b-8sxb9hhbkf] { margin-left: auto; }

/* ── Responsive hero (mobile/tablet <=768px). Desktop untouched. ── */
@media (max-width: 768px) {
    .vs-hero[b-8sxb9hhbkf] { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 18px; padding: 16px 16px 18px; }
    .vs-hero-left[b-8sxb9hhbkf] { flex: none; min-width: 0; gap: 14px; }
    .vs-hero-stats[b-8sxb9hhbkf] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; width: 100%; flex: none; }
    .vs-hero-stat[b-8sxb9hhbkf] { min-width: 0; padding: 0; text-align: left; }
    .vs-hero-divider[b-8sxb9hhbkf] { display: none; }
    .vs-hero-icon[b-8sxb9hhbkf] { display: none; }
    .vs-hero-sub2[b-8sxb9hhbkf] { display: none; }
}


/* ── Two-factor entry point (bottom-right of the Security & Access Policy card) ──
   The security card lists read-only policy rows; two-factor is an ACTION on your own account, so it sits
   here as a button that opens a dialog instead of occupying a card of its own. */
.set-links-split[b-8sxb9hhbkf] {
    align-items: center;
    justify-content: space-between;
}

.set-links-group[b-8sxb9hhbkf] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    min-width: 0;
}

.set-2fa-btn[b-8sxb9hhbkf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--navy);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.set-2fa-btn:hover[b-8sxb9hhbkf] {
    background: var(--bg-icon);
    box-shadow: 0 3px 10px rgba(13, 33, 55, .08);
}

.set-2fa-btn:focus-visible[b-8sxb9hhbkf] {
    outline: 2px solid var(--navy-3);
    outline-offset: 2px;
}

.set-2fa-btn svg[b-8sxb9hhbkf] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.set-2fa-state[b-8sxb9hhbkf] {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.set-2fa-state.is-on[b-8sxb9hhbkf] { background: var(--green-bg); color: var(--green); }
.set-2fa-state.is-off[b-8sxb9hhbkf] { background: var(--bg-icon); color: var(--text-subtle); }

@media (max-width: 768px) {
    .set-links-split[b-8sxb9hhbkf] { align-items: flex-start; }
    .set-2fa-btn[b-8sxb9hhbkf] { margin-left: 0; width: 100%; justify-content: center; }
}


/* ── Two-factor dialog header (shield mark + titles, government-formal) ── */
.set-2fa-modal-head[b-8sxb9hhbkf] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.set-2fa-modal-icon[b-8sxb9hhbkf] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    border: 1px solid color-mix(in srgb, var(--navy) 14%, transparent);
    background: var(--bg-icon);
    color: var(--navy);
}

.set-2fa-modal-icon svg[b-8sxb9hhbkf] { width: 26px; height: 26px; }

.set-2fa-modal-titles[b-8sxb9hhbkf] { min-width: 0; flex: 1; }

/* Separates the shared explanatory rows above from the panel's own controls. */
.set-2fa-modal-panel[b-8sxb9hhbkf] { margin-top: 16px; }

@media (max-width: 768px) {
    .set-2fa-modal-icon[b-8sxb9hhbkf] { width: 38px; height: 38px; }
    .set-2fa-modal-icon svg[b-8sxb9hhbkf] { width: 20px; height: 20px; }
}

/* A policy row an Administrator cannot act on: stated, but plainly not a link — no pointer, no hover, no
   arrow, and announced as disabled to assistive technology. */
.set-link-disabled[b-8sxb9hhbkf] {
    color: var(--text-muted);
    cursor: default;
    pointer-events: none;
    text-decoration: none;
    opacity: .75;
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.vs-hero[b-8sxb9hhbkf] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .vs-hero[b-8sxb9hhbkf]::before,
    .vs-hero[b-8sxb9hhbkf]::after {
        display: none;
    }

.vs-hero-icon[b-8sxb9hhbkf] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .vs-hero-icon svg[b-8sxb9hhbkf] {
        stroke: var(--navy) !important;
    }

.vs-hero-eyebrow[b-8sxb9hhbkf] {
    color: var(--text-tertiary);
}

.vs-hero-title[b-8sxb9hhbkf],
.vs-hero-val[b-8sxb9hhbkf] {
    color: var(--navy);
}

.vs-hero-val[b-8sxb9hhbkf] {
    font-variant-numeric: tabular-nums;
}

.vs-hero-sub[b-8sxb9hhbkf],
.vs-hero-sub2[b-8sxb9hhbkf] {
    color: var(--text-tertiary);
}

.vs-hero-key[b-8sxb9hhbkf] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.vs-hero-divider[b-8sxb9hhbkf] {
    background: var(--border);
}

.vs-hero-progress[b-8sxb9hhbkf] {
    height: 3px;
    background: var(--surface-muted);
}

.vs-hero-progress-fill[b-8sxb9hhbkf] {
    background: var(--accent);
}

/* V3 consistency: one quiet civic-blue icon tile for every settings card (status colour stays on the status itself). */
.set-card-icon[b-8sxb9hhbkf] {
    background: var(--accent-soft);
    color: var(--civic-panel);
}
/* /Components/Pages/Menus/Terminal.razor.rz.scp.css */
.trm2-meta[b-phfx0txl6q] { display: inline-flex; align-items: center; gap: 8px; }
.trm2-toolbar[b-phfx0txl6q] { display: flex; justify-content: flex-end; margin: 16px 0; }
.trm2-notice[b-phfx0txl6q] { margin: 0 0 16px; }
.trm2-gap[b-phfx0txl6q] { margin-top: 16px; }
.trm2-src[b-phfx0txl6q] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.trm2-actions[b-phfx0txl6q] { text-align: right; }

.trm2-map[b-phfx0txl6q] {
    box-sizing: border-box;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--navy);
    font: inherit;
    font-size: 0.8125rem;
}

.trm2-map:focus-visible[b-phfx0txl6q] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Recent collections are bounded: about five rows show, the rest scroll under a held heading. */
.trm2-scroll[b-phfx0txl6q] { max-height: 21rem; overflow-y: auto; overscroll-behavior: contain; }
.trm2-scroll thead th[b-phfx0txl6q] { position: sticky; top: 0; z-index: 2; background: var(--surface-muted); }

.v3-table tbody th[b-phfx0txl6q] { background: transparent; font-weight: 600; text-align: left; }
/* /Components/Pages/Menus/Transactions.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   Transactions.razor.css — cross-facility transparency feed
   Tokens from app.css. Topbar/.content-area/.section-card come from the shell.
══════════════════════════════════════════════════════════════════════ */

/* ── Controls row: facility filter + day navigator + refresh ── */
.txn-controls[b-yp3st5a2x3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 0;
    flex-wrap: wrap;
}

.txn-segment[b-yp3st5a2x3] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 11px;
    padding: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.txn-seg-tab[b-yp3st5a2x3] {
    min-height: 34px;
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 12.5px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.txn-seg-tab:hover[b-yp3st5a2x3] {
    background: rgba(255, 255, 255, .72);
    border-color: color-mix(in srgb, var(--border) 72%, transparent);
    color: var(--navy);
}

.txn-seg-tab:focus-visible[b-yp3st5a2x3] {
    outline: 2px solid color-mix(in srgb, var(--gold) 70%, white);
    outline-offset: 2px;
}

.txn-seg-tab.active[b-yp3st5a2x3] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 13px rgba(9, 31, 52, .14);
}

.txn-refresh[b-yp3st5a2x3] {
    margin-left: auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-subtle);
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.txn-refresh:hover[b-yp3st5a2x3] { background: var(--bg); color: var(--navy); }

.txn-refresh svg[b-yp3st5a2x3] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Day navigator ── */
.txn-daynav[b-yp3st5a2x3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.txn-navbtn[b-yp3st5a2x3] {
    width: 38px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--navy);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.txn-navbtn:hover:not(:disabled)[b-yp3st5a2x3] { background: var(--bg-icon); border-color: color-mix(in srgb, var(--navy) 30%, var(--border)); }
.txn-navbtn:active:not(:disabled)[b-yp3st5a2x3] { transform: scale(.94); }
.txn-navbtn:disabled[b-yp3st5a2x3] { opacity: .4; cursor: not-allowed; }
.txn-navbtn svg[b-yp3st5a2x3] { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Central date chip — clickable, opens native picker via transparent overlay */
.txn-datebox[b-yp3st5a2x3] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 44px;
    padding: 0 16px;
    min-width: 210px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-card) 0%, #fbfdff 100%);
    box-shadow: 0 1px 3px rgba(13,33,55,.05);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.txn-datebox:hover[b-yp3st5a2x3] { border-color: color-mix(in srgb, var(--navy) 38%, var(--border)); box-shadow: 0 4px 12px rgba(13,33,55,.1); }
.txn-datebox.is-today[b-yp3st5a2x3] { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: linear-gradient(180deg, var(--green-bg) 0%, #f3faf6 100%); }

.txn-datebox-icon[b-yp3st5a2x3] {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent);
    color: #fff;
}
.txn-datebox.is-today .txn-datebox-icon[b-yp3st5a2x3] { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.txn-datebox-icon svg[b-yp3st5a2x3] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.txn-datebox-text[b-yp3st5a2x3] { display: flex; flex-direction: column; line-height: 1.15; }
.txn-datebox-main[b-yp3st5a2x3] { font-size: 13.5px; font-weight: 800; color: var(--navy); }
.txn-datebox.is-today .txn-datebox-main[b-yp3st5a2x3] { color: var(--green); }
.txn-datebox-sub[b-yp3st5a2x3] { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 1px; }
.txn-datebox-chev[b-yp3st5a2x3] { width: 14px; height: 14px; margin-left: auto; fill: none; stroke: var(--text-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.txn-datebox-input[b-yp3st5a2x3] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: none; }

/* Jump to today */
.txn-jump-today[b-yp3st5a2x3] {
    width: 44px;
    height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
    background: color-mix(in srgb, var(--gold) 12%, var(--bg-card));
    color: #8a6d1f; cursor: pointer;
    transition: background .15s;
}
.txn-jump-today:hover[b-yp3st5a2x3] { background: color-mix(in srgb, var(--gold) 22%, var(--bg-card)); }
.txn-jump-today svg[b-yp3st5a2x3] { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Table ── */
.txn-card[b-yp3st5a2x3] { padding: 0; overflow: hidden; }
.txn-table[b-yp3st5a2x3] { width: 100%; border-collapse: collapse; font-size: 13px; }
.txn-table th[b-yp3st5a2x3] { padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--border); text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; }
.txn-table td[b-yp3st5a2x3] { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--navy); vertical-align: middle; }
.txn-table tbody tr:last-child td[b-yp3st5a2x3] { border-bottom: none; }
.txn-table tbody tr:hover[b-yp3st5a2x3] { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.txn-num[b-yp3st5a2x3] { text-align: left; white-space: nowrap; }

.txn-when[b-yp3st5a2x3] { white-space: nowrap; }
.txn-date[b-yp3st5a2x3] { font-weight: 600; }
.txn-time[b-yp3st5a2x3] { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.txn-party[b-yp3st5a2x3] { font-weight: 600; }
.txn-kind[b-yp3st5a2x3] { font-weight: 600; }
.txn-ref[b-yp3st5a2x3] { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.txn-amount[b-yp3st5a2x3] { font-weight: 800; color: var(--green); white-space: nowrap; }
.txn-or[b-yp3st5a2x3] { color: var(--text-muted); white-space: nowrap; }

/* ── Facility badge ── */
.txn-fac-badge[b-yp3st5a2x3] { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; background: var(--bg-icon); color: var(--navy); border: 1px solid var(--border); }
.fac-npm[b-yp3st5a2x3] { background: #e6f0fb; color: #1e4e8c; border-color: #cfe0f4; }
.fac-tcc[b-yp3st5a2x3] { background: #e9f3ee; color: #1f6b48; border-color: #cfe6da; }
.fac-ncc[b-yp3st5a2x3] { background: #fdf3e3; color: #9a6b18; border-color: #f3e2c3; }
.fac-bbq[b-yp3st5a2x3] { background: #fbecea; color: #9a3b2c; border-color: #f3d4cf; }
.fac-ice[b-yp3st5a2x3] { background: #e8f4f7; color: #1f6a7d; border-color: #cfe7ec; }
.fac-slh[b-yp3st5a2x3] { background: #f1ecf7; color: #5a3f87; border-color: #ddd1ee; }
.fac-trm[b-yp3st5a2x3] { background: #eef0f3; color: #3a4a5e; border-color: #dde2e8; }
.fac-tpm[b-yp3st5a2x3] { background: #eef6ea; color: #44712b; border-color: #d8e9cf; }

/* ── Status badge ── */
.txn-status[b-yp3st5a2x3] { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.txn-status.paid[b-yp3st5a2x3] { background: var(--green-bg); color: var(--green); }
.txn-status.partial[b-yp3st5a2x3] { background: color-mix(in srgb, var(--gold) 18%, var(--bg-card)); color: #9a6b18; }

/* ── Empty / loading ── */
.txn-empty[b-yp3st5a2x3] { padding: 56px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.txn-empty-ic[b-yp3st5a2x3] { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--bg-icon); color: var(--text-muted); }
.txn-empty-ic svg[b-yp3st5a2x3] { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.txn-empty-title[b-yp3st5a2x3] { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.txn-empty-text[b-yp3st5a2x3] { font-size: 12.5px; color: var(--text-muted); max-width: 380px; margin: 0 auto; line-height: 1.5; }

@media (max-width: 860px) {
    .txn-table .txn-ref[b-yp3st5a2x3], .txn-table th:nth-child(4)[b-yp3st5a2x3], .txn-table td:nth-child(4)[b-yp3st5a2x3] { display: none; }
}



/* ── Grouped slaughter rows (expandable) ─────────────────────── */
.txn-grouprow[b-yp3st5a2x3] {
    cursor: pointer;
}

.txn-grouprow:hover[b-yp3st5a2x3] {
    background: color-mix(in srgb, var(--gold) 6%, transparent);
}

.txn-chev[b-yp3st5a2x3] {
    width: 12px;
    height: 12px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    margin-right: 5px;
    transition: transform 0.18s ease;
}

.txn-chev.open[b-yp3st5a2x3] {
    transform: rotate(180deg);
}

.txn-subrow[b-yp3st5a2x3] {
    background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.txn-subrow td[b-yp3st5a2x3] {
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: none;
}

.txn-subref[b-yp3st5a2x3] {
    font-size: 12px;
    color: var(--text-muted);
    padding-left: 17px;
    position: relative;
}

.txn-subref[b-yp3st5a2x3]::before {
    content: "└";
    position: absolute;
    left: 2px;
    color: var(--border-subtle, #c8d8e4);
}

.txn-subamount[b-yp3st5a2x3] {
    font-size: 12px;
    color: var(--text-subtle);
    font-weight: 500;
}

/* Recorded-by column — subtle, secondary to the money columns. */
.txn-recorder[b-yp3st5a2x3] { color: var(--text-subtle); font-size: 12px; white-space: nowrap; }

/* Loading table mirrors the real transaction feed and prevents a whole-panel shimmer jump. */
.txn-loading-table tbody tr[b-yp3st5a2x3] {
    pointer-events: none;
}

.txn-loading-table tbody tr:hover[b-yp3st5a2x3] {
    background: transparent;
}

.txn-loading-stack[b-yp3st5a2x3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}



/* ── Responsive controls row (mobile/tablet <=768px). Desktop untouched. ── */
@media (max-width: 768px) {
    .txn-segment[b-yp3st5a2x3] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 100%;
    }

        .txn-segment[b-yp3st5a2x3]::-webkit-scrollbar { display: none; }

    .txn-seg-tab[b-yp3st5a2x3] { flex-shrink: 0; }

    .txn-controls > div[b-yp3st5a2x3] {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* The "Today · <date>" day navigator + refresh button: the datebox's 210px min-width plus two 38px
       nav buttons and the 44px refresh button exceed a phone's width, pushing refresh onto its own row.
       Let the datebox flex/shrink and tighten the buttons so everything fits in one row. */
    .txn-daynav[b-yp3st5a2x3] {
        flex: 1;
        min-width: 0;
        gap: 6px;
    }

    .txn-datebox[b-yp3st5a2x3] {
        min-width: 0;
        flex: 1;
        padding: 0 10px;
        gap: 8px;
    }

    .txn-datebox-sub[b-yp3st5a2x3] {
        display: none;
    }

    .txn-navbtn[b-yp3st5a2x3] {
        width: 34px;
        flex-shrink: 0;
    }

    .txn-refresh[b-yp3st5a2x3] {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }
}

/* ── V3 (2026-10-02): unified activity — scope rail + source selector on the left, day navigator on the right ── */
.txn-filters[b-yp3st5a2x3],
.txn-nav[b-yp3st5a2x3] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.txn-segment[b-yp3st5a2x3] {
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
    overflow: hidden;
}

.txn-seg-tab[b-yp3st5a2x3] {
    min-height: 36px;
    border-radius: 0;
    white-space: nowrap;
}

    .txn-seg-tab + .txn-seg-tab[b-yp3st5a2x3] {
        border-left: 1px solid var(--border);
    }

    .txn-seg-tab.active[b-yp3st5a2x3] {
        background: var(--accent);
        color: #ffffff;
        box-shadow: none;
    }

.txn-source[b-yp3st5a2x3] {
    min-width: 200px;
}

.txn-scroll[b-yp3st5a2x3] {
    overflow-x: auto;
}

    .txn-scroll:focus-visible[b-yp3st5a2x3] {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

.txn-source-name[b-yp3st5a2x3] {
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}

.txn-source-name + .txn-fac-badge[b-yp3st5a2x3] {
    margin-top: 3px;
}

.txn-fac-badge[b-yp3st5a2x3] {
    padding: 1px 7px;
    border-color: var(--border);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-weight: 600;
}

.txn-expand[b-yp3st5a2x3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    vertical-align: middle;
    cursor: pointer;
}

    .txn-expand:hover[b-yp3st5a2x3] {
        border-color: var(--accent);
    }

    .txn-expand:focus-visible[b-yp3st5a2x3] {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

    .txn-expand .txn-chev[b-yp3st5a2x3] {
        margin: 0;
    }

.txn-grouprow[b-yp3st5a2x3] {
    cursor: default;
}

    .txn-grouprow:hover[b-yp3st5a2x3] {
        background: var(--surface-hover);
    }

.txn-amount[b-yp3st5a2x3] {
    color: var(--navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.txn-net[b-yp3st5a2x3] {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.txn-or[b-yp3st5a2x3] {
    color: var(--text);
}

    .txn-or[b-yp3st5a2x3]  .ic {
        margin-right: 6px;
    }

.txn-status.corrected[b-yp3st5a2x3] {
    background: var(--red-bg);
    color: var(--red);
}

.txn-correction .txn-subref[b-yp3st5a2x3] {
    color: var(--red);
}

.txn-retry[b-yp3st5a2x3] {
    margin-top: 12px;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .txn-retry:focus-visible[b-yp3st5a2x3] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.txn-truncated[b-yp3st5a2x3] {
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}

@media (max-width: 1100px) {
    .txn-filters[b-yp3st5a2x3] {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .txn-filters[b-yp3st5a2x3] {
        flex-direction: column;
        align-items: stretch;
    }

    .txn-source[b-yp3st5a2x3] {
        min-width: 0;
    }
}

/* ── StallTrack Reference Code (SRC) is the primary identity of a canonical collection ── */
.txn-src[b-yp3st5a2x3] {
    display: block;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.txn-src-none[b-yp3st5a2x3] {
    font-weight: 500;
    color: var(--text-muted);
}

.txn-physical[b-yp3st5a2x3] {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.txn-search[b-yp3st5a2x3] {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
}

.txn-search-input[b-yp3st5a2x3] {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 0 34px 0 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

    .txn-search-input:focus-visible[b-yp3st5a2x3] {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

@media (max-width: 768px) {
    .txn-search[b-yp3st5a2x3] {
        min-width: 0;
        width: 100%;
    }
}

/* One desktop working toolbar. Date navigation and Refresh always travel together. */
.txn-controls[b-yp3st5a2x3] { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; }
.txn-segment[b-yp3st5a2x3] { flex: 0 0 auto; }
.txn-seg-tab[b-yp3st5a2x3] { padding-inline: 10px; min-height: 42px; }
.txn-source[b-yp3st5a2x3] { flex: 0 0 130px; min-width: 0; }
.txn-source[b-yp3st5a2x3]  .fh-dd { width: 100%; }
.txn-source[b-yp3st5a2x3]  .fh-dd-trigger { width: 100%; min-width: 0; min-height: 44px; }
.txn-source[b-yp3st5a2x3]  .fh-dd-val { overflow: hidden; text-overflow: ellipsis; }
.txn-nav[b-yp3st5a2x3] { flex: 0 0 auto; gap: 6px; }
.txn-daynav[b-yp3st5a2x3] { gap: 6px; }
.txn-datebox[b-yp3st5a2x3] { min-width: 0; padding-inline: 10px; gap: 6px; }
.txn-datebox-icon[b-yp3st5a2x3] { width: 24px; height: 24px; }
.txn-refresh[b-yp3st5a2x3] { margin-left: 0; }
.txn-search[b-yp3st5a2x3] { flex: 1 1 auto; min-width: 0; }
.txn-search-input[b-yp3st5a2x3] { min-width: 0; min-height: 44px; font-size: 13px; }

.txn-search-icon[b-yp3st5a2x3] { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--text-tertiary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.txn-search-input:focus-visible[b-yp3st5a2x3] { border-color: var(--accent); }
.txn-search-clear[b-yp3st5a2x3] { position: absolute; right: 6px; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: -14px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 18px; line-height: 1; cursor: pointer; }
.txn-search-clear:hover[b-yp3st5a2x3] { background: var(--accent-soft); color: var(--accent); }
.txn-search-clear:focus-visible[b-yp3st5a2x3] { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 1100px) {
    .txn-controls[b-yp3st5a2x3] { flex-wrap: wrap; }
    .txn-search[b-yp3st5a2x3] { flex: 1 1 220px; }
}

@media (max-width: 768px) {
    .txn-controls[b-yp3st5a2x3] { align-items: stretch; }
    .txn-source[b-yp3st5a2x3] { flex-basis: 100%; }
    .txn-nav[b-yp3st5a2x3] { flex: 1 1 100%; }
    .txn-daynav[b-yp3st5a2x3] { flex: 1; min-width: 0; }
    .txn-datebox[b-yp3st5a2x3] { flex: 1; }
    .txn-search[b-yp3st5a2x3] { flex-basis: 100%; }
}
/* /Components/Pages/Menus/Transportation.razor.rz.scp.css */
.tp-meta[b-hehh2jc48t] { display: inline-flex; align-items: center; gap: 8px; }

.tp-toolbar[b-hehh2jc48t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 16px 0;
}

.tp-status[b-hehh2jc48t] { margin: 0; font-size: 0.875rem; color: var(--text-secondary); }
.tp-status strong[b-hehh2jc48t] { color: var(--navy); }
.tp-notice[b-hehh2jc48t] { margin: 0 0 16px; }

/* Today's list is bounded: about five rows show, the rest scroll inside the panel under a held heading and total. */
.tp-scroll[b-hehh2jc48t] { max-height: 21rem; overflow-y: auto; overscroll-behavior: contain; }
.tp-scroll thead th[b-hehh2jc48t] { position: sticky; top: 0; z-index: 2; background: var(--surface-muted); }
.tp-scroll tfoot td[b-hehh2jc48t] { position: sticky; bottom: 0; z-index: 1; background: var(--surface-muted); border-top: 1px solid var(--border); }
/* /Components/Pages/Menus/VegetableFruit.razor.rz.scp.css */
.vf-mode[b-cdwzrz1z4f] { display: inline-flex; flex-shrink: 0; width: fit-content; gap: 2px; padding: 2px; margin: 0; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px; }
.vf-mode button[b-cdwzrz1z4f] { border: 1px solid transparent; border-radius: 6px; background: transparent; min-height: 30px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--text-secondary); cursor: pointer; }
.vf-mode button.selected[b-cdwzrz1z4f] { background: var(--surface); color: var(--accent); border-color: var(--border-strong); }
.vf-mode button:focus-visible[b-cdwzrz1z4f] { outline: 2px solid var(--accent); outline-offset: 2px; }
.vf-daily-toolbar[b-cdwzrz1z4f] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vf-search[b-cdwzrz1z4f] { flex: 1 1 180px; min-width: 0; max-width: 350px; }
.vf-search input[b-cdwzrz1z4f] { width: 100%; min-width: 0; }
.content-area[b-cdwzrz1z4f]  .toolbar-unified:has(.vf-mode) .search-box { min-width: 0; }
.content-area[b-cdwzrz1z4f]  .toolbar-unified:has(.vf-mode) { justify-content: flex-start; }
[hidden][b-cdwzrz1z4f] { display: none !important; }
/* /Components/Pages/Menus/Vendor.razor.rz.scp.css */
/* ══════════════════════════════════════════
   VENDOR HERO BANNER
══════════════════════════════════════════ */

.loading-state[b-i2syhpms25] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-i2syhpms25] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: spin-b-i2syhpms25 0.8s linear infinite;
}

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

.loading-state p[b-i2syhpms25] {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.vs-hero[b-i2syhpms25] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 28px 32px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    flex-wrap: wrap;
}

    .vs-hero[b-i2syhpms25]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(200,168,75,.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .vs-hero.vegetables-hero[b-i2syhpms25] {
        background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
    }

        .vs-hero.vegetables-hero[b-i2syhpms25]::before {
            background: radial-gradient(circle, rgba(34, 197, 94, 0.2) 0%, transparent 70%);
        }

    .vs-hero.meat-hero[b-i2syhpms25] {
        background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    }

        .vs-hero.meat-hero[b-i2syhpms25]::before {
            background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, transparent 70%);
        }

.vs-hero-left[b-i2syhpms25] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 260px;
}

.vs-hero-icon[b-i2syhpms25] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .vs-hero-icon svg[b-i2syhpms25] {
        width: 26px;
        height: 26px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.vs-hero.vegetables-hero .vs-hero-icon[b-i2syhpms25] {
    background: rgba(34, 197, 94, 0.18);
}

    .vs-hero.vegetables-hero .vs-hero-icon svg[b-i2syhpms25] {
        stroke: #22c55e;
    }

.vs-hero.meat-hero .vs-hero-icon[b-i2syhpms25] {
    background: rgba(239, 68, 68, 0.18);
}

    .vs-hero.meat-hero .vs-hero-icon svg[b-i2syhpms25] {
        stroke: #ef4444;
    }

.vs-hero-eyebrow[b-i2syhpms25] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.vs-hero.vegetables-hero .vs-hero-eyebrow[b-i2syhpms25] {
    color: #86efac;
}

.vs-hero.meat-hero .vs-hero-eyebrow[b-i2syhpms25] {
    color: #fca5a5;
}

.vs-hero-title[b-i2syhpms25] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.vs-hero-sub[b-i2syhpms25] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.vs-hero-stats[b-i2syhpms25] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.vs-hero-stat[b-i2syhpms25] {
    padding: 0 24px;
    text-align: center;
}

    .vs-hero-stat:first-child[b-i2syhpms25] {
        padding-left: 0;
    }

.vs-hero-val[b-i2syhpms25] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.vs-hero-key[b-i2syhpms25] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.vs-hero-sub2[b-i2syhpms25] {
    font-size: 11px;
    color: rgba(255,255,255,.4);
    margin-top: 3px;
}

.vs-hero-divider[b-i2syhpms25] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.vs-hero-progress[b-i2syhpms25] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.vs-hero-progress-fill[b-i2syhpms25] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width .5s ease;
}

.vs-hero.vegetables-hero .vs-hero-progress-fill[b-i2syhpms25] {
    background: linear-gradient(90deg, #22c55e, #86efac);
}

.vs-hero.meat-hero .vs-hero-progress-fill[b-i2syhpms25] {
    background: linear-gradient(90deg, #ef4444, #fca5a5);
}

/* ══════════════════════════════════════════
   FACILITY DROPDOWN SELECTOR
══════════════════════════════════════════ */

input[type=number][b-i2syhpms25]::-webkit-outer-spin-button,
input[type=number][b-i2syhpms25]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number][b-i2syhpms25] {
    -moz-appearance: textfield;
}




/* ══════════════════════════════════════════
   TOTAL STALLS KPI
══════════════════════════════════════════ */
TABLE
══════════════════════════════════════════ */
.vendor-row[b-i2syhpms25] {
    cursor: pointer;
}

.stall-num-cell[b-i2syhpms25] {
    display: flex;
    align-items: center;
}

.stall-num-badge[b-i2syhpms25] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 26px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    font-family: monospace;
}

.occupant-cell[b-i2syhpms25] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.occupant-avatar[b-i2syhpms25] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.occupant-name[b-i2syhpms25] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.occupant-contract[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.or-no[b-i2syhpms25] {
    font-size: 12px;
    font-family: monospace;
    color: var(--text-muted);
}

.section-tag[b-i2syhpms25] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-icon);
    color: var(--navy);
    border: 1px solid var(--border);
}

.status-pill[b-i2syhpms25] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.pill-active[b-i2syhpms25] {
    background: var(--green-bg);
    color: var(--green);
}

.pill-inactive[b-i2syhpms25] {
    background: var(--bg-icon);
    color: var(--text-subtle);
}

/* Daily-collection marker (NPM has no monthly payment status) */
.pill-daily[b-i2syhpms25] {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}

/* Contract / expiry cell */
.contract-cell[b-i2syhpms25] { white-space: nowrap; }
.contract-none[b-i2syhpms25] { color: var(--text-muted); font-size: 12.5px;  }
.contract-term[b-i2syhpms25] { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.contract-exp[b-i2syhpms25] { font-size: 11px; font-weight: 600; margin-top: 2px; }
.contract-exp.exp-ok[b-i2syhpms25] { color: var(--text-muted); }
.contract-exp.exp-soon[b-i2syhpms25] { color: #9a6b18; }
.contract-exp.exp-bad[b-i2syhpms25] { color: var(--red); }



.action-danger svg[b-i2syhpms25] {
    stroke: var(--red) !important;
}

.action-success svg[b-i2syhpms25] {
    stroke: var(--green) !important;
}

/* ══════════════════════════════════════════
   DETAIL MODAL — RIGHT SIDE SLIDE-IN
══════════════════════════════════════════ */
.detail-modal[b-i2syhpms25] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 520px;
    max-width: 90vw;
    margin: 0;
    border-radius: 0;
    animation: slideInRight-b-i2syhpms25 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

@keyframes slideInRight-b-i2syhpms25 {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.detail-modal .detail-body[b-i2syhpms25] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 20px 24px;
}

/* ── Occupant detail (V3): header, one compact summary band, key-value sections, fee rows, footer. Hairlines, no cards. ── */
.dv-header[b-i2syhpms25] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.dv-title[b-i2syhpms25] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--navy);
    overflow-wrap: anywhere;
}

.dv-context[b-i2syhpms25] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.dv-close[b-i2syhpms25] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

    .dv-close:hover[b-i2syhpms25] {
        background: var(--surface-hover);
    }

    .dv-close:focus-visible[b-i2syhpms25] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .dv-close svg[b-i2syhpms25] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

.dv-summary[b-i2syhpms25] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px 20px;
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
}

.dv-summary-item dt[b-i2syhpms25] {
    font-size: 0.75rem;
    color: var(--text-subtle);
}

.dv-summary-item dd[b-i2syhpms25] {
    margin: 2px 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.dv-section[b-i2syhpms25] {
    margin: 0 0 20px;
}

.dv-section-title[b-i2syhpms25] {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.dv-kv[b-i2syhpms25] {
    margin: 0;
}

.dv-kv-row[b-i2syhpms25] {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
}

    .dv-kv-row:last-child[b-i2syhpms25] {
        border-bottom: 1px solid var(--border);
    }

.dv-kv-key[b-i2syhpms25] {
    color: var(--text-secondary);
}

.dv-kv-val[b-i2syhpms25] {
    margin: 0;
    color: var(--navy);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dv-muted[b-i2syhpms25] {
    color: var(--text-muted);
    font-weight: 400;
}

.dv-expiry[b-i2syhpms25] {
    margin-left: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.dv-expiry-ok[b-i2syhpms25] { color: var(--text-muted); }
.dv-expiry-expired[b-i2syhpms25] { color: var(--red); }

.dv-fees[b-i2syhpms25] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dv-fee[b-i2syhpms25] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
}

    .dv-fee:last-child[b-i2syhpms25] {
        border-bottom: 1px solid var(--border);
    }

.dv-fee-name[b-i2syhpms25] {
    font-weight: 600;
    color: var(--navy);
}

.dv-fee-note[b-i2syhpms25] {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-subtle);
}

.dv-fee-amount[b-i2syhpms25] {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.dv-fee-unit[b-i2syhpms25] {
    margin-left: 2px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-subtle);
}

.dv-fee-variable[b-i2syhpms25] {
    font-weight: 500;
    color: var(--text-subtle);
}

.dv-none[b-i2syhpms25] {
    padding: 8px 0;
    font-size: 0.8125rem;
    color: var(--text-subtle);
}

.dv-footer[b-i2syhpms25] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

    .dv-footer .btn-primary[b-i2syhpms25] {
        order: 3;
    }

@media (max-width: 520px) {
    .dv-header[b-i2syhpms25] { padding: 16px; }
    .dv-footer[b-i2syhpms25] { padding: 12px 16px; flex-wrap: wrap; }
    .dv-kv-row[b-i2syhpms25] { grid-template-columns: 1fr; gap: 2px; }
}

/* ══════════════════════════════════════════
   CALENDAR WRAPPER FOR SECTION COLORS
══════════════════════════════════════════ */
.detail-section.vegetables-section[b-i2syhpms25] {
    background: rgba(34, 197, 94, 0.02);
}

.detail-section.meat-section[b-i2syhpms25] {
    background: rgba(239, 68, 68, 0.02);
}

/* ══════════════════════════════════════════
   COMPACT CALENDAR IN RIGHT-SIDE MODAL
══════════════════════════════════════════ */
.detail-modal[b-i2syhpms25]  .cal-grid-wrap {
    grid-auto-rows: 58px;
    gap: 3px;
    row-gap: 3px;
}

.detail-modal[b-i2syhpms25]  .cal-day-hdr {
    padding-bottom: 0;
    margin-bottom: -4px;
}

.detail-modal[b-i2syhpms25]  .cal-grid-fish {
    grid-auto-rows: 68px;
}

.detail-modal[b-i2syhpms25]  .cal-cell {
    padding: 4px;
    border-width: 1.5px;
    border-color: #c5d1dc;
}

.detail-modal[b-i2syhpms25]  .cal-cell.cal-paid {
    border-color: var(--navy);
    border-width: 1.5px;
}

.detail-modal[b-i2syhpms25]  .cal-cell.cal-miss {
    border-color: #c5d1dc;
}

.detail-modal[b-i2syhpms25]  .cal-cell.cal-future {
    border-width: 1.5px;
    border-color: #c5d1dc;
    background: rgba(168, 184, 200, 0.08);
}

.detail-modal[b-i2syhpms25]  .cal-cell.cal-before-contract {
    border-width: 1.5px;
    border-color: #d4a5a5;
    background: rgba(139, 58, 58, 0.04);
}

.detail-modal[b-i2syhpms25]  .cal-overlay-label {
    font-size: 11px;
}

.detail-modal[b-i2syhpms25]  .cal-cell.cal-today {
    border-color: var(--accent) !important;
    border-width: 2px;
}

.detail-modal[b-i2syhpms25]  .cal-cell.cal-today.cal-paid {
    border-color: var(--accent) !important;
    border-width: 2px;
}

.detail-modal[b-i2syhpms25]  .cal-num {
    font-size: 11px;
}

.detail-modal[b-i2syhpms25]  .cal-status-icon {
    width: 14px;
    height: 14px;
}

.detail-modal[b-i2syhpms25]  .cal-status-icon svg {
    width: 8px;
    height: 8px;
}

.detail-modal[b-i2syhpms25]  .cal-kilo-input-inline {
    width: 32px;
    height: 18px;
    font-size: 11px;
    border: none;
    background: transparent;
}

.detail-modal[b-i2syhpms25]  .cal-kilo-label-inline {
    font-size: 7px;
    padding: 1px 4px;
    border-width: 1.5px;
    border-color: #c5d1dc;
}

.detail-modal[b-i2syhpms25]  .cal-footer-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px 0 4px;
}

.detail-modal[b-i2syhpms25]  .cal-sum-item {
    padding: 10px 12px;
    min-height: 60px;
    border-width: 1.5px;
    border-color: #c5d1dc;
}

.detail-modal[b-i2syhpms25]  .cal-sum-val {
    font-size: 16px;
}

.detail-modal[b-i2syhpms25]  .cal-sum-key {
    font-size: 11px;
}

.detail-modal[b-i2syhpms25]  .cal-nav {
    margin-bottom: 10px;
}

.detail-modal[b-i2syhpms25]  .cal-nav-btn {
    border-width: 1.5px;
    border-color: #c5d1dc;
}

.detail-modal[b-i2syhpms25]  .cal-month-label {
    font-size: 12px;
}

.detail-modal[b-i2syhpms25]  .detail-section-title {
    font-size: 11px;
    margin-bottom: 10px;
}

.detail-modal[b-i2syhpms25]  .detail-section-title svg {
    width: 12px;
    height: 12px;
}


/* ══════════════════════════════════════════
   UTILITY PAYMENTS
══════════════════════════════════════════ */
.util-grid[b-i2syhpms25] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.util-month[b-i2syhpms25] {
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    border: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 64px;
    transition: all 0.15s;
    cursor: pointer;
}

    .util-month:hover[b-i2syhpms25] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13,33,55,0.12);
    }

.util-both-paid[b-i2syhpms25] {
    background: var(--green-bg);
    border-color: var(--green);
}

.util-partial-paid[b-i2syhpms25] {
    background: #fff3cd;
    border-color: #ffc107;
}

.util-unpaid[b-i2syhpms25] {
    background: var(--red-bg);
    border-color: #d9b0b0;
}

.util-month-name[b-i2syhpms25] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--navy);
    line-height: 1;
}

.util-month-year[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-subtle);
    font-weight: 600;
    opacity: 0.7;
}

.util-month-status[b-i2syhpms25] {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.util-indicator[b-i2syhpms25] {
    display: inline-block;
}

.util-both-paid .util-indicator[b-i2syhpms25] {
    color: var(--green);
}

.util-partial-paid .util-indicator[b-i2syhpms25] {
    color: #d39e00;
}

.util-unpaid .util-indicator[b-i2syhpms25] {
    color: var(--red);
}

.util-summary[b-i2syhpms25] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.util-stat[b-i2syhpms25] {
    padding: 12px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.15s;
}

    .util-stat:hover[b-i2syhpms25] {
        border-color: var(--accent);
        box-shadow: 0 2px 8px rgba(200,168,75,0.1);
    }

.util-stat-val[b-i2syhpms25] {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.util-stat-key[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

/* ══════════════════════════════════════════
   PAYMENT HISTORY
══════════════════════════════════════════ */
.hist-label[b-i2syhpms25] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* 12-Month history — single row layout */
.hist-grid[b-i2syhpms25] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.hist-month[b-i2syhpms25] {
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    border: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 64px;
    transition: all 0.15s;
}

    .hist-month:hover[b-i2syhpms25] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13,33,55,0.12);
    }

.hist-paid[b-i2syhpms25] {
    background: var(--green-bg);
    border-color: var(--green);
}

.hist-unpaid[b-i2syhpms25] {
    background: var(--red-bg);
    border-color: #d9b0b0;
}

.hist-month-name[b-i2syhpms25] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--navy);
    line-height: 1;
}

.hist-month-year[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-subtle);
    font-weight: 600;
    opacity: 0.7;
}

.hist-month-icon[b-i2syhpms25] {
    font-size: 16px;
    font-weight: 700;
    color: var(--green);
}

.hist-unpaid .hist-month-icon[b-i2syhpms25] {
    color: var(--red);
}

.hist-summary[b-i2syhpms25] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.act-stat[b-i2syhpms25] {
    padding: 12px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.15s;
}

    .act-stat:hover[b-i2syhpms25] {
        border-color: var(--accent);
        box-shadow: 0 2px 8px rgba(200,168,75,0.1);
    }

.act-stat-val[b-i2syhpms25] {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.act-stat-key[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

/* ══════════════════════════════════════════
   CONFIRM MODAL
══════════════════════════════════════════ */
.confirm-text[b-i2syhpms25] {
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
}

/* ══════════════════════════════════════════
   ADD/EDIT FORM (modal form styles)
══════════════════════════════════════════ */
.form-two-col[b-i2syhpms25] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-full-col[b-i2syhpms25] {
    grid-column: 1 / -1;
}

.form-section-label[b-i2syhpms25] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin: 16px 0 8px;
}

    .form-section-label:first-child[b-i2syhpms25] {
        margin-top: 0;
    }

.fee-checkbox-grid[b-i2syhpms25] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.fac-checkbox[b-i2syhpms25] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    transition: all .15s;
    user-select: none;
}

    .fac-checkbox:hover[b-i2syhpms25] {
        border-color: var(--navy);
    }

    .fac-checkbox.checked[b-i2syhpms25] {
        background: var(--bg-icon);
        border-color: var(--navy);
        font-weight: 600;
    }

.fac-check-box[b-i2syhpms25] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}

.fac-checkbox.checked .fac-check-box[b-i2syhpms25] {
    background: var(--accent);
    border-color: var(--accent);
}

.fac-check-box svg[b-i2syhpms25] {
    width: 10px;
    height: 10px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Rental rate widget */
.form-rental-row[b-i2syhpms25] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 12px;
}

.form-rental-left[b-i2syhpms25] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-rental-icon[b-i2syhpms25] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #fff8e0;
    border: 1px solid #f0d080;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .form-rental-icon svg[b-i2syhpms25] {
        width: 17px;
        height: 17px;
        stroke: #c07c00;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.form-rental-text-label[b-i2syhpms25] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.form-rental-text-sub[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.form-rental-spinner[b-i2syhpms25] {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
    background: var(--bg-card);
}

.form-spinner-button[b-i2syhpms25] {
    width: 34px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.form-spinner-button-right[b-i2syhpms25] {
    border-right: 1px solid var(--border);
}

.form-spinner-button-left[b-i2syhpms25] {
    border-left: 1px solid var(--border);
}

.form-spinner-input-wrapper[b-i2syhpms25] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 10px;
    height: 38px;
}

.form-spinner-currency[b-i2syhpms25] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.form-spinner-input[b-i2syhpms25] {
    width: 68px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    font-family: monospace;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    -moz-appearance: textfield;
}

.form-spinner-freq[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.form-yearly-hint[b-i2syhpms25] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: var(--bg);
    border-radius: 8px;
    border-left: 3px solid var(--gold);
    margin-bottom: 12px;
}

.form-yearly-hint-label[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-muted);
}

.form-yearly-hint-value[b-i2syhpms25] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-family: monospace;
}

.form-utility-divider[b-i2syhpms25] {
    height: 1px;
    background: var(--border);
    margin: 4px 0 12px;
}

.form-fee-toggle[b-i2syhpms25] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 0.5px solid var(--border);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

    .form-fee-toggle:hover[b-i2syhpms25] {
        border-color: var(--navy);
    }

.form-fee-toggle-icon[b-i2syhpms25] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .form-fee-toggle-icon svg[b-i2syhpms25] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.form-fee-toggle-text[b-i2syhpms25] {
    flex: 1;
}

.form-fee-toggle-title[b-i2syhpms25] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.form-fee-toggle-sub[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.form-fee-toggle-checkbox[b-i2syhpms25] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

    .form-fee-toggle-checkbox svg[b-i2syhpms25] {
        width: 11px;
        height: 11px;
        stroke: white;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.form-fee-toggle.active[b-i2syhpms25] {
    background: #fffbeb;
    border-color: #f59e0b;
}

    .form-fee-toggle.active .form-fee-toggle-icon[b-i2syhpms25] {
        background: #fff8e0;
    }

        .form-fee-toggle.active .form-fee-toggle-icon svg[b-i2syhpms25] {
            stroke: #d4920a;
        }

    .form-fee-toggle.active .form-fee-toggle-checkbox[b-i2syhpms25] {
        border-color: var(--accent);
        background: var(--accent);
    }

.form-fee-toggle-water[b-i2syhpms25] {
    background: #eff8ff;
    border-color: #3b82f688;
}

    .form-fee-toggle-water .form-fee-toggle-icon[b-i2syhpms25] {
        background: #e8f4fb;
    }

        .form-fee-toggle-water .form-fee-toggle-icon svg[b-i2syhpms25] {
            stroke: #1a7ab5;
        }

    .form-fee-toggle-water.active[b-i2syhpms25] {
        background: #eff8ff;
        border-color: #3b82f688;
    }

        .form-fee-toggle-water.active .form-fee-toggle-checkbox[b-i2syhpms25] {
            border-color: var(--accent);
            background: var(--accent);
        }

.form-fish-fee-section[b-i2syhpms25] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 8px;
    border: 0.5px solid var(--border);
    margin-bottom: 8px;
}

.form-fish-fee-icon[b-i2syhpms25] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e6f4f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .form-fish-fee-icon svg[b-i2syhpms25] {
        width: 16px;
        height: 16px;
        stroke: #0d7b5e;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.form-fish-fee-text[b-i2syhpms25] {
    flex: 1;
}

.form-fish-fee-title[b-i2syhpms25] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.form-fish-fee-sub[b-i2syhpms25] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.form-fish-fee-badge[b-i2syhpms25] {
    font-size: 11px;
    font-weight: 600;
    color: #0a6b47;
    background: #dff4eb;
    padding: 3px 10px;
    border-radius: 20px;
    border: 0.5px solid #a3dac0;
}

.form-section-note[b-i2syhpms25] {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 4px;
}

/* ══════════════════════════════════════════
   HISTORY MODAL DETAIL STYLES
══════════════════════════════════════════ */
.detail-section-no-margin[b-i2syhpms25] {
    margin-top: 0;
}

.detail-stat-unpaid[b-i2syhpms25] {
    background: var(--red-bg);
}

    .detail-stat-unpaid .act-stat-val[b-i2syhpms25] {
        color: var(--red);
    }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
    .vs-hero-title[b-i2syhpms25] {
        font-size: 18px;
    }

    .vs-hero-val[b-i2syhpms25] {
        font-size: 18px;
    }

    .vs-hero-stat[b-i2syhpms25] {
        padding: 0 14px;
    }
}

@media (max-width: 900px) {
    .fee-checkbox-grid[b-i2syhpms25] {
        grid-template-columns: 1fr 1fr;
    }

    .hist-grid[b-i2syhpms25] {
        grid-template-columns: repeat(6,1fr);
    }

    .hist-summary[b-i2syhpms25] {
        grid-template-columns: repeat(2,1fr);
    }

    .fac-trigger[b-i2syhpms25] {
        min-width: 180px;
    }

    .vs-hero[b-i2syhpms25] {
        padding: 20px;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .vs-toolbar[b-i2syhpms25] {
        flex-direction: column;
        align-items: flex-start;
    }

    .vs-actions[b-i2syhpms25] {
        width: 100%;
        justify-content: flex-start;
    }

    .fee-checkbox-grid[b-i2syhpms25] {
        grid-template-columns: 1fr;
    }

    .fac-trigger[b-i2syhpms25] {
        min-width: 100%;
    }

    .fac-dropdown[b-i2syhpms25] {
        min-width: 100%;
    }

    .vs-hero[b-i2syhpms25] {
        padding: 16px;
        gap: 12px;
    }

    .vs-hero-title[b-i2syhpms25] {
        font-size: 16px;
    }

    .detail-modal[b-i2syhpms25] {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Loading table mirrors the real vendor registry instead of showing page-wide bars. */
.vendor-loading-table[b-i2syhpms25] {
    overflow-x: auto;
}

.vendor-loading-table tbody tr[b-i2syhpms25] {
    pointer-events: none;
}

.vendor-loading-table tbody tr:hover[b-i2syhpms25] {
    background: transparent;
}

.vendor-loading-name[b-i2syhpms25] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vendor-loading-actions[b-i2syhpms25] {
    gap: 7px;
    pointer-events: none;
}





/* ── Responsive hero (mobile/tablet <=768px). Desktop untouched. ── */
@media (max-width: 768px) {
    .vs-hero[b-i2syhpms25] { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 18px; padding: 16px 16px 18px; }
    .vs-hero-left[b-i2syhpms25] { flex: none; min-width: 0; gap: 14px; }
    .vs-hero-stats[b-i2syhpms25] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; width: 100%; flex: none; }
    .vs-hero-stat[b-i2syhpms25] { min-width: 0; padding: 0; text-align: left; }
    .vs-hero-divider[b-i2syhpms25] { display: none; }
    .vs-hero-icon[b-i2syhpms25] { display: none; }
    .vs-hero-sub2[b-i2syhpms25] { display: none; }
}



/* ══════════════════════════════════════════
   RESPONSIVE — vendors toolbar (mobile/tablet ≤768px)
   Desktop (≥769px) is untouched.
══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Desktop packs facility selector + status tabs + search into one non-wrapping row (flex-shrink:0 on
       every child) — nothing can give, so it overflows and overlaps on a phone. Stack them instead. */
    .vs-toolbar-unified[b-i2syhpms25] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .facility-selector[b-i2syhpms25] {
        width: 100%;
        order: 1;
    }

    .fac-trigger[b-i2syhpms25] {
        width: 100%;
        min-width: 0;
    }

    .filter-tabs-inline[b-i2syhpms25] {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .filter-tabs-inline[b-i2syhpms25]::-webkit-scrollbar { display: none; }

    .search-box[b-i2syhpms25] {
        order: 2;
        width: 100%;
    }
}


/* An action that cannot be taken must LOOK as though it cannot. The reopen icon on a stall whose section the office closed
   was unclickable but pixel-identical to a live one, so the office pressed it and nothing happened. Same figures as the
   inactive register on the Closed Accounts page, so one rule reads one way in both places. */
.action-btn:disabled[b-i2syhpms25] {
    opacity: 0.42;
    cursor: not-allowed;
}

    .action-btn:disabled:hover[b-i2syhpms25] {
        background: var(--bg-icon);
    }


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.vs-hero[b-i2syhpms25] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .vs-hero[b-i2syhpms25]::before,
    .vs-hero[b-i2syhpms25]::after {
        display: none;
    }

.vs-hero-icon[b-i2syhpms25] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .vs-hero-icon svg[b-i2syhpms25] {
        stroke: var(--navy) !important;
    }

.vs-hero-eyebrow[b-i2syhpms25] {
    color: var(--text-tertiary);
}

.vs-hero-title[b-i2syhpms25],
.vs-hero-val[b-i2syhpms25] {
    color: var(--navy);
}

.vs-hero-val[b-i2syhpms25] {
    font-variant-numeric: tabular-nums;
}

.vs-hero-sub[b-i2syhpms25],
.vs-hero-sub2[b-i2syhpms25] {
    color: var(--text-tertiary);
}

.vs-hero-key[b-i2syhpms25] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.vs-hero-divider[b-i2syhpms25] {
    background: var(--border);
}

.vs-hero-progress[b-i2syhpms25] {
    height: 3px;
    background: var(--surface-muted);
}

.vs-hero-progress-fill[b-i2syhpms25] {
    background: var(--accent);
}

.vs-hero.vegetables-hero[b-i2syhpms25],
.vs-hero.meat-hero[b-i2syhpms25] {
    background: var(--surface);
}

/* ── Registry toolbar (V3): one calm row — facility and status on the left, search filling the middle, count and the
      single primary action grouped at the right. Hairline borders, modest radius, no heavy outlines. ── */
/* /Components/Pages/Menus/WaterConsumptionFees.razor.rz.scp.css */
/* WCF workspace — V3, read-only monitoring. Panels, tables, buttons and notices come from the shared v3- layer in
   app.css; this file holds only the WCF-specific layout. */

.wcf-period[b-et64ijye0j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
}

.wcf-period input[b-et64ijye0j] {
    width: auto;
    min-height: 36px;
    padding: 6px 8px;
}

.wcf-status-col[b-et64ijye0j] {
    text-align: right;
    white-space: nowrap;
}

/* ── Field collection readiness: one quiet line, not a panel ── */
.wcf-readiness[b-et64ijye0j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.wcf-readiness > svg[b-et64ijye0j] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wcf-readiness p[b-et64ijye0j] {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.wcf-readiness strong[b-et64ijye0j] {
    color: var(--navy);
    font-weight: 600;
}

.wcf-readiness span[b-et64ijye0j] {
    color: var(--text-secondary);
}

/* ── V3 consistency (2026-10-01): blue gives structure — a tinted context cell, a tinted channel panel and quiet
   section bands — while data stays on white. Scoped to this page; the shared summary strip is unchanged elsewhere. ── */
.wcf-page[b-et64ijye0j]  .ss-item:first-child {
    background: var(--surface-blue-subtle);
}

.wcf-readiness[b-et64ijye0j] {
    flex-wrap: nowrap;
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    border-left: 3px solid var(--accent);
    background: var(--surface-blue-subtle);
}

.wcf-readiness p[b-et64ijye0j] {
    flex-wrap: nowrap;
    min-width: 0;
}

.wcf-readiness span[b-et64ijye0j] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wcf-readiness .v3-btn[b-et64ijye0j] {
    flex: 0 0 auto;
    margin-left: auto;
}

.v3-panel-header[b-et64ijye0j] {
    background: var(--surface-blue-subtle);
}

.wcf-empty[b-et64ijye0j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    color: var(--text-secondary);
}

    .wcf-empty svg[b-et64ijye0j] {
        width: 22px;
        height: 22px;
        margin-bottom: 4px;
        fill: none;
        stroke: var(--accent);
        stroke-width: 1.6;
    }

    .wcf-empty strong[b-et64ijye0j] {
        color: var(--navy);
        font-weight: 600;
    }

@media (max-width: 900px) {
    .wcf-readiness[b-et64ijye0j],
    .wcf-readiness p[b-et64ijye0j] {
        flex-wrap: wrap;
    }

    .wcf-readiness span[b-et64ijye0j] {
        white-space: normal;
    }
}

/* ── Collector Mobile status panel (2026-10-01): status first, one action, blockers only when real, details on request. ── */
.wcf-mobile[b-et64ijye0j] {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background: var(--surface-blue-subtle);
}

    .wcf-mobile.is-active[b-et64ijye0j] {
        border-left-color: var(--green);
    }

    .wcf-mobile.is-blocked[b-et64ijye0j] {
        border-left-color: var(--gold);
    }

.wcf-mobile-head[b-et64ijye0j] {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .wcf-mobile-head > svg[b-et64ijye0j] {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        fill: none;
        stroke: var(--accent);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.wcf-mobile-text[b-et64ijye0j] {
    flex: 1 1 auto;
    min-width: 0;
}

    .wcf-mobile-text h2[b-et64ijye0j] {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }

.wcf-mobile-state[b-et64ijye0j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
}

.wcf-mobile-dot[b-et64ijye0j] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.is-active .wcf-mobile-dot[b-et64ijye0j] {
    background: var(--green);
}

.is-blocked .wcf-mobile-dot[b-et64ijye0j] {
    background: var(--gold);
}

.wcf-mobile-sub[b-et64ijye0j] {
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.wcf-mobile-actions[b-et64ijye0j] {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.wcf-mobile-note[b-et64ijye0j] {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.wcf-blockers[b-et64ijye0j] {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

    .wcf-blockers li[b-et64ijye0j] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 10px;
        padding: 8px 0;
        border-top: 1px solid var(--border);
        font-size: 0.8125rem;
        color: var(--text);
    }

    .wcf-blockers a[b-et64ijye0j] {
        font-weight: 600;
        color: var(--accent);
    }

.wcf-blocker-icon[b-et64ijye0j] {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
}

.wcf-details[b-et64ijye0j] {
    margin-top: 10px;
    font-size: 0.8125rem;
}

    .wcf-details summary[b-et64ijye0j] {
        min-height: 32px;
        color: var(--accent);
        font-weight: 600;
        cursor: pointer;
    }

    .wcf-details summary:focus-visible[b-et64ijye0j] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* Readiness as a compact status grid: three columns on desktop, two on a laptop, one on a phone. */
.wcf-checks[b-et64ijye0j] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

    .wcf-checks li[b-et64ijye0j] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
        margin: 0 -1px -1px 0;
        padding: 8px 12px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        color: var(--text-secondary);
        line-height: 1.35;
    }

.wcf-check-mark[b-et64ijye0j] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
}

.wcf-checks li.ok .wcf-check-mark[b-et64ijye0j] {
    background: var(--green-bg);
    color: var(--green);
}

.wcf-checks li.warn .wcf-check-mark[b-et64ijye0j] {
    background: var(--red-bg);
    color: var(--red);
}

.wcf-check-text[b-et64ijye0j] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .wcf-check-text strong[b-et64ijye0j] {
        color: var(--text);
        font-weight: 600;
    }

    .wcf-check-text span[b-et64ijye0j] {
        font-size: 0.75rem;
        overflow-wrap: anywhere;
    }

.wcf-collectors[b-et64ijye0j] {
    margin-top: 8px;
}

/* Readable WCF collection details: label / value pairs, never stored evidence. */
.wcf-facts[b-et64ijye0j] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 14px;
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-muted);
    font-size: 0.8125rem;
}

    .wcf-facts dt[b-et64ijye0j] {
        color: var(--text-tertiary);
    }

    .wcf-facts dd[b-et64ijye0j] {
        margin: 0;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }

@media (max-width: 1100px) {
    .wcf-checks[b-et64ijye0j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .wcf-checks[b-et64ijye0j] {
        grid-template-columns: 1fr;
    }
}

.wcf-confirm[b-et64ijye0j] {
    width: min(460px, calc(100vw - 32px));
}

.wcf-confirm-facts[b-et64ijye0j] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 12px 0 0;
    font-size: 0.875rem;
}

    .wcf-confirm-facts div[b-et64ijye0j] {
        display: contents;
    }

    .wcf-confirm-facts dt[b-et64ijye0j] {
        color: var(--text-secondary);
    }

    .wcf-confirm-facts dd[b-et64ijye0j] {
        margin: 0;
        font-weight: 600;
        color: var(--navy);
    }

@media (max-width: 900px) {
    .wcf-mobile-head[b-et64ijye0j] {
        flex-wrap: wrap;
    }

    .wcf-mobile-sub[b-et64ijye0j] {
        white-space: normal;
    }
}

/* Compact Collector Mobile bar: shown only when the office has something to do; blockers sit under it as a short list. */
.wcf-hero-meta[b-et64ijye0j] { display: inline-flex; align-items: center; gap: 8px; }
.wcf-mobile-bar[b-et64ijye0j] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wcf-panel-header[b-et64ijye0j] { flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.wcf-panel-title[b-et64ijye0j] { display: flex; flex-direction: column; gap: 2px; min-width: 9rem; }
.wcf-controls[b-et64ijye0j] { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.wcf-controls .wcf-period[b-et64ijye0j],
.wcf-controls .v3-btn-group[b-et64ijye0j] { flex: 0 0 auto; }
.wcf-controls .v3-search[b-et64ijye0j] { flex: 1 1 13rem; min-width: 10rem; }

@media (max-width: 720px) {
    .wcf-controls[b-et64ijye0j] { flex-wrap: wrap; }
    .wcf-controls .v3-search[b-et64ijye0j] { flex: 1 1 100%; }
}
/* /Components/Pages/Menus/WaterConsumptionFeesAccounts.razor.rz.scp.css */
/* Water source entry: a register with an inline approved amount, a quiet Mobile state and row actions. The page's
   own gap separates it from the Accounts register; rows centre so plain text, inputs and buttons share one line. */
.wcfs-table td[b-wh1w4v7wna] {
    vertical-align: middle;
}

/* A register's footnote sits under a hairline so it does not read as one more row. */
.v3-panel-note[b-wh1w4v7wna] {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.wcfs-amount[b-wh1w4v7wna] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--text-secondary);
}

    .wcfs-amount .v3-input[b-wh1w4v7wna] {
        width: 112px;
        min-height: 36px;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.wcfs-state[b-wh1w4v7wna] {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

    .wcfs-state.on[b-wh1w4v7wna] {
        color: var(--green);
    }

    .wcfs-state.pending[b-wh1w4v7wna] {
        color: var(--accent);
    }

    .wcfs-state.off[b-wh1w4v7wna] {
        color: var(--text-tertiary);
    }

/* The cell stays a table cell so the row divider runs the full width; the buttons line up inside it. */
.wcfs-actions[b-wh1w4v7wna] {
    width: 1%;
    white-space: nowrap;
}

.wcfs-action-group[b-wh1w4v7wna] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Activation dialog */
.wcfs-modal[b-wh1w4v7wna] {
    width: min(640px, calc(100vw - 32px));
}

.wcfs-close[b-wh1w4v7wna] {
    min-width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
}

    .wcfs-close:focus-visible[b-wh1w4v7wna] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.wcfs-hint[b-wh1w4v7wna] {
    margin: 0 0 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.wcfs-checks[b-wh1w4v7wna],
.wcfs-collectors[b-wh1w4v7wna] {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--accent-soft);
}

    .wcfs-checks legend[b-wh1w4v7wna],
    .wcfs-collectors legend[b-wh1w4v7wna] {
        padding: 0 4px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--navy);
    }

    .wcfs-checks label[b-wh1w4v7wna] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 4px 0;
        font-size: 0.875rem;
        color: var(--text);
    }

.wcfs-collector[b-wh1w4v7wna] {
    display: grid;
    grid-template-columns: 1fr 160px auto;
    align-items: end;
    gap: 10px;
    padding: 6px 0;
}

    .wcfs-collector + .wcfs-collector[b-wh1w4v7wna] {
        border-top: 1px solid var(--border);
    }

.wcfs-inline[b-wh1w4v7wna] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    font-size: 0.875rem;
}

.wcfs-blockers[b-wh1w4v7wna] {
    margin: 0 0 12px;
    padding: 10px 14px 10px 30px;
    border-left: 3px solid var(--red);
    border-radius: 6px;
    background: var(--red-bg);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text);
}

@media (max-width: 640px) {
    .wcfs-collector[b-wh1w4v7wna] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Menus/WeightAndMeasure.razor.rz.scp.css */
/* Weight & Measure — V3, read-only. Shared panels/tables/buttons come from the v3- layer in app.css. */

.wm-period[b-j3jgyhihja] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
}

.wm-period input[b-j3jgyhihja] {
    width: auto;
    min-height: 36px;
    padding: 6px 8px;
}

.wm-error[b-j3jgyhihja] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.wm-source[b-j3jgyhihja] {
    text-align: right;
    white-space: nowrap;
}

.wm-source-link[b-j3jgyhihja] {
    border-radius: 4px;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.wm-source-link:hover[b-j3jgyhihja] {
    text-decoration: underline;
}

.wm-source-link:focus-visible[b-j3jgyhihja] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.wm-meat-facts[b-j3jgyhihja] {
    padding: 14px 20px 4px;
}
/* /Components/Pages/Payor/PayorPortal.razor.rz.scp.css */
/* Payor Portal styles are shared globally in wwwroot/css/payor.css
   (used across the layout + all /payor pages). This scoped file is intentionally empty. */
/* /Components/Pages/Reports/AccountabilityPanel.razor.rz.scp.css */
/* Accountability report — V3. Tables, facts and buttons come from the v3- layer in app.css. */

.ap[b-p4nwxa2adc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.ap-head[b-p4nwxa2adc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.ap-head h2[b-p4nwxa2adc] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.ap-tools[b-p4nwxa2adc] {
    display: flex;
    gap: 8px;
}

.ap-note[b-p4nwxa2adc] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.ap-trace[b-p4nwxa2adc] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ap-print-head[b-p4nwxa2adc] {
    display: none;
}

@media print {
    .ap-print-head[b-p4nwxa2adc] {
        display: block;
    }

    .ap-tools[b-p4nwxa2adc],
    .ap-trace[b-p4nwxa2adc] {
        display: none;
    }
}
/* /Components/Pages/Reports/BbqReports.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   BbqReports.razor.css — BBQ Stand Reports
   Visual language mirrors TccReports / NpmReports. All tokens from app.css.
   BBQ-specific: monthly space rental, no fish/section/daily widgets.
══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.rpt-topbar[b-ujfr309xcs] {
    background: var(--navy);
    padding: 18px 28px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.rpt-topbar[b-ujfr309xcs]::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(200,168,75,.16) 0%, transparent 70%);
    pointer-events: none;
}
.rpt-topbar-left[b-ujfr309xcs] { display: flex; align-items: center; gap: 14px; flex: 1; position: relative; z-index: 1; }
.rpt-back-btn[b-ujfr309xcs] {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s;
    flex-shrink: 0;
}
.rpt-back-btn:hover[b-ujfr309xcs] { background: rgba(255,255,255,.14); }
.rpt-back-btn svg[b-ujfr309xcs] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-topbar-icon[b-ujfr309xcs] {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(200,168,75,.18);
    border: 1px solid rgba(200,168,75,.28);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rpt-topbar-icon svg[b-ujfr309xcs] { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpt-eyebrow[b-ujfr309xcs] { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.rpt-title[b-ujfr309xcs] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.rpt-subtitle[b-ujfr309xcs] { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.rpt-header-progress[b-ujfr309xcs] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
}
.rpt-header-progress-fill[b-ujfr309xcs] {
    height: 100%;
    background: var(--gold);
    transition: width .4s ease;
}
.rpt-topbar-right[b-ujfr309xcs] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.rpt-action-btn[b-ujfr309xcs] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.85);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.rpt-action-btn:hover[b-ujfr309xcs] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-ujfr309xcs] { outline: 2px solid color-mix(in srgb, var(--gold) 85%, white); outline-offset: 2px; }
.rpt-action-btn svg[b-ujfr309xcs] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Period bar ── */
.rpt-period-bar[b-ujfr309xcs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}
.rpt-period-tabs[b-ujfr309xcs] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.rpt-period-tab[b-ujfr309xcs] {
    min-height: 32px;
    min-width: 92px;
    padding: 6px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.rpt-period-tab.active[b-ujfr309xcs] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14);
}
.rpt-document-tab[b-ujfr309xcs] { gap: 7px; padding: 0 16px; min-width: 0; }
.rpt-document-tab svg[b-ujfr309xcs] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rpt-date-nav[b-ujfr309xcs] { display: flex; align-items: center; gap: 10px; }
.rpt-date-nav.utility-mode .rpt-current-period[b-ujfr309xcs] { color: var(--accent); }
.rpt-nav-btn[b-ujfr309xcs] {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .13s;
}
.rpt-nav-btn:hover[b-ujfr309xcs] { background: var(--border); }
.rpt-nav-btn svg[b-ujfr309xcs] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-ujfr309xcs] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ── KPI Strip ── */
.rpt-kpi-strip[b-ujfr309xcs] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 28px 0;
}
.rpt-kpi-card[b-ujfr309xcs] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.kpi-icon-wrap[b-ujfr309xcs] {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-icon-wrap svg[b-ujfr309xcs] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Uniform neutral icon tiles — consistent across all facility reports. */
.kpi-icon-green[b-ujfr309xcs],
.kpi-icon-gold[b-ujfr309xcs],
.kpi-icon-red[b-ujfr309xcs],
.kpi-icon-neutral[b-ujfr309xcs] { background: var(--bg-icon); color: var(--navy-3); }
.kpi-body[b-ujfr309xcs] { flex: 1; min-width: 0; }
.kpi-label[b-ujfr309xcs] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
.kpi-value[b-ujfr309xcs] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.kpi-change[b-ujfr309xcs] { font-size: 12px; color: var(--text-subtle); margin-top: 5px; }
.kpi-change-negative[b-ujfr309xcs] { color: var(--red); }

/* ── Main content ── */
.rpt-content[b-ujfr309xcs] {
    padding: 20px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Charts row ── */
.rpt-charts-row[b-ujfr309xcs] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: stretch;
}
.rpt-chart-card[b-ujfr309xcs] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.rpt-chart-wide[b-ujfr309xcs] { display: flex; flex-direction: column; }
.chart-header[b-ujfr309xcs] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.chart-header-left[b-ujfr309xcs] { flex: 1; }
.chart-title[b-ujfr309xcs] { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.chart-subtitle[b-ujfr309xcs] { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.chart-legend[b-ujfr309xcs] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend-item[b-ujfr309xcs] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-ujfr309xcs] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-label[b-ujfr309xcs] { font-size: 12px; color: var(--text-subtle); font-weight: 500; }

/* ── 3D Bar chart ── */
.rpt-bar-chart[b-ujfr309xcs] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex: 1;
    min-height: 250px;
    padding: 14px 18px 10px;
    position: relative;
    background:
        repeating-linear-gradient(to top, transparent 0, transparent 39px, color-mix(in srgb, var(--border) 55%, transparent) 40px),
        linear-gradient(to top, rgba(13,33,55,.02) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.rpt-bar-group[b-ujfr309xcs] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.rpt-bar-wrap[b-ujfr309xcs] { width: 100%; height: calc(100% - 40px); position: relative; flex-shrink: 0; }
.rpt-bar-3d[b-ujfr309xcs] { width: min(100%, 140px); height: 100%; position: relative; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--navy) 8%, transparent)); margin-inline: auto; }
.rpt-bar-group.current .rpt-bar-3d[b-ujfr309xcs] { filter: drop-shadow(0 4px 8px rgba(200,168,75,.2)); }
.bar3d-face[b-ujfr309xcs] { position: absolute; }
.bar3d-front[b-ujfr309xcs] {
    bottom: 0; left: 10%; width: 80%;
    background: linear-gradient(180deg, #3fa07a 0%, #2d7a5f 100%);
    border-radius: 9px 9px 4px 4px;
    transition: height .4s cubic-bezier(.4,0,.2,1), transform .15s ease, filter .15s ease;
    min-height: 6px;
}
.rpt-bar-group.current .bar3d-front[b-ujfr309xcs] { background: linear-gradient(180deg, #d4b45e 0%, #c8a84b 100%); }
.rpt-bar-group.is-zero .bar3d-front[b-ujfr309xcs] { min-height: 0; background: none; filter: none; }
.rpt-bar-group.is-zero .rpt-bar-3d[b-ujfr309xcs] { filter: none; }
.bar3d-top[b-ujfr309xcs], .bar3d-side[b-ujfr309xcs] { display: none; }
.rpt-bar-group:hover .bar3d-front[b-ujfr309xcs] { transform: translateY(-2px); filter: brightness(1.04); }
.rpt-bar-group:hover .rpt-bar-label[b-ujfr309xcs] { color: var(--navy); }
.rpt-bar-label[b-ujfr309xcs] { font-size: 11px; color: var(--text-muted); white-space: nowrap; text-align: center; margin-top: 6px; font-weight: 500; }
.rpt-bar-val[b-ujfr309xcs] { font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; text-align: center; }
.rpt-bar-group.is-zero .rpt-bar-val[b-ujfr309xcs] { color: var(--text-muted); }

/* ── Donut / Payor Status ── */
.rpt-status-card[b-ujfr309xcs] { display: flex; flex-direction: column; }
.rpt-donut-wrap[b-ujfr309xcs] { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; padding-top: 8px; }
.rpt-donut-container[b-ujfr309xcs] { position: relative; }
.rpt-donut-svg[b-ujfr309xcs] { width: 160px; height: 160px; display: block; }
.donut-center-val[b-ujfr309xcs] { text-anchor: middle; font-size: 22px; font-weight: 800; fill: var(--navy); font-family: inherit; }
.donut-center-lbl[b-ujfr309xcs] { text-anchor: middle; font-size: 11px; font-weight: 700; fill: var(--text-muted); letter-spacing: .08em; font-family: inherit; }
.donut-segment[b-ujfr309xcs] { transition: stroke-dasharray .4s; }
.rpt-donut-legend[b-ujfr309xcs] { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.donut-leg-item[b-ujfr309xcs] { display: flex; align-items: center; justify-content: space-between; }
.donut-leg-left[b-ujfr309xcs] { display: flex; align-items: center; gap: 8px; }
.donut-leg-dot[b-ujfr309xcs] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-leg-label[b-ujfr309xcs] { font-size: 12.5px; color: var(--text); }
.donut-leg-value[b-ujfr309xcs] { font-size: 12.5px; font-weight: 700; color: var(--navy); }

/* ── Section heading ── */
.rpt-section-heading[b-ujfr309xcs] { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; }
.rpt-section-rule[b-ujfr309xcs] { flex: 1; height: 1px; background: var(--border); }
.rpt-section-heading h2[b-ujfr309xcs] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); white-space: nowrap; margin: 0; }

/* Audit row cards live in AuditBreakdownRow.razor(.css) — shared by every facility report. */

/* ── Status badges ── */
.status-badge[b-ujfr309xcs] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.status-badge.paid[b-ujfr309xcs], .status-badge.tier-paid[b-ujfr309xcs] { background: var(--green-bg); color: var(--green); }
.status-badge.partial[b-ujfr309xcs], .status-badge.tier-partial[b-ujfr309xcs] { background: rgba(184,115,51,.1); color: #b87333; }
.status-badge.unpaid[b-ujfr309xcs], .status-badge.tier-unpaid[b-ujfr309xcs] { background: var(--red-bg); color: var(--red); }

/* ── Delinquency panel ── */
.rpt-delinquency-panel[b-ujfr309xcs] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.delinq-exposure[b-ujfr309xcs] {
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
/* No fill. The amount above is already set in the office's red, which carries the meaning; a tinted panel behind it
   reads as highlighter on a government screen and prints as a grey block. The border stays as the panel's own. */
.delinq-has-balance[b-ujfr309xcs] { border-color: rgba(139,58,58,.18); }
.delinq-exp-val[b-ujfr309xcs] { font-size: 24px; font-weight: 800; color: var(--red); line-height: 1; }
.delinq-exp-lbl[b-ujfr309xcs] { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.delinq-table-head[b-ujfr309xcs], .delinq-row[b-ujfr309xcs] {
    display: grid;
    grid-template-columns: 80px 1fr 140px 90px 100px 130px;
    padding: 10px 20px;
    align-items: center;
    gap: 8px;
}
.delinq-table-head[b-ujfr309xcs] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.delinq-row[b-ujfr309xcs] { border-bottom: 1px solid var(--border); font-size: 13px; color: var(--navy); }
.delinq-row:last-child[b-ujfr309xcs] { border-bottom: none; }
.delinq-empty[b-ujfr309xcs] { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.missed-badge[b-ujfr309xcs] { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.missed-badge.critical[b-ujfr309xcs] { background: var(--red-bg); color: var(--red); }
.missed-badge.warn[b-ujfr309xcs] { background: rgba(200,168,75,.12); color: #8a6800; }
.balance-due[b-ujfr309xcs] { color: var(--red); font-weight: 700; }
.stall-no[b-ujfr309xcs] { font-weight: 700; }
.text-muted[b-ujfr309xcs] { color: var(--text-muted); }

/* ── All Stalls compliance table ── */
.rpt-compliance-table-wrap[b-ujfr309xcs] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rpt-compliance-table[b-ujfr309xcs] { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-compliance-table th[b-ujfr309xcs] {
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
}
.rpt-compliance-table td[b-ujfr309xcs] { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--navy); }
.rpt-compliance-table tr:last-child td[b-ujfr309xcs] { border-bottom: none; }
.rpt-compliance-table .row-partial[b-ujfr309xcs] { background: rgba(200,168,75,.04); }
.rpt-compliance-table .row-unpaid[b-ujfr309xcs]  { background: rgba(139,58,58,.04); }

/* ── Empty state ── */
.rpt-empty[b-ujfr309xcs] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; }
.rpt-empty-icon[b-ujfr309xcs] { width: 40px; height: 40px; color: var(--text-muted); }
.rpt-empty-icon svg[b-ujfr309xcs] { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rpt-empty-title[b-ujfr309xcs] { font-size: 14px; font-weight: 600; color: var(--navy); }
.rpt-empty-text[b-ujfr309xcs] { font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ── Print document shell (shared with NPM/TCC print views) ── */
.print-document-content[b-ujfr309xcs] { display: block; background: #eef3f7; overflow-x: hidden; }
.print-report-sheet[b-ujfr309xcs] {
    width: 100%;
    min-height: 900px;
    padding: 30px 28px 40px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d5dde5;
    box-shadow: 0 18px 38px rgba(9, 31, 52, .08);
    color: #111827;
}
.print-report-actions[b-ujfr309xcs] { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.print-report-btn[b-ujfr309xcs] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 7px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.print-report-btn svg[b-ujfr309xcs] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.print-report-header[b-ujfr309xcs] { text-align: center; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.print-report-logo[b-ujfr309xcs] { display: block; width: 58px; height: 58px; object-fit: contain; margin: 0 auto 10px; }
.print-republic[b-ujfr309xcs] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
.print-report-header h2[b-ujfr309xcs] { margin: 7px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.15; color: #111827; }
.print-report-header p[b-ujfr309xcs] { margin: 0; font-size: 12px; color: #4b5563; }
.print-report-title[b-ujfr309xcs] { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; color: #111827; }
.print-report-meta[b-ujfr309xcs] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 16px;
}
.print-report-meta div[b-ujfr309xcs] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-meta div:last-child[b-ujfr309xcs] { border-right: none; }
.print-report-meta span[b-ujfr309xcs] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-meta strong[b-ujfr309xcs] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-summary[b-ujfr309xcs] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 20px; background: #f8fafc;
}
.print-report-summary div[b-ujfr309xcs] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-summary div:last-child[b-ujfr309xcs] { border-right: none; }
.print-report-summary span[b-ujfr309xcs] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-summary strong[b-ujfr309xcs] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-signatures[b-ujfr309xcs] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px; margin-top: 58px;
}
.print-report-signatures div[b-ujfr309xcs] { border-top: 1px solid #111827; padding-top: 8px; text-align: center; }
.print-report-signatures span[b-ujfr309xcs] { display: block; font-size: 11px; color: #6b7280; }
.print-report-signatures strong[b-ujfr309xcs] { display: block; margin-top: 3px; font-size: 11px; color: #111827; }
.print-empty[b-ujfr309xcs] { margin: 22px 0; padding: 16px; text-align: center; font-size: 12px; color: #6b7280; border: 1px dashed #cfd6de; background: #f8fafc; }

/* ── Status Report table ── */
.print-table-wrap[b-ujfr309xcs] { margin-top: 12px; width: 100%; overflow-x: hidden; }
.print-status-table[b-ujfr309xcs] { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; color: #111827; }
.print-status-table th[b-ujfr309xcs], .print-status-table td[b-ujfr309xcs] { border: 1px solid #cfd6de; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-status-table th[b-ujfr309xcs] { background: #f3f6f9; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #374151; }
.status-sheet .print-status-table[b-ujfr309xcs] { font-size: 13px !important; }
.status-sheet .print-status-table th[b-ujfr309xcs] { font-size: 11px !important; }
.status-sheet .print-status-table td[b-ujfr309xcs] { padding: 9px 10px; }
.print-status-table td.status-paid[b-ujfr309xcs]    { color: #2d7a5f; font-weight: 600; }
.print-status-table td.status-partial[b-ujfr309xcs] { color: #b87333; font-weight: 600; }
.print-status-table td.status-unpaid[b-ujfr309xcs]  { color: #8b3a3a; font-weight: 600; }
.text-muted-cell[b-ujfr309xcs] { color: #6b7280; }

/* ── History tables ── */
.print-section-block[b-ujfr309xcs] { margin-top: 24px; }
.print-section-heading[b-ujfr309xcs] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); padding: 6px 0 4px; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.history-sheet .history-table[b-ujfr309xcs] { font-size: 15px !important; }
.history-sheet .history-table th[b-ujfr309xcs] { font-size: 13px !important; }
.history-sheet .history-table td[b-ujfr309xcs] { padding: 13px 14px; }
.history-sheet .history-table th:first-child[b-ujfr309xcs],
.history-sheet .history-table td:first-child[b-ujfr309xcs] { min-width: 110px; white-space: nowrap; }
.history-empty[b-ujfr309xcs] { text-align: center; color: #6b7280; padding: 18px 0; }
.history-total-row td[b-ujfr309xcs] { background: #f3f6f9; border-top: 2px solid #cfd6de; font-size: 13px; }
.rate-good[b-ujfr309xcs]    { color: #2d7a5f; font-weight: 600; }
.rate-partial[b-ujfr309xcs] { color: #b87333; font-weight: 600; }
.rate-low[b-ujfr309xcs]     { color: #8b3a3a; font-weight: 600; }
.balance-due[b-ujfr309xcs]  { color: #8b3a3a; }

/* ── History meta ── */
.history-sheet .print-report-meta span[b-ujfr309xcs]  { font-size: 12px; }
.history-sheet .print-report-meta strong[b-ujfr309xcs] { font-size: 16px; }
.history-sheet .print-section-heading[b-ujfr309xcs]   { font-size: 15px; }
.history-sheet .history-total-row td[b-ujfr309xcs]    { font-size: 15px !important; padding: 13px 14px; }
.history-sheet .print-report-signatures span[b-ujfr309xcs]  { font-size: 13px; }
.history-sheet .print-report-signatures strong[b-ujfr309xcs] { font-size: 15px; }
.status-sheet .print-report-meta span[b-ujfr309xcs]   { font-size: 11px; }
.status-sheet .print-report-meta strong[b-ujfr309xcs] { font-size: 14px; }
.status-sheet .print-report-summary span[b-ujfr309xcs],
.status-sheet .print-report-summary strong[b-ujfr309xcs] { font-size: 14px; }
.status-sheet .print-section-heading[b-ujfr309xcs]   { font-size: 13px; }
.status-sheet .print-report-signatures span[b-ujfr309xcs]  { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-ujfr309xcs] { font-size: 14px; }

@media screen and (max-width: 900px) {
    .rpt-kpi-strip[b-ujfr309xcs] { grid-template-columns: 1fr 1fr; }
    .rpt-charts-row[b-ujfr309xcs] { grid-template-columns: 1fr; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body[b-ujfr309xcs] { background: white !important; }
    .rpt-topbar[b-ujfr309xcs], .rpt-period-bar[b-ujfr309xcs] { background: white !important; border: none !important; box-shadow: none !important; }
    .rpt-topbar-right[b-ujfr309xcs], .rpt-period-tabs[b-ujfr309xcs], .rpt-date-nav[b-ujfr309xcs], .rpt-back-btn[b-ujfr309xcs], .rpt-header-progress[b-ujfr309xcs], .print-report-actions[b-ujfr309xcs] { display: none !important; }
    .rpt-content[b-ujfr309xcs] { padding: 0 !important; }
    .print-document-content[b-ujfr309xcs] { display: block !important; background: white !important; }
    /* 12mm, NOT 0 - the page margin is deliberately nought so the browser has no margin box to print its automatic
       date, URL and page numbers into, which means the SHEET supplies the whitespace. print.css says exactly that and
       sets `.print-report-sheet { padding: 12mm }`, but CSS isolation compiles this rule to
       `.print-report-sheet[b-xxxxx]`, and a class-plus-attribute selector outranks a bare class even when both are
       !important. So this rule quietly won and printed the sheet hard against the paper edge. */
    .print-report-sheet[b-ujfr309xcs] { width: 100% !important; min-height: auto !important; padding: 12mm !important; border: none !important; box-shadow: none !important; }
    /* ── How these sheets break across pages ──────────────────────────────────
       The same three rules the List of Stallholders prints by, so every document this platform issues paginates alike: a table's
       header row REPEATS on each page it continues onto rather than appearing alone at the top of one, a row is never split, and
       a section block may span pages because some areas hold forty rows. Plus the joins that actually broke: a section heading
       stays with what follows it, and the letterhead and meta strip are never split. */
    .print-status-table thead[b-ujfr309xcs] { display: table-header-group; }
    .print-status-table tfoot[b-ujfr309xcs] { display: table-footer-group; }

    .print-status-table tr[b-ujfr309xcs] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-section-heading[b-ujfr309xcs] {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-header[b-ujfr309xcs],
    .print-report-meta[b-ujfr309xcs] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A SECTION IS ONE UNIT: its name, its summary strip and its rows. This was uto, which put a heading and a total at the
       foot of a page with the rows they describe on the next. void is a request, not a constraint: a section taller than the
       page is still split, and the repeating header keeps that readable - so small sections stay whole and large ones still fit. */
    .print-section-block[b-ujfr309xcs] {
        break-inside: avoid;
        page-break-inside: avoid;
        /* The top space is PADDING here, not the margin this block carries on screen. A margin is dropped at a page break; a
           padding is part of the box and survives, so a section that begins a page opens clear of the paper edge instead of
           against it. The page margin is nought, because a page margin is where Chromium prints its own date, title and URL and
           no CSS turns that off - so the document supplies its own whitespace. Sections are kept whole above, which is what makes
           a continued page always begin with one. */
        margin-top: 0 !important;
        padding-top: 10mm;
    }

    .print-section-summary[b-ujfr309xcs] {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Signatures are never split down the middle: "Prepared by" on one page and "Reviewed by" on the next is not a document
       anybody signs. */
    .print-report-signatures[b-ujfr309xcs] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-table-wrap[b-ujfr309xcs] { overflow: visible !important; }
    /* ── Why page two used to start hard against the paper edge ───────────────
       The page box is margin-free and the 12mm of whitespace came from padding on the SHEET. A block's padding applies once, at
       its own top and bottom, not at every page break - so pages after the first began at y=0 with a table header touching the
       edge. Only a page MARGIN repeats per page, so these two documents ask for one of their own; a named page applies solely to
       what asks for it, leaving the roster, the statements and the receipts on the margin-free box they were tuned for.

       Stated rather than buried: a top margin gives the browser somewhere to print its automatic date and page numbers. Untick
       "Headers and footers" in the print dialog if it does. The alternative was figures against the paper edge on every page. */
    /* The page margin these sheets need is injected at print time by stalltrackPrint.reportDocument, NOT set here. An @page in a
       scoped stylesheet does not reach the print engine, and a NAMED page is not honoured at all - print.css assigns a landscape
       named page to .print-report-sheet and this document still printed portrait, which is the proof. Left and right padding is
       injected with it, so nothing about the paper margin is stated in CSS any more. */
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-ujfr309xcs] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-ujfr309xcs]::before,
    .rpt-topbar[b-ujfr309xcs]::after {
        display: none;
    }

.rpt-back-btn[b-ujfr309xcs] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-ujfr309xcs] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-ujfr309xcs] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-ujfr309xcs] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-ujfr309xcs] {
    color: var(--text-tertiary);
}

.rpt-title[b-ujfr309xcs] {
    color: var(--navy);
}

.rpt-subtitle[b-ujfr309xcs] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-ujfr309xcs] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-ujfr309xcs] {
    background: var(--accent);
}

.rpt-action-btn[b-ujfr309xcs] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-ujfr309xcs] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-ujfr309xcs] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-ujfr309xcs],
.rpt-document-tab.active[b-ujfr309xcs],
.utility-section-tab.active[b-ujfr309xcs] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-ujfr309xcs],
.rpt-document-tab:hover:not(.active)[b-ujfr309xcs],
.utility-section-tab:hover:not(.active)[b-ujfr309xcs] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-ujfr309xcs],
.rpt-action-btn:focus-visible[b-ujfr309xcs],
.rpt-period-tab:focus-visible[b-ujfr309xcs],
.rpt-document-tab:focus-visible[b-ujfr309xcs] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/Reports/ClosedAccounts.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Closed Accounts — transparency register (ca-). Shares the Stall Holder /
   Month-End document language (filter chips, sheet, summary cards, tables,
   subtotals) so the reporting suite reads as one.
   ══════════════════════════════════════════════════════════════════════════ */

/* Temporary preview banner */
.ca-preview[b-z2kqjeg3h3] {
    display: flex; align-items: center; gap: 10px;
    background: rgba(200, 168, 75, .12); border: 1px solid rgba(200, 168, 75, .45);
    color: #8a6d1b; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 12.5px;
}
.ca-preview svg[b-z2kqjeg3h3] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Controls */
.ca-controls[b-z2kqjeg3h3] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
/* Year, Status, Source and Section sit in one row as peers; the Year picker keeps its own wrapper. */
.ca-filter[b-z2kqjeg3h3] { display: inline-flex; align-items: center; gap: 8px; }
.ca-filter-cap[b-z2kqjeg3h3] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }

.ca-actions[b-z2kqjeg3h3] { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; }
.ca-search[b-z2kqjeg3h3] {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px;
    height: 38px; padding: 0 12px; flex: 1 1 auto; min-width: 0;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ca-search:focus-within[b-z2kqjeg3h3] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 168, 75, .15); }
.ca-search svg[b-z2kqjeg3h3] { width: 15px; height: 15px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ca-search input[b-z2kqjeg3h3] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13px; color: var(--navy); }
.ca-search input[b-z2kqjeg3h3]::placeholder { color: var(--text-muted); }
.ca-search input[b-z2kqjeg3h3]::-webkit-search-cancel-button { display: none; }
.ca-search-clear[b-z2kqjeg3h3] { border: none; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.ca-search-clear:hover[b-z2kqjeg3h3] { color: var(--navy); }

/* Print | CSV | Excel — one joined control: same height, same outline, same icon treatment, each usable on its own. */
.ca-export[b-z2kqjeg3h3] { display: inline-flex; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface, #fff); }
.ca-export-btn[b-z2kqjeg3h3] {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px; padding: 0 14px; border: 0; border-left: 1px solid var(--border);
    background: transparent; color: var(--navy); font: inherit; font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ca-export-btn:first-child[b-z2kqjeg3h3] { border-left: 0; }
.ca-export-btn:hover[b-z2kqjeg3h3] { background: var(--accent-soft, #eaf1fb); color: var(--accent); }
.ca-export-btn:focus-visible[b-z2kqjeg3h3] { outline: 2px solid var(--accent); outline-offset: -3px; }
.ca-export-btn svg[b-z2kqjeg3h3] { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* The reasoning behind the two kinds of balance: a disclosure on screen, so it is not a paragraph above every table. */
.ca-why[b-z2kqjeg3h3] { margin: -14px 0 22px; font-size: 12px; color: var(--text-secondary); }
.ca-why summary[b-z2kqjeg3h3] { cursor: pointer; color: var(--accent); font-weight: 600; width: fit-content; }
.ca-why summary:focus-visible[b-z2kqjeg3h3] { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ca-why[b-z2kqjeg3h3] { width: 100%; }
.ca-why[open][b-z2kqjeg3h3] { padding: 10px 14px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.ca-why p[b-z2kqjeg3h3] { margin: 8px 0 0; line-height: 1.55; max-width: none; }

/* Bulk "Renew all" button — green (renew) accent; sits in the year-group header beside the
   "N accounts · ₱X uncollected" stats. Compact so it reads as a group action, not a page action. */
.ca-renew-all-btn[b-z2kqjeg3h3] {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--green); color: #fff; border: none; border-radius: 8px;
    padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .15s; white-space: nowrap;
}
.ca-renew-all-btn:hover[b-z2kqjeg3h3] { background: color-mix(in srgb, var(--green) 86%, #000); }
.ca-renew-all-btn svg[b-z2kqjeg3h3] { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ca-state[b-z2kqjeg3h3] { padding: 40px; text-align: center; color: var(--text-subtle); font-size: 14px; }

/* Sheet + document header */
.ca-sheet[b-z2kqjeg3h3] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }

/* Frame table — invisible on screen; its thead/tfoot repeat a blank spacer on every printed
   page so continued pages get consistent top/bottom whitespace (matches the report page). */
.ca-frame[b-z2kqjeg3h3] { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ca-source-note[b-z2kqjeg3h3] { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 12px; }
.ca-frame > thead > tr > td[b-z2kqjeg3h3], .ca-frame > tfoot > tr > td[b-z2kqjeg3h3], .ca-frame > tbody > tr > td[b-z2kqjeg3h3] { padding: 0; border: none; }
.ca-frame-space[b-z2kqjeg3h3] { height: 0; }
.ca-rpt-head[b-z2kqjeg3h3] { text-align: center; margin-bottom: 20px; }
.ca-seal[b-z2kqjeg3h3] { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; margin: 0 auto 8px; display: block; }
.ca-gov[b-z2kqjeg3h3] { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.ca-org[b-z2kqjeg3h3] { font-size: 15px; font-weight: 700; color: var(--navy); margin-top: 2px; }
.ca-muni[b-z2kqjeg3h3] { font-size: 11px; color: var(--text-subtle); margin-top: 2px; }
.ca-doc[b-z2kqjeg3h3] { margin-top: 12px; font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); }
.ca-doc-scope[b-z2kqjeg3h3] { margin-top: 3px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); }
.ca-doc-period[b-z2kqjeg3h3] { margin-top: 4px; font-size: 11px; color: var(--text-subtle); }

/* Summary cards */
.ca-summary[b-z2kqjeg3h3] { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
.ca-sum-card[b-z2kqjeg3h3] { border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; background: var(--bg); }
.ca-sum-card.ca-sum-warn[b-z2kqjeg3h3] { border-color: rgba(139, 58, 58, .35); background: var(--red-bg); }
.ca-sum-val[b-z2kqjeg3h3] { font-size: 19px; font-weight: 800; color: var(--navy); }
.ca-sum-card.ca-sum-warn .ca-sum-val[b-z2kqjeg3h3] { color: var(--red); }
.ca-sum-lbl[b-z2kqjeg3h3] { font-size: 11px; color: var(--text-subtle); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }

.ca-note[b-z2kqjeg3h3] { font-size: 11.5px; color: var(--text-subtle); line-height: 1.5; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 22px; }
.ca-note strong[b-z2kqjeg3h3] { color: var(--navy); }

/* Year block */
.ca-year[b-z2kqjeg3h3] { margin-bottom: 24px; }
.ca-year-head[b-z2kqjeg3h3] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-bottom: 9px; margin-bottom: 10px; border-bottom: 2px solid var(--border); flex-wrap: wrap;
}
.ca-year-label[b-z2kqjeg3h3] { font-size: 14px; font-weight: 800; color: var(--navy); letter-spacing: .3px; }
.ca-year-right[b-z2kqjeg3h3] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.ca-year-stats[b-z2kqjeg3h3] { font-size: 12.5px; color: var(--text-subtle); }
.ca-year-stats strong[b-z2kqjeg3h3] { color: var(--navy); }

/* Table */
.ca-table[b-z2kqjeg3h3] { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 10px; }
.ca-table th[b-z2kqjeg3h3] {
    text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-subtle); padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: bottom;
}
.ca-table td[b-z2kqjeg3h3] { padding: 9px 10px; color: var(--text); vertical-align: middle; text-align: center; }
.ca-table tr.ca-grp-start td[b-z2kqjeg3h3] { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.ca-table tbody tr:hover[b-z2kqjeg3h3] { background: var(--bg); }
.ca-c[b-z2kqjeg3h3] { text-align: center; }
.ca-r[b-z2kqjeg3h3] { text-align: center; font-variant-numeric: tabular-nums; }
.ca-fw[b-z2kqjeg3h3] { font-weight: 400; color: var(--text); }
.ca-muted[b-z2kqjeg3h3] { color: var(--text-muted); }
.ca-fac-cell[b-z2kqjeg3h3] { font-weight: 400; color: var(--text); }
.ca-period[b-z2kqjeg3h3] { white-space: nowrap; color: var(--text-subtle); }
.ca-period span[b-z2kqjeg3h3] { color: var(--text-muted); margin: 0 2px; }

.ca-amt-due[b-z2kqjeg3h3] { display: block; font-weight: 700; color: var(--red); }
.ca-amt-clear[b-z2kqjeg3h3] { display: block; color: var(--text-muted); }

.ca-table tfoot td[b-z2kqjeg3h3] { border-top: 2px solid var(--border); border-bottom: none; padding: 10px; color: var(--navy); font-size: 12.5px; }

.ca-rpt-foot[b-z2kqjeg3h3] { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 18px; }
.ca-rpt-foot div[b-z2kqjeg3h3] { text-align: center; flex: 1; }
.ca-rpt-foot span[b-z2kqjeg3h3] { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 4px; }
.ca-rpt-foot strong[b-z2kqjeg3h3] { font-size: 12.5px; color: var(--navy); }

@media screen and (max-width: 860px) {
    .ca-summary[b-z2kqjeg3h3] { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
    .ca-actions[b-z2kqjeg3h3] { flex-basis: 100%; }
    .ca-table[b-z2kqjeg3h3] { font-size: 11.5px; display: block; overflow-x: auto; white-space: nowrap; }
}

/* Print: only the header + tables (clean register). Cards/note are screen-only. */
@media print {
    .no-print[b-z2kqjeg3h3] { display: none !important; }
    .content-area[b-z2kqjeg3h3] { padding: 0 !important; }
    .ca-sheet[b-z2kqjeg3h3] { border: none; border-radius: 0; padding: 0 12mm; }
    .ca-frame-space[b-z2kqjeg3h3] { height: 12mm; }   /* repeats as top & bottom whitespace on every page */
    .ca-summary[b-z2kqjeg3h3], .ca-note[b-z2kqjeg3h3] { display: none !important; }
    .ca-year-head[b-z2kqjeg3h3] { font-size: 11px; }
    .ca-year-label[b-z2kqjeg3h3] { font-size: 12px; }
    .ca-table[b-z2kqjeg3h3] { display: table !important; width: 100%; overflow: visible !important; white-space: normal !important; font-size: 11px; }
    .ca-table th[b-z2kqjeg3h3], .ca-table td[b-z2kqjeg3h3] { border-left: 1px solid #d8dee5; border-right: 1px solid #d8dee5; padding: 4px 5px; overflow-wrap: anywhere; vertical-align: top; }
    .ca-table thead[b-z2kqjeg3h3] { display: table-header-group; }
    .ca-table tbody tr[b-z2kqjeg3h3] { break-inside: avoid; }
    .ca-table thead th[b-z2kqjeg3h3] { border-top: 1px solid #d8dee5; border-bottom: 1px solid #d8dee5; background: #f4f7fa; }
    .ca-table tr.ca-grp-start td[b-z2kqjeg3h3] { border-top: 1px solid #d8dee5; }
    .ca-table tfoot td[b-z2kqjeg3h3] { border-top: 1px solid #d8dee5; border-bottom: 1px solid #d8dee5; }
    .ca-table tbody tr:hover[b-z2kqjeg3h3] { background: transparent; }
    .ca-period[b-z2kqjeg3h3] { white-space: normal !important; }   /* allow the date range to wrap so the table fits */
}


/* ── Status (plain text, centered via .ca-c) ── */
.ca-status-text[b-z2kqjeg3h3] { color: var(--text); font-weight: 500; }

/* ── Row actions (screen only) ── */
.ca-act[b-z2kqjeg3h3] { width: 1%; white-space: nowrap; text-align: center; }
/* Breathing room between the row's Renew/Reopen and Remove buttons (were touching). */
.ca-act .ca-row-btn + .ca-row-btn[b-z2kqjeg3h3] { margin-left: 8px; }
.ca-row-btn[b-z2kqjeg3h3] {
    min-height: 28px; padding: 4px 12px; border-radius: 6px; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 650; line-height: 1;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--navy);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.ca-row-btn:hover[b-z2kqjeg3h3] { box-shadow: 0 4px 10px rgba(9, 31, 52, .12); }
.ca-row-reopen[b-z2kqjeg3h3] { border-color: color-mix(in srgb, var(--navy) 35%, transparent); color: var(--navy); }
.ca-row-reopen:hover[b-z2kqjeg3h3] { background: var(--accent-hover); color: #fff; }
.ca-row-renew[b-z2kqjeg3h3] { border-color: color-mix(in srgb, var(--green) 40%, transparent); color: var(--green); }
.ca-row-renew:hover[b-z2kqjeg3h3] { background: var(--green); color: #fff; }
.ca-row-remove[b-z2kqjeg3h3] { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.ca-row-remove:hover[b-z2kqjeg3h3] { background: var(--red); color: #fff; }

/* ── Row actions as icons ──
   The action column carried two or three worded buttons ("Assign new stall", "Remove") and could not hold them at
   the width the register's other columns need. Square icon buttons fit, and match the vendor roster's own row
   actions. Each keeps a title and an aria-label: an icon on its own names nothing to a screen reader, and this is
   a government record. */
.ca-act-icons[b-z2kqjeg3h3] { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.ca-act .ca-row-icon + .ca-row-icon[b-z2kqjeg3h3] { margin-left: 0; }
.ca-row-icon[b-z2kqjeg3h3] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--navy);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.ca-row-icon:hover[b-z2kqjeg3h3] { box-shadow: 0 4px 10px rgba(9, 31, 52, .12); }
.ca-row-icon:focus-visible[b-z2kqjeg3h3] { outline: 2px solid var(--navy); outline-offset: 2px; }
/* An action that cannot be taken has to LOOK like one. Resume is refused while the stall's own market section is closed,
   and a button that is unclickable but indistinguishable from a live one reads as a broken screen rather than a rule. */
.ca-row-icon:disabled[b-z2kqjeg3h3] {
    cursor: not-allowed;
    color: var(--text-subtle);
    background: var(--bg-icon);
    border-color: var(--border);
    opacity: .55;
}
.ca-row-icon:disabled:hover[b-z2kqjeg3h3] { box-shadow: none; }

/* ── Renew form (inside the shared eemo-modal) ── */
.ca-form[b-z2kqjeg3h3] { display: flex; flex-direction: column; gap: 12px; }
.ca-form label[b-z2kqjeg3h3] { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 650; color: var(--text-muted); }
.ca-form input[b-z2kqjeg3h3] {
    min-height: 38px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border);
    font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg-card);
}
.ca-form input:focus[b-z2kqjeg3h3] { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
.ca-form-err[b-z2kqjeg3h3] { margin-top: 10px; color: var(--red); font-size: 12.5px; font-weight: 600; }

/* A value the record fixes rather than a field the clerk fills: the name on an extension (there is none) and its term (open-
   ended). Shown in the shape of an input so the form reads evenly, and plainly not editable. */
.ca-readonly[b-z2kqjeg3h3] {
    min-height: 38px; display: flex; align-items: center;
    padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border);
    font-size: 13.5px; color: var(--text-muted); background: var(--bg);
}

/* ── How the new term is held ──
   Two choices, stated as the register form states them, so the clerk reads the same words here as on the vendor form. */
.ca-basis[b-z2kqjeg3h3] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ca-basis-item[b-z2kqjeg3h3] {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--bg-card); cursor: pointer; font: inherit;
}

.ca-basis-item:hover[b-z2kqjeg3h3] { border-color: var(--navy); }

.ca-basis-item.is-selected[b-z2kqjeg3h3] {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent);
}

.ca-basis-title[b-z2kqjeg3h3] { font-size: 13px; font-weight: 700; color: var(--navy); }
.ca-basis-sub[b-z2kqjeg3h3] { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }

@media (max-width: 520px) {
    .ca-basis[b-z2kqjeg3h3] { grid-template-columns: 1fr; }
}

/* ── Renewal: the record as it stands, then what is being changed ──
   The facts that identify the space are stated, not offered as fields — a renewal re-lets the same space.
   Group headings keep a longer form readable without turning it into a wall of labels. */
.ca-renew-facts[b-z2kqjeg3h3] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 16px;
}
    .ca-renew-facts > div[b-z2kqjeg3h3] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 12px;
        border-bottom: 1px solid var(--border);
    }
    .ca-renew-facts > div:last-child[b-z2kqjeg3h3] { border-bottom: none; }
    .ca-renew-facts span[b-z2kqjeg3h3] { font-size: 12px; color: var(--text-muted); }
    .ca-renew-facts strong[b-z2kqjeg3h3] { font-size: 12.5px; font-weight: 650; color: var(--navy); text-align: right; }

.ca-form-heading[b-z2kqjeg3h3] {
    margin: 16px 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}
    .ca-form-heading:first-of-type[b-z2kqjeg3h3] { margin-top: 0; }

.ca-renew-note[b-z2kqjeg3h3] {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-subtle);
}

/* ── Contextual loading skeleton (screen only — mirrors summary + register) ── */
.ca-loading[b-z2kqjeg3h3] { margin-top: 2px; }
.ca-loading[b-z2kqjeg3h3]  .ca-sk-center { margin-left: auto; margin-right: auto; }
.ca-loading[b-z2kqjeg3h3]  .ca-sk-gap { margin-top: 8px; }
.ca-table-skeleton[b-z2kqjeg3h3] { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }



/* ── Per-facility sub-group within a year ── */
.ca-fac-group[b-z2kqjeg3h3] {
    margin-top: 14px;
}

.ca-fac-group:first-of-type[b-z2kqjeg3h3] {
    margin-top: 8px;
}

.ca-fac-head[b-z2kqjeg3h3] {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: var(--bg-icon, #eef2f6);
    border-left: 3px solid var(--gold, #c8a84b);
    border-radius: 6px;
}

.ca-fac-title[b-z2kqjeg3h3] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--navy, #0d2137);
    letter-spacing: 0.01em;
}

.ca-fac-stats[b-z2kqjeg3h3] {
    font-size: 0.78rem;
    color: var(--text-subtle, #6a8aa0);
}

.ca-fac-stats strong[b-z2kqjeg3h3] {
    color: var(--text, #0d2137);
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Closed Accounts document (mobile/tablet ≤768px). Desktop untouched.
   (The ≤860px block above already handles the summary grid, actions row and
   horizontal table scroll; this only tightens the sheet chrome for phones.)
═══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    .ca-sheet[b-z2kqjeg3h3] {
        padding: 16px 14px;
    }

    .ca-rpt-foot[b-z2kqjeg3h3] {
        flex-direction: column;
        gap: 14px;
    }
}

/* Filtered section, stated once in the letterhead in the document's own navy — the same treatment the
   stallholder roster and the collection report use. */
.ca-doc-section[b-z2kqjeg3h3] {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
}

/* The lapsed share of a facility subtotal, stated inline so the printed figure is never read as ended debt. */
.ca-subtotal-note[b-z2kqjeg3h3] {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

/* The account count under a summary figure, so a peso amount never stands without saying how many it covers. */
.ca-sum-sub[b-z2kqjeg3h3] {
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}


/* States that the register is scoped, and how to leave that scope. Arrived from a quoted figure elsewhere. */
.ca-scope-note[b-z2kqjeg3h3] {
    margin: 0 0 14px;
    padding: 9px 12px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-muted);
    background: #fbfcfd;
    border: 1px solid var(--border);
    border-radius: 7px;
}

.ca-scope-clear[b-z2kqjeg3h3] {
    margin-left: 6px;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--text-primary);
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}


/* ── Filter cluster: period, status, source and section as one aligned group at one height ── */
.ca-filters[b-z2kqjeg3h3] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* The shared year picker is a little shorter than the compact selectors beside it; match them here only. */
.ca-filter[b-z2kqjeg3h3]  .rpt-period-trigger {
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 12px 0 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}

.ca-filter[b-z2kqjeg3h3]  .rpt-period-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ca-fac-right[b-z2kqjeg3h3] { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ca-fac-head .ca-renew-all-btn[b-z2kqjeg3h3] { min-height: 34px; }

@media (max-width: 600px) {
    /* Search gets its own full-width line; the joined export stays whole beneath it. */
    .ca-actions[b-z2kqjeg3h3] { flex-wrap: wrap; }
    .ca-actions .ca-search[b-z2kqjeg3h3] { flex: 1 1 100%; }
}
/* /Components/Pages/Reports/CollectionExceptions.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Collection Exceptions — two-panel layout (payor list + calendar/detail)
   Uses the shared design tokens from app.css (navy / gold / etc.).
   ════════════════════════════════════════════════════════════════ */

/* ── Layout grid ── */
.ce-layout[b-t1caxk6l1o] { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: stretch; height: calc(100vh - var(--topbar-h, 64px) - 48px); min-height: 520px; }

/* ── Left side panel ── */
.ce-side[b-t1caxk6l1o] {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px; height: 100%; min-height: 0;
    display: flex; flex-direction: column;
}
.ce-side-head[b-t1caxk6l1o] { margin-bottom: 16px; }
.ce-side-title[b-t1caxk6l1o] { font-size: 16px; font-weight: 800; color: var(--navy); }
.ce-side-sub[b-t1caxk6l1o] { font-size: 11.5px; color: var(--text-subtle); margin-top: 2px; }

.ce-row[b-t1caxk6l1o] { margin-bottom: 12px; }

/* Fixed (non-scrolling) rows must keep their size — only the payor list absorbs overflow.
   Without this, a taller facility (NPM's Section row / more payors) squished & clipped the tabs. */
.ce-side-head[b-t1caxk6l1o], .ce-seg[b-t1caxk6l1o], .ce-row[b-t1caxk6l1o], .ce-list-head[b-t1caxk6l1o] { flex-shrink: 0; }

/* Facility segmented control */
.ce-seg[b-t1caxk6l1o] { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); margin-bottom: 14px; }
.ce-seg-btn[b-t1caxk6l1o] {
    flex: 1; border: none; background: transparent; padding: 9px 4px; font-size: 12px; font-weight: 700;
    color: var(--text-subtle); cursor: pointer; border-right: 1px solid var(--border);
    transition: background .12s, color .12s;
}
.ce-seg-btn:last-child[b-t1caxk6l1o] { border-right: none; }
.ce-seg-btn:hover[b-t1caxk6l1o] { background: var(--bg-icon); color: var(--navy); }
.ce-seg-on[b-t1caxk6l1o], .ce-seg-on:hover[b-t1caxk6l1o] { background: var(--accent); color: #fff; }

/* Period */
.ce-period[b-t1caxk6l1o] { display: flex; align-items: center; gap: 8px; }
.ce-period-lbl[b-t1caxk6l1o] { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: var(--navy); }
.ce-nav[b-t1caxk6l1o] {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card);
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, border-color .12s; flex-shrink: 0;
}
.ce-nav:hover[b-t1caxk6l1o] { background: var(--bg-icon); border-color: var(--navy); }
.ce-nav svg[b-t1caxk6l1o] { width: 13px; height: 13px; stroke: var(--navy); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Search */
.ce-search[b-t1caxk6l1o] { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; background: var(--bg); }
.ce-search:focus-within[b-t1caxk6l1o] { border-color: var(--navy-3); background: var(--bg-card); }
.ce-search svg[b-t1caxk6l1o] { width: 15px; height: 15px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ce-search input[b-t1caxk6l1o] { border: none; outline: none; background: transparent; font-size: 13px; color: var(--text); width: 100%; font-family: inherit; }

/* Filter dropdowns */
.ce-filter-row[b-t1caxk6l1o] { display: flex; gap: 10px; }
.ce-select-wrap[b-t1caxk6l1o] { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ce-select-wrap label[b-t1caxk6l1o] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.ce-select[b-t1caxk6l1o] { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--navy); background: var(--bg-card); font-family: inherit; cursor: pointer; }
.ce-select:focus[b-t1caxk6l1o] { outline: none; border-color: var(--navy-3); }

/* Custom dropdown (professional replacement for native select) */
.ce-dd[b-t1caxk6l1o] { position: relative; }
.ce-dd-btn[b-t1caxk6l1o] { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 12.5px; font-weight: 600; color: var(--navy); background: var(--bg-card); cursor: pointer; font-family: inherit; transition: border-color .12s; }
.ce-dd-btn:hover[b-t1caxk6l1o] { border-color: var(--navy-3); }
.ce-dd-open .ce-dd-btn[b-t1caxk6l1o] { border-color: var(--navy); }
.ce-dd-btn svg[b-t1caxk6l1o] { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; flex-shrink: 0; }
.ce-dd-open .ce-dd-btn svg[b-t1caxk6l1o] { transform: rotate(180deg); }
.ce-dd-menu[b-t1caxk6l1o] { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 30; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(13,33,55,.16); padding: 5px; }
.ce-dd-opt[b-t1caxk6l1o] { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: none; background: transparent; border-radius: 7px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--navy); cursor: pointer; text-align: left; font-family: inherit; }
.ce-dd-opt:hover[b-t1caxk6l1o] { background: var(--bg-icon); }
.ce-dd-sel[b-t1caxk6l1o], .ce-dd-sel:hover[b-t1caxk6l1o] { background: var(--accent); color: #fff; }
.ce-dd-opt svg[b-t1caxk6l1o] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ce-dd-backdrop[b-t1caxk6l1o] { position: fixed; inset: 0; z-index: 20; background: transparent; }

/* List header */
.ce-list-head[b-t1caxk6l1o] {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted);
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); margin-bottom: 10px;
}
.ce-list-head-fac[b-t1caxk6l1o] { color: var(--navy); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; letter-spacing: .4px; }

/* ── Payor list ── */
.ce-list[b-t1caxk6l1o] { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 4px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ce-list[b-t1caxk6l1o]::-webkit-scrollbar { width: 6px; }
.ce-list[b-t1caxk6l1o]::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ce-list[b-t1caxk6l1o]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.ce-list[b-t1caxk6l1o]::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.ce-list[b-t1caxk6l1o]::-webkit-scrollbar-track { background: transparent; }
.ce-stall[b-t1caxk6l1o] {
    text-align: left; border: 1px solid var(--border); background: var(--bg-card); border-radius: 11px;
    padding: 11px 13px; cursor: pointer; transition: border-color .12s, box-shadow .12s; width: 100%;
}
.ce-stall:hover[b-t1caxk6l1o] { border-color: var(--navy-3); box-shadow: 0 1px 6px rgba(13,33,55,.08); }
.ce-stall-on[b-t1caxk6l1o] { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.ce-stall-top[b-t1caxk6l1o] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ce-stall-no[b-t1caxk6l1o] { font-size: 13px; font-weight: 800; color: var(--navy); }
.ce-stall-name[b-t1caxk6l1o] { font-size: 13px; color: var(--text); font-weight: 600; }
.ce-stall-meta[b-t1caxk6l1o] { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 11px; color: var(--text-subtle); }
.ce-stall-meta .ce-ok[b-t1caxk6l1o] { color: var(--green); font-weight: 700; }
.ce-stall-meta .ce-muted[b-t1caxk6l1o] { color: var(--text-muted); }
.ce-dot[b-t1caxk6l1o] { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); display: inline-block; }

.ce-stall-badge[b-t1caxk6l1o] { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 999px; }
.ce-badge-green[b-t1caxk6l1o] { background: var(--green-bg); color: var(--green); }
.ce-badge-gold[b-t1caxk6l1o] { background: rgba(200,168,75,.16); color: #b5872a; }
.ce-badge-red[b-t1caxk6l1o] { background: var(--red-bg); color: var(--red); }

.ce-empty-sm[b-t1caxk6l1o] { padding: 24px 12px; text-align: center; font-size: 12.5px; color: var(--text-subtle); }

/* ── Right main panel ── */
.ce-main[b-t1caxk6l1o] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; height: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ce-main[b-t1caxk6l1o]::-webkit-scrollbar { width: 8px; }
.ce-main[b-t1caxk6l1o]::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ce-main[b-t1caxk6l1o]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.ce-main[b-t1caxk6l1o]::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.ce-main[b-t1caxk6l1o]::-webkit-scrollbar-track { background: transparent; }

.ce-empty[b-t1caxk6l1o] { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 480px; }
.ce-empty-icon[b-t1caxk6l1o] { width: 56px; height: 56px; border-radius: 14px; background: var(--bg-icon); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ce-empty-icon svg[b-t1caxk6l1o] { width: 26px; height: 26px; stroke: var(--text-muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ce-empty-title[b-t1caxk6l1o] { font-size: 16px; font-weight: 800; color: var(--navy); }
.ce-empty-sub[b-t1caxk6l1o] { font-size: 13px; color: var(--text-subtle); margin-top: 6px; max-width: 360px; }

.ce-main-head[b-t1caxk6l1o] { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.ce-main-title[b-t1caxk6l1o] { font-size: 18px; font-weight: 800; color: var(--navy); }
.ce-main-sub[b-t1caxk6l1o] { font-size: 12.5px; color: var(--text-subtle); margin-top: 3px; }
.ce-main-period[b-t1caxk6l1o] { font-size: 13px; font-weight: 700; color: var(--navy); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; }
.ce-tag[b-t1caxk6l1o] { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 5px; margin-right: 6px; }

/* ── Stat strip ── */
.ce-stats[b-t1caxk6l1o] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0 20px; }
.ce-stat[b-t1caxk6l1o] { border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px; background: var(--bg); }
.ce-stat-val[b-t1caxk6l1o] { font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.ce-stat-lbl[b-t1caxk6l1o] { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-top: 5px; }
.ce-stat-accent[b-t1caxk6l1o] { border-top: 3px solid var(--gold); }
.ce-red[b-t1caxk6l1o] { color: var(--red); }
.ce-gold[b-t1caxk6l1o] { color: #b5872a; }

/* ── NPM day calendar ── */
.ce-cal-wrap[b-t1caxk6l1o] { margin-bottom: 14px; }
.ce-cal[b-t1caxk6l1o] { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 64px; gap: 5px; }
.ce-cal-hdr[b-t1caxk6l1o] { height: auto; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; padding: 4px 0; }
.ce-cell[b-t1caxk6l1o] {
    position: relative; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card);
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    padding: 7px 8px; cursor: pointer; transition: border-color .14s, box-shadow .16s, transform .16s; overflow: hidden;
}
.ce-cell:hover:not(.ce-cell-empty)[b-t1caxk6l1o] { border-color: var(--navy-2); box-shadow: 0 3px 10px rgba(13,33,55,.12); transform: translateY(-1px); z-index: 1; }
.ce-cell-num[b-t1caxk6l1o] { font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1; }
.ce-cell-tag[b-t1caxk6l1o] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ce-cell-empty[b-t1caxk6l1o] { background: transparent; border: none; cursor: default; box-shadow: none; }
.ce-cell-today[b-t1caxk6l1o] { outline: 2px solid var(--gold); outline-offset: -2px; }
.ce-cell-sel[b-t1caxk6l1o] { box-shadow: 0 0 0 2px var(--navy); border-color: var(--navy); }

/* ── Monthly grid ── */
.ce-months[b-t1caxk6l1o] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.ce-month[b-t1caxk6l1o] {
    border: 1px solid var(--border); border-radius: 11px; background: var(--bg-card); position: relative;
    padding: 16px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 7px; align-items: center;
    transition: border-color .14s, box-shadow .16s, transform .16s; min-height: 78px; justify-content: center;
}
.ce-month:hover[b-t1caxk6l1o] { border-color: var(--navy-2); box-shadow: 0 3px 10px rgba(13,33,55,.12); transform: translateY(-1px); }
.ce-month-name[b-t1caxk6l1o] { font-size: 14px; font-weight: 800; color: var(--navy); }
.ce-month-tag[b-t1caxk6l1o] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }

/* ── Status colours (shared by cells & months) — tags rendered as clean pill badges ── */
.ce-cell-tag[b-t1caxk6l1o], .ce-month-tag[b-t1caxk6l1o] {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
    padding: 2px 8px; border-radius: 999px; line-height: 1.5;
}
.ce-cell-tag[b-t1caxk6l1o] { align-self: flex-start; }
.ce-month-tag[b-t1caxk6l1o] { font-size: 11px; }

/* Paid / Collected — clean card, green pill */
.ce-collected.ce-cell[b-t1caxk6l1o], .ce-collected.ce-month[b-t1caxk6l1o] { background: var(--bg-card); border-color: var(--border); }
.ce-collected .ce-cell-tag[b-t1caxk6l1o], .ce-collected .ce-month-tag[b-t1caxk6l1o] { background: var(--green-bg); color: var(--green); }

/* Unpaid — clean card, red pill (no heavy red fill) */
.ce-missed.ce-cell[b-t1caxk6l1o], .ce-missed.ce-month[b-t1caxk6l1o] { background: var(--bg-card); border-color: var(--border); }
.ce-missed .ce-cell-tag[b-t1caxk6l1o], .ce-missed .ce-month-tag[b-t1caxk6l1o] { background: var(--red-bg); color: var(--red); }

/* Excused — the highlighted state: soft gold wash + gold pill */
.ce-excused.ce-cell[b-t1caxk6l1o], .ce-excused.ce-month[b-t1caxk6l1o] { background: rgba(200,168,75,.12); border-color: rgba(200,168,75,.5); }
.ce-excused .ce-cell-tag[b-t1caxk6l1o], .ce-excused .ce-month-tag[b-t1caxk6l1o] { background: rgba(200,168,75,.22); color: #8a6a1f; }
.ce-excused .ce-cell-num[b-t1caxk6l1o], .ce-excused .ce-month-name[b-t1caxk6l1o] { color: #8a6a1f; }

/* Closed — the market did not open: neutral tone with a diagonal hatch so it is never read as unpaid or as an excuse */
.ce-closed.ce-cell[b-t1caxk6l1o] { background: repeating-linear-gradient(135deg, var(--bg) 0 6px, var(--bg-icon) 6px 7px); border-color: var(--border); cursor: default; }
.ce-closed .ce-cell-num[b-t1caxk6l1o] { color: var(--text-subtle); }
.ce-closed .ce-cell-tag[b-t1caxk6l1o] { background: var(--bg-icon); color: var(--text-subtle); }

/* Upcoming — muted, dashed */
.ce-future.ce-cell[b-t1caxk6l1o], .ce-future.ce-month[b-t1caxk6l1o] { background: var(--bg); border-style: dashed; }
.ce-future .ce-cell-num[b-t1caxk6l1o], .ce-future .ce-month-name[b-t1caxk6l1o] { color: var(--text-muted); }
.ce-future .ce-cell-tag[b-t1caxk6l1o], .ce-future .ce-month-tag[b-t1caxk6l1o] { background: var(--bg-icon); color: var(--text-muted); }

/* Market "Open" day — neutral, clearly clickable */
.ce-mkt-open.ce-cell[b-t1caxk6l1o] { background: var(--bg-card); border-color: var(--border); }
.ce-mkt-open .ce-cell-tag[b-t1caxk6l1o] { background: var(--green-bg); color: var(--green); }
.ce-mkt-open:hover[b-t1caxk6l1o] { border-color: var(--accent); }

/* Out of scope — before the contract existed: greyed, non-interactive, shown as "—" */
.ce-na.ce-cell[b-t1caxk6l1o], .ce-na.ce-month[b-t1caxk6l1o] { background: var(--bg); opacity: .5; cursor: default; box-shadow: none; }
.ce-na.ce-cell:hover[b-t1caxk6l1o], .ce-na.ce-month:hover[b-t1caxk6l1o] { border-color: var(--border); transform: none; }
.ce-na .ce-cell-num[b-t1caxk6l1o], .ce-na .ce-month-name[b-t1caxk6l1o] { color: var(--text-muted); }
.ce-na .ce-cell-tag[b-t1caxk6l1o], .ce-na .ce-month-tag[b-t1caxk6l1o] { background: transparent; color: var(--text-muted); }

/* ── Legend ── */
.ce-legend[b-t1caxk6l1o] { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 2px; font-size: 11.5px; color: var(--text-subtle); }
.ce-legend span[b-t1caxk6l1o] { display: inline-flex; align-items: center; gap: 6px; }
.ce-sw[b-t1caxk6l1o] { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1px solid var(--border); }
.ce-sw-collected[b-t1caxk6l1o] { background: var(--bg-card); border: 1.5px solid var(--navy); }
.ce-sw-missed[b-t1caxk6l1o] { background: var(--red-bg); border-color: rgba(139,58,58,.5); }
.ce-sw-excused[b-t1caxk6l1o] { background: rgba(200,168,75,.3); border-color: rgba(200,168,75,.6); }
.ce-sw-closed[b-t1caxk6l1o] { background: repeating-linear-gradient(135deg, var(--bg) 0 3px, var(--bg-icon) 3px 4px); border-color: var(--text-muted); }
/* The copper the calendar already uses for a part-settled month, so the legend and the cells agree. */
.ce-sw-partial[b-t1caxk6l1o] { background: rgba(184,115,51,.16); border-color: rgba(184,115,51,.5); }
.ce-sw-future[b-t1caxk6l1o] { background: rgba(168,184,200,.18); border-style: dashed; }
.ce-sw-open[b-t1caxk6l1o] { background: var(--green-bg); border-color: rgba(45,122,95,.5); }

/* ── Detail drawer ── */
.ce-drawer[b-t1caxk6l1o] { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); margin-top: 8px; overflow: hidden; }
.ce-drawer-head[b-t1caxk6l1o] { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card); }
.ce-drawer-title[b-t1caxk6l1o] { font-size: 14px; font-weight: 800; color: var(--navy); }
.ce-drawer-status[b-t1caxk6l1o] { font-size: 12px; color: var(--text-subtle); margin-top: 3px; }
.ce-sched[b-t1caxk6l1o] { display: inline-block; margin-left: 8px; background: rgba(168,184,200,.18); color: var(--text-subtle); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.ce-x[b-t1caxk6l1o] { border: none; background: transparent; cursor: pointer; padding: 2px; }
.ce-x svg[b-t1caxk6l1o] { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; }
.ce-x:hover svg[b-t1caxk6l1o] { stroke: var(--navy); }

.ce-drawer-body[b-t1caxk6l1o] { padding: 16px; }
.ce-set-label[b-t1caxk6l1o] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 10px; }
/* Three options on a market day, four on a month, which is where Partial belongs. auto-fit rather than a fixed
   count so neither case leaves a gap or squeezes. */
.ce-set-opts[b-t1caxk6l1o] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ce-set-opt[b-t1caxk6l1o] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; background: var(--bg-card);
    cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s, background .12s;
}
.ce-set-opt:hover[b-t1caxk6l1o] { border-color: var(--navy-3); }
.ce-set-dot[b-t1caxk6l1o] { width: 8px; height: 8px; border-radius: 50%; margin-bottom: 4px; }
.ce-set-name[b-t1caxk6l1o] { font-size: 12.5px; font-weight: 800; color: var(--navy); }
.ce-set-sub[b-t1caxk6l1o] { font-size: 11px; color: var(--text-subtle); }
.ce-set-paid .ce-set-dot[b-t1caxk6l1o] { background: var(--green); }
.ce-set-unpaid .ce-set-dot[b-t1caxk6l1o] { background: var(--red); }
.ce-set-excused .ce-set-dot[b-t1caxk6l1o] { background: var(--gold); }
.ce-set-partial .ce-set-dot[b-t1caxk6l1o] { background: #9a5a1f; }
.ce-set-paid.ce-set-on[b-t1caxk6l1o] { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); background: var(--green-bg); }
.ce-set-unpaid.ce-set-on[b-t1caxk6l1o] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); background: var(--red-bg); }
.ce-set-excused.ce-set-on[b-t1caxk6l1o] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--gold); background: rgba(200,168,75,.14); }
.ce-set-partial.ce-set-on[b-t1caxk6l1o] { border-color: #9a5a1f; box-shadow: 0 0 0 1px #9a5a1f; background: rgba(184,115,51,.10); }

/* Where the month stands before anything is changed: billed, collected, and what is still owed. A quiet strip, not a
   set of cards; it is the ledger line the officer is about to act on, not a summary to be read on its own. */
.ce-standing[b-t1caxk6l1o] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.ce-standing-item[b-t1caxk6l1o] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ce-standing-lbl[b-t1caxk6l1o] { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--text-muted); }
.ce-standing-val[b-t1caxk6l1o] { font-size: 14px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.ce-standing-owed[b-t1caxk6l1o] { color: var(--red); }

/* What the amount is a part of. Guidance, so it is set quietly under the field. */
.ce-partial-hint[b-t1caxk6l1o] { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

/* Status pill (drawer header current status) */
.ce-pill[b-t1caxk6l1o] { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.ce-pill-collected[b-t1caxk6l1o] { background: var(--green-bg); color: var(--green); }
.ce-pill-missed[b-t1caxk6l1o] { background: var(--red-bg); color: var(--red); }
.ce-pill-excused[b-t1caxk6l1o] { background: rgba(200,168,75,.16); color: #b5872a; }
.ce-pill-future[b-t1caxk6l1o] { background: var(--bg-icon); color: var(--text-muted); }
.ce-pill-partial[b-t1caxk6l1o] { background: rgba(184,115,51,.14); color: #9a5a1f; }

/* Partial (monthly) — amber, distinct from Paid/Unpaid */
.ce-partial.ce-cell[b-t1caxk6l1o], .ce-partial.ce-month[b-t1caxk6l1o] { background: rgba(184,115,51,.10); border-color: rgba(184,115,51,.4); }
.ce-partial .ce-cell-tag[b-t1caxk6l1o], .ce-partial .ce-month-tag[b-t1caxk6l1o] { background: rgba(184,115,51,.16); color: #9a5a1f; }
.ce-partial .ce-month-name[b-t1caxk6l1o] { color: #7a4a1a; }

/* Disabled status option (future Paid/Unpaid) */
.ce-set-disabled[b-t1caxk6l1o] { opacity: .4; cursor: not-allowed; }
.ce-set-disabled:hover[b-t1caxk6l1o] { border-color: var(--border); }

/* Future-only note */
.ce-future-note[b-t1caxk6l1o] { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 11.5px; color: var(--text-subtle); }
.ce-future-note svg[b-t1caxk6l1o] { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ce-future-note strong[b-t1caxk6l1o] { color: #8a6a1f; font-weight: 800; }

/* OR-number field (shown for Paid) */
.ce-or[b-t1caxk6l1o] { margin-top: 14px; }
.ce-or-label[b-t1caxk6l1o] { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 6px; }
.ce-or-opt[b-t1caxk6l1o] { color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.ce-or-input[b-t1caxk6l1o] { width: 100%; max-width: 280px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 13px; color: var(--text); background: var(--bg-card); font-family: inherit; box-sizing: border-box; }
.ce-or-input:focus[b-t1caxk6l1o] { outline: none; border-color: var(--navy-3); }

/* Lock badge (drawer header) + lock glyph on recorded cells */
.ce-lock-badge[b-t1caxk6l1o] { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; background: var(--bg-icon); color: var(--text-subtle); font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.ce-lock-badge svg[b-t1caxk6l1o] { width: 11px; height: 11px; stroke: var(--text-muted); fill: none; stroke-width: 2; }
.ce-lock[b-t1caxk6l1o] { position: absolute; top: 6px; right: 7px; display: inline-flex; opacity: .32; pointer-events: none; }
.ce-lock svg[b-t1caxk6l1o] { width: 10px; height: 10px; stroke: var(--navy); fill: none; stroke-width: 2; }

/* Confirmation bar */
.ce-confirm[b-t1caxk6l1o] { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 12px 14px; }
.ce-confirm-warn[b-t1caxk6l1o] { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--red); font-weight: 600; margin-bottom: 10px; }
.ce-confirm-warn svg[b-t1caxk6l1o] { width: 15px; height: 15px; stroke: var(--red); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ce-confirm-row[b-t1caxk6l1o] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ce-confirm-q[b-t1caxk6l1o] { font-size: 13px; color: var(--navy); }
.ce-confirm-q strong[b-t1caxk6l1o] { font-weight: 800; }
.ce-confirm-actions[b-t1caxk6l1o] { display: flex; gap: 8px; }
.ce-cbtn[b-t1caxk6l1o] { border: 1px solid var(--border); background: var(--bg-card); color: var(--navy); border-radius: 8px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .12s, border-color .12s; }
.ce-cbtn-ghost[b-t1caxk6l1o] { color: var(--text-subtle); }
.ce-cbtn-ghost:hover[b-t1caxk6l1o] { background: var(--bg-icon); }
.ce-cbtn-primary[b-t1caxk6l1o] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ce-cbtn-primary:hover[b-t1caxk6l1o] { background: var(--accent-hover); }
.ce-cbtn:disabled[b-t1caxk6l1o] { opacity: .45; cursor: not-allowed; }
.ce-cbtn-primary:disabled:hover[b-t1caxk6l1o] { background: var(--accent-hover); }

/* Double-confirmation acknowledgment (locked / past edits) */
.ce-ack[b-t1caxk6l1o] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--navy); margin-bottom: 12px; cursor: pointer; font-weight: 600; }
.ce-ack input[b-t1caxk6l1o] { width: 15px; height: 15px; accent-color: var(--navy); cursor: pointer; flex-shrink: 0; }

/* Mode toggle (NPM: Per-Payor / Market Days) */
.ce-mode[b-t1caxk6l1o] { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin-bottom: 18px; }
.ce-mode-btn[b-t1caxk6l1o] { border: none; background: var(--bg); padding: 8px 18px; font-size: 12.5px; font-weight: 700; color: var(--text-subtle); cursor: pointer; border-right: 1px solid var(--border); transition: background .12s, color .12s; }
.ce-mode-btn:last-child[b-t1caxk6l1o] { border-right: none; }
.ce-mode-btn:hover[b-t1caxk6l1o] { background: var(--bg-icon); color: var(--navy); }
.ce-mode-on[b-t1caxk6l1o], .ce-mode-on:hover[b-t1caxk6l1o] { background: var(--accent); color: #fff; }
.ce-mode-btn:focus-visible[b-t1caxk6l1o] { outline: 2px solid var(--accent); outline-offset: -2px; }
.ce-layout-wide[b-t1caxk6l1o] { grid-template-columns: 1fr; height: auto; }
.ce-muted[b-t1caxk6l1o] { color: var(--text-subtle); }

/* ── Market closure summary ── */
.ce-mkt-summary[b-t1caxk6l1o] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 13px; color: var(--navy); }
.ce-mkt-summary svg[b-t1caxk6l1o] { width: 17px; height: 17px; stroke: #b5872a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ce-mkt-summary strong[b-t1caxk6l1o] { font-weight: 800; }
.ce-mkt-hint[b-t1caxk6l1o] { color: var(--text-subtle); font-size: 11.5px; margin-left: auto; }

/* ── Market calendar cell states ── */
.ce-open.ce-cell[b-t1caxk6l1o] { background: var(--bg-card); border-color: var(--border); }
.ce-open .ce-cell-tag[b-t1caxk6l1o] { background: var(--green-bg); color: var(--green); }
.ce-closed.ce-cell[b-t1caxk6l1o] { background: rgba(200,168,75,.12); border-color: rgba(200,168,75,.5); }
.ce-closed .ce-cell-tag[b-t1caxk6l1o] { background: rgba(200,168,75,.22); color: #8a6a1f; }
.ce-closed .ce-cell-num[b-t1caxk6l1o] { color: #8a6a1f; }

/* ── Notes ── */
.ce-market-note[b-t1caxk6l1o] { font-size: 12.5px; color: var(--text-subtle); line-height: 1.5; margin: 0 0 12px; }
.ce-market-note strong[b-t1caxk6l1o] { color: var(--navy); font-weight: 800; }
.ce-closure-note[b-t1caxk6l1o] { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-subtle); line-height: 1.5; }
.ce-closure-note svg[b-t1caxk6l1o] { width: 15px; height: 15px; stroke: #8a6a1f; fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px; }
.ce-closure-note strong[b-t1caxk6l1o] { color: var(--navy); font-weight: 800; }

/* Phase placeholder note + save error */
.ce-soon[b-t1caxk6l1o] { display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; font-size: 13px; color: var(--text-subtle); line-height: 1.5; }
.ce-soon svg[b-t1caxk6l1o] { width: 17px; height: 17px; flex-shrink: 0; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ce-soon strong[b-t1caxk6l1o] { color: var(--navy); font-weight: 700; }
.ce-form-error[b-t1caxk6l1o] { color: var(--red); font-size: 12px; margin-top: 10px; font-weight: 600; }

/* ── Responsive ── */
@media screen and (max-width: 900px) {
    .ce-layout[b-t1caxk6l1o] { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .ce-side[b-t1caxk6l1o] { height: auto; }
    .ce-main[b-t1caxk6l1o] { height: auto; overflow: visible; }
    .ce-stats[b-t1caxk6l1o] { grid-template-columns: repeat(2, 1fr); }
    .ce-months[b-t1caxk6l1o] { grid-template-columns: repeat(3, 1fr); }
}


/* ── Fish weight input (NPM Fish Area — ₱1/kg on top of the daily fee) ── */
.ce-fish-row[b-t1caxk6l1o] { display: flex; align-items: center; gap: 8px; max-width: 280px; }
.ce-fish-input[b-t1caxk6l1o] { max-width: none; flex: 1; }
.ce-fish-unit[b-t1caxk6l1o] { font-size: 12px; font-weight: 800; color: var(--text-muted); }

/* ── Record payment by amount ── */
.ce-amount[b-t1caxk6l1o] { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); display: flex; flex-direction: column; gap: 10px; }
.ce-amount-title[b-t1caxk6l1o] { margin: 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.ce-amount-row[b-t1caxk6l1o] { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ce-amount-field[b-t1caxk6l1o] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-subtle); }
.ce-amount-input[b-t1caxk6l1o] { min-height: 40px; width: 180px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--navy); font-variant-numeric: tabular-nums; }
.ce-amount-input:focus-visible[b-t1caxk6l1o], .ce-amount-btn:focus-visible[b-t1caxk6l1o] { outline: 2px solid var(--accent); outline-offset: 2px; }
.ce-amount-btn[b-t1caxk6l1o] { min-height: 40px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ce-amount-btn:disabled[b-t1caxk6l1o] { opacity: .5; cursor: not-allowed; }
.ce-amount-result[b-t1caxk6l1o] { font-size: 13px; color: var(--text-subtle); min-height: 20px; }
.ce-amount-ok[b-t1caxk6l1o] { color: var(--green); }
.ce-amount-hint[b-t1caxk6l1o] { color: var(--text-muted); }

.ce-part-table[b-t1caxk6l1o] { margin: 8px 0 0; border-collapse: collapse; font-size: 13px; color: var(--navy); font-variant-numeric: tabular-nums; }
.ce-part-table th[b-t1caxk6l1o], .ce-part-table td[b-t1caxk6l1o] { padding: 4px 16px 4px 0; text-align: left; border-bottom: 1px solid var(--border); }
.ce-part-table th[b-t1caxk6l1o] { font-weight: 600; color: var(--text-subtle); }
.ce-part-table .ce-num[b-t1caxk6l1o] { text-align: right; }
/* /Components/Pages/Reports/CollectionsRegisterPanel.razor.rz.scp.css */
/* Collections register — V3. Tables and buttons come from the v3- layer in app.css. */

.cr[b-lw9arhuavu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

/* Title and filters share one line: each filter's label sits beside its select, so the heading row is one control tall. */
.cr-head[b-lw9arhuavu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.cr-head h2[b-lw9arhuavu] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.cr-tools[b-lw9arhuavu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

    .cr-tools .v3-field[b-lw9arhuavu] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .cr-tools .v3-field > span:first-child[b-lw9arhuavu] {
        white-space: nowrap;
    }

/* A panel is a header band and a full-bleed table, as on the other V3 registers: no inner frame around the rows. */
.cr-panel[b-lw9arhuavu] {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

.cr-panel h3[b-lw9arhuavu] {
    margin: 0;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 700;
}

.cr-panel > .cr-note[b-lw9arhuavu] {
    margin: 0;
    padding: 10px 20px 12px;
    border-top: 1px solid var(--border);
}

/* Registers scroll inside their panel on a narrow screen rather than wrapping dates and serials mid-value. */
.cr-panel .v3-table td[b-lw9arhuavu],
.cr-panel .v3-table th[b-lw9arhuavu] {
    white-space: nowrap;
}

.cr-panel tfoot td[b-lw9arhuavu] {
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

.cr-note[b-lw9arhuavu] {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.cr-link[b-lw9arhuavu] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.cr-link:focus-visible[b-lw9arhuavu] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cr-doc-head[b-lw9arhuavu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 20px;
    border-bottom: 1px solid var(--border);
}

    .cr-doc-head h3[b-lw9arhuavu] {
        border-bottom: 0;
    }

.cr-doc > .cr-note[b-lw9arhuavu] {
    margin: 0;
    padding: 10px 20px;
    border-top: 0;
}

.cr-print-head[b-lw9arhuavu] {
    display: none;
}

@media print {
    .cr-print-head[b-lw9arhuavu] {
        display: block;
    }

    .cr-tools[b-lw9arhuavu],
    .cr-doc-head button[b-lw9arhuavu] {
        display: none;
    }
}

/* Itemized documents: the first line carries the document; following lines of the same document sit indented under it. */
.cr-cont td[b-lw9arhuavu] {
    border-top: 0;
}

.cr-cont td:not(.cr-cont-cell):first-of-type[b-lw9arhuavu] {
    padding-left: 28px;
}

.cr-cont-cell[b-lw9arhuavu] {
    position: relative;
}

.cr-cont-cell[b-lw9arhuavu]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 20px;
    width: 10px;
    border-left: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
}
/* /Components/Pages/Reports/CollectorReport.razor.rz.scp.css */
/* ══ Report of Collections — mock sheet.
   The shell and document styles are the ones the facility reports already carry (scoped per page, as they are there),
   so the office judges this layout against sheets it already signs. Nothing new is introduced beyond the sample notice,
   the numeric column alignment and the reconciliation strip. ══ */

/* ── Topbar ── */
.rpt-topbar[b-bgmb7xzc9g] { background: var(--navy); padding: 18px 28px 16px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; }
.rpt-topbar[b-bgmb7xzc9g]::before { content: ""; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(200,168,75,.16) 0%, transparent 70%); pointer-events: none; }
.rpt-topbar-left[b-bgmb7xzc9g] { display: flex; align-items: center; gap: 14px; flex: 1; position: relative; z-index: 1; }
.rpt-back-btn[b-bgmb7xzc9g] { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); text-decoration: none; transition: background .15s; flex-shrink: 0; }
.rpt-back-btn:hover[b-bgmb7xzc9g] { background: rgba(255,255,255,.14); }
.rpt-back-btn svg[b-bgmb7xzc9g] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-topbar-icon[b-bgmb7xzc9g] { width: 40px; height: 40px; border-radius: 10px; background: rgba(200,168,75,.18); border: 1px solid rgba(200,168,75,.28); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rpt-topbar-icon svg[b-bgmb7xzc9g] { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpt-eyebrow[b-bgmb7xzc9g] { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.rpt-title[b-bgmb7xzc9g] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.rpt-subtitle[b-bgmb7xzc9g] { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.rpt-topbar-right[b-bgmb7xzc9g] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.rpt-action-btn[b-bgmb7xzc9g] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s; }
.rpt-action-btn:hover[b-bgmb7xzc9g] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-bgmb7xzc9g] { outline: 2px solid color-mix(in srgb, var(--gold) 85%, white); outline-offset: 2px; }
.rpt-action-btn svg[b-bgmb7xzc9g] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Period bar ── */
.rpt-period-bar[b-bgmb7xzc9g] { display: flex; align-items: center; justify-content: space-between; padding: 10px 28px; background: var(--bg-card); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
.rpt-period-tabs[b-bgmb7xzc9g] { display: flex; gap: 5px; background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%); border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 9px; padding: 4px; align-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.86); }
.rpt-period-tab[b-bgmb7xzc9g] { min-height: 32px; min-width: 92px; padding: 6px 18px; border-radius: 6px; border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 650; color: color-mix(in srgb, var(--text-muted) 88%, var(--navy)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.rpt-period-tab.active[b-bgmb7xzc9g] { background: var(--accent); border-color: color-mix(in srgb, var(--navy) 76%, #fff); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14); }
.rpt-date-nav[b-bgmb7xzc9g] { display: flex; align-items: center; gap: 10px; }
.rpt-nav-btn[b-bgmb7xzc9g] { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-icon); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .13s; }
.rpt-nav-btn:hover[b-bgmb7xzc9g] { background: var(--border); }
.rpt-nav-btn svg[b-bgmb7xzc9g] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-bgmb7xzc9g] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ── Document shell ── */
.rpt-content[b-bgmb7xzc9g] { padding: 20px 28px 40px; display: flex; flex-direction: column; gap: 20px; }
.print-document-content[b-bgmb7xzc9g] { display: block; background: #eef3f7; overflow-x: hidden; }
.print-report-sheet[b-bgmb7xzc9g] { width: 100%; min-height: 900px; padding: 30px 28px 40px; box-sizing: border-box; background: #fff; border: 1px solid #d5dde5; box-shadow: 0 18px 38px rgba(9, 31, 52, .08); color: #111827; }
.print-report-header[b-bgmb7xzc9g] { text-align: center; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.print-report-logo[b-bgmb7xzc9g] { display: block; width: 58px; height: 58px; object-fit: contain; margin: 0 auto 10px; }
.print-republic[b-bgmb7xzc9g] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
.print-report-header h2[b-bgmb7xzc9g] { margin: 7px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.15; color: #111827; }
.print-report-header p[b-bgmb7xzc9g] { margin: 0; font-size: 12px; color: #4b5563; }
.print-report-title[b-bgmb7xzc9g] { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; color: #111827; }
.print-report-meta[b-bgmb7xzc9g] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cfd6de; margin-bottom: 16px; }
.print-report-meta div[b-bgmb7xzc9g] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-meta div:last-child[b-bgmb7xzc9g] { border-right: none; }
.print-report-meta span[b-bgmb7xzc9g] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-meta strong[b-bgmb7xzc9g] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-summary[b-bgmb7xzc9g] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cfd6de; margin-bottom: 20px; background: #f8fafc; }
.print-report-summary div[b-bgmb7xzc9g] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-summary div:last-child[b-bgmb7xzc9g] { border-right: none; }
.print-report-summary span[b-bgmb7xzc9g] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-summary strong[b-bgmb7xzc9g] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }

/* States what the period itself accounts for, where some of its cash settled earlier periods. Plain prose under the
   figures rather than a fifth tile: it qualifies the total, and a tile would read as another total. */
.cr-basis-note[b-bgmb7xzc9g] { margin: 8px 0 0; font-size: 10.5px; line-height: 1.5; color: #4b5563; }

.print-section-block[b-bgmb7xzc9g] { margin-top: 24px; }
.print-section-heading[b-bgmb7xzc9g] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); padding: 6px 0 4px; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.print-table-wrap[b-bgmb7xzc9g] { margin-top: 12px; width: 100%; overflow-x: hidden; }
.print-status-table[b-bgmb7xzc9g] { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; color: #111827; }
.print-status-table th[b-bgmb7xzc9g], .print-status-table td[b-bgmb7xzc9g] { border: 1px solid #cfd6de; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-status-table th[b-bgmb7xzc9g] { background: #f3f6f9; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #374151; }
.status-sheet .print-status-table[b-bgmb7xzc9g] { font-size: 13px !important; }
.status-sheet .print-status-table th[b-bgmb7xzc9g] { font-size: 11px !important; }
.status-sheet .print-status-table td[b-bgmb7xzc9g] { padding: 9px 10px; }
.status-sheet .print-report-meta span[b-bgmb7xzc9g] { font-size: 11px; }
.status-sheet .print-report-meta strong[b-bgmb7xzc9g] { font-size: 14px; }
.status-sheet .print-report-summary span[b-bgmb7xzc9g], .status-sheet .print-report-summary strong[b-bgmb7xzc9g] { font-size: 14px; }
.text-muted-cell[b-bgmb7xzc9g] { color: #6b7280; }

/* The signatory footer. The strip itself declares `display: contents`, deliberately leaving the layout to its host, so a
   sheet that omits these columns gets the lines stacked one under another down the page. */
.print-report-signatures[b-bgmb7xzc9g] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 58px; }
.print-report-signatures div[b-bgmb7xzc9g] { border-top: 1px solid #111827; padding-top: 8px; text-align: center; }
.print-report-signatures span[b-bgmb7xzc9g] { display: block; font-size: 11px; color: #6b7280; }
.print-report-signatures strong[b-bgmb7xzc9g] { display: block; margin-top: 3px; font-size: 11px; color: #111827; }
.status-sheet .print-report-signatures span[b-bgmb7xzc9g] { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-bgmb7xzc9g] { font-size: 14px; }

/* ── The few additions this sheet needs ── */
.cr-num[b-bgmb7xzc9g] { text-align: right; }
/* Space above a table that continues onto another sheet. Copied in intent from the roster, which met this first: the
   sheet's own padding is drawn where the sheet STARTS, so a table breaking across pages left its continuation hard against
   the paper's edge. A head repeats at the top of every page the table runs onto, so a blank first row in the head is the
   only thing that lands there; it carries no border and no fill, and the page the table begins on is pulled up by exactly
   its height. A top page margin would be the obvious alternative and is refused: the page margin is nought precisely so
   the browser has no margin box for its date, URL and page number. */
.cr-gap-row[b-bgmb7xzc9g] { display: none; }
.cr-total-row td[b-bgmb7xzc9g] { background: #f3f6f9; border-top: 2px solid #cfd6de; }
.cr-note[b-bgmb7xzc9g] { margin: 10px 0 0; font-size: 11px; color: #6b7280; line-height: 1.5; }
.print-empty[b-bgmb7xzc9g] { margin: 22px 0; padding: 16px; text-align: center; font-size: 12px; color: #6b7280; border: 1px dashed #cfd6de; background: #f8fafc; }

@media screen and (max-width: 900px) {
    .print-report-meta[b-bgmb7xzc9g], .print-report-summary[b-bgmb7xzc9g] { grid-template-columns: 1fr 1fr; }
    .rpt-content[b-bgmb7xzc9g] { padding: 14px 12px 30px; }
    .print-report-sheet[b-bgmb7xzc9g] { padding: 20px 16px 28px; }
}

@media print {
    body[b-bgmb7xzc9g] { background: white !important; }
    .rpt-topbar[b-bgmb7xzc9g], .rpt-period-bar[b-bgmb7xzc9g] { display: none !important; }
    .rpt-content[b-bgmb7xzc9g] { padding: 0 !important; }
    .print-document-content[b-bgmb7xzc9g] { display: block !important; background: white !important; }

    /* Page size, page margin and the sheet's own 12mm of inner whitespace are print.css's business, for every printable
       sheet in the portal: the margin is nought so the browser has no margin box to draw its date and URL into, and the
       sheet pads itself instead. Nothing here may restate them. CSS isolation compiles these selectors with an attribute,
       which outranks print.css's bare classes even where both say !important, so a padding stated here would win and did:
       it printed this sheet flush against the paper on all four sides. Only what is peculiar to this document belongs
       below. */
    .print-report-sheet[b-bgmb7xzc9g] { min-height: auto !important; border: none !important; box-shadow: none !important; }

    .print-section-block[b-bgmb7xzc9g] { break-inside: auto; }
    /* A heading alone at the foot of a page is a heading for nothing. */
    .print-section-heading[b-bgmb7xzc9g] { break-after: avoid; }
    .print-status-table thead[b-bgmb7xzc9g] { display: table-header-group; }
    .print-status-table tfoot[b-bgmb7xzc9g] { display: table-row-group; }
    .cr-gap-row[b-bgmb7xzc9g] { display: table-row; }
    .cr-gap-row td[b-bgmb7xzc9g] { height: 7mm; padding: 0 !important; border: 0 !important; background: transparent !important; }
    /* Cancels the spacer on the page the table begins, and only that: the 12px the heading always sits above the table is
       kept, rather than being swallowed along with it. */
    .print-table-wrap[b-bgmb7xzc9g] { margin-top: calc(12px - 7mm); }
    .print-status-table tr[b-bgmb7xzc9g] { break-inside: avoid; }
    .print-status-table tbody tr:last-child[b-bgmb7xzc9g] { break-after: avoid; }
    .print-status-table tfoot[b-bgmb7xzc9g] { break-before: avoid; }
    /* Two or three rows are not worth a page of their own. */
    .print-status-table tbody[b-bgmb7xzc9g] { orphans: 3; widows: 3; }

    /* The signatories are the sheet's closing, not a page of their own. The 58px of air that sets them apart on screen is
       what pushed them onto an otherwise empty last page, so on paper the gap is a fifth of that, the closing note travels
       with them, and the pair is never split. */
    .cr-closing[b-bgmb7xzc9g] { break-inside: avoid; }
    .print-report-signatures[b-bgmb7xzc9g] { margin-top: 12mm; break-inside: avoid; }
    .cr-closing .cr-note[b-bgmb7xzc9g] { margin-bottom: 0; }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-bgmb7xzc9g] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-bgmb7xzc9g]::before,
    .rpt-topbar[b-bgmb7xzc9g]::after {
        display: none;
    }

.rpt-back-btn[b-bgmb7xzc9g] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-bgmb7xzc9g] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-bgmb7xzc9g] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-bgmb7xzc9g] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-bgmb7xzc9g] {
    color: var(--text-tertiary);
}

.rpt-title[b-bgmb7xzc9g] {
    color: var(--navy);
}

.rpt-subtitle[b-bgmb7xzc9g] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-bgmb7xzc9g] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-bgmb7xzc9g] {
    background: var(--accent);
}

.rpt-action-btn[b-bgmb7xzc9g] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-bgmb7xzc9g] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-bgmb7xzc9g] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-bgmb7xzc9g],
.rpt-document-tab.active[b-bgmb7xzc9g],
.utility-section-tab.active[b-bgmb7xzc9g] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-bgmb7xzc9g],
.rpt-document-tab:hover:not(.active)[b-bgmb7xzc9g],
.utility-section-tab:hover:not(.active)[b-bgmb7xzc9g] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-bgmb7xzc9g],
.rpt-action-btn:focus-visible[b-bgmb7xzc9g],
.rpt-period-tab:focus-visible[b-bgmb7xzc9g],
.rpt-document-tab:focus-visible[b-bgmb7xzc9g] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/Reports/CustomReports.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   TccReports.razor.css — Tampak Commercial Center Reports
   Visual language mirrors NpmReports. All tokens from app.css.
   TCC-specific: stall-size tiers, no fish/section/daily widgets.
══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.rpt-topbar[b-u41ufu7in3] {
    background: var(--navy);
    padding: 18px 28px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.rpt-topbar[b-u41ufu7in3]::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(200,168,75,.16) 0%, transparent 70%);
    pointer-events: none;
}
.rpt-topbar-left[b-u41ufu7in3] { display: flex; align-items: center; gap: 14px; flex: 1; position: relative; z-index: 1; }
.rpt-back-btn[b-u41ufu7in3] {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s;
    flex-shrink: 0;
}
.rpt-back-btn:hover[b-u41ufu7in3] { background: rgba(255,255,255,.14); }
.rpt-back-btn svg[b-u41ufu7in3] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-topbar-icon[b-u41ufu7in3] {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(200,168,75,.18);
    border: 1px solid rgba(200,168,75,.28);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rpt-topbar-icon svg[b-u41ufu7in3] { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpt-eyebrow[b-u41ufu7in3] { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.rpt-title[b-u41ufu7in3] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.rpt-subtitle[b-u41ufu7in3] { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.rpt-header-progress[b-u41ufu7in3] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
}
.rpt-header-progress-fill[b-u41ufu7in3] {
    height: 100%;
    background: var(--gold);
    transition: width .4s ease;
}
.rpt-topbar-right[b-u41ufu7in3] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.rpt-action-btn[b-u41ufu7in3] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.85);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.rpt-action-btn:hover[b-u41ufu7in3] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-u41ufu7in3] { outline: 2px solid color-mix(in srgb, var(--gold) 85%, white); outline-offset: 2px; }
.rpt-action-btn svg[b-u41ufu7in3] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Period bar ── */
.rpt-period-bar[b-u41ufu7in3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}
.rpt-period-tabs[b-u41ufu7in3] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.rpt-period-tab[b-u41ufu7in3] {
    min-height: 32px;
    min-width: 92px;
    padding: 6px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.rpt-period-tab.active[b-u41ufu7in3] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14);
}
.rpt-document-tab[b-u41ufu7in3] { gap: 7px; padding: 0 16px; min-width: 0; }
.rpt-document-tab svg[b-u41ufu7in3] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rpt-date-nav[b-u41ufu7in3] { display: flex; align-items: center; gap: 10px; }
.rpt-date-nav.utility-mode .rpt-current-period[b-u41ufu7in3] { color: var(--accent); }
.rpt-nav-btn[b-u41ufu7in3] {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .13s;
}
.rpt-nav-btn:hover[b-u41ufu7in3] { background: var(--border); }
.rpt-nav-btn svg[b-u41ufu7in3] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-u41ufu7in3] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ── KPI Strip ── */
.rpt-kpi-strip[b-u41ufu7in3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 28px 0;
}
.rpt-kpi-card[b-u41ufu7in3] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.kpi-icon-wrap[b-u41ufu7in3] {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-icon-wrap svg[b-u41ufu7in3] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Uniform neutral icon tiles — consistent across all facility reports. */
.kpi-icon-green[b-u41ufu7in3],
.kpi-icon-gold[b-u41ufu7in3],
.kpi-icon-red[b-u41ufu7in3],
.kpi-icon-neutral[b-u41ufu7in3] { background: var(--bg-icon); color: var(--navy-3); }
.kpi-body[b-u41ufu7in3] { flex: 1; min-width: 0; }
.kpi-label[b-u41ufu7in3] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
.kpi-value[b-u41ufu7in3] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.kpi-change[b-u41ufu7in3] { font-size: 12px; color: var(--text-subtle); margin-top: 5px; }
.kpi-change-negative[b-u41ufu7in3] { color: var(--red); }

/* ── Main content ── */
.rpt-content[b-u41ufu7in3] {
    padding: 20px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Charts row ── */
.rpt-charts-row[b-u41ufu7in3] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: stretch;
}
.rpt-chart-card[b-u41ufu7in3] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.rpt-chart-wide[b-u41ufu7in3] { display: flex; flex-direction: column; }
.chart-header[b-u41ufu7in3] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.chart-header-left[b-u41ufu7in3] { flex: 1; }
.chart-title[b-u41ufu7in3] { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.chart-subtitle[b-u41ufu7in3] { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.chart-legend[b-u41ufu7in3] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend-item[b-u41ufu7in3] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-u41ufu7in3] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-label[b-u41ufu7in3] { font-size: 12px; color: var(--text-subtle); font-weight: 500; }

/* ── 3D Bar chart (identical to NPM) ── */
.rpt-bar-chart[b-u41ufu7in3] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex: 1;
    min-height: 250px;
    padding: 14px 18px 10px;
    position: relative;
    background:
        repeating-linear-gradient(to top, transparent 0, transparent 39px, color-mix(in srgb, var(--border) 55%, transparent) 40px),
        linear-gradient(to top, rgba(13,33,55,.02) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.rpt-bar-group[b-u41ufu7in3] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.rpt-bar-wrap[b-u41ufu7in3] { width: 100%; height: calc(100% - 40px); position: relative; flex-shrink: 0; }
.rpt-bar-3d[b-u41ufu7in3] { width: min(100%, 140px); height: 100%; position: relative; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--navy) 8%, transparent)); margin-inline: auto; }
.rpt-bar-group.current .rpt-bar-3d[b-u41ufu7in3] { filter: drop-shadow(0 4px 8px rgba(200,168,75,.2)); }
.bar3d-face[b-u41ufu7in3] { position: absolute; }
/* Flat 2D bar — top/side faces hidden, identical to NPM */
.bar3d-front[b-u41ufu7in3] {
    bottom: 0; left: 10%; width: 80%;
    background: linear-gradient(180deg, #3fa07a 0%, #2d7a5f 100%);
    border-radius: 9px 9px 4px 4px;
    transition: height .4s cubic-bezier(.4,0,.2,1), transform .15s ease, filter .15s ease;
    min-height: 6px;
}
.rpt-bar-group.current .bar3d-front[b-u41ufu7in3] { background: linear-gradient(180deg, #d4b45e 0%, #c8a84b 100%); }
.rpt-bar-group.is-zero .bar3d-front[b-u41ufu7in3] { min-height: 0; background: none; filter: none; }
.rpt-bar-group.is-zero .rpt-bar-3d[b-u41ufu7in3] { filter: none; }
.bar3d-top[b-u41ufu7in3], .bar3d-side[b-u41ufu7in3] { display: none; }
.rpt-bar-group:hover .bar3d-front[b-u41ufu7in3] { transform: translateY(-2px); filter: brightness(1.04); }
.rpt-bar-group:hover .rpt-bar-label[b-u41ufu7in3] { color: var(--navy); }
.rpt-bar-label[b-u41ufu7in3] { font-size: 11px; color: var(--text-muted); white-space: nowrap; text-align: center; margin-top: 6px; font-weight: 500; }
.rpt-bar-val[b-u41ufu7in3] { font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; text-align: center; }
.rpt-bar-group.is-zero .rpt-bar-val[b-u41ufu7in3] { color: var(--text-muted); }

/* ── Donut / Payor Status (identical to NPM) ── */
.rpt-status-card[b-u41ufu7in3] { display: flex; flex-direction: column; }
.rpt-donut-wrap[b-u41ufu7in3] { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; padding-top: 8px; }
.rpt-donut-container[b-u41ufu7in3] { position: relative; }
.rpt-donut-svg[b-u41ufu7in3] { width: 160px; height: 160px; display: block; }
.donut-center-val[b-u41ufu7in3] { text-anchor: middle; font-size: 22px; font-weight: 800; fill: var(--navy); font-family: inherit; }
.donut-center-lbl[b-u41ufu7in3] { text-anchor: middle; font-size: 11px; font-weight: 700; fill: var(--text-muted); letter-spacing: .08em; font-family: inherit; }
.donut-segment[b-u41ufu7in3] { transition: stroke-dasharray .4s; }
.rpt-donut-legend[b-u41ufu7in3] { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.donut-leg-item[b-u41ufu7in3] { display: flex; align-items: center; justify-content: space-between; }
.donut-leg-left[b-u41ufu7in3] { display: flex; align-items: center; gap: 8px; }
.donut-leg-dot[b-u41ufu7in3] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-leg-label[b-u41ufu7in3] { font-size: 12.5px; color: var(--text); }
.donut-leg-value[b-u41ufu7in3] { font-size: 12.5px; font-weight: 700; color: var(--navy); }

/* ── Section heading ── */
.rpt-section-heading[b-u41ufu7in3] { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; }
.rpt-section-rule[b-u41ufu7in3] { flex: 1; height: 1px; background: var(--border); }
.rpt-section-heading h2[b-u41ufu7in3] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); white-space: nowrap; margin: 0; }

/* Audit row cards live in AuditBreakdownRow.razor(.css) — shared by every facility report. */

/* ── Status badges ── */
.status-badge[b-u41ufu7in3] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.status-badge.paid[b-u41ufu7in3], .status-badge.tier-paid[b-u41ufu7in3] { background: var(--green-bg); color: var(--green); }
.status-badge.partial[b-u41ufu7in3], .status-badge.tier-partial[b-u41ufu7in3] { background: rgba(184,115,51,.1); color: #b87333; }
.status-badge.unpaid[b-u41ufu7in3], .status-badge.tier-unpaid[b-u41ufu7in3] { background: var(--red-bg); color: var(--red); }

/* ── Delinquency panel ── */
.rpt-delinquency-panel[b-u41ufu7in3] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.delinq-exposure[b-u41ufu7in3] {
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
/* No fill. The amount above is already set in the office's red, which carries the meaning; a tinted panel behind it
   reads as highlighter on a government screen and prints as a grey block. The border stays as the panel's own. */
.delinq-has-balance[b-u41ufu7in3] { border-color: rgba(139,58,58,.18); }
.delinq-exp-val[b-u41ufu7in3] { font-size: 24px; font-weight: 800; color: var(--red); line-height: 1; }
.delinq-exp-lbl[b-u41ufu7in3] { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.delinq-table-head[b-u41ufu7in3], .delinq-row[b-u41ufu7in3] {
    display: grid;
    grid-template-columns: 80px 1fr 140px 90px 100px 130px;
    padding: 10px 20px;
    align-items: center;
    gap: 8px;
}
.delinq-table-head[b-u41ufu7in3] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.delinq-row[b-u41ufu7in3] { border-bottom: 1px solid var(--border); font-size: 13px; color: var(--navy); }
.delinq-row:last-child[b-u41ufu7in3] { border-bottom: none; }
.delinq-empty[b-u41ufu7in3] { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.missed-badge[b-u41ufu7in3] { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.missed-badge.critical[b-u41ufu7in3] { background: var(--red-bg); color: var(--red); }
.missed-badge.warn[b-u41ufu7in3] { background: rgba(200,168,75,.12); color: #8a6800; }
.balance-due[b-u41ufu7in3] { color: var(--red); font-weight: 700; }
.stall-no[b-u41ufu7in3] { font-weight: 700; }
.text-muted[b-u41ufu7in3] { color: var(--text-muted); }

/* ── All Stalls compliance table ── */
.rpt-compliance-table-wrap[b-u41ufu7in3] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rpt-compliance-table[b-u41ufu7in3] { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-compliance-table th[b-u41ufu7in3] {
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
}
.rpt-compliance-table td[b-u41ufu7in3] { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--navy); }
.rpt-compliance-table tr:last-child td[b-u41ufu7in3] { border-bottom: none; }
.rpt-compliance-table .row-partial[b-u41ufu7in3] { background: rgba(200,168,75,.04); }
.rpt-compliance-table .row-unpaid[b-u41ufu7in3]  { background: rgba(139,58,58,.04); }

/* ── Empty state ── */
.rpt-empty[b-u41ufu7in3] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; }
.rpt-empty-icon[b-u41ufu7in3] { width: 40px; height: 40px; color: var(--text-muted); }
.rpt-empty-icon svg[b-u41ufu7in3] { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rpt-empty-title[b-u41ufu7in3] { font-size: 14px; font-weight: 600; color: var(--navy); }
.rpt-empty-text[b-u41ufu7in3] { font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ── Print document shell (shared with NPM print views) ── */
.print-document-content[b-u41ufu7in3] { display: block; background: #eef3f7; overflow-x: hidden; }
.print-report-sheet[b-u41ufu7in3] {
    width: 100%;
    min-height: 900px;
    padding: 30px 28px 40px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d5dde5;
    box-shadow: 0 18px 38px rgba(9, 31, 52, .08);
    color: #111827;
}
.print-report-actions[b-u41ufu7in3] { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.print-report-btn[b-u41ufu7in3] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 7px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.print-report-btn svg[b-u41ufu7in3] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.print-report-header[b-u41ufu7in3] { text-align: center; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.print-report-logo[b-u41ufu7in3] { display: block; width: 58px; height: 58px; object-fit: contain; margin: 0 auto 10px; }
.print-republic[b-u41ufu7in3] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
.print-report-header h2[b-u41ufu7in3] { margin: 7px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.15; color: #111827; }
.print-report-header p[b-u41ufu7in3] { margin: 0; font-size: 12px; color: #4b5563; }
.print-report-title[b-u41ufu7in3] { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; color: #111827; }
.print-report-meta[b-u41ufu7in3] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 16px;
}
.print-report-meta div[b-u41ufu7in3] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-meta div:last-child[b-u41ufu7in3] { border-right: none; }
.print-report-meta span[b-u41ufu7in3] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-meta strong[b-u41ufu7in3] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-summary[b-u41ufu7in3] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 20px; background: #f8fafc;
}
.print-report-summary div[b-u41ufu7in3] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-summary div:last-child[b-u41ufu7in3] { border-right: none; }
.print-report-summary span[b-u41ufu7in3] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-summary strong[b-u41ufu7in3] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-signatures[b-u41ufu7in3] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px; margin-top: 58px;
}
.print-report-signatures div[b-u41ufu7in3] { border-top: 1px solid #111827; padding-top: 8px; text-align: center; }
.print-report-signatures span[b-u41ufu7in3] { display: block; font-size: 11px; color: #6b7280; }
.print-report-signatures strong[b-u41ufu7in3] { display: block; margin-top: 3px; font-size: 11px; color: #111827; }
.print-empty[b-u41ufu7in3] { margin: 22px 0; padding: 16px; text-align: center; font-size: 12px; color: #6b7280; border: 1px dashed #cfd6de; background: #f8fafc; }

/* ── Status Report table ── */
.print-table-wrap[b-u41ufu7in3] { margin-top: 12px; width: 100%; overflow-x: hidden; }
.print-status-table[b-u41ufu7in3] { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; color: #111827; }
.print-status-table th[b-u41ufu7in3], .print-status-table td[b-u41ufu7in3] { border: 1px solid #cfd6de; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-status-table th[b-u41ufu7in3] { background: #f3f6f9; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #374151; }
.status-sheet .print-status-table[b-u41ufu7in3] { font-size: 13px !important; }
.status-sheet .print-status-table th[b-u41ufu7in3] { font-size: 11px !important; }
.status-sheet .print-status-table td[b-u41ufu7in3] { padding: 9px 10px; }
.print-status-table td.status-paid[b-u41ufu7in3]    { color: #2d7a5f; font-weight: 600; }
.print-status-table td.status-partial[b-u41ufu7in3] { color: #b87333; font-weight: 600; }
.print-status-table td.status-unpaid[b-u41ufu7in3]  { color: #8b3a3a; font-weight: 600; }
.text-muted-cell[b-u41ufu7in3] { color: #6b7280; }

/* ── History tables ── */
.print-section-block[b-u41ufu7in3] { margin-top: 24px; }
.print-section-heading[b-u41ufu7in3] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); padding: 6px 0 4px; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.history-sheet .history-table[b-u41ufu7in3] { font-size: 15px !important; }
.history-sheet .history-table th[b-u41ufu7in3] { font-size: 13px !important; }
.history-sheet .history-table td[b-u41ufu7in3] { padding: 13px 14px; }
.history-sheet .history-table th:first-child[b-u41ufu7in3],
.history-sheet .history-table td:first-child[b-u41ufu7in3] { min-width: 110px; white-space: nowrap; }
.history-empty[b-u41ufu7in3] { text-align: center; color: #6b7280; padding: 18px 0; }
.history-total-row td[b-u41ufu7in3] { background: #f3f6f9; border-top: 2px solid #cfd6de; font-size: 13px; }
.rate-good[b-u41ufu7in3]    { color: #2d7a5f; font-weight: 600; }
.rate-partial[b-u41ufu7in3] { color: #b87333; font-weight: 600; }
.rate-low[b-u41ufu7in3]     { color: #8b3a3a; font-weight: 600; }
.balance-due[b-u41ufu7in3]  { color: #8b3a3a; }

/* ── History meta ── */
.history-sheet .print-report-meta span[b-u41ufu7in3]  { font-size: 12px; }
.history-sheet .print-report-meta strong[b-u41ufu7in3] { font-size: 16px; }
.history-sheet .print-section-heading[b-u41ufu7in3]   { font-size: 15px; }
.history-sheet .history-total-row td[b-u41ufu7in3]    { font-size: 15px !important; padding: 13px 14px; }
.history-sheet .print-report-signatures span[b-u41ufu7in3]  { font-size: 13px; }
.history-sheet .print-report-signatures strong[b-u41ufu7in3] { font-size: 15px; }
.status-sheet .print-report-meta span[b-u41ufu7in3]   { font-size: 11px; }
.status-sheet .print-report-meta strong[b-u41ufu7in3] { font-size: 14px; }
.status-sheet .print-report-summary span[b-u41ufu7in3],
.status-sheet .print-report-summary strong[b-u41ufu7in3] { font-size: 14px; }
.status-sheet .print-section-heading[b-u41ufu7in3]   { font-size: 13px; }
.status-sheet .print-report-signatures span[b-u41ufu7in3]  { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-u41ufu7in3] { font-size: 14px; }

@media screen and (max-width: 900px) {
    .rpt-kpi-strip[b-u41ufu7in3] { grid-template-columns: 1fr 1fr; }
    .rpt-charts-row[b-u41ufu7in3] { grid-template-columns: 1fr; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body[b-u41ufu7in3] { background: white !important; }
    .rpt-topbar[b-u41ufu7in3], .rpt-period-bar[b-u41ufu7in3] { background: white !important; border: none !important; box-shadow: none !important; }
    .rpt-topbar-right[b-u41ufu7in3], .rpt-period-tabs[b-u41ufu7in3], .rpt-date-nav[b-u41ufu7in3], .rpt-back-btn[b-u41ufu7in3], .rpt-header-progress[b-u41ufu7in3], .print-report-actions[b-u41ufu7in3] { display: none !important; }
    .rpt-content[b-u41ufu7in3] { padding: 0 !important; }
    .print-document-content[b-u41ufu7in3] { display: block !important; background: white !important; }
    /* 12mm, NOT 0 - the page margin is deliberately nought so the browser has no margin box to print its automatic
       date, URL and page numbers into, which means the SHEET supplies the whitespace. print.css says exactly that and
       sets `.print-report-sheet { padding: 12mm }`, but CSS isolation compiles this rule to
       `.print-report-sheet[b-xxxxx]`, and a class-plus-attribute selector outranks a bare class even when both are
       !important. So this rule quietly won and printed the sheet hard against the paper edge. */
    .print-report-sheet[b-u41ufu7in3] { width: 100% !important; min-height: auto !important; padding: 12mm !important; border: none !important; box-shadow: none !important; }
    /* ── How these sheets break across pages ──────────────────────────────────
       The same three rules the List of Stallholders prints by, so every document this platform issues paginates alike: a table's
       header row REPEATS on each page it continues onto rather than appearing alone at the top of one, a row is never split, and
       a section block may span pages because some areas hold forty rows. Plus the joins that actually broke: a section heading
       stays with what follows it, and the letterhead and meta strip are never split. */
    .print-status-table thead[b-u41ufu7in3] { display: table-header-group; }
    .print-status-table tfoot[b-u41ufu7in3] { display: table-footer-group; }

    .print-status-table tr[b-u41ufu7in3] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-section-heading[b-u41ufu7in3] {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-header[b-u41ufu7in3],
    .print-report-meta[b-u41ufu7in3] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A SECTION IS ONE UNIT: its name, its summary strip and its rows. This was uto, which put a heading and a total at the
       foot of a page with the rows they describe on the next. void is a request, not a constraint: a section taller than the
       page is still split, and the repeating header keeps that readable - so small sections stay whole and large ones still fit. */
    .print-section-block[b-u41ufu7in3] {
        break-inside: avoid;
        page-break-inside: avoid;
        /* The top space is PADDING here, not the margin this block carries on screen. A margin is dropped at a page break; a
           padding is part of the box and survives, so a section that begins a page opens clear of the paper edge instead of
           against it. The page margin is nought, because a page margin is where Chromium prints its own date, title and URL and
           no CSS turns that off - so the document supplies its own whitespace. Sections are kept whole above, which is what makes
           a continued page always begin with one. */
        margin-top: 0 !important;
        padding-top: 10mm;
    }

    .print-section-summary[b-u41ufu7in3] {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Signatures are never split down the middle: "Prepared by" on one page and "Reviewed by" on the next is not a document
       anybody signs. */
    .print-report-signatures[b-u41ufu7in3] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-table-wrap[b-u41ufu7in3] { overflow: visible !important; }
    /* ── Why page two used to start hard against the paper edge ───────────────
       The page box is margin-free and the 12mm of whitespace came from padding on the SHEET. A block's padding applies once, at
       its own top and bottom, not at every page break - so pages after the first began at y=0 with a table header touching the
       edge. Only a page MARGIN repeats per page, so these two documents ask for one of their own; a named page applies solely to
       what asks for it, leaving the roster, the statements and the receipts on the margin-free box they were tuned for.

       Stated rather than buried: a top margin gives the browser somewhere to print its automatic date and page numbers. Untick
       "Headers and footers" in the print dialog if it does. The alternative was figures against the paper edge on every page. */
    /* The page margin these sheets need is injected at print time by stalltrackPrint.reportDocument, NOT set here. An @page in a
       scoped stylesheet does not reach the print engine, and a NAMED page is not honoured at all - print.css assigns a landscape
       named page to .print-report-sheet and this document still printed portrait, which is the proof. Left and right padding is
       injected with it, so nothing about the paper margin is stated in CSS any more. */
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-u41ufu7in3] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-u41ufu7in3]::before,
    .rpt-topbar[b-u41ufu7in3]::after {
        display: none;
    }

.rpt-back-btn[b-u41ufu7in3] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-u41ufu7in3] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-u41ufu7in3] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-u41ufu7in3] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-u41ufu7in3] {
    color: var(--text-tertiary);
}

.rpt-title[b-u41ufu7in3] {
    color: var(--navy);
}

.rpt-subtitle[b-u41ufu7in3] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-u41ufu7in3] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-u41ufu7in3] {
    background: var(--accent);
}

.rpt-action-btn[b-u41ufu7in3] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-u41ufu7in3] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-u41ufu7in3] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-u41ufu7in3],
.rpt-document-tab.active[b-u41ufu7in3],
.utility-section-tab.active[b-u41ufu7in3] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-u41ufu7in3],
.rpt-document-tab:hover:not(.active)[b-u41ufu7in3],
.utility-section-tab:hover:not(.active)[b-u41ufu7in3] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-u41ufu7in3],
.rpt-action-btn:focus-visible[b-u41ufu7in3],
.rpt-period-tab:focus-visible[b-u41ufu7in3],
.rpt-document-tab:focus-visible[b-u41ufu7in3] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/Reports/ExportData.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Export Data report — scoped styles (ex-)
   Document/paper language consistent with the Month-End & Stall Holder reports.
   Colour is restrained; the sheet is the print artifact (controls are .no-print).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Controls ── */
.ex-controls[b-uoiv8kzm6v] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.ex-control-row[b-uoiv8kzm6v] { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.ex-control-block[b-uoiv8kzm6v] { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ex-control-grow[b-uoiv8kzm6v] { flex: 1 1 auto; align-items: flex-end; }
.ex-control-label[b-uoiv8kzm6v] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-subtle); }

.ex-filter[b-uoiv8kzm6v] {
    display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px; padding: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}
.ex-chip[b-uoiv8kzm6v] {
    min-height: 32px; padding: 6px 15px; border-radius: 6px;
    border: 1px solid transparent; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 650; letter-spacing: .2px; line-height: 1;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.ex-chip:hover[b-uoiv8kzm6v] { color: var(--navy); }
.ex-chip-active[b-uoiv8kzm6v], .ex-chip-active:hover[b-uoiv8kzm6v] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 13px rgba(9, 31, 52, .14);
}

.ex-period[b-uoiv8kzm6v] { display: inline-flex; align-items: center; gap: 10px; }
.ex-nav-btn[b-uoiv8kzm6v] {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ex-nav-btn:hover[b-uoiv8kzm6v] { background: var(--bg); }
.ex-nav-btn svg[b-uoiv8kzm6v] { width: 16px; height: 16px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ex-period-label[b-uoiv8kzm6v] { font-size: 14px; font-weight: 700; color: var(--navy); min-width: 120px; text-align: center; }

.ex-actions[b-uoiv8kzm6v] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ex-btn[b-uoiv8kzm6v] {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--bg-card);
    font: inherit; font-size: 13px; font-weight: 650; color: var(--navy);
    text-decoration: none; cursor: pointer;
    transition: background .14s, border-color .14s, color .14s;
}
.ex-btn:hover[b-uoiv8kzm6v] { background: var(--bg); border-color: var(--accent); }
.ex-btn svg[b-uoiv8kzm6v] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ex-btn-primary[b-uoiv8kzm6v] { background: var(--accent); color: #fff; border-color: var(--accent); }
.ex-btn-primary:hover[b-uoiv8kzm6v] { background: var(--accent-hover); border-color: var(--navy-2, #112d47); color: #fff; }

/* ── Document sheet ── */
.ex-state[b-uoiv8kzm6v] { padding: 44px; text-align: center; color: var(--text-subtle); font-size: 14px; }.ex-sheet[b-uoiv8kzm6v] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }

/* Frame table — invisible on screen; its thead/tfoot repeat a blank spacer on every printed
   page so continued pages get top/bottom whitespace without re-introducing the browser header. */
.ex-frame[b-uoiv8kzm6v] { width: 100%; border-collapse: collapse; }
.ex-frame > thead > tr > td[b-uoiv8kzm6v], .ex-frame > tfoot > tr > td[b-uoiv8kzm6v], .ex-frame > tbody > tr > td[b-uoiv8kzm6v] { padding: 0; border: none; }
.ex-frame-space[b-uoiv8kzm6v] { height: 0; }
.ex-rpt-head[b-uoiv8kzm6v] { text-align: center; margin-bottom: 20px; }
.ex-seal[b-uoiv8kzm6v] { width: 54px; height: 54px; object-fit: contain; margin: 0 auto 8px; display: block; }
.ex-gov[b-uoiv8kzm6v] { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.ex-org[b-uoiv8kzm6v] { font-size: 15px; font-weight: 700; color: var(--navy); margin-top: 2px; }
.ex-muni[b-uoiv8kzm6v] { font-size: 11px; color: var(--text-subtle); margin-top: 2px; }
.ex-doc[b-uoiv8kzm6v] { margin-top: 12px; font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); }
.ex-doc-scope[b-uoiv8kzm6v] { margin-top: 3px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); }
.ex-doc-period[b-uoiv8kzm6v] { margin-top: 4px; font-size: 11px; color: var(--text-subtle); }

.ex-summary[b-uoiv8kzm6v] { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 24px; }
.ex-sum-card[b-uoiv8kzm6v] { border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; background: var(--bg); }
.ex-sum-val[b-uoiv8kzm6v] { font-size: 19px; font-weight: 800; color: var(--navy); }
.ex-sum-lbl[b-uoiv8kzm6v] { font-size: 11px; color: var(--text-subtle); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.ex-red[b-uoiv8kzm6v] { color: var(--red); }

/* ── Facility block ── */
.ex-facility[b-uoiv8kzm6v] { margin-bottom: 26px; }
.ex-fac-head[b-uoiv8kzm6v] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--border); flex-wrap: wrap;
}
.ex-fac-title[b-uoiv8kzm6v] { display: flex; align-items: center; gap: 10px; }
.ex-fac-code[b-uoiv8kzm6v] { font-size: 12px; font-weight: 800; color: #fff; background: var(--accent); padding: 3px 9px; border-radius: 6px; letter-spacing: .3px; }
.ex-fac-name[b-uoiv8kzm6v] { font-size: 15px; font-weight: 700; color: var(--navy); }
.ex-tag[b-uoiv8kzm6v] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); background: var(--bg-icon); padding: 3px 8px; border-radius: 999px; }
.ex-fac-stats[b-uoiv8kzm6v] { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-subtle); }
.ex-fac-stats strong[b-uoiv8kzm6v] { color: var(--navy); }

.ex-section-label[b-uoiv8kzm6v] {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--navy); background: var(--bg); border-radius: 7px; padding: 7px 12px; margin: 14px 0 8px;
}
.ex-section-label span[b-uoiv8kzm6v] { color: var(--text-subtle); font-weight: 600; letter-spacing: normal; text-transform: none; }

/* ── Tables ── */
.ex-table[b-uoiv8kzm6v] { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 10px; }
.ex-table th[b-uoiv8kzm6v], .ex-table td[b-uoiv8kzm6v] {
    text-align: center;
    border: 1px solid var(--border);
    padding: 8px 10px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.ex-table th[b-uoiv8kzm6v] {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-subtle); background: var(--bg);
}
.ex-c[b-uoiv8kzm6v], .ex-r[b-uoiv8kzm6v] { text-align: center; }   /* values centered within the gridded cells */
.ex-l[b-uoiv8kzm6v] { text-align: left; }
.ex-table tfoot td[b-uoiv8kzm6v] { color: var(--navy); }
.ex-subtotal td[b-uoiv8kzm6v] { font-weight: 600; }
.ex-subtotal td:first-child[b-uoiv8kzm6v] { text-align: left; }

/* In-table section divider (NPM: Vegetable / Fish / Meat) — header printed once */
.ex-sec-row td[b-uoiv8kzm6v] {
    background: var(--bg);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--navy); padding: 7px 10px; text-align: left;
}
.ex-sec-count[b-uoiv8kzm6v] { float: right; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--text-subtle); }

.ex-txn-detail td[b-uoiv8kzm6v] { color: var(--text-subtle); font-size: 11.5px; }

/* The facility's name as the table's own first row. Paper only: on screen the head above each table carries it,
   with the model and the two figures beside it. */
.ex-fac-row[b-uoiv8kzm6v] { display: none; }

/* ── Footer signatures ── */
.ex-rpt-foot[b-uoiv8kzm6v] { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 18px; }
.ex-rpt-foot div[b-uoiv8kzm6v] { text-align: center; flex: 1; }
.ex-rpt-foot span[b-uoiv8kzm6v] { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 4px; }
.ex-rpt-foot strong[b-uoiv8kzm6v] { font-size: 12.5px; color: var(--navy); }

/* ── Responsive ── */
@media screen and (max-width: 760px) {
    .ex-summary[b-uoiv8kzm6v] { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
    .ex-actions[b-uoiv8kzm6v] { justify-content: flex-start; }
    .ex-table[b-uoiv8kzm6v] { font-size: 11.5px; }

    /* Period + Export sit side by side at align-items:flex-end on desktop; wrapped on mobile that made
       the "EXPORT" label float at the bottom of its flex line, overlapping the facility chip grid above.
       Stack each control block full-width and top-align instead. */
    .ex-control-row[b-uoiv8kzm6v] {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .ex-control-block[b-uoiv8kzm6v],
    .ex-control-grow[b-uoiv8kzm6v] {
        align-items: flex-start;
        width: 100%;
    }

    .ex-actions[b-uoiv8kzm6v] {
        flex-wrap: wrap;
    }
}

/* ── Print: only the sheet, full width ── */
@media print {
    .no-print[b-uoiv8kzm6v] { display: none !important; }
    /* Paper margin comes from js/print.js (page margin is zero so the browser cannot draw its own header and
       footer), so the sheet itself adds none. */
    /* Side margins are the app's job here. print.js sets `@page { margin: 0 }` deliberately, so the browser
       cannot draw its own header and footer over the sheet — but that also means the paper has NO margin of its
       own, and the tables ran hard against both edges while the centred letterhead only looked inset. The
       vertical whitespace comes from the frame table's repeating spacer; the horizontal comes from here. */
    .ex-sheet[b-uoiv8kzm6v] { border: none; border-radius: 0; padding: 0 12mm; }   /* the same margin the month-end sheet prints */
    .ex-frame-space[b-uoiv8kzm6v] { height: 12mm; }   /* repeats as top & bottom whitespace on every page */
    .content-area[b-uoiv8kzm6v] { padding: 0 !important; }
    .ex-table tbody tr:hover[b-uoiv8kzm6v] { background: transparent; }
    .ex-subrow td[b-uoiv8kzm6v] { background: transparent; }

    /* Single-facility scope: the document's scope line already names the facility, and its
       collected/outstanding pair repeats the summary above, so the per-facility header row is dropped from
       the paper/PDF copy only. */
    .ex-sheet-single .ex-fac-head[b-uoiv8kzm6v] { display: none; }

    /* ── The facility, inside the table ────────────────────────────────────────────────────────────────
       The label above each table sat outside the table's left edge, hanging in the margin while everything
       else lined up on the grid, and it carried a model tag and a collected/outstanding pair that the summary
       above and the table's own subtotal below both already state. On paper the whole head goes, and the
       facility's name becomes the table's first row, so nothing sits outside the grid and the name repeats
       with the column headings when a table runs onto a second sheet. On screen the head is untouched. */
    .ex-fac-head[b-uoiv8kzm6v] { display: none; }

    .ex-fac-row[b-uoiv8kzm6v] { display: table-row; }

    .ex-fac-row td[b-uoiv8kzm6v] {
        background: var(--bg);
        text-align: left;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--navy);
        padding: 7px 10px;
    }

    /* Room to read. The cells were tight enough on paper that the figures nearly touched their rules. */
    .ex-table th[b-uoiv8kzm6v], .ex-table td[b-uoiv8kzm6v] { padding: 7px 9px; }
    .ex-table th[b-uoiv8kzm6v] { font-size: 11px; }
    .ex-table td[b-uoiv8kzm6v] { font-size: 10.5px; }
    .ex-sec-row td[b-uoiv8kzm6v], .ex-subtotal td[b-uoiv8kzm6v] { padding: 6px 10px; }

    /* ── Tables across a page break ─────────────────────────────────────────────────────────────────────
       A table that ran past the foot of a page left its rows on one sheet and its subtotal on another, with
       no column headings above the continuation. The headings now repeat, the subtotal stays with the rows it
       totals, and no single row is split down the middle. */
    .ex-table thead[b-uoiv8kzm6v] { display: table-header-group; }
    .ex-table tfoot[b-uoiv8kzm6v] { display: table-row-group; }
    .ex-table tr[b-uoiv8kzm6v] { break-inside: avoid; page-break-inside: avoid; }
    .ex-facility[b-uoiv8kzm6v] { break-inside: auto; }
    .ex-subtotal[b-uoiv8kzm6v] { break-before: avoid; page-break-before: avoid; }

    /* Compact letterhead on paper: landscape leaves little vertical room, and a full-size letterhead pushed
       the table onto the next sheet. */
    .ex-rpt-head[b-uoiv8kzm6v] { margin-bottom: 10px; }
    .ex-seal[b-uoiv8kzm6v] { width: 46px; height: 46px; }
    .ex-org[b-uoiv8kzm6v] { font-size: 13px; }
    .ex-gov[b-uoiv8kzm6v], .ex-muni[b-uoiv8kzm6v], .ex-doc-period[b-uoiv8kzm6v] { font-size: 11px; }
    .ex-doc[b-uoiv8kzm6v] { font-size: 12px; margin-top: 6px; }
    .ex-doc-scope[b-uoiv8kzm6v], .ex-doc-section[b-uoiv8kzm6v] { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   FILTERED SCOPE — say it once, in the header
   A specific facility or section is part of the document's identity, so it is stated in the centred header
   and the repeated label above the table is dropped. Removing it on screen as well as on paper keeps the two
   copies identical, which is what makes the printout predictable.
   ══════════════════════════════════════════════════════════════ */

.ex-sheet-single .ex-fac-head[b-uoiv8kzm6v] { display: none; }
.ex-sheet-section .ex-sec-row[b-uoiv8kzm6v] { display: none; }

/* The section, stated under the facility rather than replacing it. */
.ex-doc-section[b-uoiv8kzm6v] {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 800;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   CONTEXTUAL LOADING SKELETON (screen only — mirrors the export sheet)
   ══════════════════════════════════════════════════════════════ */
.ex-loading[b-uoiv8kzm6v] {
    margin-top: 4px;
}

.ex-loading[b-uoiv8kzm6v]  .ex-sk-center {
    margin-left: auto;
    margin-right: auto;
}

.ex-loading[b-uoiv8kzm6v]  .ex-sk-gap {
    margin-top: 8px;
}

/* Facility table placeholder: header bar + evenly spaced rows */
.ex-table-skeleton[b-uoiv8kzm6v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

/* Itemised animal lines under a merged slaughterhouse receipt: recessed so the receipt row stays the one
   that reads, while the breakdown remains available on the same page. */
.ex-subrow td[b-uoiv8kzm6v] {
    padding-top: 3px;
    padding-bottom: 3px;
    color: var(--text-subtle);
    font-size: 11.5px;
    background: var(--bg);
}


/* ══════════════════════════════════════════════════════════════
   DOCUMENT TABLES — aligned with the List of Stallholders sheet
   The collection report is the same kind of official document, so it now carries the roster's structure: a
   hairline grid in the roster's ink, a section band that reads across the table (as on the paper form), and a
   subtotal row that is clearly the total rather than just another row. Columns and figures are untouched.
   ══════════════════════════════════════════════════════════════ */

.ex-table th[b-uoiv8kzm6v], .ex-table td[b-uoiv8kzm6v] {
    border-color: #cfd6de;
}

.ex-table th[b-uoiv8kzm6v] {
    background: #f3f6f9;
    color: var(--navy);
    font-size: 11px;
    letter-spacing: .5px;
}

/* Section band: centred like the roster's, with the stall count kept at the right edge. */
.ex-sec-row td[b-uoiv8kzm6v] {
    position: relative;
    background: #f3f6f9;
    border-color: #cfd6de;
    text-align: center;
    letter-spacing: .8px;
    padding: 8px 12px;
}

.ex-sec-count[b-uoiv8kzm6v] {
    float: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

/* Subtotal reads as the closing line of the block. */
.ex-subtotal td[b-uoiv8kzm6v] {
    background: #f7f9fb;
    border-color: #cfd6de;
    font-weight: 700;
    color: var(--navy);
}

@media print {
    /* Keep the grid visible on paper. Only individual rows are protected from splitting: an earlier attempt
       also guarded the whole facility block, which pushed a long table to the next sheet and left page 1
       holding nothing but the letterhead. */
    .ex-table th[b-uoiv8kzm6v], .ex-table td[b-uoiv8kzm6v], .ex-sec-row td[b-uoiv8kzm6v], .ex-subtotal td[b-uoiv8kzm6v] { border-color: #9aa7b4; }
    .ex-table tr[b-uoiv8kzm6v] { break-inside: avoid; }

    /* A block may split across sheets, but never immediately after its own heading. */
    .ex-facility[b-uoiv8kzm6v] { break-inside: auto; }
    .ex-fac-head[b-uoiv8kzm6v] { break-after: avoid; }
    .ex-table thead[b-uoiv8kzm6v] { display: table-header-group; }   /* repeat column headings on each sheet */
}

/* ── Per-trip day grouping ────────────────────────────────────────────────────────────────────────────
   The day is written once and spans its trips, so a reader never has to work out which day a trip number
   belongs to. A hairline marks where one day ends and the next begins. */
.ex-day-cell[b-uoiv8kzm6v] {
    vertical-align: middle;
    font-weight: 600;
}

.ex-day-start > td[b-uoiv8kzm6v] {
    border-top: 1px solid #b9c3ce;
}
/* /Components/Pages/Reports/FinancialSummaryDocument.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   FINANCIAL SUMMARY — the document the office files.

   Screen and paper are the same layout here, which is the point of the page: what is previewed is what prints. The
   sheet is A4-proportioned on screen so a break seen on screen is the break on paper.

   Every measurement that matters to the print is in the @media print block at the foot, and the reason each one exists
   is stated there. Nothing in this file styles the Financial Reports screen; the two are deliberately independent, so a
   change to the screen can no longer alter the filed document.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.doc-actions[b-2fav4slms6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px;
    background: var(--accent);
    color: #fff;
}

.doc-back[b-2fav4slms6] {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

    .doc-back:hover[b-2fav4slms6] {
        text-decoration: underline;
    }

.doc-actions-right[b-2fav4slms6] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.doc-actions-note[b-2fav4slms6] {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
}

.doc-print[b-2fav4slms6] {
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .doc-print:hover:not(:disabled)[b-2fav4slms6] {
        background: rgba(255, 255, 255, .12);
    }

    .doc-print:disabled[b-2fav4slms6] {
        opacity: .5;
        cursor: default;
    }

.doc-state[b-2fav4slms6] {
    padding: 48px 24px;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-muted);
}

/* The sheet. 210mm wide on screen too, so what is previewed is what prints. */
.doc-sheet[b-2fav4slms6] {
    width: 210mm;
    max-width: 100%;
    margin: 24px auto;
    background: #fff;
    box-shadow: 0 2px 16px rgba(15, 35, 65, .12);
}

.doc-body[b-2fav4slms6] {
    padding: 14mm 16mm;
    color: #111827;
    font-size: 10.5pt;
    line-height: 1.5;
}

/* ── Letterhead ───────────────────────────────────────────────────────────────────────────────────────────── */
.doc-head[b-2fav4slms6] {
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 2px solid #111827;
}

.doc-seal[b-2fav4slms6] {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
    margin: 0 auto 8px;
}

.doc-republic[b-2fav4slms6] {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 9pt;
    color: #374151;
}

.doc-office[b-2fav4slms6] {
    font-size: 13pt;
    font-weight: 700;
    margin-top: 3px;
}

.doc-muni[b-2fav4slms6] {
    font-size: 10pt;
    color: #4b5563;
}

.doc-title[b-2fav4slms6] {
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12pt;
    font-weight: 800;
}

.doc-meta[b-2fav4slms6] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin-top: 8px;
    font-size: 9pt;
    color: #4b5563;
}

.doc-meta-key[b-2fav4slms6] {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 7.5pt;
    color: #6b7280;
    margin-right: 4px;
}

/* ── Sections ─────────────────────────────────────────────────────────────────────────────────────────────── */
.doc-sec[b-2fav4slms6] {
    margin-top: 16px;
}

.doc-sec-title[b-2fav4slms6] {
    margin: 0 0 6px;
    font-size: 10.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #111827;
    border-bottom: 1px solid #d1d5db;
    padding-bottom: 3px;
}

.doc-sub-title[b-2fav4slms6] {
    margin: 12px 0 4px;
    font-size: 9.5pt;
    font-weight: 700;
    color: #374151;
}

.doc-table[b-2fav4slms6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
}

    .doc-table th[b-2fav4slms6],
    .doc-table td[b-2fav4slms6] {
        padding: 5px 8px;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
        vertical-align: top;
    }

    .doc-table thead th[b-2fav4slms6] {
        font-size: 7.5pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #4b5563;
        background: #f3f4f6;
        border-bottom: 1px solid #9ca3af;
        white-space: nowrap;
    }

    .doc-table tbody th[b-2fav4slms6] {
        font-weight: 600;
    }

    .doc-table tfoot th[b-2fav4slms6],
    .doc-table tfoot td[b-2fav4slms6] {
        font-weight: 700;
        border-top: 1px solid #9ca3af;
        border-bottom: none;
        background: #f9fafb;
    }

.doc-num[b-2fav4slms6] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.doc-owed[b-2fav4slms6] {
    color: #b91c1c;
}

.doc-good[b-2fav4slms6] {
    color: #15803d;
}

.doc-row-strong th[b-2fav4slms6],
.doc-row-strong td[b-2fav4slms6] {
    font-weight: 700;
    background: #f9fafb;
}

/* A figures table has no column headings — the row states its own name — so its first column carries the weight. */
.doc-table-figures tbody th[b-2fav4slms6] {
    width: 42%;
}

.doc-note[b-2fav4slms6] {
    color: #6b7280;
    font-size: 8.5pt;
}

.doc-line[b-2fav4slms6] {
    margin: 6px 0 0;
    font-size: 9pt;
    color: #374151;
}

.doc-line-cap[b-2fav4slms6] {
    color: #6b7280;
    font-style: italic;
}

/* ── Signatories ──────────────────────────────────────────────────────────────────────────────────────────────
   The strip imposes no layout of its own; a host must give it one. Three columns across the sheet, with room to sign
   above each printed name and a rule to sign on, which is how a form is signed. */
.doc-sign[b-2fav4slms6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10mm;
    margin-top: 10mm;
    break-inside: avoid;
    page-break-inside: avoid;
}

    .doc-sign[b-2fav4slms6]  .sig-slot {
        flex: 1 1 0;
        text-align: center;
    }

    .doc-sign[b-2fav4slms6]  .sig-caption {
        font-size: 7.5pt;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #6b7280;
        margin-bottom: 0;
    }

    /* Enough room to sign in and no more: the strip was carrying 16mm above it and 14mm inside it, which left a third of
       the last page empty. */
    .doc-sign[b-2fav4slms6]  .sig-name {
        margin-top: 9mm;
        padding-top: 3px;
        border-top: 1px solid #111827;
        font-size: 10pt;
        font-weight: 700;
        color: #111827;
    }

@media print {
    /* The page rule itself is injected by the print helper (an @page in a scoped stylesheet never reaches the print
       engine). What is left to this file is everything inside the sheet. */

    .no-print[b-2fav4slms6] { display: none !important; }

    html[b-2fav4slms6], body[b-2fav4slms6] {
        margin: 0 !important;
        background: #fff !important;
    }

    .doc-sheet[b-2fav4slms6] {
        width: auto !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* The helper pads .print-report-sheet by 12mm for the FIRST page. This adds the horizontal measure a document reads
       at, and leaves the vertical clearance of later pages to the sections themselves. */
    .doc-body[b-2fav4slms6] {
        padding: 0 4mm !important;
    }

    /* Whitespace at the top of a CONTINUATION page can only come from padding: a margin is dropped at a page break. Each
       section therefore opens with its own, and is kept whole so that a continued page always begins with a section
       rather than with the middle of one. */
    .doc-sec[b-2fav4slms6] {
        padding-top: 6mm;
        margin-top: 6px;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* The two debt lists are the one part that may legitimately outgrow a page. They break by row, and every page
       repeats the column headings, or a sheet of figures arrives with nothing saying what they are. */
    .doc-sec-break[b-2fav4slms6] {
        break-inside: auto;
        page-break-inside: auto;
    }

        .doc-sec-break .doc-table thead[b-2fav4slms6] {
            display: table-header-group;
        }

        .doc-sec-break .doc-table tr[b-2fav4slms6] {
            break-inside: avoid;
            page-break-inside: avoid;
        }

    /* The letterhead belongs to the first page only, and must not be separated from the section that follows it. */
    .doc-head[b-2fav4slms6] {
        break-after: avoid;
        page-break-after: avoid;
    }

    .doc-sec-title[b-2fav4slms6] {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Fills and rules are load-bearing on a ruled document: without this the printer drops them and the tables arrive as
       floating figures. */
    .doc-table thead th[b-2fav4slms6],
    .doc-table tfoot th[b-2fav4slms6],
    .doc-table tfoot td[b-2fav4slms6],
    .doc-row-strong th[b-2fav4slms6],
    .doc-row-strong td[b-2fav4slms6] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Components/Pages/Reports/FollowUpQueue.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Follow-up Queue — scoped styles (fq-)
   Government-restrained: neutral white surfaces, generous spacing, one quiet accent
   per row. Colour appears only on the thin priority rail, the separate priority badge,
   and the amount. Reuses the app design tokens and the Month-End interaction
   patterns (search field, dropdown-with-backdrop) for consistency.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Filter choices header (chips) + search ── */
.fq-filterbar[b-n86muiusen] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.fq-context-note[b-n86muiusen] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid #cdd6df;
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-subtle);
    font-size: 11.5px;
    line-height: 1.55;
}
.fq-context-note strong[b-n86muiusen] { color: var(--text); font-size: 12px; }
.fq-toolrow[b-n86muiusen] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.fq-filters[b-n86muiusen] {
    display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center;
    background: var(--bg);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 10px; padding: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}
.fq-chip[b-n86muiusen] {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 34px; padding: 6px 13px; border-radius: 7px;
    border: 1px solid transparent; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 650; letter-spacing: .2px; line-height: 1;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.fq-chip:hover:not(:disabled)[b-n86muiusen] { color: var(--navy); }
.fq-chip:disabled[b-n86muiusen] { opacity: .42; cursor: not-allowed; }
.fq-chip-count[b-n86muiusen] {
    min-width: 18px; padding: 1px 6px; border-radius: 999px;
    background: var(--bg-icon); color: var(--text-subtle);
    font-size: 10.5px; font-weight: 800; text-align: center;
}
.fq-chip-active[b-n86muiusen], .fq-chip-active:hover[b-n86muiusen] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 13px rgba(9, 31, 52, .14);
}
.fq-chip-active .fq-chip-count[b-n86muiusen] { background: rgba(255, 255, 255, .22); color: #fff; }

.fq-search[b-n86muiusen] {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    height: 42px;
    padding: 0 14px;
    flex: 1 1 240px;
    min-width: 0;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.fq-search:focus-within[b-n86muiusen] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 168, 75, .15); }
.fq-search svg[b-n86muiusen] { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.fq-search input[b-n86muiusen] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--navy); }
.fq-search input[b-n86muiusen]::placeholder { color: var(--text-muted); }
.fq-search input[b-n86muiusen]::-webkit-search-cancel-button { display: none; }
.fq-search-clear[b-n86muiusen] { border: none; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.fq-search-clear:hover[b-n86muiusen] { color: var(--navy); }

/* ── Section header (slim) ── */
.fq-section[b-n86muiusen] { margin-bottom: 22px; }
.fq-sec-head[b-n86muiusen] { display: flex; align-items: center; gap: 14px; padding: 4px 2px 12px; }
.fq-sec-rail[b-n86muiusen] { width: 4px; align-self: stretch; min-height: 36px; border-radius: 999px; background: #cdd6df; flex-shrink: 0; }
.fq-sec-count[b-n86muiusen] { font-size: 20px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; min-width: 22px; text-align: center; line-height: 1; }
.fq-sec-info[b-n86muiusen] { min-width: 0; }
.fq-sec-title[b-n86muiusen] { font-size: 14px; font-weight: 750; color: var(--navy); letter-spacing: .2px; }
.fq-sec-sub[b-n86muiusen] { font-size: 11.5px; color: var(--text-subtle); margin-top: 2px; }
.fq-sec-critical .fq-sec-rail[b-n86muiusen] { background: var(--red); }
.fq-sec-high .fq-sec-rail[b-n86muiusen] { background: var(--gold); }
.fq-sec-review .fq-sec-rail[b-n86muiusen] { background: var(--green); }
.fq-sec-normal .fq-sec-rail[b-n86muiusen] { background: #cdd6df; }

/* ── Items table ── */
.fq-table-wrap[b-n86muiusen] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.fq-table[b-n86muiusen] { width: 100%; border-collapse: collapse; font-size: 13px; }
.fq-table thead th[b-n86muiusen] {
    text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-subtle); padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.fq-table td[b-n86muiusen] { padding: 11px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align: middle; text-align: center; }
.fq-table tbody tr:last-child td[b-n86muiusen] { border-bottom: none; }
.fq-table tbody tr:hover[b-n86muiusen] { background: var(--bg); }
.fq-r[b-n86muiusen] { text-align: center; }

.fq-person[b-n86muiusen] { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.fq-period[b-n86muiusen] { font-size: 13px; color: var(--text); white-space: nowrap; }
.fq-note[b-n86muiusen] { font-size: 13px; color: var(--text); }
.fq-sub[b-n86muiusen] { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Priority rail on the row's leading edge — the page's main use of colour */
.fq-row td:first-child[b-n86muiusen] { border-left: 3px solid transparent; }
.fq-row.fq-pri-critical td:first-child[b-n86muiusen] { border-left-color: var(--red); }
.fq-row.fq-pri-high td:first-child[b-n86muiusen] { border-left-color: var(--gold); }
.fq-row.fq-pri-normal td:first-child[b-n86muiusen] { border-left-color: #cdd6df; }
.fq-row.fq-pri-review td:first-child[b-n86muiusen] { border-left-color: var(--green); }

/* Reason and priority are distinct: the condition stays neutral while priority carries urgency colour. */
.fq-row-signals[b-n86muiusen] { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fq-reason[b-n86muiusen] { display: inline-block; max-width: 190px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 4px 9px; border-radius: 6px; background: var(--bg-icon); color: var(--text-subtle); line-height: 1.35; }
.fq-priority[b-n86muiusen] { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .01em; padding: 3px 8px; border-radius: 6px; line-height: 1.2; }
.fq-priority-caption[b-n86muiusen] { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .76; }
.fq-rb-critical[b-n86muiusen] { background: var(--red-bg); color: var(--red); }
.fq-rb-high[b-n86muiusen] { background: rgba(200, 168, 75, .16); color: #8a6d1b; }
.fq-rb-normal[b-n86muiusen] { background: var(--bg-icon); color: var(--text-subtle); }
.fq-rb-review[b-n86muiusen] { background: var(--green-bg); color: var(--green); }

/* Amount */
.fq-amount[b-n86muiusen] { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fq-amount-red[b-n86muiusen] { color: var(--red); }
.fq-amount-excused[b-n86muiusen] { color: #8a6d1b; font-size: 12.5px; font-weight: 700; }
.fq-amount-muted[b-n86muiusen] { color: var(--text-muted); font-size: 13px; font-weight: 700; }

/* Action — minimal link */
.fq-action[b-n86muiusen] { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--navy); text-decoration: none; white-space: nowrap; }
.fq-action:hover[b-n86muiusen] { color: var(--accent); }
.fq-action-arrow[b-n86muiusen] { font-size: 13px; transition: transform .14s ease; }
.fq-action:hover .fq-action-arrow[b-n86muiusen] { transform: translateX(2px); }

/* ── Empty state ── */
.fq-retry[b-n86muiusen] { margin-left: 10px; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; }
.fq-retry:hover[b-n86muiusen] { background: var(--accent-hover); }

.fq-empty[b-n86muiusen] { text-align: center; padding: 60px 24px; }
.fq-empty-icon[b-n86muiusen] { width: 52px; height: 52px; margin: 0 auto 14px; color: var(--green); }
.fq-empty-icon svg[b-n86muiusen] { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fq-empty-title[b-n86muiusen] { font-size: 15px; font-weight: 700; color: var(--navy); }
.fq-empty-sub[b-n86muiusen] { font-size: 12.5px; color: var(--text-subtle); margin-top: 4px; }

/* ── Footer legend ── */
/* Pin the footer legend to the bottom of the page so it never shifts between the loading,
   empty, and loaded states (scoped to this page only). */
.content-area[b-n86muiusen] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 120px);
}

.fq-foot-note[b-n86muiusen] {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-subtle);
    line-height: 2;
}

/* ── Responsive ── */
@media screen and (max-width: 640px) {
    .fq-search[b-n86muiusen] { flex-basis: 100%; }
    .fq-table[b-n86muiusen] { font-size: 12px; }
    .fq-sec-sub[b-n86muiusen] { display: none; }
}

/* ── Inline action button (renders identically to the .fq-action link) ── */
.fq-action-btn[b-n86muiusen] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

/* ── Add-OR modal ── */
.fq-modal-overlay[b-n86muiusen] {
    position: fixed;
    inset: 0;
    background: rgba(13, 33, 55, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}

.fq-modal[b-n86muiusen] {
    background: var(--bg-card);
    border-radius: 14px;
    width: 100%;
    max-width: 480px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(13, 33, 55, .28);
    overflow: hidden;
}

.fq-modal-head[b-n86muiusen] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.fq-modal-title[b-n86muiusen] { font-size: 15px; font-weight: 800; color: var(--navy); }
.fq-modal-sub[b-n86muiusen] { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.fq-modal-x[b-n86muiusen] {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
}
.fq-modal-x:hover[b-n86muiusen] { color: var(--navy); }

.fq-modal-body[b-n86muiusen] { padding: 16px 18px; overflow-y: auto; }

.fq-modal-foot[b-n86muiusen] {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.fq-modal-done[b-n86muiusen] {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.fq-modal-done:hover[b-n86muiusen] { background: var(--accent-hover); }

.fq-or-state[b-n86muiusen] { padding: 18px 4px; text-align: center; color: var(--text-subtle); font-size: 13px; }
.fq-or-error[b-n86muiusen] { color: var(--red); }
.fq-or-note[b-n86muiusen] { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

.fq-or-list[b-n86muiusen] { display: flex; flex-direction: column; gap: 8px; }

.fq-or-row[b-n86muiusen] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
}
.fq-or-rowdone[b-n86muiusen] { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 30%, transparent); }

.fq-or-day[b-n86muiusen] { text-align: left; }
.fq-or-date[b-n86muiusen] { font-size: 13px; font-weight: 700; color: var(--text); }
.fq-or-amt[b-n86muiusen] { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.fq-or-input[b-n86muiusen] {
    width: 130px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fq-or-input:focus[b-n86muiusen] { outline: none; border-color: var(--accent); }

.fq-or-save[b-n86muiusen] {
    background: var(--gold);
    color: var(--navy);
    border: none;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.fq-or-save:hover:not(:disabled)[b-n86muiusen] { background: var(--gold-light, #e8cc76); }
.fq-or-save:disabled[b-n86muiusen] { opacity: .55; cursor: default; }

.fq-or-done[b-n86muiusen] { display: flex; align-items: center; gap: 6px; grid-column: 2 / 4; font-size: 12.5px; font-weight: 700; color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fq-or-check[b-n86muiusen] { font-size: 13px; }

/* Confirm-before-save (catches a mistyped OR) */
.fq-or-confirm[b-n86muiusen] { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fq-or-confirm-q[b-n86muiusen] { font-size: 12.5px; color: var(--text); margin-right: auto; }
.fq-or-confirm-q strong[b-n86muiusen] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--navy); }
.fq-or-confirm-yes[b-n86muiusen] {
    background: var(--green); color: #fff; border: none; border-radius: 7px;
    padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.fq-or-confirm-yes:hover:not(:disabled)[b-n86muiusen] { background: #25664f; }
.fq-or-confirm-yes:disabled[b-n86muiusen] { opacity: .6; cursor: default; }
.fq-or-confirm-no[b-n86muiusen] {
    background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 7px;
    padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.fq-or-confirm-no:hover:not(:disabled)[b-n86muiusen] { background: var(--bg-icon); }
.fq-or-confirm-no:disabled[b-n86muiusen] { opacity: .6; cursor: default; }

.fq-or-rowerr[b-n86muiusen] { grid-column: 1 / 4; font-size: 11.5px; color: var(--red); margin-top: 2px; }

/* ── Load skeleton (mirrors the section + 5-column table) ── */
.fq-skeleton .fq-section[b-n86muiusen] { pointer-events: none; }
.fq-sk-mt[b-n86muiusen] { margin-top: 6px; }
.fq-sk-row[b-n86muiusen] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.fq-sk-row:last-child[b-n86muiusen] { border-bottom: none; }
.fq-sk-head[b-n86muiusen] {
    background: var(--bg);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

/* ── Manual hide (admin dismisses an item permanently from the live queue) ── */
.fq-action-cell[b-n86muiusen] { display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end; }

.fq-hidebtn[b-n86muiusen] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 3px 9px;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.fq-hidebtn:hover[b-n86muiusen] { background: var(--bg); color: var(--navy); }

/* Bulk "Hide all Contract expired" — right side of the immediate section header */
.fq-hideall[b-n86muiusen] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 650;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.fq-hideall:hover[b-n86muiusen] { background: var(--bg-icon); border-color: var(--accent); color: var(--accent); }
.fq-hideall svg[b-n86muiusen] { width: 14px; height: 14px; }

/* Past follow-up button — standard app button (btn-outline), right-aligned in the filter bar. */
.fq-history-link[b-n86muiusen] { margin-left: auto; flex-shrink: 0; }

/* ── Hero + queue summary stat strip (matches the facility pages) ── */

/* NPM "one OR for several days" mode */
.fq-or-modes[b-n86muiusen] { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fq-or-mode[b-n86muiusen] { padding: 8px 10px; border: none; background: var(--bg-card); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-subtle); }
.fq-or-mode + .fq-or-mode[b-n86muiusen] { border-left: 1px solid var(--border); }
.fq-or-mode:hover:not(.on)[b-n86muiusen] { background: #f7fafc; color: var(--text); }
.fq-or-mode.on[b-n86muiusen] { background: var(--accent); color: #fff; }
.fq-or-mode:disabled[b-n86muiusen] { opacity: .6; cursor: default; }

.fq-or-rowpick[b-n86muiusen] { grid-template-columns: auto 1fr; cursor: pointer; }
.fq-or-pick[b-n86muiusen] { width: 16px; height: 16px; accent-color: var(--navy); }

.fq-or-multibar[b-n86muiusen] { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.fq-or-multiinfo[b-n86muiusen] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.fq-or-multicount[b-n86muiusen] { font-size: 12.5px; font-weight: 700; color: var(--text); }
.fq-or-multitotal[b-n86muiusen] { font-size: 13px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.fq-or-multirow[b-n86muiusen] { display: flex; gap: 8px; align-items: center; }
.fq-or-multirow .fq-or-input[b-n86muiusen] { flex: 1 1 auto; width: auto; }

/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
/* /Components/Pages/Reports/IceReports.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   IceReports.razor.css — Iceplant Reports
   Visual language mirrors TccReports / NpmReports. All tokens from app.css.
   ICE-specific: monthly space rental, no fish/section/daily widgets.
══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.rpt-topbar[b-sdc7ev209v] {
    background: var(--navy);
    padding: 18px 28px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.rpt-topbar[b-sdc7ev209v]::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(200,168,75,.16) 0%, transparent 70%);
    pointer-events: none;
}
.rpt-topbar-left[b-sdc7ev209v] { display: flex; align-items: center; gap: 14px; flex: 1; position: relative; z-index: 1; }
.rpt-back-btn[b-sdc7ev209v] {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s;
    flex-shrink: 0;
}
.rpt-back-btn:hover[b-sdc7ev209v] { background: rgba(255,255,255,.14); }
.rpt-back-btn svg[b-sdc7ev209v] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-topbar-icon[b-sdc7ev209v] {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(200,168,75,.18);
    border: 1px solid rgba(200,168,75,.28);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rpt-topbar-icon svg[b-sdc7ev209v] { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpt-eyebrow[b-sdc7ev209v] { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.rpt-title[b-sdc7ev209v] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.rpt-subtitle[b-sdc7ev209v] { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.rpt-header-progress[b-sdc7ev209v] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
}
.rpt-header-progress-fill[b-sdc7ev209v] {
    height: 100%;
    background: var(--gold);
    transition: width .4s ease;
}
.rpt-topbar-right[b-sdc7ev209v] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.rpt-action-btn[b-sdc7ev209v] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.85);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.rpt-action-btn:hover[b-sdc7ev209v] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-sdc7ev209v] { outline: 2px solid color-mix(in srgb, var(--gold) 85%, white); outline-offset: 2px; }
.rpt-action-btn svg[b-sdc7ev209v] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Period bar ── */
.rpt-period-bar[b-sdc7ev209v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}
.rpt-period-tabs[b-sdc7ev209v] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.rpt-period-tab[b-sdc7ev209v] {
    min-height: 32px;
    min-width: 92px;
    padding: 6px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.rpt-period-tab.active[b-sdc7ev209v] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14);
}
.rpt-document-tab[b-sdc7ev209v] { gap: 7px; padding: 0 16px; min-width: 0; }
.rpt-document-tab svg[b-sdc7ev209v] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rpt-date-nav[b-sdc7ev209v] { display: flex; align-items: center; gap: 10px; }
.rpt-date-nav.utility-mode .rpt-current-period[b-sdc7ev209v] { color: var(--accent); }
.rpt-nav-btn[b-sdc7ev209v] {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .13s;
}
.rpt-nav-btn:hover[b-sdc7ev209v] { background: var(--border); }
.rpt-nav-btn svg[b-sdc7ev209v] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-sdc7ev209v] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ── KPI Strip ── */
.rpt-kpi-strip[b-sdc7ev209v] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 28px 0;
}
.rpt-kpi-card[b-sdc7ev209v] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.kpi-icon-wrap[b-sdc7ev209v] {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-icon-wrap svg[b-sdc7ev209v] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Uniform neutral icon tiles — consistent across all facility reports. */
.kpi-icon-green[b-sdc7ev209v],
.kpi-icon-gold[b-sdc7ev209v],
.kpi-icon-red[b-sdc7ev209v],
.kpi-icon-neutral[b-sdc7ev209v] { background: var(--bg-icon); color: var(--navy-3); }
.kpi-body[b-sdc7ev209v] { flex: 1; min-width: 0; }
.kpi-label[b-sdc7ev209v] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
.kpi-value[b-sdc7ev209v] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.kpi-change[b-sdc7ev209v] { font-size: 12px; color: var(--text-subtle); margin-top: 5px; }
.kpi-change-negative[b-sdc7ev209v] { color: var(--red); }

/* ── Main content ── */
.rpt-content[b-sdc7ev209v] {
    padding: 20px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Charts row ── */
.rpt-charts-row[b-sdc7ev209v] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: stretch;
}
.rpt-chart-card[b-sdc7ev209v] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.rpt-chart-wide[b-sdc7ev209v] { display: flex; flex-direction: column; }
.chart-header[b-sdc7ev209v] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.chart-header-left[b-sdc7ev209v] { flex: 1; }
.chart-title[b-sdc7ev209v] { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.chart-subtitle[b-sdc7ev209v] { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.chart-legend[b-sdc7ev209v] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend-item[b-sdc7ev209v] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-sdc7ev209v] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-label[b-sdc7ev209v] { font-size: 12px; color: var(--text-subtle); font-weight: 500; }

/* ── 3D Bar chart ── */
.rpt-bar-chart[b-sdc7ev209v] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex: 1;
    min-height: 250px;
    padding: 14px 18px 10px;
    position: relative;
    background:
        repeating-linear-gradient(to top, transparent 0, transparent 39px, color-mix(in srgb, var(--border) 55%, transparent) 40px),
        linear-gradient(to top, rgba(13,33,55,.02) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.rpt-bar-group[b-sdc7ev209v] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.rpt-bar-wrap[b-sdc7ev209v] { width: 100%; height: calc(100% - 40px); position: relative; flex-shrink: 0; }
.rpt-bar-3d[b-sdc7ev209v] { width: min(100%, 140px); height: 100%; position: relative; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--navy) 8%, transparent)); margin-inline: auto; }
.rpt-bar-group.current .rpt-bar-3d[b-sdc7ev209v] { filter: drop-shadow(0 4px 8px rgba(200,168,75,.2)); }
.bar3d-face[b-sdc7ev209v] { position: absolute; }
.bar3d-front[b-sdc7ev209v] {
    bottom: 0; left: 10%; width: 80%;
    background: linear-gradient(180deg, #3fa07a 0%, #2d7a5f 100%);
    border-radius: 9px 9px 4px 4px;
    transition: height .4s cubic-bezier(.4,0,.2,1), transform .15s ease, filter .15s ease;
    min-height: 6px;
}
.rpt-bar-group.current .bar3d-front[b-sdc7ev209v] { background: linear-gradient(180deg, #d4b45e 0%, #c8a84b 100%); }
.rpt-bar-group.is-zero .bar3d-front[b-sdc7ev209v] { min-height: 0; background: none; filter: none; }
.rpt-bar-group.is-zero .rpt-bar-3d[b-sdc7ev209v] { filter: none; }
.bar3d-top[b-sdc7ev209v], .bar3d-side[b-sdc7ev209v] { display: none; }
.rpt-bar-group:hover .bar3d-front[b-sdc7ev209v] { transform: translateY(-2px); filter: brightness(1.04); }
.rpt-bar-group:hover .rpt-bar-label[b-sdc7ev209v] { color: var(--navy); }
.rpt-bar-label[b-sdc7ev209v] { font-size: 11px; color: var(--text-muted); white-space: nowrap; text-align: center; margin-top: 6px; font-weight: 500; }
.rpt-bar-val[b-sdc7ev209v] { font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; text-align: center; }
.rpt-bar-group.is-zero .rpt-bar-val[b-sdc7ev209v] { color: var(--text-muted); }

/* ── Donut / Payor Status ── */
.rpt-status-card[b-sdc7ev209v] { display: flex; flex-direction: column; }
.rpt-donut-wrap[b-sdc7ev209v] { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; padding-top: 8px; }
.rpt-donut-container[b-sdc7ev209v] { position: relative; }
.rpt-donut-svg[b-sdc7ev209v] { width: 160px; height: 160px; display: block; }
.donut-center-val[b-sdc7ev209v] { text-anchor: middle; font-size: 22px; font-weight: 800; fill: var(--navy); font-family: inherit; }
.donut-center-lbl[b-sdc7ev209v] { text-anchor: middle; font-size: 11px; font-weight: 700; fill: var(--text-muted); letter-spacing: .08em; font-family: inherit; }
.donut-segment[b-sdc7ev209v] { transition: stroke-dasharray .4s; }
.rpt-donut-legend[b-sdc7ev209v] { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.donut-leg-item[b-sdc7ev209v] { display: flex; align-items: center; justify-content: space-between; }
.donut-leg-left[b-sdc7ev209v] { display: flex; align-items: center; gap: 8px; }
.donut-leg-dot[b-sdc7ev209v] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-leg-label[b-sdc7ev209v] { font-size: 12.5px; color: var(--text); }
.donut-leg-value[b-sdc7ev209v] { font-size: 12.5px; font-weight: 700; color: var(--navy); }

/* ── Section heading ── */
.rpt-section-heading[b-sdc7ev209v] { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; }
.rpt-section-rule[b-sdc7ev209v] { flex: 1; height: 1px; background: var(--border); }
.rpt-section-heading h2[b-sdc7ev209v] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); white-space: nowrap; margin: 0; }

/* Audit row cards live in AuditBreakdownRow.razor(.css) — shared by every facility report. */

/* ── Status badges ── */
.status-badge[b-sdc7ev209v] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.status-badge.paid[b-sdc7ev209v], .status-badge.tier-paid[b-sdc7ev209v] { background: var(--green-bg); color: var(--green); }
.status-badge.partial[b-sdc7ev209v], .status-badge.tier-partial[b-sdc7ev209v] { background: rgba(184,115,51,.1); color: #b87333; }
.status-badge.unpaid[b-sdc7ev209v], .status-badge.tier-unpaid[b-sdc7ev209v] { background: var(--red-bg); color: var(--red); }

/* ── Delinquency panel ── */
.rpt-delinquency-panel[b-sdc7ev209v] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.delinq-exposure[b-sdc7ev209v] {
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
/* No fill. The amount above is already set in the office's red, which carries the meaning; a tinted panel behind it
   reads as highlighter on a government screen and prints as a grey block. The border stays as the panel's own. */
.delinq-has-balance[b-sdc7ev209v] { border-color: rgba(139,58,58,.18); }
.delinq-exp-val[b-sdc7ev209v] { font-size: 24px; font-weight: 800; color: var(--red); line-height: 1; }
.delinq-exp-lbl[b-sdc7ev209v] { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.delinq-table-head[b-sdc7ev209v], .delinq-row[b-sdc7ev209v] {
    display: grid;
    grid-template-columns: 80px 1fr 140px 90px 100px 130px;
    padding: 10px 20px;
    align-items: center;
    gap: 8px;
}
.delinq-table-head[b-sdc7ev209v] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.delinq-row[b-sdc7ev209v] { border-bottom: 1px solid var(--border); font-size: 13px; color: var(--navy); }
.delinq-row:last-child[b-sdc7ev209v] { border-bottom: none; }
.delinq-empty[b-sdc7ev209v] { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.missed-badge[b-sdc7ev209v] { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.missed-badge.critical[b-sdc7ev209v] { background: var(--red-bg); color: var(--red); }
.missed-badge.warn[b-sdc7ev209v] { background: rgba(200,168,75,.12); color: #8a6800; }
.balance-due[b-sdc7ev209v] { color: var(--red); font-weight: 700; }
.stall-no[b-sdc7ev209v] { font-weight: 700; }
.text-muted[b-sdc7ev209v] { color: var(--text-muted); }

/* ── All Stalls compliance table ── */
.rpt-compliance-table-wrap[b-sdc7ev209v] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rpt-compliance-table[b-sdc7ev209v] { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-compliance-table th[b-sdc7ev209v] {
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
}
.rpt-compliance-table td[b-sdc7ev209v] { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--navy); }
.rpt-compliance-table tr:last-child td[b-sdc7ev209v] { border-bottom: none; }
.rpt-compliance-table .row-partial[b-sdc7ev209v] { background: rgba(200,168,75,.04); }
.rpt-compliance-table .row-unpaid[b-sdc7ev209v]  { background: rgba(139,58,58,.04); }

/* ── Empty state ── */
.rpt-empty[b-sdc7ev209v] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; }
.rpt-empty-icon[b-sdc7ev209v] { width: 40px; height: 40px; color: var(--text-muted); }
.rpt-empty-icon svg[b-sdc7ev209v] { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rpt-empty-title[b-sdc7ev209v] { font-size: 14px; font-weight: 600; color: var(--navy); }
.rpt-empty-text[b-sdc7ev209v] { font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ── Print document shell (shared with NPM/TCC print views) ── */
.print-document-content[b-sdc7ev209v] { display: block; background: #eef3f7; overflow-x: hidden; }
.print-report-sheet[b-sdc7ev209v] {
    width: 100%;
    min-height: 900px;
    padding: 30px 28px 40px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d5dde5;
    box-shadow: 0 18px 38px rgba(9, 31, 52, .08);
    color: #111827;
}
.print-report-actions[b-sdc7ev209v] { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.print-report-btn[b-sdc7ev209v] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 7px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.print-report-btn svg[b-sdc7ev209v] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.print-report-header[b-sdc7ev209v] { text-align: center; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.print-report-logo[b-sdc7ev209v] { display: block; width: 58px; height: 58px; object-fit: contain; margin: 0 auto 10px; }
.print-republic[b-sdc7ev209v] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
.print-report-header h2[b-sdc7ev209v] { margin: 7px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.15; color: #111827; }
.print-report-header p[b-sdc7ev209v] { margin: 0; font-size: 12px; color: #4b5563; }
.print-report-title[b-sdc7ev209v] { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; color: #111827; }
.print-report-meta[b-sdc7ev209v] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 16px;
}
.print-report-meta div[b-sdc7ev209v] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-meta div:last-child[b-sdc7ev209v] { border-right: none; }
.print-report-meta span[b-sdc7ev209v] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-meta strong[b-sdc7ev209v] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-summary[b-sdc7ev209v] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 20px; background: #f8fafc;
}
.print-report-summary div[b-sdc7ev209v] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-summary div:last-child[b-sdc7ev209v] { border-right: none; }
.print-report-summary span[b-sdc7ev209v] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-summary strong[b-sdc7ev209v] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-signatures[b-sdc7ev209v] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px; margin-top: 58px;
}
.print-report-signatures div[b-sdc7ev209v] { border-top: 1px solid #111827; padding-top: 8px; text-align: center; }
.print-report-signatures span[b-sdc7ev209v] { display: block; font-size: 11px; color: #6b7280; }
.print-report-signatures strong[b-sdc7ev209v] { display: block; margin-top: 3px; font-size: 11px; color: #111827; }
.print-empty[b-sdc7ev209v] { margin: 22px 0; padding: 16px; text-align: center; font-size: 12px; color: #6b7280; border: 1px dashed #cfd6de; background: #f8fafc; }

/* ── Status Report table ── */
.print-table-wrap[b-sdc7ev209v] { margin-top: 12px; width: 100%; overflow-x: hidden; }
.print-status-table[b-sdc7ev209v] { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; color: #111827; }
.print-status-table th[b-sdc7ev209v], .print-status-table td[b-sdc7ev209v] { border: 1px solid #cfd6de; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-status-table th[b-sdc7ev209v] { background: #f3f6f9; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #374151; }
.status-sheet .print-status-table[b-sdc7ev209v] { font-size: 13px !important; }
.status-sheet .print-status-table th[b-sdc7ev209v] { font-size: 11px !important; }
.status-sheet .print-status-table td[b-sdc7ev209v] { padding: 9px 10px; }
.print-status-table td.status-paid[b-sdc7ev209v]    { color: #2d7a5f; font-weight: 600; }
.print-status-table td.status-partial[b-sdc7ev209v] { color: #b87333; font-weight: 600; }
.print-status-table td.status-unpaid[b-sdc7ev209v]  { color: #8b3a3a; font-weight: 600; }
.text-muted-cell[b-sdc7ev209v] { color: #6b7280; }

/* ── History tables ── */
.print-section-block[b-sdc7ev209v] { margin-top: 24px; }
.print-section-heading[b-sdc7ev209v] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); padding: 6px 0 4px; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.history-sheet .history-table[b-sdc7ev209v] { font-size: 15px !important; }
.history-sheet .history-table th[b-sdc7ev209v] { font-size: 13px !important; }
.history-sheet .history-table td[b-sdc7ev209v] { padding: 13px 14px; }
.history-sheet .history-table th:first-child[b-sdc7ev209v],
.history-sheet .history-table td:first-child[b-sdc7ev209v] { min-width: 110px; white-space: nowrap; }
.history-empty[b-sdc7ev209v] { text-align: center; color: #6b7280; padding: 18px 0; }
.history-total-row td[b-sdc7ev209v] { background: #f3f6f9; border-top: 2px solid #cfd6de; font-size: 13px; }
.rate-good[b-sdc7ev209v]    { color: #2d7a5f; font-weight: 600; }
.rate-partial[b-sdc7ev209v] { color: #b87333; font-weight: 600; }
.rate-low[b-sdc7ev209v]     { color: #8b3a3a; font-weight: 600; }
.balance-due[b-sdc7ev209v]  { color: #8b3a3a; }

/* ── History meta ── */
.history-sheet .print-report-meta span[b-sdc7ev209v]  { font-size: 12px; }
.history-sheet .print-report-meta strong[b-sdc7ev209v] { font-size: 16px; }
.history-sheet .print-section-heading[b-sdc7ev209v]   { font-size: 15px; }
.history-sheet .history-total-row td[b-sdc7ev209v]    { font-size: 15px !important; padding: 13px 14px; }
.history-sheet .print-report-signatures span[b-sdc7ev209v]  { font-size: 13px; }
.history-sheet .print-report-signatures strong[b-sdc7ev209v] { font-size: 15px; }
.status-sheet .print-report-meta span[b-sdc7ev209v]   { font-size: 11px; }
.status-sheet .print-report-meta strong[b-sdc7ev209v] { font-size: 14px; }
.status-sheet .print-report-summary span[b-sdc7ev209v],
.status-sheet .print-report-summary strong[b-sdc7ev209v] { font-size: 14px; }
.status-sheet .print-section-heading[b-sdc7ev209v]   { font-size: 13px; }
.status-sheet .print-report-signatures span[b-sdc7ev209v]  { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-sdc7ev209v] { font-size: 14px; }

@media screen and (max-width: 900px) {
    .rpt-kpi-strip[b-sdc7ev209v] { grid-template-columns: 1fr 1fr; }
    .rpt-charts-row[b-sdc7ev209v] { grid-template-columns: 1fr; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body[b-sdc7ev209v] { background: white !important; }
    .rpt-topbar[b-sdc7ev209v], .rpt-period-bar[b-sdc7ev209v] { background: white !important; border: none !important; box-shadow: none !important; }
    .rpt-topbar-right[b-sdc7ev209v], .rpt-period-tabs[b-sdc7ev209v], .rpt-date-nav[b-sdc7ev209v], .rpt-back-btn[b-sdc7ev209v], .rpt-header-progress[b-sdc7ev209v], .print-report-actions[b-sdc7ev209v] { display: none !important; }
    .rpt-content[b-sdc7ev209v] { padding: 0 !important; }
    .print-document-content[b-sdc7ev209v] { display: block !important; background: white !important; }
    /* 12mm, NOT 0 - the page margin is deliberately nought so the browser has no margin box to print its automatic
       date, URL and page numbers into, which means the SHEET supplies the whitespace. print.css says exactly that and
       sets `.print-report-sheet { padding: 12mm }`, but CSS isolation compiles this rule to
       `.print-report-sheet[b-xxxxx]`, and a class-plus-attribute selector outranks a bare class even when both are
       !important. So this rule quietly won and printed the sheet hard against the paper edge. */
    .print-report-sheet[b-sdc7ev209v] { width: 100% !important; min-height: auto !important; padding: 12mm !important; border: none !important; box-shadow: none !important; }
    /* ── How these sheets break across pages ──────────────────────────────────
       The same three rules the List of Stallholders prints by, so every document this platform issues paginates alike: a table's
       header row REPEATS on each page it continues onto rather than appearing alone at the top of one, a row is never split, and
       a section block may span pages because some areas hold forty rows. Plus the joins that actually broke: a section heading
       stays with what follows it, and the letterhead and meta strip are never split. */
    .print-status-table thead[b-sdc7ev209v] { display: table-header-group; }
    .print-status-table tfoot[b-sdc7ev209v] { display: table-footer-group; }

    .print-status-table tr[b-sdc7ev209v] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-section-heading[b-sdc7ev209v] {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-header[b-sdc7ev209v],
    .print-report-meta[b-sdc7ev209v] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A SECTION IS ONE UNIT: its name, its summary strip and its rows. This was uto, which put a heading and a total at the
       foot of a page with the rows they describe on the next. void is a request, not a constraint: a section taller than the
       page is still split, and the repeating header keeps that readable - so small sections stay whole and large ones still fit. */
    .print-section-block[b-sdc7ev209v] {
        break-inside: avoid;
        page-break-inside: avoid;
        /* The top space is PADDING here, not the margin this block carries on screen. A margin is dropped at a page break; a
           padding is part of the box and survives, so a section that begins a page opens clear of the paper edge instead of
           against it. The page margin is nought, because a page margin is where Chromium prints its own date, title and URL and
           no CSS turns that off - so the document supplies its own whitespace. Sections are kept whole above, which is what makes
           a continued page always begin with one. */
        margin-top: 0 !important;
        padding-top: 10mm;
    }

    .print-section-summary[b-sdc7ev209v] {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Signatures are never split down the middle: "Prepared by" on one page and "Reviewed by" on the next is not a document
       anybody signs. */
    .print-report-signatures[b-sdc7ev209v] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-table-wrap[b-sdc7ev209v] { overflow: visible !important; }
    /* ── Why page two used to start hard against the paper edge ───────────────
       The page box is margin-free and the 12mm of whitespace came from padding on the SHEET. A block's padding applies once, at
       its own top and bottom, not at every page break - so pages after the first began at y=0 with a table header touching the
       edge. Only a page MARGIN repeats per page, so these two documents ask for one of their own; a named page applies solely to
       what asks for it, leaving the roster, the statements and the receipts on the margin-free box they were tuned for.

       Stated rather than buried: a top margin gives the browser somewhere to print its automatic date and page numbers. Untick
       "Headers and footers" in the print dialog if it does. The alternative was figures against the paper edge on every page. */
    /* The page margin these sheets need is injected at print time by stalltrackPrint.reportDocument, NOT set here. An @page in a
       scoped stylesheet does not reach the print engine, and a NAMED page is not honoured at all - print.css assigns a landscape
       named page to .print-report-sheet and this document still printed portrait, which is the proof. Left and right padding is
       injected with it, so nothing about the paper margin is stated in CSS any more. */
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-sdc7ev209v] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-sdc7ev209v]::before,
    .rpt-topbar[b-sdc7ev209v]::after {
        display: none;
    }

.rpt-back-btn[b-sdc7ev209v] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-sdc7ev209v] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-sdc7ev209v] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-sdc7ev209v] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-sdc7ev209v] {
    color: var(--text-tertiary);
}

.rpt-title[b-sdc7ev209v] {
    color: var(--navy);
}

.rpt-subtitle[b-sdc7ev209v] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-sdc7ev209v] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-sdc7ev209v] {
    background: var(--accent);
}

.rpt-action-btn[b-sdc7ev209v] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-sdc7ev209v] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-sdc7ev209v] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-sdc7ev209v],
.rpt-document-tab.active[b-sdc7ev209v],
.utility-section-tab.active[b-sdc7ev209v] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-sdc7ev209v],
.rpt-document-tab:hover:not(.active)[b-sdc7ev209v],
.utility-section-tab:hover:not(.active)[b-sdc7ev209v] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-sdc7ev209v],
.rpt-action-btn:focus-visible[b-sdc7ev209v],
.rpt-period-tab:focus-visible[b-sdc7ev209v],
.rpt-document-tab:focus-visible[b-sdc7ev209v] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/Reports/MonthEndReport.razor.rz.scp.css */
.me-controls[b-7dc4mvduxh] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.me-period-nav[b-7dc4mvduxh] { display: flex; align-items: center; gap: 10px; }
.me-nav-btn[b-7dc4mvduxh] {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.me-nav-btn:hover[b-7dc4mvduxh] { background: var(--bg); }
.me-nav-btn svg[b-7dc4mvduxh] { width: 16px; height: 16px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.me-period[b-7dc4mvduxh] { font-size: 15px; font-weight: 700; color: var(--navy); min-width: 118px; text-align: center; }

/* Clickable month/year picker */
.me-period-picker[b-7dc4mvduxh] { position: relative; }
.me-period-btn[b-7dc4mvduxh] {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px;
    min-height: 34px; padding: 5px 12px; cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.me-period-btn:hover[b-7dc4mvduxh] { border-color: var(--accent); background: var(--bg); }
.me-period-btn .me-period[b-7dc4mvduxh] { min-width: 96px; }
.me-period-btn svg[b-7dc4mvduxh] { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.me-period-btn[aria-expanded="true"] svg[b-7dc4mvduxh] { transform: rotate(180deg); }

.me-picker-backdrop[b-7dc4mvduxh] { position: fixed; inset: 0; z-index: 40; background: transparent; }
.me-picker[b-7dc4mvduxh] {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    z-index: 50; width: 278px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(9, 31, 52, .18); padding: 14px;
    animation: me-picker-in-b-7dc4mvduxh .14s ease;
}
@keyframes me-picker-in-b-7dc4mvduxh {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.me-picker-head[b-7dc4mvduxh] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.me-picker-year[b-7dc4mvduxh] { font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: .3px; }
.me-picker-yr-btn[b-7dc4mvduxh] { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.me-picker-yr-btn:hover[b-7dc4mvduxh] { background: var(--bg); }
.me-picker-yr-btn svg[b-7dc4mvduxh] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.me-picker-grid[b-7dc4mvduxh] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.me-picker-month[b-7dc4mvduxh] {
    padding: 10px 0; border-radius: 8px; border: 1px solid transparent; background: var(--bg);
    font-size: 12.5px; font-weight: 650; color: var(--navy); cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.me-picker-month:hover[b-7dc4mvduxh] { background: var(--bg-icon); }
.me-picker-month.current[b-7dc4mvduxh] { border-color: var(--accent); color: var(--accent); }
.me-picker-month.selected[b-7dc4mvduxh], .me-picker-month.selected:hover[b-7dc4mvduxh] {
    background: var(--accent); color: #fff; border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 13px rgba(9, 31, 52, .16);
}
.me-picker-foot[b-7dc4mvduxh] { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; text-align: center; }
.me-picker-today[b-7dc4mvduxh] { background: transparent; border: none; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 10px; border-radius: 6px; }
.me-picker-today:hover[b-7dc4mvduxh] { color: var(--navy); background: var(--bg); }

.me-print-btn[b-7dc4mvduxh] {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff; border: none; border-radius: 9px;
    padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.me-print-btn[b-7dc4mvduxh] { min-height: 38px; }
.me-print-btn:hover[b-7dc4mvduxh] { background: var(--accent-hover); }
.me-print-btn:disabled[b-7dc4mvduxh] { opacity: .5; cursor: default; }
.me-print-btn svg[b-7dc4mvduxh] { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Actions group: search + print — grows to fill the row, so no dead whitespace */
.me-actions[b-7dc4mvduxh] { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; }

.me-search[b-7dc4mvduxh] {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px;
    height: 38px; padding: 0 12px; flex: 1 1 auto; min-width: 0;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.me-search:focus-within[b-7dc4mvduxh] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 168, 75, .15); }
.me-search svg[b-7dc4mvduxh] { width: 15px; height: 15px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.me-search input[b-7dc4mvduxh] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13px; color: var(--navy); }
.me-search input[b-7dc4mvduxh]::placeholder { color: var(--text-muted); }
.me-search input[b-7dc4mvduxh]::-webkit-search-cancel-button { display: none; }
.me-search-clear[b-7dc4mvduxh] { border: none; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.me-search-clear:hover[b-7dc4mvduxh] { color: var(--navy); }

/* Group and source: two compact selectors. One question each — which part of the office's revenue, then which source —
   instead of a chip per facility, which could not cover the sources that have none. */
.me-filter[b-7dc4mvduxh] { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* The period the sheet covers, and under it the scope when one is in force. Both are set as plain type: a tinted
   pill around a heading reads as a web badge, and this sheet is printed and filed.

   Held close to the header above it. The two belong to the same block of identification — office, municipality,
   document, period, scope — and a wide gap between them read as an empty band across the top of the page. */
.me-scope-row[b-7dc4mvduxh] { text-align: center; margin-top: 4px; margin-bottom: 14px; }
.me-scope[b-7dc4mvduxh] {
    font-size: 12px;
    color: var(--text-subtle);
}

.me-state[b-7dc4mvduxh] { padding: 40px; text-align: center; color: var(--text-subtle); font-size: 14px; }
.me-state-error[b-7dc4mvduxh] { color: var(--red); }
.me-retry[b-7dc4mvduxh] { margin-left: 10px; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; }

.me-sheet[b-7dc4mvduxh] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }

.me-rpt-head[b-7dc4mvduxh] { text-align: center; margin-bottom: 10px; }
.me-seal[b-7dc4mvduxh] { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; margin: 0 auto 8px; display: block; }
.me-gov[b-7dc4mvduxh] { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.me-org[b-7dc4mvduxh] { font-size: 15px; font-weight: 700; color: var(--navy); margin-top: 2px; }
.me-muni[b-7dc4mvduxh] { font-size: 11px; color: var(--text-subtle); margin-top: 2px; }
.me-doc[b-7dc4mvduxh] { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--navy); }
/* The period beneath the document's name, and on a month still running the day the figures stop at. */
.me-period-line[b-7dc4mvduxh] { margin-top: 2px; font-size: 12px; color: var(--text-subtle); }

/* How many figures apply depends on the scope (a direct service has no outstanding or rate), so the cards share the row. */
.me-summary[b-7dc4mvduxh] { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.me-sum-card[b-7dc4mvduxh] { border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; background: var(--bg); }
.me-sum-val[b-7dc4mvduxh] { font-size: 20px; font-weight: 800; color: var(--navy); }
.me-sum-lbl[b-7dc4mvduxh] { font-size: 11px; color: var(--text-subtle); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }
.me-red[b-7dc4mvduxh] { color: var(--red); }

.me-facility[b-7dc4mvduxh] { margin: 0; padding: 22px 0; border-top: 2px solid var(--border); }
.me-facility:first-of-type[b-7dc4mvduxh] { border-top: none; padding-top: 6px; }
.me-fac-head[b-7dc4mvduxh] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border); margin-bottom: 8px; }
.me-fac-title[b-7dc4mvduxh] { display: flex; align-items: center; gap: 9px; }
.me-fac-name[b-7dc4mvduxh] { font-size: 15px; font-weight: 700; color: var(--navy); }
.me-tag[b-7dc4mvduxh] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-subtle); background: var(--bg-icon); padding: 3px 8px; border-radius: 6px; }
.me-fac-stats[b-7dc4mvduxh] { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-subtle); }
.me-fac-stats strong[b-7dc4mvduxh] { color: var(--navy); }

.me-table[b-7dc4mvduxh] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.me-table th[b-7dc4mvduxh] { text-align: center; padding: 7px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.me-table td[b-7dc4mvduxh] {
    padding: 7px 10px;
    text-align: center;
    border-bottom: 1px solid var(--bg-icon);
    color: var(--navy);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.me-table th.me-num[b-7dc4mvduxh], .me-table td.me-num[b-7dc4mvduxh] { text-align: center; font-variant-numeric: tabular-nums; }
.me-table td.me-mono[b-7dc4mvduxh] { font-family: "Cascadia Mono", "Consolas", monospace; font-size: 11.5px; letter-spacing: .3px; font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.me-table tfoot td[b-7dc4mvduxh] { border-top: 2px solid var(--border); border-bottom: none; padding-top: 9px; }
.me-table tfoot td:first-child[b-7dc4mvduxh] { text-align: left; }
/* No row shading and no filled status chips. A tinted row and an amber chip are web conventions; on a filed
   government sheet they read as highlighter and they cost ink. The status is carried by the word itself, set in the
   colour the office already uses for paid, partial and unpaid, so a scanned or photocopied sheet still reads. */
.me-row-unpaid[b-7dc4mvduxh], .me-row-partial[b-7dc4mvduxh] { background: none; }

.me-status[b-7dc4mvduxh] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.me-paid[b-7dc4mvduxh] { color: var(--green); }
.me-partial[b-7dc4mvduxh] { color: #8a6d1b; }
.me-unpaid[b-7dc4mvduxh] { color: var(--red); }

.me-fac-note[b-7dc4mvduxh] { font-size: 12.5px; color: var(--text-subtle); padding: 10px 12px; background: var(--bg); border-radius: 9px; }

/* ── Official collections and their reconciliation ──
   Plain type and rules, the same as the facility tables, so the filed sheet reads as one document. */
.me-section-title[b-7dc4mvduxh] {
    margin: 24px 0 0;
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted);
}
.me-src-table th:first-child[b-7dc4mvduxh], .me-src-table td:first-child[b-7dc4mvduxh] { text-align: left; }
.me-src-table th:nth-child(2)[b-7dc4mvduxh], .me-src-table td:nth-child(2)[b-7dc4mvduxh],
.me-src-table th:nth-child(3)[b-7dc4mvduxh], .me-src-table td:nth-child(3)[b-7dc4mvduxh] { text-align: left; }
.me-recon .me-src-table th:first-child[b-7dc4mvduxh], .me-recon .me-src-table td:first-child[b-7dc4mvduxh] { text-align: left; }
.me-quiet[b-7dc4mvduxh] { color: var(--text-subtle); font-size: 12px; }
.me-tag-warn[b-7dc4mvduxh] { margin-left: 8px; color: var(--red); }
.me-fine-print[b-7dc4mvduxh] { margin-top: 10px; font-size: 11.5px; }
.me-fine-line[b-7dc4mvduxh] { display: block; margin-top: 2px; color: var(--text-subtle); font-size: 11.5px; font-weight: 400; }
.me-official[b-7dc4mvduxh], .me-recon[b-7dc4mvduxh] { border-top: none; }
.me-official[b-7dc4mvduxh] { padding-top: 14px; }

/* The metered-utilities table: a button on screen, its own captioned block once opened, and on paper only what was
   opened. No tint here either; the caption and a rule separate it from the stall fees above. */
.me-util-btn[b-7dc4mvduxh] {
    margin-top: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--navy);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.me-util-btn:hover[b-7dc4mvduxh] {
    border-color: var(--accent);
}

.me-util-block[b-7dc4mvduxh] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.me-util-head[b-7dc4mvduxh] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* An area's caption inside a facility's table, and its subtotal. Set in small caps with a rule above rather than a
   tint, so the sheet stays ink-cheap and reads the same photocopied. */
.me-area-row td[b-7dc4mvduxh] {
    padding-top: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.me-area-sub td[b-7dc4mvduxh] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--navy);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.me-rpt-foot[b-7dc4mvduxh] { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 16px; }
.me-rpt-foot div[b-7dc4mvduxh] { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.me-rpt-foot span[b-7dc4mvduxh] { color: var(--text-muted); }
.me-rpt-foot strong[b-7dc4mvduxh] { color: var(--navy); }

@media print {
    .no-print[b-7dc4mvduxh] { display: none !important; }
    .content-area[b-7dc4mvduxh] { padding: 0 !important; }
    .me-sheet[b-7dc4mvduxh] { border: none; border-radius: 0; padding: 0 12mm; background: #fff; }
    .me-rpt-head[b-7dc4mvduxh] { margin-bottom: 10px; }
    .me-facility[b-7dc4mvduxh] { break-inside: avoid; }

    /* Column headings repeat on a continued table, and the subtotal prints ONCE. A tfoot is repeated on every
       page by default, which on a facility that spans two sheets printed its subtotal twice — two totals for one
       facility reads as two different figures. */
    .me-table thead[b-7dc4mvduxh] { display: table-header-group; }
    .me-table tfoot[b-7dc4mvduxh] { display: table-row-group; }
    .me-table tr[b-7dc4mvduxh] { break-inside: avoid; }
}


/* Transaction-facility grouped payor rows (SLH/TRM/TPM) */
.me-txn-row.me-expandable[b-7dc4mvduxh] { cursor: pointer; }
.me-txn-row.me-expandable:hover[b-7dc4mvduxh] { background: var(--bg); }
.me-caret[b-7dc4mvduxh] { display: inline-block; font-size: 11px; color: var(--text-muted); margin-right: 6px; transition: transform .12s ease; }
.me-caret.open[b-7dc4mvduxh] { transform: rotate(90deg); }
.me-txn-payor[b-7dc4mvduxh] { font-weight: 400; color: var(--navy); }
.me-txn-inline[b-7dc4mvduxh] { color: var(--text-subtle); font-size: 11.5px; margin-left: 8px; }
.me-txn-detail td[b-7dc4mvduxh] { background: var(--bg); color: var(--text-subtle); font-size: 12px; padding-left: 26px; }
.me-txn-detail td:last-child[b-7dc4mvduxh] { color: var(--navy); }

/* ══════════════════════════════════════════════════════════════
   CONTEXTUAL LOADING SKELETON (screen only — mirrors the report sheet)
   ══════════════════════════════════════════════════════════════ */
.me-loading[b-7dc4mvduxh] {
    margin-top: 4px;
}

/* Centre shimmer lines inside the centred summary cards / report header */
.me-loading[b-7dc4mvduxh]  .me-sk-center {
    margin-left: auto;
    margin-right: auto;
}

.me-loading[b-7dc4mvduxh]  .me-sk-gap {
    margin-top: 8px;
}

/* Facility table placeholder: header bar + evenly spaced rows */
.me-table-skeleton[b-7dc4mvduxh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}



/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Month-End Report document (mobile/tablet ≤768px). Desktop untouched.
═══════════════════════════════════════════════════════════════════ */
/* Phone layout. Scoped to SCREEN deliberately: a printed A4 sheet, less its margins, measures roughly 717 CSS
   pixels, so an unscoped `max-width: 768px` matches on PAPER as well — and because this block sits after the print
   block, it was winning. That is why the signatory lines printed stacked one above another down the page instead of
   in a row, and why the sheet printed with a phone's 14px side padding instead of the 12mm margin stated for print. */
@media screen and (max-width: 768px) {
    .me-sheet[b-7dc4mvduxh] {
        padding: 16px 14px;
    }

    /* 4-up summary cards → 2-up on a phone. */
    .me-summary[b-7dc4mvduxh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Wide multi-column report tables scroll horizontally instead of forcing the sheet (and the whole
       document) wider than the viewport. */
    .me-table-wrap[b-7dc4mvduxh] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .me-table[b-7dc4mvduxh] {
        min-width: 680px;
    }

    /* Facility header stats wrap under the name; signature footer stacks. */
    .me-fac-stats[b-7dc4mvduxh] {
        gap: 12px;
        flex-wrap: wrap;
    }

    .me-rpt-foot[b-7dc4mvduxh] {
        flex-direction: column;
        gap: 12px;
    }
}
/* /Components/Pages/Reports/NccReports.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   NccReports.razor.css — New Commercial Center Reports
   Visual language mirrors TccReports / NpmReports. All tokens from app.css.
   NCC-specific: corner & extension stall tiers, no fish/section/daily widgets.
══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.rpt-topbar[b-50jeypgf5u] {
    background: var(--navy);
    padding: 18px 28px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.rpt-topbar[b-50jeypgf5u]::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(200,168,75,.16) 0%, transparent 70%);
    pointer-events: none;
}
.rpt-topbar-left[b-50jeypgf5u] { display: flex; align-items: center; gap: 14px; flex: 1; position: relative; z-index: 1; }
.rpt-back-btn[b-50jeypgf5u] {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s;
    flex-shrink: 0;
}
.rpt-back-btn:hover[b-50jeypgf5u] { background: rgba(255,255,255,.14); }
.rpt-back-btn svg[b-50jeypgf5u] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-topbar-icon[b-50jeypgf5u] {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(200,168,75,.18);
    border: 1px solid rgba(200,168,75,.28);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rpt-topbar-icon svg[b-50jeypgf5u] { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpt-eyebrow[b-50jeypgf5u] { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.rpt-title[b-50jeypgf5u] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.rpt-subtitle[b-50jeypgf5u] { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.rpt-header-progress[b-50jeypgf5u] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
}
.rpt-header-progress-fill[b-50jeypgf5u] {
    height: 100%;
    background: var(--gold);
    transition: width .4s ease;
}
.rpt-topbar-right[b-50jeypgf5u] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.rpt-action-btn[b-50jeypgf5u] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.85);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.rpt-action-btn:hover[b-50jeypgf5u] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-50jeypgf5u] { outline: 2px solid color-mix(in srgb, var(--gold) 85%, white); outline-offset: 2px; }
.rpt-action-btn svg[b-50jeypgf5u] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Period bar ── */
.rpt-period-bar[b-50jeypgf5u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}
.rpt-period-tabs[b-50jeypgf5u] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.rpt-period-tab[b-50jeypgf5u] {
    min-height: 32px;
    min-width: 92px;
    padding: 6px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.rpt-period-tab.active[b-50jeypgf5u] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14);
}
.rpt-document-tab[b-50jeypgf5u] { gap: 7px; padding: 0 16px; min-width: 0; }
.rpt-document-tab svg[b-50jeypgf5u] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rpt-date-nav[b-50jeypgf5u] { display: flex; align-items: center; gap: 10px; }
.rpt-date-nav.utility-mode .rpt-current-period[b-50jeypgf5u] { color: var(--accent); }
.rpt-nav-btn[b-50jeypgf5u] {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .13s;
}
.rpt-nav-btn:hover[b-50jeypgf5u] { background: var(--border); }
.rpt-nav-btn svg[b-50jeypgf5u] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-50jeypgf5u] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ── KPI Strip ── */
.rpt-kpi-strip[b-50jeypgf5u] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 28px 0;
}
.rpt-kpi-card[b-50jeypgf5u] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.kpi-icon-wrap[b-50jeypgf5u] {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-icon-wrap svg[b-50jeypgf5u] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Uniform neutral icon tiles — consistent across all facility reports. */
.kpi-icon-green[b-50jeypgf5u],
.kpi-icon-gold[b-50jeypgf5u],
.kpi-icon-red[b-50jeypgf5u],
.kpi-icon-neutral[b-50jeypgf5u] { background: var(--bg-icon); color: var(--navy-3); }
.kpi-body[b-50jeypgf5u] { flex: 1; min-width: 0; }
.kpi-label[b-50jeypgf5u] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
.kpi-value[b-50jeypgf5u] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.kpi-change[b-50jeypgf5u] { font-size: 12px; color: var(--text-subtle); margin-top: 5px; }
.kpi-change-negative[b-50jeypgf5u] { color: var(--red); }

/* ── Main content ── */
.rpt-content[b-50jeypgf5u] {
    padding: 20px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Charts row ── */
.rpt-charts-row[b-50jeypgf5u] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: stretch;
}
.rpt-chart-card[b-50jeypgf5u] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.rpt-chart-wide[b-50jeypgf5u] { display: flex; flex-direction: column; }
.chart-header[b-50jeypgf5u] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.chart-header-left[b-50jeypgf5u] { flex: 1; }
.chart-title[b-50jeypgf5u] { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.chart-subtitle[b-50jeypgf5u] { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.chart-legend[b-50jeypgf5u] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend-item[b-50jeypgf5u] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-50jeypgf5u] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-label[b-50jeypgf5u] { font-size: 12px; color: var(--text-subtle); font-weight: 500; }

/* ── 3D Bar chart ── */
.rpt-bar-chart[b-50jeypgf5u] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex: 1;
    min-height: 250px;
    padding: 14px 18px 10px;
    position: relative;
    background:
        repeating-linear-gradient(to top, transparent 0, transparent 39px, color-mix(in srgb, var(--border) 55%, transparent) 40px),
        linear-gradient(to top, rgba(13,33,55,.02) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.rpt-bar-group[b-50jeypgf5u] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.rpt-bar-wrap[b-50jeypgf5u] { width: 100%; height: calc(100% - 40px); position: relative; flex-shrink: 0; }
.rpt-bar-3d[b-50jeypgf5u] { width: min(100%, 140px); height: 100%; position: relative; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--navy) 8%, transparent)); margin-inline: auto; }
.rpt-bar-group.current .rpt-bar-3d[b-50jeypgf5u] { filter: drop-shadow(0 4px 8px rgba(200,168,75,.2)); }
.bar3d-face[b-50jeypgf5u] { position: absolute; }
.bar3d-front[b-50jeypgf5u] {
    bottom: 0; left: 10%; width: 80%;
    background: linear-gradient(180deg, #3fa07a 0%, #2d7a5f 100%);
    border-radius: 9px 9px 4px 4px;
    transition: height .4s cubic-bezier(.4,0,.2,1), transform .15s ease, filter .15s ease;
    min-height: 6px;
}
.rpt-bar-group.current .bar3d-front[b-50jeypgf5u] { background: linear-gradient(180deg, #d4b45e 0%, #c8a84b 100%); }
.rpt-bar-group.is-zero .bar3d-front[b-50jeypgf5u] { min-height: 0; background: none; filter: none; }
.rpt-bar-group.is-zero .rpt-bar-3d[b-50jeypgf5u] { filter: none; }
.bar3d-top[b-50jeypgf5u], .bar3d-side[b-50jeypgf5u] { display: none; }
.rpt-bar-group:hover .bar3d-front[b-50jeypgf5u] { transform: translateY(-2px); filter: brightness(1.04); }
.rpt-bar-group:hover .rpt-bar-label[b-50jeypgf5u] { color: var(--navy); }
.rpt-bar-label[b-50jeypgf5u] { font-size: 11px; color: var(--text-muted); white-space: nowrap; text-align: center; margin-top: 6px; font-weight: 500; }
.rpt-bar-val[b-50jeypgf5u] { font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; text-align: center; }
.rpt-bar-group.is-zero .rpt-bar-val[b-50jeypgf5u] { color: var(--text-muted); }

/* ── Donut / Payor Status ── */
.rpt-status-card[b-50jeypgf5u] { display: flex; flex-direction: column; }
.rpt-donut-wrap[b-50jeypgf5u] { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; padding-top: 8px; }
.rpt-donut-container[b-50jeypgf5u] { position: relative; }
.rpt-donut-svg[b-50jeypgf5u] { width: 160px; height: 160px; display: block; }
.donut-center-val[b-50jeypgf5u] { text-anchor: middle; font-size: 22px; font-weight: 800; fill: var(--navy); font-family: inherit; }
.donut-center-lbl[b-50jeypgf5u] { text-anchor: middle; font-size: 11px; font-weight: 700; fill: var(--text-muted); letter-spacing: .08em; font-family: inherit; }
.donut-segment[b-50jeypgf5u] { transition: stroke-dasharray .4s; }
.rpt-donut-legend[b-50jeypgf5u] { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.donut-leg-item[b-50jeypgf5u] { display: flex; align-items: center; justify-content: space-between; }
.donut-leg-left[b-50jeypgf5u] { display: flex; align-items: center; gap: 8px; }
.donut-leg-dot[b-50jeypgf5u] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-leg-label[b-50jeypgf5u] { font-size: 12.5px; color: var(--text); }
.donut-leg-value[b-50jeypgf5u] { font-size: 12.5px; font-weight: 700; color: var(--navy); }

/* ── Section heading ── */
.rpt-section-heading[b-50jeypgf5u] { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; }
.rpt-section-rule[b-50jeypgf5u] { flex: 1; height: 1px; background: var(--border); }
.rpt-section-heading h2[b-50jeypgf5u] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); white-space: nowrap; margin: 0; }

/* Audit row cards live in AuditBreakdownRow.razor(.css) — shared by every facility report. */

/* ── Stall Area Performance (Corner / Extension) ── */
.ncc-area-grid[b-50jeypgf5u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.ncc-area-card[b-50jeypgf5u] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ncc-area-head[b-50jeypgf5u] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ncc-area-name[b-50jeypgf5u] { font-size: 14px; font-weight: 700; color: var(--navy); }
.ncc-area-rate[b-50jeypgf5u] { font-size: 11.5px; font-weight: 700; }
.ncc-area-revenue[b-50jeypgf5u] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.ncc-area-meter[b-50jeypgf5u] { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.ncc-area-meter-fill[b-50jeypgf5u] { height: 100%; background: var(--green); border-radius: 5px; transition: width .4s ease; }
.ncc-area-stats[b-50jeypgf5u] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ncc-area-stats div[b-50jeypgf5u] { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
.ncc-area-stats strong[b-50jeypgf5u] { display: block; font-size: 18px; font-weight: 800; color: var(--navy); line-height: 1; }
.ncc-area-stats span[b-50jeypgf5u] { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

/* ── Status badges ── */
.status-badge[b-50jeypgf5u] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.status-badge.paid[b-50jeypgf5u], .status-badge.tier-paid[b-50jeypgf5u] { background: var(--green-bg); color: var(--green); }
.status-badge.partial[b-50jeypgf5u], .status-badge.tier-partial[b-50jeypgf5u] { background: rgba(184,115,51,.1); color: #b87333; }
.status-badge.unpaid[b-50jeypgf5u], .status-badge.tier-unpaid[b-50jeypgf5u] { background: var(--red-bg); color: var(--red); }

/* ── Delinquency panel ── */
.rpt-delinquency-panel[b-50jeypgf5u] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.delinq-exposure[b-50jeypgf5u] {
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
/* No fill. The amount above is already set in the office's red, which carries the meaning; a tinted panel behind it
   reads as highlighter on a government screen and prints as a grey block. The border stays as the panel's own. */
.delinq-has-balance[b-50jeypgf5u] { border-color: rgba(139,58,58,.18); }
.delinq-exp-val[b-50jeypgf5u] { font-size: 24px; font-weight: 800; color: var(--red); line-height: 1; }
.delinq-exp-lbl[b-50jeypgf5u] { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.delinq-table-head[b-50jeypgf5u], .delinq-row[b-50jeypgf5u] {
    display: grid;
    grid-template-columns: 80px 1fr 140px 90px 100px 130px;
    padding: 10px 20px;
    align-items: center;
    gap: 8px;
}
.delinq-table-head[b-50jeypgf5u] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.delinq-row[b-50jeypgf5u] { border-bottom: 1px solid var(--border); font-size: 13px; color: var(--navy); }
.delinq-row:last-child[b-50jeypgf5u] { border-bottom: none; }
.delinq-empty[b-50jeypgf5u] { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.missed-badge[b-50jeypgf5u] { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.missed-badge.critical[b-50jeypgf5u] { background: var(--red-bg); color: var(--red); }
.missed-badge.warn[b-50jeypgf5u] { background: rgba(200,168,75,.12); color: #8a6800; }
.balance-due[b-50jeypgf5u] { color: var(--red); font-weight: 700; }
.stall-no[b-50jeypgf5u] { font-weight: 700; }
.text-muted[b-50jeypgf5u] { color: var(--text-muted); }

/* ── All Stalls compliance table ── */
.rpt-compliance-table-wrap[b-50jeypgf5u] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rpt-compliance-table[b-50jeypgf5u] { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-compliance-table th[b-50jeypgf5u] {
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
}
.rpt-compliance-table td[b-50jeypgf5u] { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--navy); }
.rpt-compliance-table tr:last-child td[b-50jeypgf5u] { border-bottom: none; }
.rpt-compliance-table .row-partial[b-50jeypgf5u] { background: rgba(200,168,75,.04); }
.rpt-compliance-table .row-unpaid[b-50jeypgf5u]  { background: rgba(139,58,58,.04); }

/* ── Empty state ── */
.rpt-empty[b-50jeypgf5u] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; }
.rpt-empty-icon[b-50jeypgf5u] { width: 40px; height: 40px; color: var(--text-muted); }
.rpt-empty-icon svg[b-50jeypgf5u] { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rpt-empty-title[b-50jeypgf5u] { font-size: 14px; font-weight: 600; color: var(--navy); }
.rpt-empty-text[b-50jeypgf5u] { font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ── Print document shell (shared with NPM/TCC print views) ── */
.print-document-content[b-50jeypgf5u] { display: block; background: #eef3f7; overflow-x: hidden; }
.print-report-sheet[b-50jeypgf5u] {
    width: 100%;
    min-height: 900px;
    padding: 30px 28px 40px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d5dde5;
    box-shadow: 0 18px 38px rgba(9, 31, 52, .08);
    color: #111827;
}
.print-report-actions[b-50jeypgf5u] { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.print-report-btn[b-50jeypgf5u] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 7px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.print-report-btn svg[b-50jeypgf5u] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.print-report-header[b-50jeypgf5u] { text-align: center; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.print-report-logo[b-50jeypgf5u] { display: block; width: 58px; height: 58px; object-fit: contain; margin: 0 auto 10px; }
.print-republic[b-50jeypgf5u] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
.print-report-header h2[b-50jeypgf5u] { margin: 7px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.15; color: #111827; }
.print-report-header p[b-50jeypgf5u] { margin: 0; font-size: 12px; color: #4b5563; }
.print-report-title[b-50jeypgf5u] { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; color: #111827; }
.print-report-meta[b-50jeypgf5u] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 16px;
}
.print-report-meta div[b-50jeypgf5u] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-meta div:last-child[b-50jeypgf5u] { border-right: none; }
.print-report-meta span[b-50jeypgf5u] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-meta strong[b-50jeypgf5u] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-summary[b-50jeypgf5u] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 20px; background: #f8fafc;
}
.print-report-summary div[b-50jeypgf5u] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-summary div:last-child[b-50jeypgf5u] { border-right: none; }
.print-report-summary span[b-50jeypgf5u] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-summary strong[b-50jeypgf5u] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-signatures[b-50jeypgf5u] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px; margin-top: 58px;
}
.print-report-signatures div[b-50jeypgf5u] { border-top: 1px solid #111827; padding-top: 8px; text-align: center; }
.print-report-signatures span[b-50jeypgf5u] { display: block; font-size: 11px; color: #6b7280; }
.print-report-signatures strong[b-50jeypgf5u] { display: block; margin-top: 3px; font-size: 11px; color: #111827; }
.print-empty[b-50jeypgf5u] { margin: 22px 0; padding: 16px; text-align: center; font-size: 12px; color: #6b7280; border: 1px dashed #cfd6de; background: #f8fafc; }

/* ── Status Report table ── */
.print-table-wrap[b-50jeypgf5u] { margin-top: 12px; width: 100%; overflow-x: hidden; }
.print-status-table[b-50jeypgf5u] { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; color: #111827; }
.print-status-table th[b-50jeypgf5u], .print-status-table td[b-50jeypgf5u] { border: 1px solid #cfd6de; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-status-table th[b-50jeypgf5u] { background: #f3f6f9; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #374151; }
.status-sheet .print-status-table[b-50jeypgf5u] { font-size: 13px !important; }
.status-sheet .print-status-table th[b-50jeypgf5u] { font-size: 11px !important; }
.status-sheet .print-status-table td[b-50jeypgf5u] { padding: 9px 10px; }
.print-status-table td.status-paid[b-50jeypgf5u]    { color: #2d7a5f; font-weight: 600; }
.print-status-table td.status-partial[b-50jeypgf5u] { color: #b87333; font-weight: 600; }
.print-status-table td.status-unpaid[b-50jeypgf5u]  { color: #8b3a3a; font-weight: 600; }
.text-muted-cell[b-50jeypgf5u] { color: #6b7280; }

/* ── History tables ── */
.print-section-block[b-50jeypgf5u] { margin-top: 24px; }
.print-section-heading[b-50jeypgf5u] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); padding: 6px 0 4px; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.history-sheet .history-table[b-50jeypgf5u] { font-size: 15px !important; }
.history-sheet .history-table th[b-50jeypgf5u] { font-size: 13px !important; }
.history-sheet .history-table td[b-50jeypgf5u] { padding: 13px 14px; }
.history-sheet .history-table th:first-child[b-50jeypgf5u],
.history-sheet .history-table td:first-child[b-50jeypgf5u] { min-width: 110px; white-space: nowrap; }
.history-empty[b-50jeypgf5u] { text-align: center; color: #6b7280; padding: 18px 0; }
.history-total-row td[b-50jeypgf5u] { background: #f3f6f9; border-top: 2px solid #cfd6de; font-size: 13px; }
.rate-good[b-50jeypgf5u]    { color: #2d7a5f; font-weight: 600; }
.rate-partial[b-50jeypgf5u] { color: #b87333; font-weight: 600; }
.rate-low[b-50jeypgf5u]     { color: #8b3a3a; font-weight: 600; }
.balance-due[b-50jeypgf5u]  { color: #8b3a3a; }

/* ── History meta ── */
.history-sheet .print-report-meta span[b-50jeypgf5u]  { font-size: 12px; }
.history-sheet .print-report-meta strong[b-50jeypgf5u] { font-size: 16px; }
.history-sheet .print-section-heading[b-50jeypgf5u]   { font-size: 15px; }
.history-sheet .history-total-row td[b-50jeypgf5u]    { font-size: 15px !important; padding: 13px 14px; }
.history-sheet .print-report-signatures span[b-50jeypgf5u]  { font-size: 13px; }
.history-sheet .print-report-signatures strong[b-50jeypgf5u] { font-size: 15px; }
.status-sheet .print-report-meta span[b-50jeypgf5u]   { font-size: 11px; }
.status-sheet .print-report-meta strong[b-50jeypgf5u] { font-size: 14px; }
.status-sheet .print-report-summary span[b-50jeypgf5u],
.status-sheet .print-report-summary strong[b-50jeypgf5u] { font-size: 14px; }
.status-sheet .print-section-heading[b-50jeypgf5u]   { font-size: 13px; }
.status-sheet .print-report-signatures span[b-50jeypgf5u]  { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-50jeypgf5u] { font-size: 14px; }

@media screen and (max-width: 900px) {
    .rpt-kpi-strip[b-50jeypgf5u] { grid-template-columns: 1fr 1fr; }
    .rpt-charts-row[b-50jeypgf5u] { grid-template-columns: 1fr; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body[b-50jeypgf5u] { background: white !important; }
    .rpt-topbar[b-50jeypgf5u], .rpt-period-bar[b-50jeypgf5u] { background: white !important; border: none !important; box-shadow: none !important; }
    .rpt-topbar-right[b-50jeypgf5u], .rpt-period-tabs[b-50jeypgf5u], .rpt-date-nav[b-50jeypgf5u], .rpt-back-btn[b-50jeypgf5u], .rpt-header-progress[b-50jeypgf5u], .print-report-actions[b-50jeypgf5u] { display: none !important; }
    .rpt-content[b-50jeypgf5u] { padding: 0 !important; }
    .print-document-content[b-50jeypgf5u] { display: block !important; background: white !important; }
    /* 12mm, NOT 0 - the page margin is deliberately nought so the browser has no margin box to print its automatic
       date, URL and page numbers into, which means the SHEET supplies the whitespace. print.css says exactly that and
       sets `.print-report-sheet { padding: 12mm }`, but CSS isolation compiles this rule to
       `.print-report-sheet[b-xxxxx]`, and a class-plus-attribute selector outranks a bare class even when both are
       !important. So this rule quietly won and printed the sheet hard against the paper edge. */
    .print-report-sheet[b-50jeypgf5u] { width: 100% !important; min-height: auto !important; padding: 12mm !important; border: none !important; box-shadow: none !important; }
    /* ── How these sheets break across pages ──────────────────────────────────
       The same three rules the List of Stallholders prints by, so every document this platform issues paginates alike: a table's
       header row REPEATS on each page it continues onto rather than appearing alone at the top of one, a row is never split, and
       a section block may span pages because some areas hold forty rows. Plus the joins that actually broke: a section heading
       stays with what follows it, and the letterhead and meta strip are never split. */
    .print-status-table thead[b-50jeypgf5u] { display: table-header-group; }
    .print-status-table tfoot[b-50jeypgf5u] { display: table-footer-group; }

    .print-status-table tr[b-50jeypgf5u] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-section-heading[b-50jeypgf5u] {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-header[b-50jeypgf5u],
    .print-report-meta[b-50jeypgf5u] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A SECTION IS ONE UNIT: its name, its summary strip and its rows. This was uto, which put a heading and a total at the
       foot of a page with the rows they describe on the next. void is a request, not a constraint: a section taller than the
       page is still split, and the repeating header keeps that readable - so small sections stay whole and large ones still fit. */
    .print-section-block[b-50jeypgf5u] {
        break-inside: avoid;
        page-break-inside: avoid;
        /* The top space is PADDING here, not the margin this block carries on screen. A margin is dropped at a page break; a
           padding is part of the box and survives, so a section that begins a page opens clear of the paper edge instead of
           against it. The page margin is nought, because a page margin is where Chromium prints its own date, title and URL and
           no CSS turns that off - so the document supplies its own whitespace. Sections are kept whole above, which is what makes
           a continued page always begin with one. */
        margin-top: 0 !important;
        padding-top: 10mm;
    }

    .print-section-summary[b-50jeypgf5u] {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Signatures are never split down the middle: "Prepared by" on one page and "Reviewed by" on the next is not a document
       anybody signs. */
    .print-report-signatures[b-50jeypgf5u] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-table-wrap[b-50jeypgf5u] { overflow: visible !important; }
    /* ── Why page two used to start hard against the paper edge ───────────────
       The page box is margin-free and the 12mm of whitespace came from padding on the SHEET. A block's padding applies once, at
       its own top and bottom, not at every page break - so pages after the first began at y=0 with a table header touching the
       edge. Only a page MARGIN repeats per page, so these two documents ask for one of their own; a named page applies solely to
       what asks for it, leaving the roster, the statements and the receipts on the margin-free box they were tuned for.

       Stated rather than buried: a top margin gives the browser somewhere to print its automatic date and page numbers. Untick
       "Headers and footers" in the print dialog if it does. The alternative was figures against the paper edge on every page. */
    /* The page margin these sheets need is injected at print time by stalltrackPrint.reportDocument, NOT set here. An @page in a
       scoped stylesheet does not reach the print engine, and a NAMED page is not honoured at all - print.css assigns a landscape
       named page to .print-report-sheet and this document still printed portrait, which is the proof. Left and right padding is
       injected with it, so nothing about the paper margin is stated in CSS any more. */
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-50jeypgf5u] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-50jeypgf5u]::before,
    .rpt-topbar[b-50jeypgf5u]::after {
        display: none;
    }

.rpt-back-btn[b-50jeypgf5u] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-50jeypgf5u] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-50jeypgf5u] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-50jeypgf5u] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-50jeypgf5u] {
    color: var(--text-tertiary);
}

.rpt-title[b-50jeypgf5u] {
    color: var(--navy);
}

.rpt-subtitle[b-50jeypgf5u] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-50jeypgf5u] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-50jeypgf5u] {
    background: var(--accent);
}

.rpt-action-btn[b-50jeypgf5u] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-50jeypgf5u] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-50jeypgf5u] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-50jeypgf5u],
.rpt-document-tab.active[b-50jeypgf5u],
.utility-section-tab.active[b-50jeypgf5u] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-50jeypgf5u],
.rpt-document-tab:hover:not(.active)[b-50jeypgf5u],
.utility-section-tab:hover:not(.active)[b-50jeypgf5u] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-50jeypgf5u],
.rpt-action-btn:focus-visible[b-50jeypgf5u],
.rpt-period-tab:focus-visible[b-50jeypgf5u],
.rpt-document-tab:focus-visible[b-50jeypgf5u] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/Reports/NpmOperatingCalendar.razor.rz.scp.css */
.oc[b-9c6d77cc5u] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.oc-head[b-9c6d77cc5u] { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.oc-title[b-9c6d77cc5u] { margin: 0; font-size: 18px; font-weight: 700; color: var(--navy); }
.oc-sub[b-9c6d77cc5u] { margin: 4px 0 0; font-size: 13px; color: var(--text-subtle); max-width: 60ch; }
.oc-nav[b-9c6d77cc5u] { display: inline-flex; align-items: center; gap: 8px; }
.oc-month[b-9c6d77cc5u] { min-width: 130px; text-align: center; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.oc-summary[b-9c6d77cc5u] { margin: 0; font-size: 13px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

.oc-btn[b-9c6d77cc5u] { border: 1px solid var(--border); background: var(--bg-card); color: var(--navy); border-radius: 8px; padding: 8px 14px; min-height: 40px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.oc-btn:hover:not(:disabled)[b-9c6d77cc5u] { border-color: var(--accent); color: var(--accent); }
.oc-btn:disabled[b-9c6d77cc5u] { opacity: .55; cursor: not-allowed; }
.oc-btn-primary[b-9c6d77cc5u] { background: var(--accent); border-color: var(--accent); color: #fff; }
.oc-btn-primary:hover:not(:disabled)[b-9c6d77cc5u] { color: #fff; filter: brightness(.94); }
.oc-btn:focus-visible[b-9c6d77cc5u], .oc-cell:focus-visible[b-9c6d77cc5u], .oc-input:focus-visible[b-9c6d77cc5u], .oc-check input:focus-visible[b-9c6d77cc5u] { outline: 2px solid var(--accent); outline-offset: 2px; }

.oc-grid[b-9c6d77cc5u] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.oc-dow[b-9c6d77cc5u] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); text-align: center; padding-bottom: 2px; }
.oc-cell[b-9c6d77cc5u] { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-height: 64px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); font: inherit; cursor: pointer; text-align: left; }
.oc-cell-empty[b-9c6d77cc5u] { border: none; background: transparent; cursor: default; }
.oc-num[b-9c6d77cc5u] { font-size: 14px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.oc-tag[b-9c6d77cc5u] { font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--text-subtle); }
.oc-sel[b-9c6d77cc5u] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Closed days are tinted AND labelled in text, so the state never depends on colour alone. */
.oc-closedByWeeklySchedule[b-9c6d77cc5u], .oc-closedByOverride[b-9c6d77cc5u] { background: var(--bg); }
.oc-closedByWeeklySchedule .oc-tag[b-9c6d77cc5u], .oc-closedByOverride .oc-tag[b-9c6d77cc5u] { color: var(--text-subtle); }
.oc-closedByOverride[b-9c6d77cc5u] { border-style: dashed; border-color: var(--text-muted); }
.oc-openedByOverride[b-9c6d77cc5u] { background: var(--green-bg); border-color: var(--green); }
.oc-openedByOverride .oc-tag[b-9c6d77cc5u] { color: var(--green); }

.oc-legend[b-9c6d77cc5u] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--text-subtle); }
.oc-legend li[b-9c6d77cc5u] { display: inline-flex; align-items: center; gap: 6px; }
.oc-sw[b-9c6d77cc5u] { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
.oc-sw-closedByWeeklySchedule[b-9c6d77cc5u] { background: var(--bg); border-color: var(--text-muted); }
.oc-sw-closedByOverride[b-9c6d77cc5u] { background: var(--bg); border: 1px dashed var(--text-muted); }
.oc-sw-openedByOverride[b-9c6d77cc5u] { background: var(--green-bg); border-color: var(--green); }

.oc-day[b-9c6d77cc5u], .oc-sched[b-9c6d77cc5u] { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.oc-day-title[b-9c6d77cc5u] { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy); }
.oc-sched-head[b-9c6d77cc5u] { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.oc-impact[b-9c6d77cc5u] { margin: 0; font-size: 13px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.oc-note[b-9c6d77cc5u] { margin: 0; font-size: 13px; color: var(--text-subtle); }
.oc-muted[b-9c6d77cc5u] { color: var(--text-muted); }
.oc-actions[b-9c6d77cc5u] { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-error[b-9c6d77cc5u] { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--red-bg); color: var(--red); font-size: 13px; }

.oc-field[b-9c6d77cc5u] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-subtle); max-width: 420px; }
.oc-input[b-9c6d77cc5u] { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; min-height: 40px; font: inherit; font-size: 14px; color: var(--navy); background: var(--bg-card); }
.oc-fieldset[b-9c6d77cc5u] { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.oc-fieldset legend[b-9c6d77cc5u] { font-size: 12.5px; font-weight: 600; color: var(--text-subtle); padding: 0 6px; }
.oc-check[b-9c6d77cc5u] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy); min-height: 32px; }
.oc-history[b-9c6d77cc5u] { margin: 0; padding-left: 18px; font-size: 13px; color: var(--navy); display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 640px) {
    .oc[b-9c6d77cc5u] { padding: 14px; }
    .oc-grid[b-9c6d77cc5u] { gap: 4px; }
    .oc-cell[b-9c6d77cc5u] { min-height: 56px; padding: 6px; }
    .oc-tag[b-9c6d77cc5u] { font-size: 10px; }
}
/* /Components/Pages/Reports/NpmReports.razor.rz.scp.css */
/* ============================================================
   NpmReports.razor.css — NPM dedicated reports page
   Scoped to NpmReports.razor. Tokens from app.css only.
   ============================================================ */

/* ── Page topbar ─────────────────────────────────────────── */
.rpt-topbar[b-ut39zxjw3e] {
    position: relative;
    background: var(--navy);
    padding: 22px 28px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
    flex-wrap: wrap;
}

.rpt-topbar[b-ut39zxjw3e]::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
    pointer-events: none;
}

.rpt-topbar-left[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 260px;
}

.rpt-back-btn[b-ut39zxjw3e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.rpt-back-btn:hover[b-ut39zxjw3e] { background: rgba(255,255,255,.12); color: #fff; }
.rpt-back-btn:focus-visible[b-ut39zxjw3e] {
    outline: 2px solid color-mix(in srgb, var(--gold) 85%, white);
    outline-offset: 2px;
}
.rpt-back-btn svg[b-ut39zxjw3e] {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.rpt-topbar-icon[b-ut39zxjw3e] {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rpt-topbar-icon svg[b-ut39zxjw3e] {
    width: 22px; height: 22px;
    stroke: var(--gold); fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.rpt-eyebrow[b-ut39zxjw3e] {
    font-size: 11px; font-weight: 700;
    letter-spacing: .12em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.rpt-title[b-ut39zxjw3e] {
    font-size: 20px; font-weight: 700;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.2;
    margin: 0;
}
.rpt-subtitle[b-ut39zxjw3e] {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
}

.rpt-topbar-right[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rpt-action-btn[b-ut39zxjw3e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.85);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.rpt-action-btn:hover[b-ut39zxjw3e] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-ut39zxjw3e] {
    outline: 2px solid color-mix(in srgb, var(--gold) 85%, white);
    outline-offset: 2px;
}
.rpt-action-btn svg[b-ut39zxjw3e] {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.rpt-header-progress[b-ut39zxjw3e] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
}
.rpt-header-progress-fill[b-ut39zxjw3e] {
    height: 100%;
    background: var(--gold);
    transition: width .4s ease;
}

/* ── Period selector bar ─────────────────────────────────── */
.rpt-period-bar[b-ut39zxjw3e] {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 10px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}

.rpt-period-tabs[b-ut39zxjw3e] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.rpt-period-tab[b-ut39zxjw3e] {
    min-height: 32px;
    min-width: 92px;
    padding: 6px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.rpt-period-tab:hover[b-ut39zxjw3e] {
    background: rgba(255,255,255,.72);
    border-color: color-mix(in srgb, var(--border) 72%, transparent);
    color: var(--navy);
}
.rpt-period-tab:focus-visible[b-ut39zxjw3e] {
    outline: 2px solid color-mix(in srgb, var(--gold) 70%, white);
    outline-offset: 2px;
}
.rpt-period-tab.active[b-ut39zxjw3e] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14);
}
/* No tint of its own. Utility Billing sits beside Status Report and History and does the same kind of thing - open a
   view - so it should look the same. It used to carry a gold border, a gold-tinted gradient and its own shadow, which
   made it read as a different class of control, or as though it were already selected. The shared .rpt-period-tab
   styling and the .active state are what distinguish these now, the way they do for the other two. The sizing and icon
   rules it shares with .rpt-document-tab are below and stay. */
.rpt-document-tab[b-ut39zxjw3e],
.rpt-utility-tab[b-ut39zxjw3e] {
    gap: 7px;
    padding: 0 16px;
    min-width: 0;
}
.rpt-document-tab svg[b-ut39zxjw3e],
.rpt-utility-tab svg[b-ut39zxjw3e] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rpt-document-tab[b-ut39zxjw3e] {
    min-width: 140px;
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--bg-card) 90%, var(--bg)) 100%);
    color: var(--navy);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 4px rgba(9,31,52,.06);
}
.rpt-document-tab:hover[b-ut39zxjw3e] {
    border-color: color-mix(in srgb, var(--navy) 20%, var(--border));
    background: #fff;
}
.rpt-document-tab.active[b-ut39zxjw3e] {
    border-color: color-mix(in srgb, var(--navy) 70%, var(--border));
    background: var(--accent);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px rgba(9,31,52,.14);
}
/* Utility Billing takes .rpt-document-tab's hover and active states, like Status Report and History, so all three
   behave identically. It keeps its own class only for the responsive rule further down. Its gold hover, gold active
   border and gold icon are gone: the tint made it read as a different class of control, and on the active tab it put a
   gold rim and a gold icon on a navy button that the other two render plainly. */

.rpt-date-nav[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}
.rpt-nav-btn[b-ut39zxjw3e] {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.rpt-nav-btn:hover[b-ut39zxjw3e] { background: var(--bg-icon); color: var(--navy); }
.rpt-nav-btn:focus-visible[b-ut39zxjw3e] {
    outline: 2px solid color-mix(in srgb, var(--gold) 70%, white);
    outline-offset: 2px;
}
.rpt-nav-btn svg[b-ut39zxjw3e] {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rpt-current-period[b-ut39zxjw3e] {
    font-size: 14px; font-weight: 600;
    color: var(--navy);
    min-width: 120px;
    text-align: center;
}

/* ── Content wrapper ─────────────────────────────────────── */
.rpt-content[b-ut39zxjw3e] {
    padding: 16px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── KPI strip ───────────────────────────────────────────── */
.rpt-kpi-strip[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.rpt-kpi-card[b-ut39zxjw3e] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.kpi-icon[b-ut39zxjw3e] {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--bg-icon);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-icon svg[b-ut39zxjw3e] {
    width: 18px; height: 18px;
    stroke: var(--navy-3); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Neutral, uniform icon tiles — no per-metric colour. Keeps the KPI strip clean and government-plain;
   emphasis stays on the numbers, not decorative colour. */

.kpi-label[b-ut39zxjw3e] {
    font-size: 11px; font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.kpi-value[b-ut39zxjw3e] {
    font-size: 22px; font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
    margin-bottom: 4px;
}
.kpi-change[b-ut39zxjw3e] {
    font-size: 12px;
    color: var(--text-subtle);
}
.kpi-change.positive[b-ut39zxjw3e] { color: var(--green); }
.kpi-change.negative[b-ut39zxjw3e] { color: var(--red); }

/* ── Charts row ──────────────────────────────────────────── */
.rpt-charts-row[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: stretch;
}

.rpt-chart-card[b-ut39zxjw3e] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 26px;
    box-shadow:
        0 1px 0 rgba(13, 33, 55, 0.03),
        0 8px 18px rgba(13, 33, 55, 0.06);
    transition: box-shadow 0.2s ease;
}

.rpt-chart-wide[b-ut39zxjw3e] {
    display: flex;
    flex-direction: column;
}

.rpt-chart-card:hover[b-ut39zxjw3e] {
    box-shadow: 0 4px 16px rgba(13, 33, 55, 0.08);
}

.chart-header[b-ut39zxjw3e] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 16px;
}

.chart-header-left[b-ut39zxjw3e] {
    flex: 1;
}

.chart-title[b-ut39zxjw3e] {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.chart-subtitle[b-ut39zxjw3e] {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.chart-legend[b-ut39zxjw3e] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.legend-item[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-dot[b-ut39zxjw3e] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legend-label[b-ut39zxjw3e] {
    font-size: 12px;
    color: var(--text-subtle);
    font-weight: 500;
}

/* Bar chart — 3D perspective */
.rpt-chart-area[b-ut39zxjw3e] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1;
    overflow: visible;
}

/* Y-axis labels — top (max) → bottom (0), aligned to the bar plot region */
.rpt-yaxis[b-ut39zxjw3e] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 0 50px;
    min-width: 30px;
    text-align: right;
}
.rpt-ytick[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-subtle);
    line-height: 1;
}

.rpt-bar-chart[b-ut39zxjw3e] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex: 1;
    min-height: 250px;
    padding: 14px 18px 10px;
    position: relative;
    overflow: visible;
    background: linear-gradient(to top, rgba(13, 33, 55, 0.02) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

/* Gridlines + L-shaped axis, confined to the exact region the bars rise in (top:14px, bottom:50px) */
.rpt-bar-chart[b-ut39zxjw3e]::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 18px;
    right: 18px;
    bottom: 50px;
    border-left: 1.5px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-bottom: 1.5px solid color-mix(in srgb, var(--border) 85%, transparent);
    background: repeating-linear-gradient(
        to top,
        color-mix(in srgb, var(--border) 50%, transparent) 0,
        color-mix(in srgb, var(--border) 50%, transparent) 1px,
        transparent 1px,
        transparent 20%
    );
    pointer-events: none;
}

.rpt-bar-group[b-ut39zxjw3e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
}

/* Fixed-height area that holds the 3D bar, anchored to bottom */
.rpt-bar-wrap[b-ut39zxjw3e] {
    width: 100%;
    height: calc(100% - 40px);
    position: relative;
    flex-shrink: 0;
}

/* ── 3D stacked bar: daily-rent (green) base + fish-kilo (blue) cap, with top & side faces ── */
.bar3d[b-ut39zxjw3e] {
    --depth: 13px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(calc(-50% - (var(--depth) / 2)));
    width: min(58%, 74px);
    display: flex;
    flex-direction: column;
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s ease, filter 0.18s ease;
    min-height: 4px;
    filter: drop-shadow(6px 10px 12px color-mix(in srgb, var(--navy) 10%, transparent));
}
.seg3d[b-ut39zxjw3e] { position: relative; width: 100%; }

/* Front faces */
.seg-rent[b-ut39zxjw3e] { background: linear-gradient(180deg, #3a9970 0%, #2d7a5f 100%); }
.seg-fish[b-ut39zxjw3e] { background: linear-gradient(180deg, #6a99bb 0%, #4a7fa5 100%); }

/* Right side face (leans up-right by --depth) */
.face-side[b-ut39zxjw3e] {
    position: absolute;
    top: 0;
    left: 100%;
    width: var(--depth);
    height: 100%;
    transform-origin: left top;
    transform: skewY(-45deg);
}
.seg-rent .face-side[b-ut39zxjw3e] { background: #1f5d47; }
.seg-fish .face-side[b-ut39zxjw3e] { background: #356fb8; }

/* Top face (leans up-right by --depth) — only on the topmost segment */
.face-top[b-ut39zxjw3e] {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: var(--depth);
    transform-origin: left bottom;
    transform: skewX(-45deg);
}
.seg-rent .face-top[b-ut39zxjw3e] { background: #50b88c; }
.seg-fish .face-top[b-ut39zxjw3e] { background: #84c4ff; }

/* Soft rounded front-top corners on the topmost segment */
.bar3d > .seg3d:first-child[b-ut39zxjw3e] { border-radius: 4px 4px 0 0; }

/* Current period — warm gold glow under the bar + gold label & value (no extra row element) */
.rpt-bar-group.current .bar3d[b-ut39zxjw3e] {
    filter: drop-shadow(4px 9px 13px rgba(200, 168, 75, 0.42));
}
.rpt-bar-group.current .rpt-bar-label[b-ut39zxjw3e] { color: var(--accent); font-weight: 700; }
.rpt-bar-group.current .rpt-bar-val[b-ut39zxjw3e] { color: var(--accent); }

/* Zero-value period — small muted baseline platform so the period still reads (not blank) */
.rpt-bar-group.is-zero .bar3d[b-ut39zxjw3e] { height: 11px !important; filter: none; }
.rpt-bar-group.is-zero .seg-rent[b-ut39zxjw3e] { background: color-mix(in srgb, var(--border) 88%, #fff); }
.rpt-bar-group.is-zero .seg-rent .face-side[b-ut39zxjw3e] { background: color-mix(in srgb, var(--border) 60%, #9aa7b3); }
.rpt-bar-group.is-zero .seg-rent .face-top[b-ut39zxjw3e] { background: color-mix(in srgb, var(--border) 95%, #fff); }
.rpt-bar-group.is-zero .rpt-bar-val[b-ut39zxjw3e] { color: var(--text-muted); }

.rpt-bar-group:hover .bar3d[b-ut39zxjw3e] {
    transform: translateX(calc(-50% - (var(--depth) / 2))) translateY(-3px);
    filter: drop-shadow(8px 14px 16px color-mix(in srgb, var(--navy) 14%, transparent)) brightness(1.03);
}
.rpt-bar-group:hover .rpt-bar-label[b-ut39zxjw3e] { color: var(--navy); }

/* Hover tooltip — meaningful breakdown (total + rent/fish split) */
.rpt-bar-tip[b-ut39zxjw3e] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 150px;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    opacity: 0;
    pointer-events: none;
    z-index: 6;
    box-shadow: 0 12px 26px rgba(13, 33, 55, 0.24);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.rpt-bar-group:hover .rpt-bar-tip[b-ut39zxjw3e] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.rpt-bar-tip .tip-title[b-ut39zxjw3e] {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}
.rpt-bar-tip .tip-total[b-ut39zxjw3e] { font-size: 16px; font-weight: 800; margin: 2px 0 6px; }
.rpt-bar-tip .tip-row[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #dce6f0;
    margin-top: 3px;
}
.rpt-bar-tip .tip-row strong[b-ut39zxjw3e] { margin-left: auto; color: #fff; }
.rpt-bar-tip .tip-dot[b-ut39zxjw3e] { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.rpt-bar-tip .tip-dot.rent[b-ut39zxjw3e] { background: #2d7a5f; }
.rpt-bar-tip .tip-dot.fish[b-ut39zxjw3e] { background: #4a7fa5; }
.rpt-bar-tip .tip-current[b-ut39zxjw3e] { margin-top: 6px; font-size: 11px; color: var(--accent); }
.rpt-bar-tip .tip-empty[b-ut39zxjw3e] { margin-top: 4px; font-size: 11px; color: var(--text-subtle); }

.rpt-bar-label[b-ut39zxjw3e] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-top: 6px;
    font-weight: 500;
}

.rpt-bar-val[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
}

/* Donut chart */
.rpt-donut-wrap[b-ut39zxjw3e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.rpt-donut-container[b-ut39zxjw3e] {
    position: relative;
}
.rpt-donut-container svg[b-ut39zxjw3e] {
    filter: drop-shadow(0 6px 11px rgba(13, 33, 55, 0.05));
}

.rpt-donut-svg[b-ut39zxjw3e] {
    width: 140px;
    height: 140px;
}

.donut-segment[b-ut39zxjw3e] {
    transition: opacity 0.2s ease;
}

.donut-segment:hover[b-ut39zxjw3e] {
    opacity: 0.85;
}

.donut-paid[b-ut39zxjw3e] {
    stroke: var(--green);
}

.donut-partial[b-ut39zxjw3e] {
    stroke: var(--gold);
}

.donut-unpaid[b-ut39zxjw3e] {
    stroke: var(--red);
}

.donut-center-pct[b-ut39zxjw3e],
.donut-center-value[b-ut39zxjw3e] {
    font-size: 23px;
    font-weight: 800;
    fill: var(--navy);
    text-anchor: middle;
    dominant-baseline: middle;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: -0.02em;
}

.donut-center-lbl[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 700;
    fill: var(--text-muted);
    text-anchor: middle;
    letter-spacing: 0.1em;
    font-family: 'DM Sans', sans-serif;
}

.rpt-donut-legend[b-ut39zxjw3e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.donut-leg-item[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--bg);
    transition: background 0.2s ease;
}

.donut-leg-item:hover[b-ut39zxjw3e] {
    background: rgba(13, 33, 55, 0.05);
}

.donut-leg-left[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.donut-leg-dot[b-ut39zxjw3e] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.donut-leg-dot.paid[b-ut39zxjw3e] {
    background: linear-gradient(180deg, #3fa07a 0%, #256b53 100%);
}

.donut-leg-dot.partial[b-ut39zxjw3e] {
    background: linear-gradient(180deg, #e8cc76 0%, #b8902f 100%);
}

.donut-leg-dot.unpaid[b-ut39zxjw3e] {
    background: linear-gradient(180deg, #a85454 0%, #6f2a2a 100%);
}

.donut-leg-label[b-ut39zxjw3e] {
    color: var(--text-subtle);
    font-weight: 500;
}

.donut-leg-value[b-ut39zxjw3e] {
    color: var(--navy);
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.donut-leg-value span[b-ut39zxjw3e] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}


/* ── Section heading ─────────────────────────────────────── */
.rpt-section-heading[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rpt-section-heading h2[b-ut39zxjw3e] {
    font-size: 15px; font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}
.rpt-section-rule[b-ut39zxjw3e] {
    display: block;
    width: 4px; height: 18px;
    background: var(--gold);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Breakdown grid ──────────────────────────────────────── */
.rpt-breakdown-grid[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.rpt-breakdown-card[b-ut39zxjw3e] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 340px;
}

.breakdown-title[b-ut39zxjw3e] {
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.breakdown-list[b-ut39zxjw3e] { display: flex; flex-direction: column; gap: 10px; }

.breakdown-item[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    align-items: center;
}
.breakdown-label[b-ut39zxjw3e] {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--navy);
}
.breakdown-value[b-ut39zxjw3e] {
    font-size: 13px; font-weight: 600;
    color: var(--navy);
    text-align: right;
}
.breakdown-bar[b-ut39zxjw3e] {
    grid-column: 1 / -1;
    height: 5px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
}
.bar-fill[b-ut39zxjw3e] {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}
.bar-fill.paid[b-ut39zxjw3e]    { background: var(--green); }
.bar-fill.partial[b-ut39zxjw3e] { background: var(--gold); }
.bar-fill.unpaid[b-ut39zxjw3e]  { background: var(--red); }

.sec-dot[b-ut39zxjw3e] {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status badges */
.status-badge[b-ut39zxjw3e] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px; font-weight: 600;
    letter-spacing: .04em;
}
.status-badge.paid[b-ut39zxjw3e]    {  color: var(--green); }
.status-badge.partial[b-ut39zxjw3e] { color: #8a6d1a; }
.status-badge.unpaid[b-ut39zxjw3e]  {  color: var(--red); }
.status-badge.absent[b-ut39zxjw3e]  {  color: #8a6d1a; }
.status-absent[b-ut39zxjw3e]        { color: #8a6d1a; }

/* Mini panel inside breakdown card */
.mini-panel[b-ut39zxjw3e] {
    background: var(--bg);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mini-panel-title[b-ut39zxjw3e] {
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.mini-metric-row[b-ut39zxjw3e], .fee-row[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-subtle);
}
.mini-metric-row span:first-child[b-ut39zxjw3e],
.fee-row span:first-child[b-ut39zxjw3e] { min-width: 60px; }
.mini-meter[b-ut39zxjw3e] {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(13,33,55,.07);
}
.mini-meter-fill[b-ut39zxjw3e] {
    height: 100%;
    border-radius: 2px;
    transition: width .4s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.mini-metric-row strong[b-ut39zxjw3e],
.fee-row strong[b-ut39zxjw3e] {
    font-size: 12px; font-weight: 700;
    color: var(--navy);
    min-width: 36px;
    text-align: right;
}

/* ── Daily collection calendar ───────────────────────────── */
.rpt-streak-card[b-ut39zxjw3e] { justify-content: space-between; }

/* Fixed-height zone — all 3 period views fill this same space */
.streak-calendar-area[b-ut39zxjw3e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 220px;
    justify-content: flex-start;
}

.streak-dow-row[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}
.streak-dow-row span[b-ut39zxjw3e] {
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    padding: 2px 0;
}

.streak-grid[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.streak-day[b-ut39zxjw3e] {
    aspect-ratio: 1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px; font-weight: 500;
    cursor: default;
}
.streak-day.empty[b-ut39zxjw3e]      { background: transparent; }
.streak-day.collected[b-ut39zxjw3e]  { background: linear-gradient(180deg, #e7f4ee 0%, #d4ebe0 100%); color: var(--green); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 4px rgba(45,122,95,.13); }
.streak-day.missed[b-ut39zxjw3e]     { background: linear-gradient(180deg, #fcebeb 0%, #f5d9d9 100%); color: var(--red); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 4px rgba(139,58,58,.13); }
.streak-day.absent[b-ut39zxjw3e]     { background: linear-gradient(180deg, rgba(200,168,75,.24) 0%, rgba(200,168,75,.14) 100%); color: #8a6d1a; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(200,168,75,.18); }
.streak-day.future[b-ut39zxjw3e]     { background: var(--bg); color: var(--text-muted); }

/* Weekly: same 7-col grid, taller cells */
.streak-grid-week[b-ut39zxjw3e] { grid-template-columns: repeat(7, 1fr); }
.streak-grid-week .streak-day[b-ut39zxjw3e] {
    aspect-ratio: unset;
    height: 44px;
    font-size: 13px; font-weight: 600;
}

/* Yearly: 4×3 fixed-size month cells */
.streak-yearly-grid[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.streak-month-cell[b-ut39zxjw3e] {
    border-radius: 8px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: default;
}
.streak-month-cell.collected[b-ut39zxjw3e] { background: var(--green-bg); }
.streak-month-cell.partial[b-ut39zxjw3e]   { background: rgba(200,168,75,.15); }
.streak-month-cell.missed[b-ut39zxjw3e]    { background: var(--red-bg); }
.streak-month-cell.future[b-ut39zxjw3e]    { background: var(--bg); }
.streak-month-name[b-ut39zxjw3e] { font-size: 11px; font-weight: 700; color: var(--navy); }
.streak-month-rate[b-ut39zxjw3e] { font-size: 12px; font-weight: 600; color: var(--text-subtle); }
.streak-month-cell.collected .streak-month-rate[b-ut39zxjw3e] { color: var(--green); }
.streak-month-cell.partial   .streak-month-rate[b-ut39zxjw3e] { color: #8a6d1a; }
.streak-month-cell.future    .streak-month-rate[b-ut39zxjw3e] { display: none; }

.streak-legend[b-ut39zxjw3e] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-subtle);
    margin-top: auto;
    padding-top: 8px;
}
.streak-legend span[b-ut39zxjw3e] { display: flex; align-items: center; gap: 5px; }
.leg-swatch[b-ut39zxjw3e] {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
}
.leg-swatch.collected[b-ut39zxjw3e] { background: var(--green); }
.leg-swatch.missed[b-ut39zxjw3e]    { background: var(--red); }
.leg-swatch.absent[b-ut39zxjw3e]    { background: #c8a84b; }
.cov-absent[b-ut39zxjw3e]           { color: #b5872a; }
.rpt-compliance-table .row-absent[b-ut39zxjw3e] { background: rgba(200,168,75,.07); }
.leg-swatch.future[b-ut39zxjw3e]    { background: var(--border); }

/* ── Fish kilo tracker ───────────────────────────────────── */
.rpt-fish-panel[b-ut39zxjw3e] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fish-caption[b-ut39zxjw3e] {
    font-size: 12px;
    color: var(--text-subtle);
    margin: -4px 0 2px;
}
.fish-kpi-row[b-ut39zxjw3e] {
    display: flex;
    gap: 28px;
    row-gap: 18px;
    flex-wrap: wrap;
}
.fish-kpi[b-ut39zxjw3e] { display: flex; flex-direction: column; gap: 2px; }
.fish-kpi-val[b-ut39zxjw3e] {
    font-size: 22px; font-weight: 700;
    color: var(--navy);
}
.fish-kpi-unit[b-ut39zxjw3e] { font-size: 14px; font-weight: 600; color: var(--text-subtle); }
.fish-kpi-lbl[b-ut39zxjw3e] {
    font-size: 11px; font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.fish-insight[b-ut39zxjw3e] {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 14px;
    background: color-mix(in srgb, #4a7fa5 8%, var(--bg-card));
    border: 1px solid color-mix(in srgb, #4a7fa5 24%, transparent);
    border-radius: 10px;
    font-size: 12.5px; font-weight: 500; color: var(--navy);
}
.fish-insight svg[b-ut39zxjw3e] { width: 16px; height: 16px; color: #4a7fa5; flex-shrink: 0; }

.fish-trend-chart[b-ut39zxjw3e] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 140px;
    padding-left: 8px;
}
.fish-bar-group[b-ut39zxjw3e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}
.fish-bar-wrap[b-ut39zxjw3e] {
    width: 100%;
    height: calc(100% - 32px);
    position: relative;
    flex-shrink: 0;
}
.bar3d-fish[b-ut39zxjw3e] { width: 100%; height: 100%; position: relative; }
.bar3d-face.fish.bar3d-front[b-ut39zxjw3e] { background: #4a7fa5; opacity: .9; }
.bar3d-face.fish.bar3d-top[b-ut39zxjw3e]   { background: color-mix(in srgb, #4a7fa5 70%, white); }
.bar3d-face.fish.bar3d-side[b-ut39zxjw3e]  { background: color-mix(in srgb, #4a7fa5 55%, black); }
.fish-bar-label[b-ut39zxjw3e] { font-size: 11px; color: var(--text-muted); }
.fish-bar-val[b-ut39zxjw3e]   { font-size: 11px; font-weight: 600; color: var(--text-subtle); }

/* ── Delinquency panel ───────────────────────────────────── */
.rpt-delinquency-panel[b-ut39zxjw3e] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* No fill, matching the other facilities' reports. The amount is already set in the office's red, which carries the
   meaning; a tinted panel behind it reads as highlighter on a government screen and prints as a grey block. */
.delinq-exposure[b-ut39zxjw3e] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.delinq-exp-val[b-ut39zxjw3e] {
    font-size: 22px; font-weight: 700;
    color: var(--red);
}
.delinq-exp-lbl[b-ut39zxjw3e] {
    font-size: 13px;
    color: var(--red);
    opacity: .8;
}

.delinq-table[b-ut39zxjw3e] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.delinq-table thead tr[b-ut39zxjw3e] {
    background: var(--bg);
}
.delinq-table th[b-ut39zxjw3e] {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.delinq-table td[b-ut39zxjw3e] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--navy);
}
.delinq-table tbody tr:last-child td[b-ut39zxjw3e] { border-bottom: none; }
.delinq-table tbody tr:hover[b-ut39zxjw3e] { background: var(--bg); }

.missed-badge[b-ut39zxjw3e] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px; font-weight: 700;
}
.missed-badge.warn[b-ut39zxjw3e]     { background: rgba(200,168,75,.15); color: #8a6d1a; }
.missed-badge.critical[b-ut39zxjw3e] { background: var(--red-bg); color: var(--red); }

.balance-due[b-ut39zxjw3e] { color: var(--red); font-weight: 600; }
.stall-no[b-ut39zxjw3e]    { font-weight: 700; color: var(--navy-3); }

/* ── Full compliance table ───────────────────────────────── */
.rpt-compliance-table-wrap[b-ut39zxjw3e] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: auto;
    position: relative;
}
.rpt-compliance-table-wrap[b-ut39zxjw3e]::before,
.rpt-compliance-table-wrap[b-ut39zxjw3e]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    pointer-events: none;
    z-index: 3;
}
.rpt-compliance-table-wrap[b-ut39zxjw3e]::before {
    left: 0;
    background: linear-gradient(90deg, rgba(13, 33, 55, 0.12), transparent);
    opacity: 0.28;
}
.rpt-compliance-table-wrap[b-ut39zxjw3e]::after {
    right: 0;
    background: linear-gradient(270deg, rgba(13, 33, 55, 0.12), transparent);
    opacity: 0.28;
}

.rpt-compliance-table[b-ut39zxjw3e] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 760px;
}
.rpt-compliance-table thead tr[b-ut39zxjw3e] { background: var(--bg); }
.rpt-compliance-table th[b-ut39zxjw3e] {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
}
.rpt-compliance-table td[b-ut39zxjw3e] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--navy);
}
.rpt-compliance-table tbody tr:last-child td[b-ut39zxjw3e] { border-bottom: none; }
.rpt-compliance-table tbody tr:not(.row-partial):not(.row-unpaid):nth-child(even) td[b-ut39zxjw3e] {
    background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.rpt-compliance-table tbody tr:hover[b-ut39zxjw3e] { background: var(--bg); }
.rpt-compliance-table .row-partial[b-ut39zxjw3e] { background: rgba(200,168,75,.04); }
.rpt-compliance-table .row-unpaid[b-ut39zxjw3e]  { background: rgba(139,58,58,.04); }
.text-muted[b-ut39zxjw3e] { color: var(--text-muted); }

/* Utility billing preview */
.utility-billing-board[b-ut39zxjw3e] {
    display: grid;
    gap: 16px;
}
.utility-hero[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--bg-card) 70%, var(--bg)) 100%);
    box-shadow: 0 8px 18px rgba(13, 33, 55, 0.05);
}
.utility-eyebrow[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.utility-hero h2[b-ut39zxjw3e] {
    margin: 0;
    color: var(--navy);
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    line-height: 1.1;
}
.utility-hero p[b-ut39zxjw3e] {
    margin: 7px 0 0;
    max-width: 680px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.utility-preview-pill[b-ut39zxjw3e] {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
    background: color-mix(in srgb, var(--gold) 10%, white);
    color: #8b6d17;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.utility-summary-grid[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.utility-summary-card[b-ut39zxjw3e] {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: 0 6px 14px rgba(13, 33, 55, 0.045);
}
.utility-summary-card span[b-ut39zxjw3e],
.utility-summary-card small[b-ut39zxjw3e] {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
}
.utility-summary-card strong[b-ut39zxjw3e] {
    display: block;
    margin: 7px 0 5px;
    color: var(--navy);
    font-size: 22px;
    line-height: 1;
}
.utility-panel[b-ut39zxjw3e] {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(13, 33, 55, 0.05);
}
.utility-panel-head[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.utility-panel-head h3[b-ut39zxjw3e] {
    margin: 0;
    color: var(--navy);
    font-size: 16px;
}
.utility-panel-head p[b-ut39zxjw3e] {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}
.utility-secondary-btn[b-ut39zxjw3e] {
    /* Matched to the SECTION TABS RAIL beside it, not to the tabs inside it: that rail is 1px border + 4px padding +
       a 32px tab, twice over, so its outer height is 42px. A button of any other height leaves the row looking
       accidental, which is what "All / Vegetable Area / ..." sitting taller than "Generate Billing Statement" was.
       Radius follows the rail's 9px for the same reason. */
    min-height: 42px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    /* It read as a label because it had none of these: no pointer, no hover, no press. A control that does
       something has to look like it will. Matches .utility-section-tab, which is the interactive control beside it. */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.utility-secondary-btn:hover:not(:disabled)[b-ut39zxjw3e] {
    background: #fff;
    border-color: color-mix(in srgb, var(--navy) 32%, var(--border));
    color: var(--navy);
    box-shadow: 0 1px 2px rgba(13, 33, 55, .08);
}

.utility-secondary-btn:active:not(:disabled)[b-ut39zxjw3e] {
    background: var(--accent);
    box-shadow: inset 0 1px 2px rgba(13, 33, 55, .12);
}

.utility-secondary-btn:focus-visible[b-ut39zxjw3e] {
    outline: 2px solid color-mix(in srgb, var(--navy) 55%, transparent);
    outline-offset: 2px;
}

/* Disabled says "not now", not "broken": the same shape, plainly inert. */
.utility-secondary-btn:disabled[b-ut39zxjw3e] {
    cursor: not-allowed;
    opacity: .55;
}
.utility-table-wrap[b-ut39zxjw3e] {
    overflow-x: auto;
}
.utility-table[b-ut39zxjw3e] {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}
.utility-table th[b-ut39zxjw3e] {
    padding: 12px 14px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}
.utility-table td[b-ut39zxjw3e] {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--navy);
    font-size: 12px;
    vertical-align: middle;
}
.utility-table th:first-child[b-ut39zxjw3e], .utility-table td:first-child[b-ut39zxjw3e] { padding-left: 24px; }
.utility-table th:last-child[b-ut39zxjw3e], .utility-table td:last-child[b-ut39zxjw3e] { padding-right: 24px; }
.utility-table tbody tr:last-child td[b-ut39zxjw3e] {
    border-bottom: none;
}
.utility-payor-name[b-ut39zxjw3e],
.utility-reading[b-ut39zxjw3e] {
    display: block;
    color: var(--navy);
    font-weight: 800;
}
.utility-payor-note[b-ut39zxjw3e],
.utility-table small[b-ut39zxjw3e] {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10.5px;
}
.utility-due[b-ut39zxjw3e] {
    font-weight: 900;
    white-space: nowrap;
}
.utility-status[b-ut39zxjw3e] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    background: none;
    padding: 0;
    min-width: 0;
}
/* Government report, not a dashboard: the status reads in navy like the rest of the sheet, and colour is
   spent only where it means "money still owed". A settled or unbilled line needs no colour at all. */
.utility-status.paid[b-ut39zxjw3e] { color: var(--navy); }
.utility-status.partial[b-ut39zxjw3e] { color: #7a5f13; }
.utility-status.unpaid[b-ut39zxjw3e] { color: var(--red); }

/* A utility this stall is not metered for — stated plainly rather than reported as a status. */
.utility-na[b-ut39zxjw3e] {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}



/* ── Responsive ──────────────────────────────────────────── */
/* Print-ready status report */
.print-document-content[b-ut39zxjw3e] {
    display: block;
    background: #eef3f7;
    overflow-x: hidden;
}
.print-report-sheet[b-ut39zxjw3e] {
    width: 100%;
    min-height: 900px;
    padding: 30px 28px 40px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d5dde5;
    box-shadow: 0 18px 38px rgba(9, 31, 52, .08);
    color: #111827;
}
.print-report-actions[b-ut39zxjw3e] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.print-report-btn[b-ut39zxjw3e] {
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid #c8d1da;
    border-radius: 6px;
    background: #fff;
    color: #0d2137;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.print-report-btn svg[b-ut39zxjw3e] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.print-report-header[b-ut39zxjw3e] {
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 2px solid #111827;
}
.print-report-logo[b-ut39zxjw3e] {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
    margin: 0 auto 10px;
}
.print-republic[b-ut39zxjw3e] {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    color: #374151;
}
.print-report-header h2[b-ut39zxjw3e] {
    margin: 7px 0 3px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.15;
    color: #111827;
}
.print-report-header p[b-ut39zxjw3e] {
    margin: 0;
    font-size: 12px;
    color: #4b5563;
}
.print-report-title[b-ut39zxjw3e] {
    margin-top: 18px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    font-weight: 800;
}
.print-report-meta[b-ut39zxjw3e],
.print-report-summary[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de;
    margin-top: 18px;
}
.print-report-meta div[b-ut39zxjw3e],
.print-report-summary div[b-ut39zxjw3e] {
    padding: 10px 12px;
    border-right: 1px solid #cfd6de;
}
.print-report-meta div:last-child[b-ut39zxjw3e],
.print-report-summary div:last-child[b-ut39zxjw3e] {
    border-right: none;
}
.print-report-meta span[b-ut39zxjw3e],
.print-report-summary span[b-ut39zxjw3e] {
    display: block;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    color: #6b7280;
}
.print-report-meta strong[b-ut39zxjw3e],
.print-report-summary strong[b-ut39zxjw3e] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #111827;
}
.print-report-summary[b-ut39zxjw3e] {
    background: #f8fafc;
}
/* ── Per-section blocks ── */
.print-empty[b-ut39zxjw3e] {
    margin: 22px 0 0;
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    border: 1px dashed #cfd6de;
    background: #f8fafc;
}
/* History table */
.history-sheet .history-table[b-ut39zxjw3e] { font-size: 15px !important; }
.history-sheet .history-table th[b-ut39zxjw3e] { font-size: 13px !important; }
.history-sheet .history-table td[b-ut39zxjw3e] { padding: 13px 14px; }
.history-sheet .history-table th:first-child[b-ut39zxjw3e],
.history-sheet .history-table td:first-child[b-ut39zxjw3e] { min-width: 110px; white-space: nowrap; }
.history-empty[b-ut39zxjw3e] { text-align: center; color: #6b7280; padding: 18px 0; }
/* History page — larger meta + heading to match table scale */
.history-sheet .print-report-meta span[b-ut39zxjw3e]  { font-size: 12px; }
.history-sheet .print-report-meta strong[b-ut39zxjw3e] { font-size: 16px; }
.history-sheet .print-section-heading[b-ut39zxjw3e]   { font-size: 15px; }
.history-sheet .history-total-row td[b-ut39zxjw3e]    { font-size: 15px !important; padding: 13px 14px; }
.history-sheet .print-report-signatures[b-ut39zxjw3e] { margin-top: 40px; }
.history-sheet .print-report-signatures span[b-ut39zxjw3e]  { font-size: 13px; }
.history-sheet .print-report-signatures strong[b-ut39zxjw3e] { font-size: 15px; }

/* Status Report page — bump from print-compact to readable screen size */
.status-sheet .print-report-meta span[b-ut39zxjw3e]   { font-size: 11px; }
.status-sheet .print-report-meta strong[b-ut39zxjw3e] { font-size: 14px; }
.status-sheet .print-report-summary span[b-ut39zxjw3e],
.status-sheet .print-section-summary span[b-ut39zxjw3e]  { font-size: 11px; }
.status-sheet .print-report-summary strong[b-ut39zxjw3e],
.status-sheet .print-section-summary strong[b-ut39zxjw3e] { font-size: 14px; }
.status-sheet .print-section-heading[b-ut39zxjw3e]   { font-size: 13px; }
.status-sheet .print-status-table[b-ut39zxjw3e]      { font-size: 13px; }
.status-sheet .print-status-table th[b-ut39zxjw3e]   { font-size: 11px; }
.status-sheet .print-status-table td[b-ut39zxjw3e]   { padding: 9px 10px; }
.status-sheet .print-report-signatures span[b-ut39zxjw3e]  { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-ut39zxjw3e] { font-size: 14px; }
.history-table tfoot .history-total-row td[b-ut39zxjw3e] {
    background: #f3f6f9;
    border-top: 2px solid #cfd6de;
    font-size: 11px;
}
.print-status-table td.rate-good[b-ut39zxjw3e]    { color: #2d7a5f; font-weight: 600; }
.print-status-table td.rate-partial[b-ut39zxjw3e] { color: #c8a84b; font-weight: 600; }
.print-status-table td.rate-low[b-ut39zxjw3e]     { color: #8b3a3a; font-weight: 600; }
.print-status-table td.balance-due[b-ut39zxjw3e]  { color: #8b3a3a; }
.print-section-block[b-ut39zxjw3e] {
    margin-top: 22px;
}
.print-section-heading[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #0d2137;
    padding: 6px 0 4px;
    border-bottom: 2px solid #0d2137;
    margin-bottom: 0;
}
.print-section-summary[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de;
    border-top: none;
    background: #f8fafc;
}
.print-section-summary div[b-ut39zxjw3e] {
    padding: 7px 10px;
    border-right: 1px solid #cfd6de;
}
.print-section-summary div:last-child[b-ut39zxjw3e] { border-right: none; }
.print-section-summary span[b-ut39zxjw3e] {
    display: block;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    color: #6b7280;
}
.print-section-summary strong[b-ut39zxjw3e] {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #111827;
}
/* Status cell colours */
.print-status-table td.status-paid[b-ut39zxjw3e]    { color: #2d7a5f; font-weight: 600; }
.print-status-table td.status-partial[b-ut39zxjw3e] { color: #c8a84b; font-weight: 600; }
.print-status-table td.status-unpaid[b-ut39zxjw3e]  { color: #8b3a3a; font-weight: 600; }
.print-table-wrap[b-ut39zxjw3e] {
    margin-top: 20px;
    width: 100%;
    overflow-x: hidden;
}
.print-status-table[b-ut39zxjw3e] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 11px;
    color: #111827;
}
.print-status-table th[b-ut39zxjw3e],
.print-status-table td[b-ut39zxjw3e] {
    border: 1px solid #cfd6de;
    padding: 7px 7px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
}
.print-status-table th[b-ut39zxjw3e] {
    background: #f3f6f9;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    color: #374151;
}
.print-status-table td:nth-child(5)[b-ut39zxjw3e],
.print-status-table td:nth-child(7)[b-ut39zxjw3e],
.print-status-table td:nth-child(8)[b-ut39zxjw3e] {
    text-align: right;
    white-space: nowrap;
}
.print-status-table td:nth-child(9)[b-ut39zxjw3e] {
    white-space: nowrap;
}
.print-status-table th:nth-child(1)[b-ut39zxjw3e],
.print-status-table td:nth-child(1)[b-ut39zxjw3e] { width: 6%; }
.print-status-table th:nth-child(2)[b-ut39zxjw3e],
.print-status-table td:nth-child(2)[b-ut39zxjw3e] { width: 18%; }
.print-status-table th:nth-child(3)[b-ut39zxjw3e],
.print-status-table td:nth-child(3)[b-ut39zxjw3e] { width: 13%; }
.print-status-table th:nth-child(4)[b-ut39zxjw3e],
.print-status-table td:nth-child(4)[b-ut39zxjw3e] { width: 9%; }
.print-status-table th:nth-child(5)[b-ut39zxjw3e],
.print-status-table td:nth-child(5)[b-ut39zxjw3e] { width: 11%; }
.print-status-table th:nth-child(6)[b-ut39zxjw3e],
.print-status-table td:nth-child(6)[b-ut39zxjw3e] { width: 9%; }
.print-status-table th:nth-child(7)[b-ut39zxjw3e],
.print-status-table td:nth-child(7)[b-ut39zxjw3e] { width: 11%; }
.print-status-table th:nth-child(8)[b-ut39zxjw3e],
.print-status-table td:nth-child(8)[b-ut39zxjw3e] { width: 10%; }
.print-status-table th:nth-child(9)[b-ut39zxjw3e],
.print-status-table td:nth-child(9)[b-ut39zxjw3e] { width: 8%; }
.print-report-signatures[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 58px;
}
.print-report-signatures div[b-ut39zxjw3e] {
    border-top: 1px solid #111827;
    padding-top: 8px;
    text-align: center;
}
.print-report-signatures span[b-ut39zxjw3e] {
    display: block;
    font-size: 11px;
    color: #6b7280;
}
.print-report-signatures strong[b-ut39zxjw3e] {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #111827;
}

@media screen and (max-width: 1100px) {
    .rpt-kpi-strip[b-ut39zxjw3e]       { grid-template-columns: repeat(2, 1fr); }
    .rpt-charts-row[b-ut39zxjw3e]      { grid-template-columns: 1fr; }
    .rpt-breakdown-grid[b-ut39zxjw3e]  { grid-template-columns: 1fr 1fr; }
    .utility-summary-grid[b-ut39zxjw3e] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 700px) {
    .rpt-content[b-ut39zxjw3e]         { padding: 16px; }
    .rpt-kpi-strip[b-ut39zxjw3e]       { grid-template-columns: 1fr; }
    .rpt-breakdown-grid[b-ut39zxjw3e]  { grid-template-columns: 1fr; }
    .rpt-topbar[b-ut39zxjw3e]          { padding: 16px; }
    .rpt-period-bar[b-ut39zxjw3e]      { padding: 10px 16px; }
    .rpt-period-tabs[b-ut39zxjw3e]     { flex-wrap: wrap; }
    .rpt-document-tab[b-ut39zxjw3e],
    .rpt-utility-tab[b-ut39zxjw3e]     { margin-left: 0; flex: 1 1 100%; justify-content: center; }
    .fish-kpi-row[b-ut39zxjw3e]        { gap: 16px; }
    .utility-hero[b-ut39zxjw3e],
    .utility-panel-head[b-ut39zxjw3e]  { flex-direction: column; align-items: stretch; }
    .utility-panel-head-left[b-ut39zxjw3e] { flex-direction: column; align-items: stretch; }
    .utility-panel-head-actions[b-ut39zxjw3e] { justify-content: space-between; }
    .utility-search[b-ut39zxjw3e] { width: 100%; }
    .utility-section-tabs[b-ut39zxjw3e] { overflow-x: auto; }
    .utility-summary-grid[b-ut39zxjw3e],
    .print-report-sheet[b-ut39zxjw3e]  { padding: 24px 18px 30px; min-height: auto; }
    .print-report-meta[b-ut39zxjw3e],
    .print-report-summary[b-ut39zxjw3e],
    .print-report-signatures[b-ut39zxjw3e] { grid-template-columns: 1fr; }
    .print-report-meta div[b-ut39zxjw3e],
    .print-report-summary div[b-ut39zxjw3e] { border-right: none; border-bottom: 1px solid #cfd6de; }
    .print-report-meta div:last-child[b-ut39zxjw3e],
    .print-report-summary div:last-child[b-ut39zxjw3e] { border-bottom: none; }
}

@media print {
    /* No unnamed @page here, deliberately. CSS isolation does NOT scope @page, so an unnamed one declared in a
       component stylesheet leaks to EVERY printable page in the app - print.css says so at the top, and
       StallHolderList.razor.css carries the same warning. This page used to declare `@page { size: A4 portrait;
       margin: 12mm }`, which fought print.css's authoritative `@page { size: auto; margin: 0 }` and left the print
       dialog's own Portrait/Landscape choice with no consistent answer: picking Landscape produced a portrait-shaped
       page, and picking Portrait again did not put it back.
       print.css owns the unnamed page box. A NAMED page is safe, because it applies only to what asks for it. */
    @page statement-page {
        size: A4 portrait;
        margin: 0;
    }

    body[b-ut39zxjw3e] {
        background: white !important;
    }

    /* App chrome does not belong on an issued document. The topbar and the period bar used to survive printing with
       only their background stripped, which is why a printed sheet began with "FACILITY · NPM · REPORTS / New Public
       Market Reports / August 2026" and the period dropdown - and why that chrome took a page of its own before the
       document started. Every sheet here carries its own letterhead inside .print-report-header, so the screen's
       navigation is noise on paper. */
    .rpt-topbar[b-ut39zxjw3e],
    .rpt-period-bar[b-ut39zxjw3e] {
        display: none !important;
    }

    .rpt-topbar-right[b-ut39zxjw3e],
    .rpt-period-tabs[b-ut39zxjw3e],
    .rpt-date-nav[b-ut39zxjw3e],
    .rpt-back-btn[b-ut39zxjw3e],
    .print-report-actions[b-ut39zxjw3e] {
        display: none !important;
    }

    .rpt-content[b-ut39zxjw3e] { padding: 0 !important; }
    .print-document-content[b-ut39zxjw3e] { display: block !important; background: white !important; }
    .print-report-sheet[b-ut39zxjw3e] {
        width: 100% !important;
        min-height: auto !important;
        /* 12mm, NOT 0 - the page margin is deliberately nought so the browser has no margin box to print its
           automatic date, URL and page numbers into, which means the SHEET supplies the whitespace. print.css says
           exactly that and sets `.print-report-sheet { padding: 12mm }`, but CSS isolation compiles this rule to
           `.print-report-sheet[b-xxxxx]`, and a class-plus-attribute selector outranks a bare class even when both
           are !important. So this rule quietly won and printed every sheet on this page hard against the paper edge.
           Matching the convention here is what fixes it, for the statements and for the Status Report alike. */
        padding: 12mm !important;
        border: none !important;
        box-shadow: none !important;
    }

    .rpt-chart-card[b-ut39zxjw3e],
    .rpt-kpi-card[b-ut39zxjw3e],
    .audit-card[b-ut39zxjw3e],
    .rpt-delinquency-panel[b-ut39zxjw3e],
    .rpt-compliance-table-wrap[b-ut39zxjw3e] {
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ── Why page two used to start hard against the paper edge ───────────────
       The page box is margin-free and the 12mm of whitespace came from padding on the SHEET. A block's padding applies once, at
       its own top and bottom - not at every page break - so the first page got its margin, the last page got its footer space,
       and every page between them began at y=0 with a table header touching the edge. Repeating the header row fixed WHICH
       header appeared; it could not create the whitespace above it, because no CSS inserts padding at a page break.

       Only a page MARGIN repeats on every page, so these two documents ask for one of their own. A named page applies solely to
       what asks for it, so the roster, the statements and the receipts keep the margin-free box they were tuned for. Top and
       bottom come from the page, left and right stay as the sheet's padding.

       ONE CONSEQUENCE, stated rather than buried: a page with a top margin gives the browser somewhere to print its automatic
       date, URL and page numbers. Chromium offers "Headers and footers" as a checkbox in the print dialog; if it is on, untick
       it. The alternative was leaving a filed document with its figures against the paper edge on every page after the first. */
    /* The page margin these sheets need is injected at print time by stalltrackPrint.reportDocument, NOT set here. An @page in a
       scoped stylesheet does not reach the print engine, and a NAMED page is not honoured at all - print.css assigns a landscape
       named page to .print-report-sheet and this document still printed portrait, which is the proof. Left and right padding is
       injected with it, so nothing about the paper margin is stated in CSS any more. */

    .rpt-compliance-table-wrap[b-ut39zxjw3e] { overflow: visible !important; }

    /* ── How these sheets break across pages ──────────────────────────────────
       The Status Report and the History run past one sheet of A4, and the browser's default breaking made a document an office
       would not file: a section's heading and its summary strip sat at the foot of page one while its rows began page two under a
       column header with nothing above it to say which section it belonged to.

       The same three rules the List of Stallholders already prints by, so the two documents paginate alike:
         - a table's header row REPEATS on every page it continues onto (table-header-group), rather than appearing once and
           leaving later pages headerless - or, worse, appearing alone at the top of a page;
         - a row is never split down the middle;
         - a section block may span pages, because a market area with forty stalls has to.

       Plus the two joins that were actually breaking here: a section heading stays with what follows it, and the letterhead and
       the meta strip are never split. */
    .print-status-table thead[b-ut39zxjw3e] {
        display: table-header-group;
    }

    .print-status-table tfoot[b-ut39zxjw3e] {
        display: table-footer-group;
    }

    .print-status-table tr[b-ut39zxjw3e] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A heading with its rows on the next page is a heading for nothing. */
    .print-section-heading[b-ut39zxjw3e] {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* The letterhead, and the four-cell facility/period/prepared-by strip, are single units. */
    .print-report-header[b-ut39zxjw3e],
    .print-report-meta[b-ut39zxjw3e] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A SECTION IS ONE UNIT: its name, its four-cell summary and its rows. This was `auto`, which is what put "KAHOY SALE" and
       its summary at the foot of a page with the stalls they describe on the next - a heading and a total for rows the reader
       cannot see. `avoid` is a request, not a constraint: a section taller than the page is still split by the browser, and the
       repeating header above keeps that readable. So small sections stay whole and large ones still fit. */
    .print-section-block[b-ut39zxjw3e] {
        break-inside: avoid;
        page-break-inside: avoid;
        /* The top space is PADDING here, not the margin this block carries on screen. A margin is dropped at a page break; a
           padding is part of the box and survives, so a section that begins a page opens clear of the paper edge instead of
           against it. The page margin is nought, because a page margin is where Chromium prints its own date, title and URL and no
           CSS turns that off - so the document supplies its own whitespace. Sections are kept whole above, which is what makes a
           continued page always begin with one. */
        margin-top: 0 !important;
        padding-top: 10mm;
    }

    /* And the summary strip stays with the table it summarises, for the same reason. */
    .print-section-summary[b-ut39zxjw3e] {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    .print-table-wrap[b-ut39zxjw3e] {
        overflow: visible !important;
    }

    /* Signatures are never split down the middle: "Prepared by" on one page and "Reviewed by" on the next is not a document
       anybody signs. */
    .print-report-signatures[b-ut39zxjw3e] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ── Formal empty state (shown when a chart has no data) ── */
.rpt-empty[b-ut39zxjw3e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 180px;
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted, #8faabf);
}
.rpt-empty svg[b-ut39zxjw3e] { width: 40px; height: 40px; opacity: .5; }
.rpt-empty-title[b-ut39zxjw3e] { font-size: 14px; font-weight: 700; color: var(--text-subtle, #6a8aa0); }
.rpt-empty-text[b-ut39zxjw3e] { font-size: 12.5px; color: var(--text-muted, #8faabf); }

/* ── Fish kilo bar chart — gridlined plot, matches Collection Trend ── */
.rpt-fish-chart[b-ut39zxjw3e] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 248px;
    padding: 16px 18px 10px;
    position: relative;
    overflow-x: auto;
    /* Horizontal gridlines + subtle floor wash — same language as .rpt-bar-chart */
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 39px,
            color-mix(in srgb, var(--border) 55%, transparent) 40px
        ),
        linear-gradient(to top, rgba(74, 158, 255, 0.04) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.rpt-fish-col[b-ut39zxjw3e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}
.rpt-fish-val[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 700;
    color: #2f6fbf;
    height: 16px;
    line-height: 16px;
    letter-spacing: .01em;
}
.rpt-fish-col.is-zero .rpt-fish-val[b-ut39zxjw3e] { color: transparent; }
.rpt-fish-track[b-ut39zxjw3e] {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 46px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
}
.rpt-fish-fill[b-ut39zxjw3e] {
    --depth: 10px;
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 0;
    transform: translateX(calc(-1 * var(--depth) / 2));
    background: linear-gradient(180deg, #6a99bb 0%, #4a7fa5 60%, #3a668a 100%);
    border-radius: 5px 5px 0 0;
    filter: drop-shadow(4px 8px 11px color-mix(in srgb, #4a7fa5 28%, transparent));
    transition: height .35s cubic-bezier(.4, 0, .2, 1), filter .15s ease, transform .15s ease;
}
/* Top face */
.rpt-fish-fill[b-ut39zxjw3e]::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: var(--depth);
    transform-origin: left bottom;
    transform: skewX(-45deg);
    background: #8fc8ff;
}
/* Right side face */
.rpt-fish-fill[b-ut39zxjw3e]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: var(--depth);
    height: 100%;
    transform-origin: left top;
    transform: skewY(-45deg);
    background: #2f6fbf;
}
.rpt-fish-col:hover .rpt-fish-fill[b-ut39zxjw3e] {
    filter: drop-shadow(6px 11px 14px color-mix(in srgb, #4a7fa5 32%, transparent)) brightness(1.04);
    transform: translateX(calc(-1 * var(--depth) / 2)) translateY(-2px);
}
/* Zero-kilo day: thin baseline tick on the floor — no placeholder box */
.rpt-fish-col.is-zero .rpt-fish-track[b-ut39zxjw3e]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--border) 85%, transparent);
}
.rpt-fish-xlabel[b-ut39zxjw3e] {
    margin-top: 9px;
    font-size: 10.5px;
    color: var(--text-muted, #8faabf);
    white-space: nowrap;
    font-weight: 500;
}


/* ── Collection coverage summary (professional) ── */
.cov-summary[b-ut39zxjw3e] { margin: 4px 0 14px; }
.cov-rate-val[b-ut39zxjw3e] { font-size: 30px; font-weight: 800; color: var(--navy, #0d2137); line-height: 1; }
.cov-rate-lbl[b-ut39zxjw3e] { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #8faabf); margin-top: 3px; }
.cov-bar[b-ut39zxjw3e] { margin-top: 10px; height: 8px; border-radius: 6px; background: var(--bg, #f0f4f8); overflow: hidden; }
.cov-bar-fill[b-ut39zxjw3e] { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2d7a5f, #3fa07a); transition: width .35s ease; }

.cov-chips[b-ut39zxjw3e] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.cov-chip[b-ut39zxjw3e] { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; background: var(--bg, #f0f4f8); border-radius: 10px; }
.cov-chip strong[b-ut39zxjw3e] { font-size: 20px; font-weight: 800; line-height: 1; }
.cov-chip span[b-ut39zxjw3e] { font-size: 11px; color: var(--text-muted, #8faabf); text-transform: uppercase; letter-spacing: .03em; }
.cov-collected[b-ut39zxjw3e] { color: #2d7a5f; }
.cov-partial[b-ut39zxjw3e] { color: #c8a84b; }
.cov-missed[b-ut39zxjw3e] { color: #8b3a3a; }
.cov-streak[b-ut39zxjw3e] { color: var(--navy, #0d2137); }

/* Partial-coverage day cell + legend swatch */
.streak-day.partial[b-ut39zxjw3e] { background: #f6edd3; color: #8a6d1f; }
.leg-swatch.partial[b-ut39zxjw3e] { background: #c8a84b; }


/* ── Donut center sub-amount (Section Revenue) ── */
.donut-center-sub[b-ut39zxjw3e] { text-anchor: middle; font-size: 11px; font-weight: 800; fill: var(--navy, #0d2137); }

/* ── Payor compliance (stat tiles + segmented bar) ── */
.cmp-stats[b-ut39zxjw3e] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.cmp-stat[b-ut39zxjw3e] { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; background: var(--bg, #f0f4f8); border-radius: 10px; }
.cmp-stat strong[b-ut39zxjw3e] { font-size: 24px; font-weight: 800; line-height: 1; }
.cmp-stat span[b-ut39zxjw3e] { font-size: 10.5px; color: var(--text-muted, #8faabf); text-transform: uppercase; letter-spacing: .03em; }
.cmp-bar[b-ut39zxjw3e] { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--bg, #f0f4f8); box-shadow: inset 0 1px 2px rgba(13,33,55,.08); }
.cmp-seg[b-ut39zxjw3e] { height: 100%; transition: width .35s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.30); }
.cmp-legend[b-ut39zxjw3e] { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-subtle, #6a8aa0); }
.cmp-legend span[b-ut39zxjw3e] { display: inline-flex; align-items: center; gap: 6px; }

/* Audit analysis board inspired by compact BI dashboards */
.audit-board[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: 1.05fr 1.8fr 1.45fr;
    grid-template-areas:
        "section payor mix"
        "compare trend kpi";
    gap: 12px;
    align-items: stretch;
}
.audit-board > .rpt-breakdown-card[b-ut39zxjw3e] { display: none; }
.audit-card[b-ut39zxjw3e] {
    background:
        linear-gradient(180deg, color-mix(in srgb, #fff 94%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 78%, white);
    border-radius: 10px;
    padding: 18px 20px 17px;
    min-height: 154px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(13, 33, 55, 0.03),
        0 8px 18px rgba(13, 33, 55, 0.045);
}
.audit-card-donut[b-ut39zxjw3e] { grid-area: section; }
.audit-card-payor[b-ut39zxjw3e] { grid-area: payor; }
.audit-card-mix[b-ut39zxjw3e] { grid-area: mix; }
.audit-card-wide[b-ut39zxjw3e] { min-height: 214px; }
.audit-card-head[b-ut39zxjw3e] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    min-width: 0;
}
.audit-card-head div[b-ut39zxjw3e] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.audit-card-head span[b-ut39zxjw3e] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.audit-card-head small[b-ut39zxjw3e] {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.35;
    max-width: 190px;
    text-align: right;
    white-space: normal;
}
.audit-card-head-compact[b-ut39zxjw3e] {
    margin-bottom: 12px;
}
.audit-card-title[b-ut39zxjw3e] {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}
.audit-card-kicker[b-ut39zxjw3e] {
    display: inline-block;
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    margin-right: 6px;
}
.audit-card-kicker + .audit-card-title[b-ut39zxjw3e] {
    display: inline;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}
.audit-donut-row[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.audit-donut[b-ut39zxjw3e] { width: 136px; height: 136px; }
.audit-donut-label[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 700;
    fill: var(--text-muted);
    text-anchor: middle;
    letter-spacing: .06em;
}
.audit-donut-value[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 800;
    fill: var(--navy);
    text-anchor: middle;
}
.audit-section-list[b-ut39zxjw3e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.audit-section-item[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    font-size: 12px;
    color: var(--text-subtle);
}
.audit-section-info[b-ut39zxjw3e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.audit-section-name[b-ut39zxjw3e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-section-value[b-ut39zxjw3e] {
    color: var(--navy);
    font-size: 12px;
    white-space: nowrap;
}
.audit-dot[b-ut39zxjw3e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.audit-caption[b-ut39zxjw3e],
.audit-axis-note[b-ut39zxjw3e] {
    margin-top: 10px;
    font-size: 10.5px;
    color: var(--text-muted);
}
.audit-axis-note[b-ut39zxjw3e] {
    text-align: center;
}
.audit-insight-strip[b-ut39zxjw3e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: -4px 0 10px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 72%, white);
    color: var(--text-subtle);
    font-size: 10.5px;
}
.audit-insight-strip strong[b-ut39zxjw3e] {
    color: var(--navy);
    font-size: 11.5px;
}
.audit-empty[b-ut39zxjw3e] {
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
}
.audit-empty-inline[b-ut39zxjw3e] {
    font-size: 12px;
    color: var(--text-muted);
    padding: 10px 4px 4px;
    margin: 0;
}
.audit-bar-plot[b-ut39zxjw3e] {
    height: 174px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 16px;
    border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    padding: 22px 18px 0;
    background:
        linear-gradient(to top, color-mix(in srgb, var(--bg) 38%, transparent), transparent 46%),
        repeating-linear-gradient(to top, transparent 0, transparent 36px, color-mix(in srgb, var(--border) 38%, transparent) 37px);
    border-radius: 0 0 3px 3px;
}
.audit-payor-bar[b-ut39zxjw3e] {
    flex: 0 1 31%;
    min-width: 44px;
    max-width: 190px;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    justify-items: center;
    align-items: end;
    gap: 3px;
}
.audit-payor-value[b-ut39zxjw3e] {
    color: var(--navy);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-5px);
}
.audit-payor-track[b-ut39zxjw3e] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
}
.audit-payor-stack[b-ut39zxjw3e] {
    --depth: 11px;
    width: min(80px, 70%);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    position: relative;
    transform: translateX(calc(-1 * var(--depth) / 2));
    filter: drop-shadow(5px 9px 11px color-mix(in srgb, var(--navy) 9%, transparent));
}
.audit-seg3d[b-ut39zxjw3e] {
    position: relative;
    width: 100%;
    min-height: 0;
    transition: height .4s cubic-bezier(.4, 0, .2, 1);
}
.audit-seg3d.seg-rent[b-ut39zxjw3e] { background: linear-gradient(180deg, #3a9970 0%, #2d7a5f 100%); }
.audit-seg3d.seg-fish[b-ut39zxjw3e] { background: linear-gradient(180deg, #6a99bb 0%, #4a7fa5 100%); }
.audit-payor-stack > .audit-seg3d:first-child[b-ut39zxjw3e] { border-radius: 4px 4px 0 0; }

/* Right side face (leans up-right by --depth) */
.audit-seg3d .aud-face-side[b-ut39zxjw3e] {
    position: absolute;
    top: 0;
    left: 100%;
    width: var(--depth);
    height: 100%;
    transform-origin: left top;
    transform: skewY(-45deg);
}
.audit-seg3d.seg-rent .aud-face-side[b-ut39zxjw3e] { background: #1f5d47; }
.audit-seg3d.seg-fish .aud-face-side[b-ut39zxjw3e] { background: #356fb8; }

/* Top face — only on the topmost segment */
.audit-seg3d .aud-face-top[b-ut39zxjw3e] {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: var(--depth);
    transform-origin: left bottom;
    transform: skewX(-45deg);
}
.audit-seg3d.seg-rent .aud-face-top[b-ut39zxjw3e] { background: #50b88c; }
.audit-seg3d.seg-fish .aud-face-top[b-ut39zxjw3e] { background: #84c4ff; }

.audit-payor-stack.is-zero[b-ut39zxjw3e] { opacity: .42; filter: none; }
.audit-stack-legend[b-ut39zxjw3e] {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 12px;
}
.audit-stack-legend .audit-legend-item[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-subtle);
}
.audit-stack-legend i[b-ut39zxjw3e] {
    width: 11px; height: 11px;
    border-radius: 3px;
    display: inline-block;
}
.audit-stack-legend i.seg-rent[b-ut39zxjw3e] { background: var(--green); }
.audit-stack-legend i.seg-fish[b-ut39zxjw3e] { background: #4a7fa5; }
.audit-payor-label[b-ut39zxjw3e] {
    width: 100%;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-payor-meta[b-ut39zxjw3e] {
    width: 100%;
    font-size: 11px;
    color: var(--text-subtle);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-grouped-bars[b-ut39zxjw3e] {
    height: 150px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: end;
    border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    padding: 22px 16px 0;
    background:
        linear-gradient(to top, color-mix(in srgb, var(--bg) 38%, transparent), transparent 48%),
        repeating-linear-gradient(to top, transparent 0, transparent 36px, color-mix(in srgb, var(--border) 38%, transparent) 37px);
    border-radius: 0 0 3px 3px;
}
.audit-card-mix .audit-grouped-bars[b-ut39zxjw3e] {
    margin-top: 28px;
    height: 192px;
    overflow: visible;
    position: relative;
}
.audit-group[b-ut39zxjw3e] {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 6px;
    min-width: 0;
    padding-inline: 3px;
    position: relative;
}
.audit-card-mix .audit-group[b-ut39zxjw3e]::before {
    content: "";
    position: absolute;
    inset: 6px 0 18px;
    border-left: 1px solid color-mix(in srgb, var(--border) 26%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--border) 18%, transparent);
    border-radius: 8px 8px 2px 2px;
    pointer-events: none;
}
.audit-card-mix .audit-group:not(:last-child)[b-ut39zxjw3e]::after {
    content: "";
    position: absolute;
    top: 8px;
    right: -10px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--border) 62%, transparent), transparent);
    pointer-events: none;
}
.audit-group-bars[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: flex-end;
    justify-items: center;
    gap: clamp(5px, 1.2vw, 9px);
    min-height: 0;
    width: 100%;
}
.audit-vbar-wrapper[b-ut39zxjw3e] {
    height: 100%;
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: end;
    justify-items: center;
    gap: 4px;
}
.audit-vbar-value[b-ut39zxjw3e] {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    min-height: 9px;
}
.audit-vbar[b-ut39zxjw3e] {
    --depth: 8px;
    display: block;
    width: clamp(15px, 4vw, 20px);
    max-width: 100%;
    min-height: 10px;
    border-radius: 4px 4px 0 0;
    position: relative;
    transform-origin: bottom center;
    filter: drop-shadow(4px 7px 9px color-mix(in srgb, var(--navy) 8%, transparent));
}
.audit-vbar.revenue[b-ut39zxjw3e]   { background: linear-gradient(180deg, #3a9970 0%, #2d7a5f 100%); }
.audit-vbar.occupancy[b-ut39zxjw3e] { background: linear-gradient(180deg, #1a8298 0%, #0f6174 100%); }
.audit-vbar.balance[b-ut39zxjw3e]   { background: linear-gradient(180deg, #a85454 0%, #8b3a3a 100%); }

/* Top face (leans up-right by --depth) */
.audit-vbar[b-ut39zxjw3e]::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: var(--depth);
    transform-origin: left bottom;
    transform: skewX(-45deg);
    pointer-events: none;
}
/* Right side face (leans up-right by --depth) */
.audit-vbar[b-ut39zxjw3e]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: var(--depth);
    height: 100%;
    transform-origin: left top;
    transform: skewY(-45deg);
    pointer-events: none;
}
.audit-vbar.revenue[b-ut39zxjw3e]::before   { background: #50b88c; }
.audit-vbar.revenue[b-ut39zxjw3e]::after    { background: #1f5d47; }
.audit-vbar.occupancy[b-ut39zxjw3e]::before { background: #38a6bf; }
.audit-vbar.occupancy[b-ut39zxjw3e]::after  { background: #0a4250; }
.audit-vbar.balance[b-ut39zxjw3e]::before   { background: #c47171; }
.audit-vbar.balance[b-ut39zxjw3e]::after    { background: #6f2a2a; }

/* The old flat gloss overlay is superseded by the 3D faces. */
.audit-vbar .audit-vbar-shine[b-ut39zxjw3e] { display: none; }

.audit-vbar.is-zero[b-ut39zxjw3e] { opacity: .45; filter: none; }
.audit-group-label[b-ut39zxjw3e] {
    font-size: 11px;
    color: var(--text-subtle);
    text-align: center;
    white-space: nowrap;
}
.audit-mini-legend[b-ut39zxjw3e] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-subtle);
}
.audit-legend-item[b-ut39zxjw3e],
.audit-risk-legend-item[b-ut39zxjw3e] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.audit-legend[b-ut39zxjw3e] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}
.audit-legend.revenue[b-ut39zxjw3e] { background: var(--green); }
.audit-legend.occupancy[b-ut39zxjw3e] { background: #0f6174; }
.audit-legend.balance[b-ut39zxjw3e] { background: var(--red); }
.audit-card-risk[b-ut39zxjw3e] {
    grid-area: trend;
    min-height: 230px;
}
.audit-risk-totals[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: -2px 0 10px;
}
.risk-total[b-ut39zxjw3e] {
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 78%, white);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.risk-total span[b-ut39zxjw3e] {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.1;
}
.risk-total strong[b-ut39zxjw3e] {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--navy);
    line-height: 1;
}
/* All three risk totals share the same neutral card (consistent with "Open items") — the numbers carry the
   meaning, not the card colour. */
.audit-risk-ledger[b-ut39zxjw3e] {
    display: grid;
    gap: 7px;
}
.audit-risk-row[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: minmax(78px, 96px) minmax(0, 1fr) minmax(52px, auto);
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
/* A section is not shaded by how it is doing. Every row is the same white line of a ledger, and the meter
   beside it carries the mix — a wash of red behind a whole row said "alarm" where the office needs a reading. */
.audit-risk-row-main[b-ut39zxjw3e] {
    min-width: 0;
}
.audit-risk-row-main strong[b-ut39zxjw3e] {
    display: block;
    color: var(--navy);
    font-size: 11.5px;
    line-height: 1.1;
}
.audit-risk-row-main span[b-ut39zxjw3e] {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.1;
}
.audit-risk-meter[b-ut39zxjw3e] {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-icon);
}
.audit-risk-meter.stacked[b-ut39zxjw3e] {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.audit-risk-meter i[b-ut39zxjw3e] {
    display: block;
    height: 100%;
    min-width: 10px;
    border-radius: inherit;
}
.audit-risk-meter.stacked span[b-ut39zxjw3e] {
    display: block;
    height: 100%;
    min-width: 3px;
}
.audit-risk-meter.stacked span:first-child[b-ut39zxjw3e] {
    border-radius: 999px 0 0 999px;
}
.audit-risk-meter.stacked span:last-child[b-ut39zxjw3e] {
    border-radius: 0 999px 999px 0;
}
.audit-risk-meter.stacked span:only-child[b-ut39zxjw3e] {
    border-radius: 999px;
}
/* The mix is the only thing that carries colour here, and it uses the page's own inks: green for what was
   collected, the amber this app already uses for a partial settlement, red for what is still open. */
.audit-risk-meter.stacked .paid[b-ut39zxjw3e] { background: var(--green); }
.audit-risk-meter.stacked .partial[b-ut39zxjw3e] { background: #b87333; }
.audit-risk-meter.stacked .unpaid[b-ut39zxjw3e] { background: var(--red); }
.audit-risk-row-value[b-ut39zxjw3e] {
    justify-self: end;
    min-width: 72px;
    text-align: right;
}
.audit-risk-row-value strong[b-ut39zxjw3e] {
    display: block;
    color: var(--navy);
    font-size: 11.5px;
    line-height: 1;
    white-space: nowrap;
}
.audit-risk-row-value small[b-ut39zxjw3e] {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 8.8px;
    line-height: 1.1;
    white-space: nowrap;
}
.audit-risk-grid[b-ut39zxjw3e] {
    height: 168px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 24px;
    border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    padding: 20px 24px 0;
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 36px,
            color-mix(in srgb, var(--border) 38%, transparent) 37px
        ),
        linear-gradient(to top, color-mix(in srgb, var(--bg) 34%, transparent), transparent 48%);
    border-radius: 0 0 3px 3px;
}
.audit-risk-column[b-ut39zxjw3e] {
    flex: 0 1 128px;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-rows: 18px 1fr auto;
    justify-items: center;
    gap: 4px;
    min-width: 0;
}
.audit-risk-column strong[b-ut39zxjw3e] {
    font-size: 11px;
    color: var(--text-subtle);
    font-weight: 700;
    line-height: 1;
    opacity: .78;
}
.audit-risk-track[b-ut39zxjw3e] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.audit-risk-fill[b-ut39zxjw3e] {
    width: min(78px, 68%);
    min-height: 3px;
    border-radius: 8px 8px 2px 2px;
    position: relative;
    transform-origin: bottom center;
    box-shadow: 0 10px 17px color-mix(in srgb, var(--navy) 9%, transparent);
    overflow: hidden;
}
.audit-risk-fill[b-ut39zxjw3e]::before,
.audit-risk-fill[b-ut39zxjw3e]::after {
    content: "";
    position: absolute;
    background: inherit;
    pointer-events: none;
}
.audit-risk-fill[b-ut39zxjw3e]::before {
    inset: 0 0 auto 0;
    height: 34%;
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
}
.audit-risk-fill[b-ut39zxjw3e]::after {
    display: none;
}
.audit-risk-column span[b-ut39zxjw3e] {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-risk-summary[b-ut39zxjw3e] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--text-subtle);
}
.audit-risk-summary i[b-ut39zxjw3e] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}
.audit-risk-summary i.partial[b-ut39zxjw3e] { background: var(--gold); }
.audit-risk-summary i.unpaid[b-ut39zxjw3e] { background: var(--red); }
.audit-kpi-stack[b-ut39zxjw3e] {
    grid-area: kpi;
    display: grid;
    gap: 8px;
}
.audit-number-card[b-ut39zxjw3e] {
    min-height: 103px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.audit-number-card strong[b-ut39zxjw3e] {
    font-size: 28px;
    line-height: 1;
    color: var(--navy);
}
.audit-number-card span[b-ut39zxjw3e] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.audit-card-compare[b-ut39zxjw3e] {
    grid-area: compare;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.audit-compare-row[b-ut39zxjw3e] {
    display: grid;
    grid-template-columns: minmax(90px, .85fr) minmax(72px, 1fr) minmax(44px, max-content);
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-subtle);
}
.audit-compare-row div[b-ut39zxjw3e] {
    height: 11px;
    background: color-mix(in srgb, var(--bg) 86%, white);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 42%, transparent);
}
.audit-compare-row i[b-ut39zxjw3e] {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 26%, transparent);
}
.audit-compare-value[b-ut39zxjw3e] {
    display: inline-grid;
    justify-items: end;
    gap: 1px;
    min-width: 44px;
    max-width: 54px;
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
    justify-self: end;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.audit-compare-value span[b-ut39zxjw3e] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}
.audit-compare-value small[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}
.audit-compare-value.is-risk span[b-ut39zxjw3e],
.audit-compare-value.is-risk small[b-ut39zxjw3e] {
    color: var(--red);
}
.audit-section-palette[b-ut39zxjw3e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--border);
}
.audit-section-palette span[b-ut39zxjw3e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--text-subtle);
    min-width: 0;
}
.audit-section-palette i[b-ut39zxjw3e] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: 0 0 auto;
}
.audit-risk-key .risk[b-ut39zxjw3e] {
    color: var(--red);
    font-weight: 700;
}

@media screen and (max-width: 1180px) {
    .audit-board[b-ut39zxjw3e] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "section payor"
            "mix compare"
            "trend trend"
            "kpi kpi";
    }
}

@media screen and (max-width: 760px) {
    .audit-board[b-ut39zxjw3e] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "section"
            "payor"
            "mix"
            "compare"
            "trend"
            "kpi";
    }
    .audit-donut-row[b-ut39zxjw3e] { grid-template-columns: 1fr; justify-items: center; }
    .audit-card-head[b-ut39zxjw3e] {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .audit-card-head span[b-ut39zxjw3e],
    .audit-card-head small[b-ut39zxjw3e] { white-space: normal; }
    .audit-card-wide[b-ut39zxjw3e],
    .audit-card-risk[b-ut39zxjw3e] { min-height: 190px; }
    .audit-compare-row[b-ut39zxjw3e] { grid-template-columns: minmax(88px, .8fr) minmax(64px, 1fr) minmax(42px, max-content); }
    .audit-risk-totals[b-ut39zxjw3e] { grid-template-columns: 1fr; }
    .audit-risk-row[b-ut39zxjw3e] {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .audit-risk-row-value[b-ut39zxjw3e] { justify-self: start; }
}

/* ── Stallholder register ───────────────────────────────── */
.register-caption[b-ut39zxjw3e] {
    font-size: 12px;
    color: var(--text-subtle);
    margin: 0 0 10px;
    padding: 0 2px;
}
.rpt-register-table td.register-year[b-ut39zxjw3e] {
    font-weight: 700;
    color: var(--navy);
}
.rpt-register-table tr.row-mismatch[b-ut39zxjw3e] {
    background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.rpt-register-table tr.row-mismatch td:nth-child(3)[b-ut39zxjw3e] {
    color: var(--navy);
    font-weight: 600;
}
.register-empty[b-ut39zxjw3e] {
    text-align: center;
    color: var(--text-muted);
    padding: 22px 0;
    font-size: 13px;
}

/* Utility register — segmented section tabs (matches the Weekly/Monthly/Yearly look), search, clickable
   rows, per-payor history modal */
.utility-panel-head-left[b-ut39zxjw3e] { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.utility-panel-head-actions[b-ut39zxjw3e] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.utility-section-tabs[b-ut39zxjw3e] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.utility-section-tab[b-ut39zxjw3e] {
    min-height: 32px;
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.utility-section-tab:hover[b-ut39zxjw3e] {
    background: rgba(255,255,255,.72);
    border-color: color-mix(in srgb, var(--border) 72%, transparent);
    color: var(--navy);
}
.utility-section-tab.active[b-ut39zxjw3e] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14);
}
.utility-toolbar[b-ut39zxjw3e] { padding: 14px 20px 0; }
.utility-search[b-ut39zxjw3e] { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.utility-search svg[b-ut39zxjw3e] { position: absolute; left: 11px; width: 15px; height: 15px; fill: none; stroke: var(--text-muted); stroke-width: 2; }
.utility-search input[b-ut39zxjw3e] {
    width: 100%; border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 12px 9px 34px; font-size: 13px; color: var(--navy); background: #fff;
}
.utility-search input:focus[b-ut39zxjw3e] { outline: none; border-color: var(--navy-3); }

.utility-row-click[b-ut39zxjw3e] { cursor: pointer; }
.utility-row-click:hover[b-ut39zxjw3e] { background: var(--bg-page); }

.utility-hist-overlay[b-ut39zxjw3e] {
    position: fixed; inset: 0; z-index: 4200; background: rgba(13, 33, 55, 0.5);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.utility-hist-modal[b-ut39zxjw3e] {
    background: #fff; border-radius: 16px; width: 100%; max-width: 1040px; max-height: 88vh;
    overflow: auto; box-shadow: 0 24px 60px rgba(13, 33, 55, 0.28);
}
.utility-hist-head[b-ut39zxjw3e] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff;
}
.utility-hist-head h3[b-ut39zxjw3e] { font-size: 16px; font-weight: 800; color: var(--navy); margin: 0; }
.utility-hist-head p[b-ut39zxjw3e] { font-size: 12.5px; color: var(--text-muted); margin: 3px 0 0; }
.utility-hist-x[b-ut39zxjw3e] { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.utility-hist-state[b-ut39zxjw3e] { padding: 40px 22px; text-align: center; color: var(--text-muted); font-size: 13px; }
.utility-hist-wrap[b-ut39zxjw3e] { padding: 8px 22px 22px; overflow-x: auto; }
.utility-hist-table[b-ut39zxjw3e] { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.utility-hist-table th[b-ut39zxjw3e] {
    text-align: left; padding: 9px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.utility-hist-table td[b-ut39zxjw3e] { padding: 9px 10px; border-bottom: 1px solid var(--bg-icon); color: var(--navy); font-variant-numeric: tabular-nums; }
.utility-hist-table .uh-period[b-ut39zxjw3e] { font-weight: 800; }
.utility-hist-table .uh-total[b-ut39zxjw3e] { font-weight: 800; }

/* Separate electricity/water status badges */
.utility-status-pair[b-ut39zxjw3e] { display: inline-flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.utility-status-pair .utility-status[b-ut39zxjw3e] { font-size: 10.5px; }

/* Keep the daily x-labels compact so a 31-day month fits without horizontal overflow. */
.rpt-fish-xlabel[b-ut39zxjw3e] { font-size: 11px; white-space: nowrap; }

/* Stacked electricity/water OR numbers in the utility history modal */
.uh-or[b-ut39zxjw3e] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-subtle, #6a8aa0);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════
   STATEMENT OF ACCOUNT — UTILITY CHARGES
══════════════════════════════════════════ */
/* One sheet per payor, printed and handed over. The sheet itself reuses .print-report-sheet, so a statement is
   laid out like every other official document this office issues; only the parts specific to a statement are
   below. Nothing here introduces a colour: the amounts carry the emphasis through weight and rules, the way a
   printed form does. */

/* Screen-only action bar. It is .no-print, so none of this reaches the paper. */
.statement-actions[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

/* Search sized to share the line rather than claim it: it gives way first when the row runs out of room, so the
   controls either side stay put instead of wrapping. */
.statement-search[b-ut39zxjw3e] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 190px;
    min-width: 150px;
    max-width: 300px;
    padding: 0 12px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
}

.statement-search svg[b-ut39zxjw3e] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--text-subtle);
    stroke-width: 2;
    stroke-linecap: round;
}

.statement-search input[b-ut39zxjw3e] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12.5px;
    color: var(--navy);
}

.statement-mode-tabs[b-ut39zxjw3e] {
    flex-shrink: 0;
}

/* Pushed to the end of the row so Print is always in the same place, whatever the filters do. */
.statement-print-btn[b-ut39zxjw3e] {
    margin-left: auto;
}

/* Who a statement does NOT cover, on the office's own summary copy. Set in the document's own ink and left-aligned like a
   qualifying clause rather than dressed as a warning: nobody is at fault, the readings simply have not been entered. It prints,
   because the office files this sheet and needs it to say who was left out of the run it answers for. */
.statement-excluded-note[b-ut39zxjw3e] {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-left: 2px solid var(--border);
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-subtle);
}

.statement-sheet + .statement-sheet[b-ut39zxjw3e] {
    margin-top: 24px;
}

.statement-table[b-ut39zxjw3e] {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 14px;
    font-size: 12px;
}

.statement-table th[b-ut39zxjw3e],
.statement-table td[b-ut39zxjw3e] {
    padding: 8px 10px;
    border: 1px solid #cfd6de;
    text-align: left;
}

.statement-table thead th[b-ut39zxjw3e] {
    background: #f1f5f9;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #374151;
}

/* Money right-aligned so a column of amounts can be read down and checked. */
.statement-amount[b-ut39zxjw3e] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.statement-table tfoot td[b-ut39zxjw3e] {
    font-weight: 700;
    background: #f8fafc;
}

.statement-table tfoot .statement-total td[b-ut39zxjw3e] {
    border-top: 2px solid #111827;
}

/* The figure the payor is being asked for. The heaviest thing on the sheet, deliberately. */
.statement-table tfoot .statement-balance td[b-ut39zxjw3e] {
    font-size: 13.5px;
    font-weight: 800;
    background: #eef3f8;
}

.statement-note[b-ut39zxjw3e] {
    margin: 0 0 18px;
    font-size: 11.5px;
    color: #4b5563;
}

/* The summary carries eight columns, so it is set tighter than a single payor's sheet and the two identifying
   columns are allowed to take the slack. */
.statement-summary-table[b-ut39zxjw3e] {
    font-size: 11px;
}

.statement-summary-table th[b-ut39zxjw3e],
.statement-summary-table td[b-ut39zxjw3e] {
    padding: 6px 8px;
}

.statement-summary-table td:nth-child(2)[b-ut39zxjw3e] {
    font-weight: 700;
}

@media print {
    /* A statement is a portrait document: one payor's charges, or a register of them, read down a page. print.css
       binds every .print-report-sheet to its `report-landscape` page because a facility report's wide multi-column
       grids need the width - but a statement does not, and inheriting that was what made Landscape look wrong and
       Portrait impossible to get back to. Naming its own page settles the orientation for good, so the sheet prints
       the same shape whatever the dialog is set to. Scoped, so it outranks print.css's assignment. */
    .statement-sheet[b-ut39zxjw3e] {
        page: statement-page;
    }

    /* One statement per page. Each is handed to a different payor, so two on a sheet would have to be cut apart -
       and the last one must NOT force a trailing blank page, which is what :not(:last-child) is for. */
    .statement-sheet[b-ut39zxjw3e] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .statement-sheet:not(:last-child)[b-ut39zxjw3e] {
        break-after: page;
        page-break-after: always;
    }

    .statement-sheet + .statement-sheet[b-ut39zxjw3e] {
        margin-top: 0 !important;
    }

    /* A table that splits across a page break loses its heading, so the reader cannot tell which column is which. */
    .statement-table[b-ut39zxjw3e] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-ut39zxjw3e] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-ut39zxjw3e]::before,
    .rpt-topbar[b-ut39zxjw3e]::after {
        display: none;
    }

.rpt-back-btn[b-ut39zxjw3e] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-ut39zxjw3e] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-ut39zxjw3e] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-ut39zxjw3e] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-ut39zxjw3e] {
    color: var(--text-tertiary);
}

.rpt-title[b-ut39zxjw3e] {
    color: var(--navy);
}

.rpt-subtitle[b-ut39zxjw3e] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-ut39zxjw3e] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-ut39zxjw3e] {
    background: var(--accent);
}

.rpt-action-btn[b-ut39zxjw3e] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-ut39zxjw3e] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-ut39zxjw3e] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-ut39zxjw3e],
.rpt-document-tab.active[b-ut39zxjw3e],
.utility-section-tab.active[b-ut39zxjw3e] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-ut39zxjw3e],
.rpt-document-tab:hover:not(.active)[b-ut39zxjw3e],
.utility-section-tab:hover:not(.active)[b-ut39zxjw3e] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-ut39zxjw3e],
.rpt-action-btn:focus-visible[b-ut39zxjw3e],
.rpt-period-tab:focus-visible[b-ut39zxjw3e],
.rpt-document-tab:focus-visible[b-ut39zxjw3e] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.utility-hero[b-ut39zxjw3e] {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--navy);
}

    .utility-hero h2[b-ut39zxjw3e] {
        color: var(--navy);
    }

/* Related utilities (V3): context line under the heading, and the historical-evidence note in the history drawer. */
.utility-context-note[b-ut39zxjw3e] {
    margin: 6px 0 0;
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.utility-context-note a[b-ut39zxjw3e] {
    color: var(--accent);
    font-weight: 600;
}

.utility-hist-note[b-ut39zxjw3e] {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-left: 3px solid var(--gold);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
}
/* /Components/Pages/Reports/OfficeCollectionsPanel.razor.rz.scp.css */
.oo[b-n2p3bgf7br] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.oo-title[b-n2p3bgf7br] { margin: 0; font-size: 18px; font-weight: 700; color: var(--navy); }
.oo-sub[b-n2p3bgf7br] { margin: 4px 0 0; font-size: 13px; color: var(--text-subtle); max-width: 62ch; }
.oo-form[b-n2p3bgf7br] { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.oo-field[b-n2p3bgf7br] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-subtle); }
.oo-input[b-n2p3bgf7br] { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; min-height: 40px; font: inherit; font-size: 14px; color: var(--navy); background: var(--bg-card); min-width: 220px; }
.oo-input:focus-visible[b-n2p3bgf7br], .oo-link:focus-visible[b-n2p3bgf7br], .oo-btn:focus-visible[b-n2p3bgf7br] { outline: 2px solid var(--accent); outline-offset: 2px; }
.oo-link[b-n2p3bgf7br] { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.oo-link:hover[b-n2p3bgf7br] { filter: brightness(.94); }
.oo-warn[b-n2p3bgf7br] { margin: 0; padding: 10px 12px; border-left: 3px solid var(--text-muted); background: var(--bg); font-size: 13px; color: var(--text-subtle); }
.oo-note[b-n2p3bgf7br] { margin: 0; font-size: 13px; color: var(--text-subtle); }
.oo-error[b-n2p3bgf7br] { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--red-bg); color: var(--red); font-size: 13px; }
.oo-btn[b-n2p3bgf7br] { border: 1px solid var(--border); background: var(--bg-card); color: var(--navy); border-radius: 8px; padding: 8px 14px; min-height: 40px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.oo-scroll[b-n2p3bgf7br] { overflow-x: auto; }
.oo-table[b-n2p3bgf7br] { width: 100%; border-collapse: collapse; font-size: 13px; }
.oo-cap[b-n2p3bgf7br] { text-align: left; font-weight: 600; color: var(--navy); padding-bottom: 8px; }
.oo-table th[b-n2p3bgf7br] { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.oo-table td[b-n2p3bgf7br] { padding: 10px; border-bottom: 1px solid var(--border); color: var(--navy); }
.oo-num[b-n2p3bgf7br] { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .oo[b-n2p3bgf7br] { padding: 14px; }
    .oo-input[b-n2p3bgf7br] { min-width: 0; width: 100%; }
    .oo-field[b-n2p3bgf7br] { width: 100%; }
}
/* /Components/Pages/Reports/OfficialMonthlyIncome.razor.rz.scp.css */
/* Official Monthly Income — a document on the V3 workspace: a thin action bar, then the sheet at the workspace width. */
.omi-page[b-7d8jefqlxr] {
    gap: 16px;
}

.omi-actions[b-7d8jefqlxr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.omi-back[b-7d8jefqlxr] {
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

    .omi-back:hover[b-7d8jefqlxr] {
        text-decoration: underline;
    }

    .omi-back:focus-visible[b-7d8jefqlxr] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: 4px;
    }

.omi-actions-right[b-7d8jefqlxr] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.omi-print[b-7d8jefqlxr] {
    min-height: 40px;
}

.omi-state[b-7d8jefqlxr] {
    color: var(--text-secondary);
}

.omi-review[b-7d8jefqlxr] {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.omi-sheet[b-7d8jefqlxr] {
    padding: 28px 28px 24px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.omi-sheet + .omi-sheet[b-7d8jefqlxr] { margin-top: 20px; }

/* Letterhead, as on the office sheet: seal, the three government lines, the Bagong Pilipinas mark — one centred row. */
.omi-head[b-7d8jefqlxr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.omi-seal[b-7d8jefqlxr],
.omi-bp[b-7d8jefqlxr] {
    width: 72px;
    height: 72px;
    flex: none;
    object-fit: contain;
}

.omi-head-text[b-7d8jefqlxr] {
    text-align: center;
}

.omi-head-text p[b-7d8jefqlxr] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text);
}

.omi-head-text .omi-muni[b-7d8jefqlxr] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.omi-office[b-7d8jefqlxr] {
    margin: 12px 0 18px;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy);
}

.omi-scroll[b-7d8jefqlxr] {
    overflow-x: auto;
}

    .omi-scroll:focus-visible[b-7d8jefqlxr] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.omi-table[b-7d8jefqlxr] {
    width: 100%;
    min-width: 1240px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.75rem;
    color: var(--text);
}

/* Identical column proportions on both preview sheets; paper widths below use the same proportions. */
.omi-col-line[b-7d8jefqlxr] { width: 20.13%; }
.omi-col-wide[b-7d8jefqlxr] { width: 6.34%; }
.omi-col-month[b-7d8jefqlxr] { width: 5.26%; }
.omi-col-pct[b-7d8jefqlxr] { width: 4.07%; }

    /* Separate borders (right and bottom per cell) so the sticky line column keeps its rule while scrolling. */
    .omi-table th[b-7d8jefqlxr],
    .omi-table td[b-7d8jefqlxr] {
        padding: 5px 7px;
        border-right: 1px solid var(--border-strong);
        border-bottom: 1px solid var(--border-strong);
    }

    .omi-table tr > :first-child[b-7d8jefqlxr] {
        border-left: 1px solid var(--border-strong);
    }

    .omi-table thead th[b-7d8jefqlxr] {
        border-top: 1px solid var(--border-strong);
    }

    .omi-table thead th[b-7d8jefqlxr] {
        background: var(--surface-muted);
        font-size: 0.71875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--navy);
        line-height: 1.25;
        text-align: center;
        vertical-align: middle;
    }

/* The line column stays in view while the months scroll on a narrower screen. */
.omi-line[b-7d8jefqlxr] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 220px;
    background: var(--surface);
    text-align: left;
    font-weight: 500;
}

.omi-table thead .omi-line[b-7d8jefqlxr] {
    z-index: 2;
    background: var(--surface-muted);
    text-align: left;
}

.omi-grand .omi-line[b-7d8jefqlxr] {
    background: var(--surface-muted);
}

.omi-num[b-7d8jefqlxr] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.omi-letter[b-7d8jefqlxr] {
    display: inline-block;
    min-width: 1.4em;
    color: var(--text-secondary);
}

.omi-section th[b-7d8jefqlxr],
.omi-group th[b-7d8jefqlxr] {
    position: sticky;
    left: 0;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--navy);
    background: var(--surface);
}

.omi-section th[b-7d8jefqlxr] {
    font-size: 0.75rem;
}

.omi-group th[b-7d8jefqlxr] {
    padding-left: 14px;
    background: var(--surface-muted);
}

.omi-zero[b-7d8jefqlxr] {
    color: var(--text-tertiary);
}

.omi-total-col[b-7d8jefqlxr] {
    font-weight: 700;
}

.omi-unplaced th[b-7d8jefqlxr],
.omi-unplaced td[b-7d8jefqlxr] {
    font-style: italic;
}

.omi-grand th[b-7d8jefqlxr],
.omi-grand td[b-7d8jefqlxr] {
    border-top: 1px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    font-weight: 700;
    background: var(--surface-muted);
}

/* Paper: A4 landscape via the print helper (body padding 10 mm × 12 mm leaves 273 × 190 mm). Section A is the first
   sheet; Terminal, Slaughterhouse, the overall total and configured signatories share the intentional continuation sheet.
   A slim letterhead, month columns sized to their amounts, and compact rows preserve room for the closing signatures. The
   type stays at a legible 7 pt (6 pt column headings). Column widths sum to 268.2 mm, inside the printable line. */
@media print {
    .omi-page[b-7d8jefqlxr] {
        gap: 0;
        padding: 0;
    }

    .omi-sheet[b-7d8jefqlxr] {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .omi-sheet + .omi-sheet[b-7d8jefqlxr] { margin-top: 0; }

    /* Page 2 is an intentional continuation sheet. Give it its own printable top inset instead of letting
       the continuation table sit directly on the page boundary. The short B/C closing block still fits
       comfortably with the signatories on the same A4 landscape page. */
    .omi-continuation[b-7d8jefqlxr] {
        box-sizing: border-box;
        padding-top: 6mm;
        break-before: page;
        page-break-before: always;
        break-inside: avoid;
    }

    .omi-head[b-7d8jefqlxr] {
        gap: 4mm;
    }

    .omi-seal[b-7d8jefqlxr],
    .omi-bp[b-7d8jefqlxr] {
        width: 14mm;
        height: 14mm;
    }

    .omi-head-text p[b-7d8jefqlxr] {
        font-size: 8.5pt;
        line-height: 1.25;
    }

    .omi-office[b-7d8jefqlxr] {
        margin: 1.5mm 0 2.5mm;
        font-size: 10pt;
    }

    .omi-scroll[b-7d8jefqlxr] {
        overflow: visible;
    }

    .omi-table[b-7d8jefqlxr] {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
        font-size: 7pt;
        line-height: 1.25;
    }

        .omi-table th[b-7d8jefqlxr],
        .omi-table td[b-7d8jefqlxr] {
            padding: 0.9mm 0.7mm;
            overflow: hidden;
        }

        .omi-table thead th[b-7d8jefqlxr] {
            padding: 1mm 0.5mm;
            font-size: 6pt;
            letter-spacing: 0;
            white-space: normal;
        }

        .omi-table thead[b-7d8jefqlxr] {
            display: table-header-group;
        }

        .omi-table tr[b-7d8jefqlxr],
        .omi-grand[b-7d8jefqlxr] {
            break-inside: avoid;
        }

    .omi-section th[b-7d8jefqlxr] {
        font-size: 7pt;
    }

    .omi-col-line[b-7d8jefqlxr] { width: 54mm; }
    .omi-col-wide[b-7d8jefqlxr] { width: 17mm; }
    .omi-col-month[b-7d8jefqlxr] { width: 14.1mm; }
    .omi-col-pct[b-7d8jefqlxr] { width: 11mm; }

    .omi-line[b-7d8jefqlxr],
    .omi-section th[b-7d8jefqlxr],
    .omi-group th[b-7d8jefqlxr] {
        position: static;
        min-width: 0;
    }

    .omi-group th[b-7d8jefqlxr] {
        padding-left: 1.6mm;
    }

    .omi-group th[b-7d8jefqlxr],
    .omi-grand th[b-7d8jefqlxr],
    .omi-grand td[b-7d8jefqlxr],
    .omi-table thead th[b-7d8jefqlxr] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* The office's signatories close the statement; Prepared by / Certified Correct are the Head's own settings. */
.omi-sign[b-7d8jefqlxr] { margin-top: 28px; break-inside: avoid; }

@media print {
    /* The office sheet leaves a clear signing band after the closing total; captions begin that band,
       followed by open signature space and the configured names/titles. */
    .omi-sign[b-7d8jefqlxr] { margin-top: 8mm; }
}
/* /Components/Pages/Reports/OfficialMonthlyIncomePanel.razor.rz.scp.css */
/* Official Monthly Income — the office sheet as a digital statement. Formal document heading, lettered office rows under
   group bands, Annual Target / months / Total / % columns, sticky header and first column, tabular figures. Tokens only. */

.mi[b-f081j1rtge] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

/* ── Document heading ── */
.mi-doc[b-f081j1rtge] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--navy);
    border-radius: 10px 10px 0 0;
    background: var(--surface);
}

.mi-doc-office[b-f081j1rtge] {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mi-doc-title[b-f081j1rtge] {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.mi-doc-period[b-f081j1rtge] {
    margin: 2px 0 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.mi-doc-tools[b-f081j1rtge] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mi-doc-generated[b-f081j1rtge] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.mi-state[b-f081j1rtge] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* ── Statement table ── */
.mi-scroll[b-f081j1rtge] {
    max-height: calc(100vh - 220px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
    background: var(--surface);
}

.mi-table[b-f081j1rtge] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.mi-table th[b-f081j1rtge],
.mi-table td[b-f081j1rtge] {
    height: 40px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

/* Month columns read as a sheet: a hairline between each figure column. */
.mi-annual .mi-table td + td[b-f081j1rtge],
.mi-annual .mi-table th + th[b-f081j1rtge],
.mi-annual .mi-table th + td[b-f081j1rtge] {
    border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.mi-table thead th[b-f081j1rtge] {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 44px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: right;
}

.mi-table .mi-line[b-f081j1rtge] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 260px;
    background: var(--surface);
    text-align: left;
    font-weight: 500;
    border-right: 1px solid var(--border);
}

.mi-table thead th.mi-line[b-f081j1rtge] {
    z-index: 3;
    background: var(--surface-muted);
    color: var(--navy);
}

.mi-letter[b-f081j1rtge] {
    display: inline-block;
    min-width: 1.4em;
    color: var(--text-tertiary);
    font-weight: 500;
}

.mi-num[b-f081j1rtge] {
    text-align: right;
}

.mi-target[b-f081j1rtge],
.mi-pct[b-f081j1rtge] {
    color: var(--text-secondary);
}

.mi-ytd[b-f081j1rtge] {
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 3%, var(--surface));
}

.mi-table thead th.mi-ytd[b-f081j1rtge] {
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-muted));
    color: var(--navy);
}

.mi-recon-col[b-f081j1rtge] {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Group bands: report section headings, not cards. */
.mi-group th[b-f081j1rtge] {
    height: 34px;
    position: sticky;
    left: 0;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-muted));
    border-top: 1px solid var(--border-strong);
    color: var(--navy);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
}

.mi-pending .mi-group th[b-f081j1rtge] {
    background: color-mix(in srgb, var(--gold) 10%, var(--surface));
    color: var(--text-secondary);
}

.mi-subtotal th[b-f081j1rtge],
.mi-subtotal td[b-f081j1rtge] {
    height: 38px;
    font-weight: 600;
    background: var(--surface-muted);
    border-top: 1px solid var(--border-strong);
    color: var(--navy);
}

.mi-subtotal th.mi-line[b-f081j1rtge] {
    background: var(--surface-muted);
    font-size: 0.75rem;
}

.mi-total th[b-f081j1rtge],
.mi-total td[b-f081j1rtge] {
    height: 46px;
    font-weight: 700;
    background: var(--navy);
    color: var(--surface);
    border-bottom: 0;
}

.mi-total th.mi-line[b-f081j1rtge] {
    background: var(--navy);
    letter-spacing: 0.04em;
}

.mi-total .mi-ytd[b-f081j1rtge] {
    background: var(--navy);
}

.mi-tag[b-f081j1rtge] {
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.mi-notes[b-f081j1rtge] {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Reconciliation: a quiet secondary control below the statement. */
.mi-recon[b-f081j1rtge] {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 0.8125rem;
}

.mi-recon summary[b-f081j1rtge] {
    padding: 10px 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.mi-recon[open] summary[b-f081j1rtge] {
    border-bottom: 1px solid var(--border);
}

.mi-recon .mi-check[b-f081j1rtge],
.mi-recon p[b-f081j1rtge] {
    margin: 10px 14px;
}

.mi-check[b-f081j1rtge] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
}

.mi-recon p[b-f081j1rtge] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.5;
}

.mi-print-head[b-f081j1rtge] {
    display: none;
}

/* ── Print: the letterhead, the full statement, totals and notes; no screen controls. ── */
@media print {
    .mi-print-head[b-f081j1rtge] {
        display: block;
    }

    .mi-doc[b-f081j1rtge] {
        border: 0;
        padding: 0;
    }

    .mi-doc-office[b-f081j1rtge],
    .mi-doc-title[b-f081j1rtge] {
        display: none;
    }

    .mi-scroll[b-f081j1rtge] {
        max-height: none;
        overflow: visible;
        border: 1px solid #000;
        border-radius: 0;
    }

    .mi-table[b-f081j1rtge] {
        font-size: 7.5pt;
    }

    .mi-table th[b-f081j1rtge],
    .mi-table td[b-f081j1rtge] {
        height: auto;
        padding: 3px 5px;
        border-bottom: 1px solid #999;
    }

    .mi-table thead th[b-f081j1rtge],
    .mi-table .mi-line[b-f081j1rtge],
    .mi-group th[b-f081j1rtge] {
        position: static;
    }

    .mi-total th[b-f081j1rtge],
    .mi-total td[b-f081j1rtge],
    .mi-total th.mi-line[b-f081j1rtge],
    .mi-total .mi-ytd[b-f081j1rtge] {
        background: #fff;
        color: #000;
        border-top: 2px solid #000;
    }

    .mi-table .mi-line[b-f081j1rtge] {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mi-recon summary[b-f081j1rtge] {
        transition: none;
    }
}

/* An adjusted official amount keeps one quiet marker; the audit lives in the adjustment drawer, not in the table. */
.mi-adj[b-f081j1rtge] { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.mi-adjust[b-f081j1rtge] { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 4px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-subtle); cursor: pointer; opacity: 0; }
.mi-adjust svg[b-f081j1rtge] { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
tr:hover .mi-adjust[b-f081j1rtge], .mi-adjust:focus-visible[b-f081j1rtge] { opacity: 1; }
.mi-adjust:hover[b-f081j1rtge] { background: var(--surface-hover); color: var(--accent); }
.mi-adjust:focus-visible[b-f081j1rtge] { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .mi-adjust[b-f081j1rtge] { opacity: 1; } }
/* /Components/Pages/Reports/PastFollowUpQueue.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Follow-up History — a clone of the live queue (hero summary, filter bar, slim
   urgency sections) for a past period. Reuses app tokens + global chrome.
   ══════════════════════════════════════════════════════════════════════════ */

.fh-back[b-pf0bmo1ynv] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--navy);
    text-decoration: none; flex-shrink: 0;
}
.fh-back:hover[b-pf0bmo1ynv] { background: var(--bg-icon); }
.fh-back svg[b-pf0bmo1ynv] { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Hero + KPI stat strip ── */

/* ── Filter bar (mirrors the live queue) ── */
.fh-filterbar[b-pf0bmo1ynv] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.fh-reasonrow[b-pf0bmo1ynv] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fh-toolrow[b-pf0bmo1ynv] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fh-filters[b-pf0bmo1ynv] {
    /* One row, always. Ten reason chips wrapped onto a second line as soon as "Closed" appeared, which broke the
       filter bar into two uneven bands and pushed the table down. They scroll sideways instead if the viewport is
       genuinely too narrow, so the structure stays the same whatever is on screen. */
    display: inline-flex; flex-wrap: nowrap; gap: 5px; align-items: center;
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 10px; padding: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}
.fh-chip[b-pf0bmo1ynv] {
    flex: 0 0 auto; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 34px; padding: 6px 13px; border-radius: 7px;
    border: 1px solid transparent; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 650; letter-spacing: .2px; line-height: 1;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.fh-chip:hover:not(:disabled)[b-pf0bmo1ynv] { color: var(--navy); }
.fh-chip:disabled[b-pf0bmo1ynv] { opacity: .42; cursor: not-allowed; }
.fh-chip-count[b-pf0bmo1ynv] { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--bg-icon); color: var(--text-subtle); font-size: 10.5px; font-weight: 800; text-align: center; }
.fh-chip-active[b-pf0bmo1ynv], .fh-chip-active:hover[b-pf0bmo1ynv] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 13px rgba(9, 31, 52, .14);
}
.fh-chip-active .fh-chip-count[b-pf0bmo1ynv] { background: rgba(255, 255, 255, .22); color: #fff; }
.fh-search[b-pf0bmo1ynv] {
    display: flex; align-items: center; gap: 9px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    height: 42px; padding: 0 14px; flex: 1 1 auto; min-width: 0;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.fh-search:focus-within[b-pf0bmo1ynv] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 168, 75, .15); }
.fh-search svg[b-pf0bmo1ynv] { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.fh-search input[b-pf0bmo1ynv] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--navy); }
.fh-search input[b-pf0bmo1ynv]::placeholder { color: var(--text-muted); }
.fh-search input[b-pf0bmo1ynv]::-webkit-search-cancel-button { display: none; }
.fh-search-clear[b-pf0bmo1ynv] { border: none; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.fh-search-clear:hover[b-pf0bmo1ynv] { color: var(--navy); }

/* Year / month picker — custom dropdowns, in line with the reason chips (no gap) */
.fh-period-select[b-pf0bmo1ynv] { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.fh-dd[b-pf0bmo1ynv] { position: relative; }

.fh-dd-trigger[b-pf0bmo1ynv] {
    display: inline-flex; align-items: center; gap: 10px;
    height: 42px; padding: 0 12px 0 14px; cursor: pointer; user-select: none;
    background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 10px;
    font: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.fh-dd-trigger:hover[b-pf0bmo1ynv] { border-color: var(--accent); }
.fh-dd-trigger.open[b-pf0bmo1ynv] { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13, 33, 55, .07); }
.fh-dd-body[b-pf0bmo1ynv] { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.fh-dd-cap[b-pf0bmo1ynv] { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); line-height: 1; }
.fh-dd-val[b-pf0bmo1ynv] { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.25; margin-top: 2px; white-space: nowrap; }
.fh-dd-chevron[b-pf0bmo1ynv] { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; transition: transform .2s ease; }
.fh-dd-trigger.open .fh-dd-chevron[b-pf0bmo1ynv] { transform: rotate(180deg); }

.fh-dd-backdrop[b-pf0bmo1ynv] { position: fixed; inset: 0; z-index: 299; }
.fh-dd-menu[b-pf0bmo1ynv] {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 300;
    min-width: 180px; max-height: 320px; overflow-y: auto;
    background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px;
    box-shadow: 0 8px 32px rgba(13, 33, 55, .14); padding-bottom: 6px;
    animation: fh-dd-in-b-pf0bmo1ynv .15s ease;
}
.fh-dd-menu-right[b-pf0bmo1ynv] { left: auto; right: 0; }
@keyframes fh-dd-in-b-pf0bmo1ynv { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.fh-dd-header[b-pf0bmo1ynv] { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); padding: 10px 14px 6px; }
.fh-dd-item[b-pf0bmo1ynv] { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; transition: background .12s; }
.fh-dd-item:hover[b-pf0bmo1ynv] { background: var(--bg); }
.fh-dd-item.active[b-pf0bmo1ynv] { background: rgba(13, 33, 55, .04); }
.fh-dd-name[b-pf0bmo1ynv] { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); font-weight: 500; white-space: nowrap; }
.fh-dd-item.active .fh-dd-name[b-pf0bmo1ynv] { font-weight: 700; color: var(--navy); }
.fh-dd-count[b-pf0bmo1ynv] { min-width: 18px; padding: 1px 7px; border-radius: 999px; background: var(--bg-icon); color: var(--text-subtle); font-size: 11px; font-weight: 800; text-align: center; flex-shrink: 0; }
.fh-dd-check[b-pf0bmo1ynv] { width: 14px; height: 14px; stroke: var(--navy); flex-shrink: 0; }

@media screen and (max-width: 720px) {
    .fh-period-select[b-pf0bmo1ynv] { width: 100%; }
    .fh-dd[b-pf0bmo1ynv] { flex: 1 1 0; }
    .fh-dd-trigger[b-pf0bmo1ynv] { width: 100%; }
}

/* ── Slim urgency sections (same as the live queue) ── */
.fh-section[b-pf0bmo1ynv] { margin-bottom: 22px; }
.fh-sec-head[b-pf0bmo1ynv] { display: flex; align-items: center; gap: 14px; padding: 4px 2px 12px; }
.fh-sec-rail[b-pf0bmo1ynv] { width: 4px; align-self: stretch; min-height: 36px; border-radius: 999px; background: #cdd6df; flex-shrink: 0; }
.fh-sec-critical .fh-sec-rail[b-pf0bmo1ynv] { background: var(--red); }
.fh-sec-high .fh-sec-rail[b-pf0bmo1ynv] { background: var(--gold); }
.fh-sec-review .fh-sec-rail[b-pf0bmo1ynv] { background: #1a7ab5; }
.fh-sec-normal .fh-sec-rail[b-pf0bmo1ynv] { background: var(--text-muted); }
.fh-sec-count[b-pf0bmo1ynv] { font-size: 20px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; min-width: 22px; text-align: center; line-height: 1; }
.fh-sec-info[b-pf0bmo1ynv] { min-width: 0; }
.fh-sec-title[b-pf0bmo1ynv] { font-size: 14px; font-weight: 750; color: var(--navy); letter-spacing: .2px; }
.fh-sec-sub[b-pf0bmo1ynv] { font-size: 11.5px; color: var(--text-subtle); margin-top: 2px; }

/* ── Table (centered, like the live queue) ── */
.fh-table-wrap[b-pf0bmo1ynv] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.fh-table[b-pf0bmo1ynv] { width: 100%; border-collapse: collapse; font-size: 13px; }
.fh-table thead th[b-pf0bmo1ynv] {
    text-align: center; white-space: nowrap;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-subtle); background: var(--bg);
    padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.fh-table td[b-pf0bmo1ynv] { padding: 11px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align: middle; text-align: center; color: var(--text); }
.fh-table tbody tr:last-child td[b-pf0bmo1ynv] { border-bottom: none; }
.fh-table tbody tr:hover[b-pf0bmo1ynv] { background: var(--bg); }

/* Leading-edge priority rail on each row (same as the live queue) */
.fh-row td:first-child[b-pf0bmo1ynv] { border-left: 3px solid transparent; }
.fh-row.fh-pri-critical td:first-child[b-pf0bmo1ynv] { border-left-color: var(--red); }
.fh-row.fh-pri-high td:first-child[b-pf0bmo1ynv] { border-left-color: var(--gold); }
.fh-row.fh-pri-review td:first-child[b-pf0bmo1ynv] { border-left-color: var(--green); }
.fh-row.fh-pri-normal td:first-child[b-pf0bmo1ynv] { border-left-color: #cdd6df; }

/* Reason badge — priority-coloured, same as the live queue */
.fh-reason[b-pf0bmo1ynv] { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.fh-rb-critical[b-pf0bmo1ynv] { background: var(--red-bg); color: var(--red); }
.fh-rb-high[b-pf0bmo1ynv] { background: rgba(200, 168, 75, .16); color: #8a6d1b; }
.fh-rb-review[b-pf0bmo1ynv] { background: var(--green-bg); color: var(--green); }
.fh-rb-normal[b-pf0bmo1ynv] { background: var(--bg-icon); color: var(--text-subtle); }

.fh-person[b-pf0bmo1ynv] { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.fh-period[b-pf0bmo1ynv] { font-size: 13px; color: var(--text); white-space: nowrap; }
.fh-note[b-pf0bmo1ynv] { font-size: 13px; color: var(--text); }
.fh-sub[b-pf0bmo1ynv] { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.fh-muted[b-pf0bmo1ynv] { color: var(--text-muted); white-space: nowrap; }

/* Amount — bold, tabular, same weight as the live queue */
.fh-amount[b-pf0bmo1ynv] { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--navy); white-space: nowrap; }
.fh-amount-muted[b-pf0bmo1ynv] { color: var(--text-muted); font-size: 13px; font-weight: 700; }

/* Action — minimal link, same as the live queue */
.fh-action-cell[b-pf0bmo1ynv] { display: inline-flex; align-items: center; gap: 12px; }
.fh-action[b-pf0bmo1ynv] { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--navy); text-decoration: none; white-space: nowrap; }
.fh-action:hover[b-pf0bmo1ynv] { color: #8a6d1b; }
.fh-action-btn[b-pf0bmo1ynv] { background: none; border: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; }
.fh-action-arrow[b-pf0bmo1ynv] { font-size: 13px; transition: transform .14s ease; }
.fh-action:hover .fh-action-arrow[b-pf0bmo1ynv] { transform: translateX(2px); }

/* Loading / error states */
.fh-retry[b-pf0bmo1ynv] { margin-left: 10px; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; }
.fh-retry:hover[b-pf0bmo1ynv] { background: var(--accent-hover); }

/* Empty period */
.fh-empty[b-pf0bmo1ynv] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    text-align: center; padding: 48px 20px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
}
.fh-empty-icon[b-pf0bmo1ynv] { width: 48px; height: 48px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: flex; align-items: center; justify-content: center; }
.fh-empty-icon svg[b-pf0bmo1ynv] { width: 24px; height: 24px; }
.fh-empty-title[b-pf0bmo1ynv] { font-size: 15px; font-weight: 800; color: var(--navy); }
.fh-empty-sub[b-pf0bmo1ynv] { font-size: 13px; color: var(--text-muted); }

/* ── Add-OR modal (ported from the live Follow-up Queue; scoped CSS does not cross components) ── */
.fq-modal-overlay[b-pf0bmo1ynv] {
    position: fixed;
    inset: 0;
    background: rgba(13, 33, 55, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}

.fq-modal[b-pf0bmo1ynv] {
    background: var(--bg-card);
    border-radius: 14px;
    width: 100%;
    max-width: 480px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(13, 33, 55, .28);
    overflow: hidden;
}

.fq-modal-head[b-pf0bmo1ynv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.fq-modal-title[b-pf0bmo1ynv] { font-size: 15px; font-weight: 800; color: var(--navy); }
.fq-modal-sub[b-pf0bmo1ynv] { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.fq-modal-x[b-pf0bmo1ynv] {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
}
.fq-modal-x:hover[b-pf0bmo1ynv] { color: var(--navy); }

.fq-modal-body[b-pf0bmo1ynv] { padding: 16px 18px; overflow-y: auto; }

.fq-modal-foot[b-pf0bmo1ynv] {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.fq-modal-done[b-pf0bmo1ynv] {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.fq-modal-done:hover[b-pf0bmo1ynv] { background: var(--accent-hover); }

.fq-or-state[b-pf0bmo1ynv] { padding: 18px 4px; text-align: center; color: var(--text-subtle); font-size: 13px; }
.fq-or-error[b-pf0bmo1ynv] { color: var(--red); }
.fq-or-note[b-pf0bmo1ynv] { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

.fq-or-list[b-pf0bmo1ynv] { display: flex; flex-direction: column; gap: 8px; }

.fq-or-row[b-pf0bmo1ynv] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
}
.fq-or-rowdone[b-pf0bmo1ynv] { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 30%, transparent); }

.fq-or-day[b-pf0bmo1ynv] { text-align: left; }
.fq-or-date[b-pf0bmo1ynv] { font-size: 13px; font-weight: 700; color: var(--text); }
.fq-or-amt[b-pf0bmo1ynv] { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.fq-or-input[b-pf0bmo1ynv] {
    width: 130px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fq-or-input:focus[b-pf0bmo1ynv] { outline: none; border-color: var(--accent); }

.fq-or-save[b-pf0bmo1ynv] {
    background: var(--gold);
    color: var(--navy);
    border: none;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.fq-or-save:hover:not(:disabled)[b-pf0bmo1ynv] { background: var(--gold-light, #e8cc76); }
.fq-or-save:disabled[b-pf0bmo1ynv] { opacity: .55; cursor: default; }

.fq-or-done[b-pf0bmo1ynv] { display: flex; align-items: center; gap: 6px; grid-column: 2 / 4; font-size: 12.5px; font-weight: 700; color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fq-or-check[b-pf0bmo1ynv] { font-size: 13px; }

/* Confirm-before-save (catches a mistyped OR) */
.fq-or-confirm[b-pf0bmo1ynv] { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fq-or-confirm-q[b-pf0bmo1ynv] { font-size: 12.5px; color: var(--text); margin-right: auto; }
.fq-or-confirm-q strong[b-pf0bmo1ynv] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--navy); }
.fq-or-confirm-yes[b-pf0bmo1ynv] {
    background: var(--green); color: #fff; border: none; border-radius: 7px;
    padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.fq-or-confirm-yes:hover:not(:disabled)[b-pf0bmo1ynv] { background: #25664f; }
.fq-or-confirm-yes:disabled[b-pf0bmo1ynv] { opacity: .6; cursor: default; }
.fq-or-confirm-no[b-pf0bmo1ynv] {
    background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 7px;
    padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.fq-or-confirm-no:hover:not(:disabled)[b-pf0bmo1ynv] { background: var(--bg-icon); }
.fq-or-confirm-no:disabled[b-pf0bmo1ynv] { opacity: .6; cursor: default; }

.fq-or-rowerr[b-pf0bmo1ynv] { grid-column: 1 / 4; font-size: 11.5px; color: var(--red); margin-top: 2px; }

/* ── Contextual loading skeleton (keeps hero + filter bar visible) ── */
.fh-loading[b-pf0bmo1ynv] { margin-top: 2px; }
.fh-loading-section[b-pf0bmo1ynv] { margin-bottom: 22px; }
.fh-loading-sec-info[b-pf0bmo1ynv] { min-width: 0; display: flex; flex-direction: column; }
.fh-loading[b-pf0bmo1ynv]  .fh-sk-gap { margin-top: 6px; }
.fh-table-skeleton[b-pf0bmo1ynv] { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }

/* NPM "one OR for several days" mode */
.fq-or-modes[b-pf0bmo1ynv] { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fq-or-mode[b-pf0bmo1ynv] { padding: 8px 10px; border: none; background: var(--bg-card); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-subtle); }
.fq-or-mode + .fq-or-mode[b-pf0bmo1ynv] { border-left: 1px solid var(--border); }
.fq-or-mode:hover:not(.on)[b-pf0bmo1ynv] { background: #f7fafc; color: var(--text); }
.fq-or-mode.on[b-pf0bmo1ynv] { background: var(--accent); color: #fff; }
.fq-or-mode:disabled[b-pf0bmo1ynv] { opacity: .6; cursor: default; }

.fq-or-rowpick[b-pf0bmo1ynv] { grid-template-columns: auto 1fr; cursor: pointer; }
.fq-or-pick[b-pf0bmo1ynv] { width: 16px; height: 16px; accent-color: var(--navy); }

.fq-or-multibar[b-pf0bmo1ynv] { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.fq-or-multiinfo[b-pf0bmo1ynv] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.fq-or-multicount[b-pf0bmo1ynv] { font-size: 12.5px; font-weight: 700; color: var(--text); }
.fq-or-multitotal[b-pf0bmo1ynv] { font-size: 13px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.fq-or-multirow[b-pf0bmo1ynv] { display: flex; gap: 8px; align-items: center; }
.fq-or-multirow .fq-or-input[b-pf0bmo1ynv] { flex: 1 1 auto; width: auto; }

/* The empty state's way back when a chip chosen for another period is hiding this period's rows: a plain inline
   action in the sub-line, so nothing on the page looks broken while the filter is doing its job. */
.fh-empty-link[b-pf0bmo1ynv] {
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--navy, #0b2239);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fh-empty-link:hover[b-pf0bmo1ynv] {
    color: var(--accent);
}

/* No visible scrollbar under the chip row - it would read as a broken control on a formal sheet. */
.fh-filters[b-pf0bmo1ynv]::-webkit-scrollbar { height: 0; }

/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */

/* /Components/Pages/Reports/ReportPeriodNav.razor.rz.scp.css */
/* Period navigator + grid picker (shared across facility reports). Mirrors the Month-End picker. */

/* Base nav chrome (the elements moved into this component, so it owns their styles). */
.rpt-date-nav[b-vvxiocuxl1] { display: flex; align-items: center; gap: 10px; }
.rpt-date-nav.utility-mode .rpt-current-period[b-vvxiocuxl1] { color: var(--accent); }
.rpt-nav-btn[b-vvxiocuxl1] {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .13s;
}
.rpt-nav-btn:hover[b-vvxiocuxl1] { background: var(--border); }
.rpt-nav-btn svg[b-vvxiocuxl1] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-vvxiocuxl1] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

.rpt-period-picker[b-vvxiocuxl1] { position: relative; display: inline-flex; }

.rpt-period-trigger[b-vvxiocuxl1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    min-height: 34px;
    padding: 5px 12px;
    cursor: pointer;
    font: inherit;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

    .rpt-period-trigger:hover[b-vvxiocuxl1] { border-color: var(--accent); background: var(--bg); }
    .rpt-period-trigger:focus-visible[b-vvxiocuxl1] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 168, 75, .15); }

.rpt-period-caret[b-vvxiocuxl1] {
    width: 14px; height: 14px;
    stroke: var(--text-muted); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .15s ease;
    flex-shrink: 0;
}

.rpt-period-trigger[aria-expanded="true"] .rpt-period-caret[b-vvxiocuxl1] { transform: rotate(180deg); }

.rpt-picker-backdrop[b-vvxiocuxl1] { position: fixed; inset: 0; z-index: 40; background: transparent; }

.rpt-picker[b-vvxiocuxl1] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 278px;
    max-width: calc(100vw - 32px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(9, 31, 52, .18);
    padding: 14px;
    animation: rpt-picker-in-b-vvxiocuxl1 .14s ease;
}

@keyframes rpt-picker-in-b-vvxiocuxl1 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rpt-picker.rpt-picker-left[b-vvxiocuxl1] { right: auto; left: 0; }

.rpt-picker-head[b-vvxiocuxl1] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rpt-picker-year[b-vvxiocuxl1] { font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: .3px; }
.rpt-picker-yr-btn[b-vvxiocuxl1] {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-card); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rpt-picker-yr-btn:hover[b-vvxiocuxl1] { background: var(--bg); }
.rpt-picker-yr-btn svg[b-vvxiocuxl1] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.rpt-picker-grid[b-vvxiocuxl1] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.rpt-picker-cell-wide[b-vvxiocuxl1] { grid-column: 1 / -1; }
.rpt-picker-cell[b-vvxiocuxl1] {
    padding: 10px 0; border-radius: 8px; border: 1px solid transparent; background: var(--bg);
    font-size: 12.5px; font-weight: 650; color: var(--navy); cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rpt-picker-cell:hover[b-vvxiocuxl1] { background: var(--bg-icon); }
.rpt-picker-cell.current[b-vvxiocuxl1] { border-color: var(--accent); color: #8a6d1b; }
.rpt-picker-cell.selected[b-vvxiocuxl1], .rpt-picker-cell.selected:hover[b-vvxiocuxl1] {
    background: var(--accent); color: #fff; border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 13px rgba(9, 31, 52, .16);
}

.rpt-picker-foot[b-vvxiocuxl1] { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; text-align: center; }
.rpt-picker-today[b-vvxiocuxl1] { background: transparent; border: none; color: #8a6d1b; font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 10px; border-radius: 6px; }
.rpt-picker-today:hover[b-vvxiocuxl1] { color: var(--navy); background: var(--bg); }
/* /Components/Pages/Reports/RevenueSourcePerformancePanel.razor.rz.scp.css */
/* Revenue source performance: a compact register with quiet group separators and aligned amounts. */
.rsp[b-yzw79tyi84] {
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

/* The source selector sits at the right edge of the header, level with the title block. */
.rsp-head[b-yzw79tyi84] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
}

.rsp-head > :first-child[b-yzw79tyi84] {
    min-width: 0;
}

.rsp-filter[b-yzw79tyi84] {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    min-width: 200px;
    margin-left: auto;
}

/* Keep long source labels readable in either use of the shared selector. */
.rsp-filter[b-yzw79tyi84]  .fh-dd-menu {
    width: max-content;
    min-width: max(100%, min(16rem, calc(100vw - 2rem)));
    max-width: min(20rem, calc(100vw - 2rem));
    box-sizing: border-box;
}

.rsp-filter[b-yzw79tyi84]  .fh-dd-menu .fh-dd-name {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.rsp-title[b-yzw79tyi84] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--navy);
}

.rsp-sub[b-yzw79tyi84] {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.rsp-state[b-yzw79tyi84] {
    margin: 0;
    padding: 18px 22px;
    color: var(--text-secondary);
}

.rsp-scroll[b-yzw79tyi84] {
    overflow-x: auto;
}

    .rsp-scroll:focus-visible[b-yzw79tyi84] {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

.rsp-table[b-yzw79tyi84] {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 0.8125rem;
    color: var(--text);
}

    .rsp-table thead th[b-yzw79tyi84] {
        padding: 10px 22px;
        background: var(--surface-muted);
        border-bottom: 1px solid var(--border);
        text-align: left;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .rsp-table td[b-yzw79tyi84],
    .rsp-table tbody th[b-yzw79tyi84],
    .rsp-table tfoot th[b-yzw79tyi84] {
        padding: 10px 22px;
        border-bottom: 1px solid var(--border);
        text-align: left;
        vertical-align: middle;
    }

.rsp-num[b-yzw79tyi84] {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rsp-group th[b-yzw79tyi84],
.rsp-group td[b-yzw79tyi84] {
    background: var(--surface-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy);
}

.rsp-source[b-yzw79tyi84] {
    font-weight: 500;
}

.rsp-collected[b-yzw79tyi84] {
    font-weight: 700;
    color: var(--navy);
}

.rsp-attention[b-yzw79tyi84] {
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--text-tertiary);
}

    .rsp-attention.warn[b-yzw79tyi84] {
        color: var(--red);
        font-weight: 600;
    }

.rsp-total th[b-yzw79tyi84],
.rsp-total td[b-yzw79tyi84] {
    border-top: 2px solid var(--border-strong);
    border-bottom: 0;
    font-weight: 700;
    color: var(--navy);
}

@media (max-width: 720px) {
    .rsp-head[b-yzw79tyi84] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .rsp-filter[b-yzw79tyi84] {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Annual targets stay read-only on Overview; Reports retains its authorized edit action. */
.rsp-target[b-yzw79tyi84] { white-space: nowrap; }
.rsp-attain[b-yzw79tyi84] { display: block; font-size: 0.75rem; color: var(--text-subtle); }
.rsp-quiet[b-yzw79tyi84] { color: var(--text-muted); }
.rsp-target-btn[b-yzw79tyi84] { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-subtle); cursor: pointer; vertical-align: middle; }
.rsp-target-btn svg[b-yzw79tyi84] { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rsp-target-btn:hover[b-yzw79tyi84] { background: var(--surface-hover); color: var(--accent); }
.rsp-target-btn:focus-visible[b-yzw79tyi84] { outline: 2px solid var(--accent); outline-offset: 1px; }

.rsp-skeleton-copy[b-yzw79tyi84] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rsp-skeleton-copy[b-yzw79tyi84]  .skeleton {
    max-width: 100%;
}

.rsp-filter-skeleton[b-yzw79tyi84] {
    width: 200px;
}

.rsp-skeleton-table[b-yzw79tyi84]  .rsp-num > .skeleton {
    margin-left: auto;
}

.rsp-skeleton-target[b-yzw79tyi84] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

/* Hosted by the Dashboard: the title, the host's shortcuts and view switch, and the source selector share one compact header row
   (wrapping onto a second row only when the content width runs out), never a separate strip above the panel. */
.rsp-head-hosted[b-yzw79tyi84],
.rsp-skeleton-head[b-yzw79tyi84] {
    flex-wrap: wrap;
    row-gap: 10px;
}

.rsp-head-actions[b-yzw79tyi84] {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.rsp-head-hosted .rsp-filter[b-yzw79tyi84],
.rsp-skeleton-head .rsp-filter[b-yzw79tyi84] {
    margin-left: 0;
}

.rsp-head-hosted .rsp-head-copy[b-yzw79tyi84] { flex: 0 0 auto; }

.rsp-head-hosted .rsp-head-actions[b-yzw79tyi84] { justify-content: flex-start; }
.rsp-head-hosted .rsp-filter[b-yzw79tyi84] { margin-left: auto; }

@media (max-width: 768px) {
    /* Title on its own line (it may wrap), then the toolbar across the width, then the source selector. */
    .rsp-head-hosted .rsp-head-copy[b-yzw79tyi84], .rsp-head-hosted .rsp-head-actions[b-yzw79tyi84] { flex: 1 1 100%; }
    .rsp-head-hosted .rsp-filter[b-yzw79tyi84] { margin-left: 0; flex: 1 1 100%; justify-content: flex-start; }
}

/* Dashboard-hosted header: title left, controls right, one row where the content width allows. */
@media (min-width: 769px) {
    .rsp-head-hosted[b-yzw79tyi84] { column-gap: 12px; padding: 12px 16px; align-items: center; }
    .rsp-head-hosted .rsp-title[b-yzw79tyi84] { font-size: 1.0625rem; line-height: 1.25; white-space: nowrap; }
    .rsp-head-hosted .rsp-head-copy[b-yzw79tyi84] { flex: 0 0 auto; }
    .rsp-head-hosted .rsp-head-actions[b-yzw79tyi84] { flex: 1 1 auto; justify-content: flex-end; margin-left: auto; }
    .rsp-head-hosted .rsp-filter[b-yzw79tyi84] { flex: 0 0 auto; min-width: 0; margin-left: 0; }
}

/* Title takes the free space (pushing the controls to the right on one row); wrapped controls start at the left edge of their row. */
@media (min-width: 769px) {
    .rsp-head-hosted .rsp-head-copy[b-yzw79tyi84] { margin-right: auto; }
    .rsp-head-hosted .rsp-head-actions[b-yzw79tyi84] { flex: 0 1 auto; margin-left: 0; justify-content: flex-start; }
}

@media (min-width: 769px) and (max-width: 1559px) {
    .rsp-head-hosted[b-yzw79tyi84] { column-gap: 10px; padding-left: 14px; padding-right: 14px; }
}

/* The controls travel as one group: the source selector never drops to a row of its own away from the shortcuts.
   Outside the Dashboard the wrapper is transparent, so the Reports header lays out exactly as before. */
.rsp-head-controls[b-yzw79tyi84] { display: contents; }

@media (min-width: 769px) {
    .rsp-head-hosted .rsp-head-controls[b-yzw79tyi84] { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; min-width: 0; }
    .rsp-head-hosted .rsp-head-controls .rsp-head-actions[b-yzw79tyi84] { flex: 0 0 auto; margin: 0; }
}

@media (min-width: 1100px) {
    .rsp-head-hosted .rsp-head-controls[b-yzw79tyi84] { flex-wrap: nowrap; }
}

@media (max-width: 768px) {
    .rsp-head-hosted .rsp-head-controls[b-yzw79tyi84] { display: flex; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 8px; }
}
/* /Components/Pages/Reports/SlaughterhouseReport.razor.rz.scp.css */
/* ============================================================
   SlaughterhouseReport.razor.css
   Blazor CSS isolation — only applies to SlaughterhouseReport.razor
   ============================================================ */

/* ── Back Button ─────────────────────────────────────────── */
.slr-back-btn[b-tct5eop899] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

    .slr-back-btn:hover[b-tct5eop899] {
        background: var(--bg-icon);
        color: var(--navy);
        border-color: var(--navy);
    }

    .slr-back-btn svg[b-tct5eop899] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── Hero ────────────────────────────────────────────────── */
.slr-hero[b-tct5eop899] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 28px 32px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    flex-wrap: wrap;
}

    .slr-hero[b-tct5eop899]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
        pointer-events: none;
    }

.slr-hero-left[b-tct5eop899] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 260px;
}

.slr-hero-icon[b-tct5eop899] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .slr-hero-icon svg[b-tct5eop899] {
        width: 24px;
        height: 24px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.slr-hero-eyebrow[b-tct5eop899] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.slr-hero-title[b-tct5eop899] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.slr-hero-sub[b-tct5eop899] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.slr-hero-stats[b-tct5eop899] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.slr-hero-stat[b-tct5eop899] {
    padding: 0 24px;
    text-align: center;
}

    .slr-hero-stat:first-child[b-tct5eop899] {
        padding-left: 0;
    }

.slr-hero-val[b-tct5eop899] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.slr-hero-key[b-tct5eop899] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.slr-hero-divider[b-tct5eop899] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.slr-hero-progress[b-tct5eop899] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.slr-hero-progress-fill[b-tct5eop899] {
    height: 100%;
    background: linear-gradient(90deg,var(--gold),var(--gold-light));
    border-radius: 0 2px 2px 0;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.page-toolbar[b-tct5eop899] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar-left[b-tct5eop899] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-outline[b-tct5eop899] {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}

    .btn-outline:hover[b-tct5eop899] {
        border-color: var(--accent);
        background: #fffbf0;
        color: var(--navy);
    }

/* ── Document Panel ──────────────────────────────────────── */
.slr-doc-panel[b-tct5eop899] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
    margin-bottom: 24px;
}

/* ── Document Header ─────────────────────────────────────── */
.slr-doc-header[b-tct5eop899] {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #111827;
}

.slr-doc-logo[b-tct5eop899] {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 8px;
}

.slr-doc-republic[b-tct5eop899] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #374151;
}

.slr-doc-office[b-tct5eop899] {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.slr-doc-gov[b-tct5eop899] {
    margin-top: 2px;
    font-size: 12px;
    color: #4b5563;
    font-weight: 400;
}

.slr-doc-title[b-tct5eop899] {
    margin-top: 18px;
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.slr-doc-facility[b-tct5eop899] {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #b98f27;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* ── Section Block ───────────────────────────────────────── */
.slr-section-block[b-tct5eop899] {
    margin-bottom: 28px;
}

.slr-section-label-row[b-tct5eop899] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f6f9;
    border: 1px solid #cfd6de;
    border-bottom: none;
    border-radius: 0;
    padding: 9px 12px;
}

.slr-section-label[b-tct5eop899] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    color: #111827;
    text-transform: uppercase;
}

.slr-section-count[b-tct5eop899] {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Table — compact, no x-scroll ───────────────────────── */
.slr-table[b-tct5eop899] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #111827;
    border: 1px solid #cfd6de;
    border-top: none;
    table-layout: fixed;
}

    .slr-table thead tr[b-tct5eop899] {
        background: #f3f6f9;
    }

    .slr-table th[b-tct5eop899] {
        padding: 9px 10px;
        font-size: 11px;
        font-weight: 700;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom: 1px solid #cfd6de;
        border-right: 1px solid #cfd6de;
        text-align: center;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

        .slr-table th:last-child[b-tct5eop899] {
            border-right: none;
        }

.slr-table td[b-tct5eop899] {
    padding: 9px 10px;
    border-bottom: 1px solid #cfd6de;
    border-right: 1px solid #cfd6de;
    vertical-align: middle;
    line-height: 1.35;
    color: #111827;
    overflow-wrap: anywhere;
    word-break: normal;
}

    .slr-table td:last-child[b-tct5eop899] {
        border-right: none;
    }

.slr-table tbody tr:last-child td[b-tct5eop899] {
    border-bottom: none;
}

.slr-table tbody tr:hover[b-tct5eop899] {
    background: #f8fafc;
}

/* Column fixed widths */
.col-no[b-tct5eop899] {
    width: 32px;
}

.col-date[b-tct5eop899] {
    width: 80px;
}

.col-owner[b-tct5eop899] {
    width: 20%;
}

.col-animal[b-tct5eop899] {
    width: 12%;
}

.col-heads[b-tct5eop899] {
    width: 60px;
}

.col-rate[b-tct5eop899] {
    width: 90px;
}

.col-amount[b-tct5eop899] {
    width: 100px;
}

.col-or[b-tct5eop899] {
    width: 15%;
}

/* Cell alignment helpers */
.c[b-tct5eop899] {
    text-align: center;
}

.tl[b-tct5eop899] {
    text-align: left;
}

.r[b-tct5eop899] {
    text-align: right;
    font-family: 'Consolas',monospace;
}

.fw[b-tct5eop899] {
    font-weight: 500;
    color: var(--navy);
}

.mono[b-tct5eop899] {
    font-family: 'Consolas',monospace;
    font-size: 10.5px;
}

/* ── Table Footer (section totals) ──────────────────────── */
.tfoot-row[b-tct5eop899] {
    background: #f0f4f8;
}

.tfoot-label[b-tct5eop899] {
    padding: 8px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: right;
    border-top: 2px solid var(--border);
}

.tfoot-val[b-tct5eop899] {
    font-weight: 700;
    color: var(--navy);
    border-top: 2px solid var(--border);
    font-family: 'Consolas',monospace;
}

/* ── Grand Total ─────────────────────────────────────────── */
.slr-grand-total[b-tct5eop899] {
    margin-top: 8px;
    border: 2px solid var(--navy);
    border-radius: 10px;
    padding: 16px 20px;
    background: #f7f9fb;
}

.slr-grand-label[b-tct5eop899] {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}

.slr-grand-stats[b-tct5eop899] {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.slr-grand-val[b-tct5eop899] {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    font-family: 'Consolas',monospace;
}

.slr-grand-key[b-tct5eop899] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
    .admin-layout > :not(.admin-main)[b-tct5eop899] {
        display: none !important;
    }

    .admin-main[b-tct5eop899] {
        margin: 0 !important;
    }

    .topbar[b-tct5eop899], .page-toolbar[b-tct5eop899], .slr-hero[b-tct5eop899] {
        display: none !important;
    }

    .content-area[b-tct5eop899] {
        padding: 0 !important;
    }

    .slr-doc-panel[b-tct5eop899] {
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .slr-section-label-row[b-tct5eop899] {
        background: #f3f6f9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .slr-table[b-tct5eop899] {
        font-size: 11px;
    }

        .slr-table th[b-tct5eop899], .slr-table td[b-tct5eop899] {
            padding: 5px 5px;
        }

    .slr-section-block[b-tct5eop899] {
        page-break-inside: avoid;
    }
}

/* ══════════════════════════════════════════════════════════════
   CONTEXTUAL LOADING SKELETON (screen only — mirrors hero + doc panel)
   ══════════════════════════════════════════════════════════════ */
.slr-loading[b-tct5eop899] {
    margin-top: 4px;
}

.slr-loading[b-tct5eop899]  .slr-sk-center {
    margin-left: auto;
    margin-right: auto;
}

.slr-loading[b-tct5eop899]  .slr-sk-gap {
    margin-top: 8px;
}

/* Hero identity text column */
.slr-hero-sk-text[b-tct5eop899] {
    display: flex;
    flex-direction: column;
}

/* Toolbar/filter placeholder row */
.slr-loading-toolbar[b-tct5eop899] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Section table placeholder: bordered like the real table, evenly spaced rows */
.slr-table-skeleton[b-tct5eop899] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid #cfd6de;
    border-top: none;
}


/* ══════════════════════════════════════════════════════════════
   TOOLBAR SEGMENTED CONTROLS + "BY OWNER" ROSTER
   Appended as its own block so the document styles above are untouched.
   ══════════════════════════════════════════════════════════════ */

/* One quiet rail per decision — which animals to list, and how to arrange them. Mirrors the reports
   quick-links strip, so the two toolbars in this section of the portal read the same. */
.slr-seg[b-tct5eop899] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.slr-seg-item[b-tct5eop899] {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    padding: 0 12px;
    min-height: 32px;
    color: var(--text-subtle);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.slr-seg-item:hover[b-tct5eop899] {
    color: var(--navy);
    background: var(--bg-card);
}

.slr-seg-item:focus-visible[b-tct5eop899] {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

.slr-seg-item.active[b-tct5eop899] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Itemised animal lines under an owner's summary row: recessed, so the owner row stays the one that reads. */
.slr-subrow td[b-tct5eop899] {
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--text-subtle);
    font-size: 12px;
    background: var(--bg);
}

.slr-empty[b-tct5eop899] {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-subtle);
    font-size: 13px;
}

@media print {
    /* The toolbar is a screen control; the printed roster keeps only the document. */
    .slr-seg[b-tct5eop899] { display: none !important; }
    .slr-subrow td[b-tct5eop899] { background: transparent; }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.slr-hero[b-tct5eop899] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .slr-hero[b-tct5eop899]::before,
    .slr-hero[b-tct5eop899]::after {
        display: none;
    }

.slr-hero-icon[b-tct5eop899] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .slr-hero-icon svg[b-tct5eop899] {
        stroke: var(--navy) !important;
    }

.slr-hero-eyebrow[b-tct5eop899] {
    color: var(--text-tertiary);
}

.slr-hero-title[b-tct5eop899],
.slr-hero-val[b-tct5eop899] {
    color: var(--navy);
}

.slr-hero-val[b-tct5eop899] {
    font-variant-numeric: tabular-nums;
}

.slr-hero-sub[b-tct5eop899],
.slr-hero-sub2[b-tct5eop899] {
    color: var(--text-tertiary);
}

.slr-hero-key[b-tct5eop899] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.slr-hero-divider[b-tct5eop899] {
    background: var(--border);
}

.slr-hero-progress[b-tct5eop899] {
    height: 3px;
    background: var(--surface-muted);
}

.slr-hero-progress-fill[b-tct5eop899] {
    background: var(--accent);
}
/* /Components/Pages/Reports/SlhReports.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   SlhReports.razor.css — Slaughterhouse Reports
   Visual language mirrors TccReports / NpmReports. All tokens from app.css.
   SLH-specific: per-head fees, animal-type breakdown, transaction log (no rent/compliance).
══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.rpt-topbar[b-hnferjv077] {
    background: var(--navy);
    padding: 18px 28px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.rpt-topbar[b-hnferjv077]::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(200,168,75,.16) 0%, transparent 70%);
    pointer-events: none;
}
.rpt-topbar-left[b-hnferjv077] { display: flex; align-items: center; gap: 14px; flex: 1; position: relative; z-index: 1; }
.rpt-back-btn[b-hnferjv077] {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s;
    flex-shrink: 0;
}
.rpt-back-btn:hover[b-hnferjv077] { background: rgba(255,255,255,.14); }
.rpt-back-btn svg[b-hnferjv077] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-topbar-icon[b-hnferjv077] {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(200,168,75,.18);
    border: 1px solid rgba(200,168,75,.28);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rpt-topbar-icon svg[b-hnferjv077] { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpt-eyebrow[b-hnferjv077] { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.rpt-title[b-hnferjv077] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.rpt-subtitle[b-hnferjv077] { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.rpt-header-progress[b-hnferjv077] { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.1); }
.rpt-header-progress-fill[b-hnferjv077] { height: 100%; background: var(--gold); transition: width .4s ease; }
.rpt-topbar-right[b-hnferjv077] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.rpt-action-btn[b-hnferjv077] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.85);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.rpt-action-btn:hover[b-hnferjv077] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-hnferjv077] { outline: 2px solid color-mix(in srgb, var(--gold) 85%, white); outline-offset: 2px; }
.rpt-action-btn svg[b-hnferjv077] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Period bar ── */
.rpt-period-bar[b-hnferjv077] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}
.rpt-period-tabs[b-hnferjv077] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.rpt-period-tab[b-hnferjv077] {
    min-height: 32px;
    min-width: 92px;
    padding: 6px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.rpt-period-tab.active[b-hnferjv077] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14);
}
.rpt-document-tab[b-hnferjv077] { gap: 7px; padding: 0 16px; min-width: 0; }
.rpt-document-tab svg[b-hnferjv077] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rpt-date-nav[b-hnferjv077] { display: flex; align-items: center; gap: 10px; }
.rpt-date-nav.utility-mode .rpt-current-period[b-hnferjv077] { color: var(--accent); }
.rpt-nav-btn[b-hnferjv077] {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .13s;
}
.rpt-nav-btn:hover[b-hnferjv077] { background: var(--border); }
.rpt-nav-btn svg[b-hnferjv077] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-hnferjv077] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ── KPI Strip ── */
.rpt-kpi-strip[b-hnferjv077] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px 28px 0; }
.rpt-kpi-card[b-hnferjv077] {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.kpi-icon-wrap[b-hnferjv077] { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon-wrap svg[b-hnferjv077] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Uniform neutral icon tiles — consistent with the Public Market (NPM) report; no per-metric colour. */
.kpi-icon-green[b-hnferjv077],
.kpi-icon-gold[b-hnferjv077],
.kpi-icon-red[b-hnferjv077],
.kpi-icon-neutral[b-hnferjv077] { background: var(--bg-icon); color: var(--navy-3); }
.kpi-body[b-hnferjv077] { flex: 1; min-width: 0; }
.kpi-label[b-hnferjv077] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
.kpi-value[b-hnferjv077] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.kpi-change[b-hnferjv077] { font-size: 12px; color: var(--text-subtle); margin-top: 5px; }
.kpi-change-negative[b-hnferjv077] { color: var(--red); }

/* ── Main content ── */
.rpt-content[b-hnferjv077] { padding: 20px 28px 40px; display: flex; flex-direction: column; gap: 20px; }

/* ── Charts row ── */
.rpt-charts-row[b-hnferjv077] { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: stretch; }
.rpt-chart-card[b-hnferjv077] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: 0 1px 4px rgba(13,33,55,.06); }
.rpt-chart-wide[b-hnferjv077] { display: flex; flex-direction: column; }
.chart-header[b-hnferjv077] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.chart-header-left[b-hnferjv077] { flex: 1; }
.chart-title[b-hnferjv077] { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.chart-subtitle[b-hnferjv077] { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.chart-legend[b-hnferjv077] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend-item[b-hnferjv077] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-hnferjv077] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-label[b-hnferjv077] { font-size: 12px; color: var(--text-subtle); font-weight: 500; }

/* ── 3D Bar chart ── */
.rpt-bar-chart[b-hnferjv077] {
    display: flex; align-items: flex-end; gap: 14px; flex: 1; min-height: 250px;
    padding: 14px 18px 10px; position: relative;
    background:
        repeating-linear-gradient(to top, transparent 0, transparent 39px, color-mix(in srgb, var(--border) 55%, transparent) 40px),
        linear-gradient(to top, rgba(13,33,55,.02) 0%, transparent 100%);
    border-radius: 12px; border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.rpt-bar-group[b-hnferjv077] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.rpt-bar-wrap[b-hnferjv077] { width: 100%; height: calc(100% - 40px); position: relative; flex-shrink: 0; }
.rpt-bar-3d[b-hnferjv077] { width: min(100%, 140px); height: 100%; position: relative; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--navy) 8%, transparent)); margin-inline: auto; }
.rpt-bar-group.current .rpt-bar-3d[b-hnferjv077] { filter: drop-shadow(0 4px 8px rgba(200,168,75,.2)); }
.bar3d-face[b-hnferjv077] { position: absolute; }
.bar3d-front[b-hnferjv077] { bottom: 0; left: 10%; width: 80%; background: linear-gradient(180deg, #3fa07a 0%, #2d7a5f 100%); border-radius: 9px 9px 4px 4px; transition: height .4s cubic-bezier(.4,0,.2,1), transform .15s ease, filter .15s ease; min-height: 6px; }
.rpt-bar-group.current .bar3d-front[b-hnferjv077] { background: linear-gradient(180deg, #d4b45e 0%, #c8a84b 100%); }
.rpt-bar-group.is-zero .bar3d-front[b-hnferjv077] { min-height: 10px; background: #e6ebf1; filter: none; }
.rpt-bar-group.is-zero .rpt-bar-3d[b-hnferjv077] { filter: none; }
.bar3d-top[b-hnferjv077], .bar3d-side[b-hnferjv077] { display: none; }
.rpt-bar-group:hover .bar3d-front[b-hnferjv077] { transform: translateY(-2px); filter: brightness(1.04); }
.rpt-bar-group:hover .rpt-bar-label[b-hnferjv077] { color: var(--navy); }
.rpt-bar-label[b-hnferjv077] { font-size: 11px; color: var(--text-muted); white-space: nowrap; text-align: center; margin-top: 6px; font-weight: 500; }
.rpt-bar-val[b-hnferjv077] { font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; text-align: center; }
.rpt-bar-group.is-zero .rpt-bar-val[b-hnferjv077] { color: var(--text-muted); }

/* ── Donut ── */
.rpt-status-card[b-hnferjv077] { display: flex; flex-direction: column; }
.rpt-donut-wrap[b-hnferjv077] { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; padding-top: 8px; }
.rpt-donut-container[b-hnferjv077] { position: relative; }
.rpt-donut-svg[b-hnferjv077] { width: 160px; height: 160px; display: block; }
.donut-center-val[b-hnferjv077] { text-anchor: middle; font-size: 22px; font-weight: 800; fill: var(--navy); font-family: inherit; }
.donut-center-lbl[b-hnferjv077] { text-anchor: middle; font-size: 11px; font-weight: 700; fill: var(--text-muted); letter-spacing: .08em; font-family: inherit; }
.donut-segment[b-hnferjv077] { transition: stroke-dasharray .4s; }
.rpt-donut-legend[b-hnferjv077] { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.donut-leg-item[b-hnferjv077] { display: flex; align-items: center; justify-content: space-between; }
.donut-leg-left[b-hnferjv077] { display: flex; align-items: center; gap: 8px; }
.donut-leg-dot[b-hnferjv077] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-leg-label[b-hnferjv077] { font-size: 12.5px; color: var(--text); }
.donut-leg-value[b-hnferjv077] { font-size: 12.5px; font-weight: 700; color: var(--navy); }

/* ── Section heading ── */
.rpt-section-heading[b-hnferjv077] { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; }
.rpt-section-rule[b-hnferjv077] { flex: 1; height: 1px; background: var(--border); }
.rpt-section-heading h2[b-hnferjv077] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); white-space: nowrap; margin: 0; }

/* ── Audit row ── */
.rpt-audit-row[b-hnferjv077] { display: grid; grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.45fr); gap: 16px; align-items: stretch; }
/* Transaction/summary log beside the animal breakdown — matches the breakdown card's height,
   the table scrolls within that height. */
.slh-log-card[b-hnferjv077] { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.slh-log-scroll[b-hnferjv077] { flex: 1 1 0; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.slh-log-scroll table[b-hnferjv077] { width: 100%; border-collapse: collapse; }
.slh-log-scroll[b-hnferjv077]::-webkit-scrollbar { width: 7px; }
.slh-log-scroll[b-hnferjv077]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.slh-log-scroll[b-hnferjv077]::-webkit-scrollbar-track { background: transparent; }
.slh-breakdown-card[b-hnferjv077] { grid-column: auto; display: flex; flex-direction: column; }
.slh-breakdown-footer[b-hnferjv077] { margin-top: auto; padding-top: 14px; }
.slh-bf-stats[b-hnferjv077] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-subtle); }
.slh-bf-stats strong[b-hnferjv077] { color: var(--navy); font-weight: 800; }
.slh-bf-sep[b-hnferjv077] { color: var(--text-muted); }
.slh-bf-note[b-hnferjv077] { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.audit-card[b-hnferjv077] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(13,33,55,.06); }
.audit-card-head[b-hnferjv077] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 8px; }
.audit-card-head span[b-hnferjv077] { font-size: 14px; font-weight: 700; color: var(--navy); }
.audit-subtitle[b-hnferjv077] { font-size: 11.5px; color: var(--text-muted); text-align: right; }
.audit-kpi-stack[b-hnferjv077] { display: flex; flex-direction: column; gap: 14px; }
.audit-number-card[b-hnferjv077] { flex: 1; background: var(--bg); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); }
.audit-number-card strong[b-hnferjv077] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.audit-number-card span[b-hnferjv077] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

/* ── Animal breakdown card (merged revenue + heads grid) ── */
.slh-breakdown-card[b-hnferjv077] { grid-column: 1; }
.slh-animal-grid[b-hnferjv077] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 4px;
}
.slh-a-card[b-hnferjv077] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.slh-a-header[b-hnferjv077] { display: flex; align-items: center; gap: 8px; }
.slh-a-dot[b-hnferjv077] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.slh-a-name[b-hnferjv077] { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.slh-a-pct[b-hnferjv077] { font-size: 11px; font-weight: 700; }
.slh-a-meter[b-hnferjv077] { height: 6px; background: color-mix(in srgb, var(--border) 70%, transparent); border-radius: 4px; overflow: hidden; }
.slh-a-fill[b-hnferjv077] { height: 100%; border-radius: 4px; transition: width .4s ease; }
.slh-a-values[b-hnferjv077] { display: flex; align-items: center; gap: 10px; }
.slh-a-stat[b-hnferjv077] { display: flex; flex-direction: column; gap: 1px; }
.slh-a-val[b-hnferjv077] { font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1; }
.slh-a-key[b-hnferjv077] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.slh-a-divider[b-hnferjv077] { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }

/* ── Other (custom) animals — scrollable list ── */
.slh-other-card[b-hnferjv077] { display: flex; flex-direction: column; }
.slh-other-scroll[b-hnferjv077] { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; margin: -2px -6px 0; padding: 0 6px; }
.slh-other-scroll[b-hnferjv077]::-webkit-scrollbar { width: 7px; }
.slh-other-scroll[b-hnferjv077]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.slh-other-row[b-hnferjv077] { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.slh-other-row:last-child[b-hnferjv077] { border-bottom: none; }
.slh-other-name[b-hnferjv077] { font-size: 12.5px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slh-other-heads[b-hnferjv077] { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.slh-other-rev[b-hnferjv077] { font-size: 12.5px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.slh-other-empty[b-hnferjv077] { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--text-muted); padding: 18px 8px; }

/* ── Status badges (animal type) ── */
.slh-badge[b-hnferjv077] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #fff; }
.slh-total[b-hnferjv077] { font-weight: 700; color: var(--green); }

/* ── Grouped transaction rows (one OR = one transaction, expandable animal lines) ── */
.slh-group-row td[b-hnferjv077] { font-weight: 500; }
.slh-animal-group[b-hnferjv077] { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.slh-more-badge[b-hnferjv077] { font-size: 10.5px; font-weight: 700; color: #8a6800; background: rgba(200,168,75,.18); border-radius: 10px; padding: 1px 7px; }
.slh-chevron[b-hnferjv077] { width: 13px; height: 13px; stroke: var(--text-muted); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.slh-chevron.open[b-hnferjv077] { transform: rotate(180deg); }
.slh-detail-row td[b-hnferjv077] { background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text-subtle); }
.slh-detail-animal[b-hnferjv077] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding-left: 8px; }
.slh-detail-animal svg[b-hnferjv077] { width: 12px; height: 12px; stroke: var(--text-muted); fill: none; stroke-width: 2; }
/* Print: indented animal sub-lines under each OR group */
.print-detail-row td[b-hnferjv077] { color: #4b5563; }

/* ── Tables (transaction log / monthly summary) ── */
.rpt-compliance-table-wrap[b-hnferjv077] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rpt-compliance-table[b-hnferjv077] { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-compliance-table th[b-hnferjv077] {
    padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border);
    text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap;
}
.rpt-compliance-table td[b-hnferjv077] { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--navy); }
.rpt-compliance-table tr:last-child td[b-hnferjv077] { border-bottom: none; }
.stall-no[b-hnferjv077] { font-weight: 700; }
.text-muted[b-hnferjv077] { color: var(--text-muted); }
.delinq-empty[b-hnferjv077] { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ── Empty state ── */
.rpt-empty[b-hnferjv077] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; }
.rpt-empty-icon[b-hnferjv077] { width: 40px; height: 40px; color: var(--text-muted); }
.rpt-empty-icon svg[b-hnferjv077] { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rpt-empty-title[b-hnferjv077] { font-size: 14px; font-weight: 600; color: var(--navy); }
.rpt-empty-text[b-hnferjv077] { font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ── Print document shell (shared with NPM/TCC print views) ── */
.print-document-content[b-hnferjv077] { display: block; background: #eef3f7; overflow-x: hidden; }
.print-report-sheet[b-hnferjv077] {
    width: 100%; min-height: 900px; padding: 30px 28px 40px; box-sizing: border-box;
    background: #fff; border: 1px solid #d5dde5; box-shadow: 0 18px 38px rgba(9, 31, 52, .08); color: #111827;
}
.print-report-actions[b-hnferjv077] { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.print-report-btn[b-hnferjv077] {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px;
    background: var(--accent); color: #fff; border: none; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.print-report-btn svg[b-hnferjv077] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.print-report-header[b-hnferjv077] { text-align: center; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.print-report-logo[b-hnferjv077] { display: block; width: 58px; height: 58px; object-fit: contain; margin: 0 auto 10px; }
.print-republic[b-hnferjv077] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
.print-report-header h2[b-hnferjv077] { margin: 7px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.15; color: #111827; }
.print-report-header p[b-hnferjv077] { margin: 0; font-size: 12px; color: #4b5563; }
.print-report-title[b-hnferjv077] { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; color: #111827; }
.print-report-meta[b-hnferjv077] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cfd6de; margin-bottom: 16px; }
.print-report-meta div[b-hnferjv077] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-meta div:last-child[b-hnferjv077] { border-right: none; }
.print-report-meta span[b-hnferjv077] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-meta strong[b-hnferjv077] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-summary[b-hnferjv077] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cfd6de; margin-bottom: 20px; background: #f8fafc; }
.print-report-summary div[b-hnferjv077] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-summary div:last-child[b-hnferjv077] { border-right: none; }
.print-report-summary span[b-hnferjv077] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-summary strong[b-hnferjv077] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-signatures[b-hnferjv077] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 58px; }
.print-report-signatures div[b-hnferjv077] { border-top: 1px solid #111827; padding-top: 8px; text-align: center; }
.print-report-signatures span[b-hnferjv077] { display: block; font-size: 11px; color: #6b7280; }
.print-report-signatures strong[b-hnferjv077] { display: block; margin-top: 3px; font-size: 11px; color: #111827; }
.print-empty[b-hnferjv077] { margin: 22px 0; padding: 16px; text-align: center; font-size: 12px; color: #6b7280; border: 1px dashed #cfd6de; background: #f8fafc; }
.print-table-wrap[b-hnferjv077] { margin-top: 12px; width: 100%; overflow-x: hidden; }
.print-status-table[b-hnferjv077] { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; color: #111827; }
.print-status-table th[b-hnferjv077], .print-status-table td[b-hnferjv077] { border: 1px solid #cfd6de; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-status-table th[b-hnferjv077] { background: #f3f6f9; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #374151; }
.status-sheet .print-status-table[b-hnferjv077] { font-size: 13px !important; }
.status-sheet .print-status-table th[b-hnferjv077] { font-size: 11px !important; }
.status-sheet .print-status-table td[b-hnferjv077] { padding: 9px 10px; }
.text-muted-cell[b-hnferjv077] { color: #6b7280; }
.print-section-block[b-hnferjv077] { margin-top: 24px; }
.print-section-heading[b-hnferjv077] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); padding: 6px 0 4px; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.history-sheet .history-table[b-hnferjv077] { font-size: 15px !important; }
.history-sheet .history-table th[b-hnferjv077] { font-size: 13px !important; }
.history-sheet .history-table td[b-hnferjv077] { padding: 13px 14px; }
.history-sheet .history-table th:first-child[b-hnferjv077], .history-sheet .history-table td:first-child[b-hnferjv077] { min-width: 110px; white-space: nowrap; }
.history-empty[b-hnferjv077] { text-align: center; color: #6b7280; padding: 18px 0; }
.history-total-row td[b-hnferjv077] { background: #f3f6f9; border-top: 2px solid #cfd6de; font-size: 13px; }
.history-sheet .print-report-meta span[b-hnferjv077]  { font-size: 12px; }
.history-sheet .print-report-meta strong[b-hnferjv077] { font-size: 16px; }
.history-sheet .print-section-heading[b-hnferjv077]   { font-size: 15px; }
.history-sheet .history-total-row td[b-hnferjv077]    { font-size: 15px !important; padding: 13px 14px; }
.history-sheet .print-report-signatures span[b-hnferjv077]  { font-size: 13px; }
.history-sheet .print-report-signatures strong[b-hnferjv077] { font-size: 15px; }
.status-sheet .print-report-meta span[b-hnferjv077]   { font-size: 11px; }
.status-sheet .print-report-meta strong[b-hnferjv077] { font-size: 14px; }
.status-sheet .print-report-summary span[b-hnferjv077], .status-sheet .print-report-summary strong[b-hnferjv077] { font-size: 14px; }
.status-sheet .print-report-signatures span[b-hnferjv077]  { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-hnferjv077] { font-size: 14px; }

@media screen and (max-width: 900px) {
    .rpt-kpi-strip[b-hnferjv077] { grid-template-columns: 1fr 1fr; }
    .rpt-charts-row[b-hnferjv077] { grid-template-columns: 1fr; }
    .rpt-audit-row[b-hnferjv077] { grid-template-columns: 1fr; }
}

/* ── History: owner & animal drill-down lookup (interactive, screen-only) ── */
.slh-lookup[b-hnferjv077] { margin: 18px 0 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(13,33,55,.06); }
.slh-lookup-head[b-hnferjv077] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.slh-lookup-title[b-hnferjv077] { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.slh-lookup-sub[b-hnferjv077] { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.slh-lookup-btn[b-hnferjv077] { background: var(--accent); border-color: var(--accent) !important; color: #fff !important; }
.slh-lookup-btn svg[b-hnferjv077] { stroke: #fff; }
.slh-search[b-hnferjv077] { position: relative; display: flex; align-items: center; margin-top: 16px; }
.slh-search svg[b-hnferjv077] { position: absolute; left: 12px; width: 15px; height: 15px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; }
.slh-search input[b-hnferjv077] { width: 100%; padding: 9px 34px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; color: var(--navy); background: var(--bg); }
.slh-search input:focus[b-hnferjv077] { outline: none; border-color: var(--accent); background: var(--bg-card); }
.slh-search-clear[b-hnferjv077] { position: absolute; right: 10px; border: none; background: none; font-size: 18px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.slh-lookup-summary[b-hnferjv077] { margin: 12px 0 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.slh-owner-list[b-hnferjv077] { display: flex; flex-direction: column; gap: 8px; }
.slh-owner-card[b-hnferjv077] { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.slh-owner-card.open[b-hnferjv077] { border-color: color-mix(in srgb, var(--navy) 30%, var(--border)); }
.slh-owner-head[b-hnferjv077] { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--bg); border: none; cursor: pointer; font: inherit; text-align: left; }
.slh-owner-head:hover[b-hnferjv077] { background: color-mix(in srgb, var(--bg) 60%, var(--bg-card)); }
.slh-owner-name[b-hnferjv077] { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.slh-owner-meta[b-hnferjv077] { flex: 1; font-size: 11.5px; color: var(--text-muted); }
.slh-owner-total[b-hnferjv077] { font-size: 14px; font-weight: 800; color: var(--green); }
.slh-owner-table[b-hnferjv077] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.slh-owner-table th[b-hnferjv077] { padding: 8px 14px; background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.slh-owner-table td[b-hnferjv077] { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--navy); }
.slh-owner-table tr:last-child td[b-hnferjv077] { border-bottom: none; }

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body[b-hnferjv077] { background: white !important; }
    .rpt-topbar[b-hnferjv077], .rpt-period-bar[b-hnferjv077] { background: white !important; border: none !important; box-shadow: none !important; }
    .rpt-topbar-right[b-hnferjv077], .rpt-period-tabs[b-hnferjv077], .rpt-date-nav[b-hnferjv077], .rpt-back-btn[b-hnferjv077], .rpt-header-progress[b-hnferjv077], .print-report-actions[b-hnferjv077], .slh-lookup[b-hnferjv077] { display: none !important; }
    .rpt-content[b-hnferjv077] { padding: 0 !important; }
    .print-document-content[b-hnferjv077] { display: block !important; background: white !important; }
    /* 12mm, NOT 0 - the page margin is deliberately nought so the browser has no margin box to print its automatic
       date, URL and page numbers into, which means the SHEET supplies the whitespace. print.css says exactly that and
       sets `.print-report-sheet { padding: 12mm }`, but CSS isolation compiles this rule to
       `.print-report-sheet[b-xxxxx]`, and a class-plus-attribute selector outranks a bare class even when both are
       !important. So this rule quietly won and printed the sheet hard against the paper edge. */
    .print-report-sheet[b-hnferjv077] { width: 100% !important; min-height: auto !important; padding: 12mm !important; border: none !important; box-shadow: none !important; }
    /* ── How these sheets break across pages ──────────────────────────────────
       The same three rules the List of Stallholders prints by, so every document this platform issues paginates alike: a table's
       header row REPEATS on each page it continues onto rather than appearing alone at the top of one, a row is never split, and
       a section block may span pages because some areas hold forty rows. Plus the joins that actually broke: a section heading
       stays with what follows it, and the letterhead and meta strip are never split. */
    .print-status-table thead[b-hnferjv077] { display: table-header-group; }
    .print-status-table tfoot[b-hnferjv077] { display: table-footer-group; }

    .print-status-table tr[b-hnferjv077] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-section-heading[b-hnferjv077] {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-header[b-hnferjv077],
    .print-report-meta[b-hnferjv077] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A SECTION IS ONE UNIT: its name, its summary strip and its rows. This was uto, which put a heading and a total at the
       foot of a page with the rows they describe on the next. void is a request, not a constraint: a section taller than the
       page is still split, and the repeating header keeps that readable - so small sections stay whole and large ones still fit. */
    .print-section-block[b-hnferjv077] {
        break-inside: avoid;
        page-break-inside: avoid;
        /* The top space is PADDING here, not the margin this block carries on screen. A margin is dropped at a page break; a
           padding is part of the box and survives, so a section that begins a page opens clear of the paper edge instead of
           against it. The page margin is nought, because a page margin is where Chromium prints its own date, title and URL and
           no CSS turns that off - so the document supplies its own whitespace. Sections are kept whole above, which is what makes
           a continued page always begin with one. */
        margin-top: 0 !important;
        padding-top: 10mm;
    }

    .print-section-summary[b-hnferjv077] {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Signatures are never split down the middle: "Prepared by" on one page and "Reviewed by" on the next is not a document
       anybody signs. */
    .print-report-signatures[b-hnferjv077] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-table-wrap[b-hnferjv077] { overflow: visible !important; }
    /* ── Why page two used to start hard against the paper edge ───────────────
       The page box is margin-free and the 12mm of whitespace came from padding on the SHEET. A block's padding applies once, at
       its own top and bottom, not at every page break - so pages after the first began at y=0 with a table header touching the
       edge. Only a page MARGIN repeats per page, so these two documents ask for one of their own; a named page applies solely to
       what asks for it, leaving the roster, the statements and the receipts on the margin-free box they were tuned for.

       Stated rather than buried: a top margin gives the browser somewhere to print its automatic date and page numbers. Untick
       "Headers and footers" in the print dialog if it does. The alternative was figures against the paper edge on every page. */
    /* The page margin these sheets need is injected at print time by stalltrackPrint.reportDocument, NOT set here. An @page in a
       scoped stylesheet does not reach the print engine, and a NAMED page is not honoured at all - print.css assigns a landscape
       named page to .print-report-sheet and this document still printed portrait, which is the proof. Left and right padding is
       injected with it, so nothing about the paper margin is stated in CSS any more. */
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-hnferjv077] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-hnferjv077]::before,
    .rpt-topbar[b-hnferjv077]::after {
        display: none;
    }

.rpt-back-btn[b-hnferjv077] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-hnferjv077] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-hnferjv077] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-hnferjv077] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-hnferjv077] {
    color: var(--text-tertiary);
}

.rpt-title[b-hnferjv077] {
    color: var(--navy);
}

.rpt-subtitle[b-hnferjv077] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-hnferjv077] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-hnferjv077] {
    background: var(--accent);
}

.rpt-action-btn[b-hnferjv077] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-hnferjv077] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-hnferjv077] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-hnferjv077],
.rpt-document-tab.active[b-hnferjv077],
.utility-section-tab.active[b-hnferjv077] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-hnferjv077],
.rpt-document-tab:hover:not(.active)[b-hnferjv077],
.utility-section-tab:hover:not(.active)[b-hnferjv077] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-hnferjv077],
.rpt-action-btn:focus-visible[b-hnferjv077],
.rpt-period-tab:focus-visible[b-hnferjv077],
.rpt-document-tab:focus-visible[b-hnferjv077] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/Reports/StallHolderList.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   Stall Holder List (all facilities) — scoped styles (sh-)
   Mirrors the Month-End report's document language (filter chips, sheet, summary
   cards, tables, subtotals) using the shared design tokens, so the two read as one
   reporting suite.
   ══════════════════════════════════════════════════════════════════════════ */

.sh-controls[b-mvroepoawi] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* Facility filter — segmented control (matches the Month-End me-filter) */
.sh-filter[b-mvroepoawi] {
    display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px; padding: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}
.sh-chip[b-mvroepoawi] {
    min-height: 32px; padding: 6px 16px; border-radius: 6px;
    border: 1px solid transparent; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 650; letter-spacing: .2px; line-height: 1;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.sh-chip:hover[b-mvroepoawi] { color: var(--navy); }
.sh-chip-active[b-mvroepoawi], .sh-chip-active:hover[b-mvroepoawi] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 13px rgba(9, 31, 52, .14);
}

.sh-actions[b-mvroepoawi] { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; }
.sh-search[b-mvroepoawi] {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px;
    height: 38px; padding: 0 12px; flex: 1 1 auto; min-width: 0;
    transition: border-color .12s ease, box-shadow .12s ease;
}

/* The search gives way first when the row runs short of room, so the buttons and the year beside it stay on one line
   instead of wrapping. A ceiling as well as a floor: on a wide screen the field used to swallow the slack and leave the
   controls stranded at the far edge. The floor is small because the buttons no longer shrink at all — something has to
   absorb a narrow window, and a shortened search box is the one control here that is still usable narrow. */
.sh-search[b-mvroepoawi] { flex: 0 1 300px; max-width: 300px; min-width: 130px; }

/* The year sits at the end of the row and never shrinks, since a date that has been squeezed is unreadable. */
.sh-year-nav[b-mvroepoawi] { display: flex; align-items: center; flex: 0 0 auto; margin-left: 2px; }
.sh-search:focus-within[b-mvroepoawi] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 168, 75, .15); }
.sh-search svg[b-mvroepoawi] { width: 15px; height: 15px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sh-search input[b-mvroepoawi] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13px; color: var(--navy); }
.sh-search input[b-mvroepoawi]::placeholder { color: var(--text-muted); }
.sh-search input[b-mvroepoawi]::-webkit-search-cancel-button { display: none; }
.sh-search-clear[b-mvroepoawi] { border: none; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.sh-search-clear:hover[b-mvroepoawi] { color: var(--navy); }

.sh-print-btn[b-mvroepoawi] {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff; border: none; border-radius: 9px;
    padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    /* A button label never wraps. With the year now on this row the space grew tight and "Save as PDF" broke across two
       lines, which made the whole toolbar taller and read as an error. The buttons hold their width and the search gives way
       instead, which is the order of precedence the row already follows. */
    white-space: nowrap; flex: 0 0 auto;
}
.sh-print-btn:hover[b-mvroepoawi] { background: var(--accent-hover); }
.sh-print-btn:disabled[b-mvroepoawi] { opacity: .5; cursor: default; }
.sh-print-btn svg[b-mvroepoawi] { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* States */
.sh-state[b-mvroepoawi] { padding: 40px; text-align: center; color: var(--text-subtle); font-size: 14px; }
.sh-state-error[b-mvroepoawi] { color: var(--red); }
.sh-retry[b-mvroepoawi] { margin-left: 10px; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; }

/* Sheet + document header */
.sh-sheet[b-mvroepoawi] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }
.sh-rpt-head[b-mvroepoawi] { text-align: center; margin-bottom: 20px; }
.sh-seal[b-mvroepoawi] { width: 54px; height: 54px; object-fit: contain; margin: 0 auto 8px; display: block; }
.sh-gov[b-mvroepoawi] { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.sh-org[b-mvroepoawi] { font-size: 15px; font-weight: 700; color: var(--navy); margin-top: 2px; }
.sh-muni[b-mvroepoawi] { font-size: 11px; color: var(--text-subtle); margin-top: 2px; }
/* The document's name is a heading on an official sheet, not a chip: a gold pill read as a status badge and
   did not match the per-facility roster. */
.sh-doc[b-mvroepoawi] { display: block; margin-top: 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); text-align: center; }

/* Summary cards */
.sh-summary[b-mvroepoawi] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.sh-sum-card[b-mvroepoawi] { border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; background: var(--bg); }
.sh-sum-val[b-mvroepoawi] { font-size: 19px; font-weight: 800; color: var(--navy); }
.sh-sum-lbl[b-mvroepoawi] { font-size: 11px; color: var(--text-subtle); margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }

/* Facility block */
.sh-facility[b-mvroepoawi] { margin-bottom: 26px; }
.sh-fac-head[b-mvroepoawi] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--border); flex-wrap: wrap;
}
.sh-fac-title[b-mvroepoawi] { display: flex; align-items: center; gap: 10px; }
.sh-fac-name[b-mvroepoawi] { font-size: 15px; font-weight: 700; color: var(--navy); }
.sh-tag[b-mvroepoawi] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); background: var(--bg-icon); padding: 3px 8px; border-radius: 999px; }
.sh-fac-stats[b-mvroepoawi] { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-subtle); }
.sh-fac-stats strong[b-mvroepoawi] { color: var(--navy); }

.sh-section-label[b-mvroepoawi] {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--navy); background: var(--bg); border-radius: 7px; padding: 7px 12px; margin: 14px 0 8px;
}
.sh-section-label span[b-mvroepoawi] { color: var(--text-subtle); font-weight: 600; letter-spacing: normal; text-transform: none; }

/* Table */
.sh-table[b-mvroepoawi] { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 10px; }
.sh-table th[b-mvroepoawi] {
    text-align: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-subtle); padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: bottom;
}
.sh-th-sub[b-mvroepoawi] { display: block; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.sh-table td[b-mvroepoawi] {
    padding: 9px 10px;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    color: var(--text);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.sh-table tbody tr:hover[b-mvroepoawi] { background: var(--bg); }
.sh-c[b-mvroepoawi] { text-align: center; }
.sh-r[b-mvroepoawi] { text-align: center; font-variant-numeric: tabular-nums; }
.sh-fw[b-mvroepoawi] { font-weight: 400; color: var(--text); }
.sh-muted[b-mvroepoawi] { color: var(--text); font-weight: 400; }
.sh-row-closed td[b-mvroepoawi] { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 50%, transparent); }
.sh-table tfoot td[b-mvroepoawi] { border-top: 2px solid var(--border); border-bottom: none; padding: 10px; color: var(--navy); font-size: 12.5px; }
.sh-table tfoot td:first-child[b-mvroepoawi] { text-align: left; }

.sh-rpt-foot[b-mvroepoawi] { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 18px; }
.sh-rpt-foot div[b-mvroepoawi] { text-align: center; flex: 1; }
.sh-rpt-foot span[b-mvroepoawi] { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 4px; }
.sh-rpt-foot strong[b-mvroepoawi] { font-size: 12.5px; color: var(--navy); }

/* The blank first row of each table's head. Paper only: it exists to put space above a table that continues onto
   another sheet, and there is nothing to show on screen. */
.sh-gap-row[b-mvroepoawi] { display: none; }

@media screen and (max-width: 760px) {
    .sh-summary[b-mvroepoawi] { grid-template-columns: repeat(2, 1fr); }
    .sh-actions[b-mvroepoawi] { flex-basis: 100%; }
    .sh-table[b-mvroepoawi] { font-size: 11.5px; }
}

@media print {
    .no-print[b-mvroepoawi] { display: none !important; }
    .content-area[b-mvroepoawi] { padding: 0 !important; }
    .sh-sheet[b-mvroepoawi] {
        border: none;
        border-radius: 0;
        padding: 0 12mm;
        background: #fff;
    }
    /* The letterhead's gap is settled in the last print block in this file, together with the facility padding that
       has to match it. Stating a second value here only invited the two to drift apart. */
    .sh-table tbody tr:hover[b-mvroepoawi] { background: transparent; }
}


/* ══════════════════════════════════════════════════════════════
   CONTEXTUAL LOADING SKELETON (screen only — mirrors the holder sheet)
   ══════════════════════════════════════════════════════════════ */
.sh-loading[b-mvroepoawi] {
    margin-top: 4px;
}

.sh-loading[b-mvroepoawi]  .sh-sk-center {
    margin-left: auto;
    margin-right: auto;
}

.sh-loading[b-mvroepoawi]  .sh-sk-gap {
    margin-top: 8px;
}

/* Holder table placeholder: header bar + evenly spaced rows */
.sh-table-skeleton[b-mvroepoawi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}



/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Stall Holder List document (mobile/tablet ≤768px).
   Desktop untouched.
═══════════════════════════════════════════════════════════════════ */
/* Phone layout. Scoped to SCREEN deliberately: these rules shrink the sheet's padding and give each table a
   scrolling wrapper with a 620px floor, none of which belongs on paper. A printed page is measured in CSS pixels
   too, so an unscoped max-width can match it — that is exactly how the month-end sheet ended up printing with a
   phone's padding and its signatories stacked down the page. */
@media screen and (max-width: 768px) {
    /* The report "sheet" had 28px padding — too much on a phone. */
    .sh-sheet[b-mvroepoawi] {
        padding: 16px 14px;
    }

    /* The multi-column holder tables were forcing the sheet (and the whole document) wider than the
       viewport. Each table now scrolls horizontally inside its own wrapper instead. */
    .sh-table-wrap[b-mvroepoawi] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sh-table[b-mvroepoawi] {
        min-width: 620px;
    }

    /* Signature footer stacks instead of three cramped columns. */
    .sh-rpt-foot[b-mvroepoawi] {
        flex-direction: column;
        gap: 14px;
    }

    /* Facility header stats wrap under the name rather than overflow. */
    .sh-fac-stats[b-mvroepoawi] {
        gap: 12px;
        flex-wrap: wrap;
    }
}


/* ══════════════════════════════════════════════════════════════
   EXPORT GROUP · LANDSCAPE PRINTING
   Appended so the document styles above are untouched. The three actions now read as one group: the two
   secondary buttons are outlined and only "Save as PDF" stays solid navy, matching the facility roster and
   the Export Data page.
   ══════════════════════════════════════════════════════════════ */

.sh-print-btn[b-mvroepoawi] {
    background: var(--bg-card);
    color: var(--navy);
    border: 1px solid var(--border);
    text-decoration: none;
}

.sh-print-btn:hover[b-mvroepoawi] {
    background: var(--bg);
    border-color: var(--navy);
}

.sh-print-btn svg[b-mvroepoawi] { stroke: currentColor; stroke-width: 1.8; }

.sh-print-btn-primary[b-mvroepoawi] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.sh-print-btn-primary:hover[b-mvroepoawi] {
    background: var(--accent-hover);
    border-color: var(--navy-2, #112d47);
}

/* ── The two downloads as ONE control ──
   Asked for by the office: it is the same list either way, so two separate buttons overstated the choice. The group draws the
   outer corners and the halves share a single hairline between them, so it reads as one button while each half stays its own
   action. Nothing about the actions changed — only how they are presented. */
.sh-split[b-mvroepoawi] { display: inline-flex; flex: 0 0 auto; }
.sh-split .sh-split-part[b-mvroepoawi] { border-radius: 0; }
.sh-split .sh-split-part:first-child[b-mvroepoawi] { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.sh-split .sh-split-part:last-child[b-mvroepoawi] { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }

/* One edge, not two: the second half is pulled over the first's border so a single line divides them. */
.sh-split .sh-split-part + .sh-split-part[b-mvroepoawi] { margin-left: -1px; }

/* The hovered half draws its own border above its neighbour's, or the shared edge would look broken on hover. */
.sh-split .sh-split-part:hover[b-mvroepoawi] { position: relative; z-index: 1; }

@media print {
    /* Orientation and paper margin come from js/print.js, which injects them immediately before printing.
       A scoped stylesheet's @page is not scoped by CSS isolation, so declaring it here would silently change
       every other printable page in the app. */

    /* Never slant a name or a figure on the printed record. */
    .sh-sheet em[b-mvroepoawi], .sh-sheet i[b-mvroepoawi], .sh-muted[b-mvroepoawi] { font-style: normal !important; }
}


/* ══════════════════════════════════════════════════════════════
   DOCUMENT — matched to the per-facility roster and the Export Data sheet
   Same stacked letterhead, same 12.5px / 10px type scale, same hairline grid and centred section band. When a
   single facility is filtered its repeated label row is dropped, because the header already names it.
   ══════════════════════════════════════════════════════════════ */

/* Scope line under the document name, in the same gold as the other two sheets. */
.sh-doc-scope[b-mvroepoawi] {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #b98f27;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
}

/* The as-of line, when the roster is stated for an earlier year. Deliberately in the document's own ink rather than the
   gold of the scope line: it is a fact about what this sheet IS, and it has to survive being printed in one colour. */
.sh-doc-asof[b-mvroepoawi] {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .09em;
    text-align: center;
}

/* The document's name is a heading on an official sheet, not a chip: the gold pill made it read as a status
   badge and did not match the other two rosters. */
.sh-doc[b-mvroepoawi] {
    text-align: center;
}

/* Section total reads exactly as it does on the per-facility roster: a small uppercase label pressed against
   its figures, and a hairline under the last row so the table closes properly on paper. */
.sh-tfoot-row[b-mvroepoawi] { background: #f8fafc; }
.sh-tfoot-label[b-mvroepoawi] { text-align: right !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #111827; }
.sh-tfoot-val[b-mvroepoawi] { font-size: 13px; font-weight: 700; color: #111827; }
.sh-table tfoot td[b-mvroepoawi] { border-top: 1px solid #cfd6de !important; border-bottom: 1px solid #cfd6de !important; }

/* The table sits directly under its section band. */
.sh-table[b-mvroepoawi] {
    margin-bottom: 0;
}

/* Filtered to one facility: say it once, in the header. */
.sh-sheet-single .sh-fac-head[b-mvroepoawi] { display: none; }

.sh-table[b-mvroepoawi] {
    font-size: 12.5px;
    border-collapse: collapse;
}

.sh-table th[b-mvroepoawi] {
    font-size: 11px;
    letter-spacing: .5px;
    padding: 8px 10px;
    background: #f3f6f9;
    color: var(--navy);
    border: 1px solid #cfd6de;
}

.sh-table td[b-mvroepoawi] {
    padding: 8px 10px;
    border: 1px solid #cfd6de;
}

/* Section band reads across the table, as on the office's paper form. The row above is a flex container, so
   centring has to come from the flex axis — text-align alone does nothing here. */
.sh-section-label[b-mvroepoawi] {
    position: relative;
    justify-content: center;
    text-align: center;
    background: #f3f6f9;
    border: 1px solid #cfd6de;
    border-bottom: none;
    border-radius: 0;
    margin: 0;
    padding: 8px 12px;
    font-size: 10.5px;
    letter-spacing: .8px;
}

/* The stall count keeps the right edge, so the band still states both facts. */
.sh-section-label span[b-mvroepoawi] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-subtle);
}

@media print {
    /* Nothing but the document. Anything with a surface of its own — the summary cards, the toolbar, the
       signature strip, loading and empty states — is dropped, so the sheet cannot end with an empty card or a
       band of grey. The sheet itself loses its card treatment and prints as plain paper. */
    .sh-controls[b-mvroepoawi], .sh-summary[b-mvroepoawi], .sh-rpt-foot[b-mvroepoawi], .sh-loading[b-mvroepoawi], .sh-state[b-mvroepoawi] { display: none !important; }

    .sh-sheet[b-mvroepoawi] {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        /* The side margin, and it has to be stated HERE. This block sets padding with !important to strip the
           sheet's card treatment, which was overriding the 12mm stated earlier in the file — so the roster
           printed hard against both paper edges while the centred letterhead only looked inset. print.js sets
           the page margin to zero on purpose, so the browser cannot draw its own header and footer across the
           sheet, which leaves the margin to the app. Same 12mm as the month-end and collection sheets. */
        padding: 0 12mm !important;
        margin: 0 !important;
    }

    /* The gap above a facility is PADDING, not margin, and it is the same wherever the facility lands. A margin at
       the top of a printed page is dropped by the browser, which is why a facility that began sheet two sat flush
       against the paper's edge; padding belongs to the box and is drawn. One rule therefore gives three gaps: below
       the letterhead, between two facilities on the same sheet, and above a facility that starts a new sheet. */
    .sh-facility[b-mvroepoawi] { background: transparent; padding-top: 7mm; margin-bottom: 0; }

    /* On paper only four things carry ink: the letterhead, the facility heading, the section band and the
       table. Any other container inside the sheet is stripped of its surface, so nothing can print as an
       empty card or a stray band of grey after the last row. */
    .sh-sheet div:not(.sh-section-label):not(.sh-fac-head)[b-mvroepoawi] {
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Compact letterhead: landscape leaves little height, and a full-size one pushed the table to sheet two. The gap
       under it is left to .sh-facility's padding so the first table on sheet one sits exactly as far down as the
       first table on sheet two. */
    .sh-rpt-head[b-mvroepoawi] { margin-bottom: 0; }
    .sh-seal[b-mvroepoawi] { width: 46px; height: 46px; }
    .sh-org[b-mvroepoawi] { font-size: 13px; }
    .sh-gov[b-mvroepoawi], .sh-muni[b-mvroepoawi] { font-size: 11px; }
    .sh-doc[b-mvroepoawi] { font-size: 12px; margin-top: 6px; }
    .sh-doc-scope[b-mvroepoawi] { font-size: 11px; }

    /* Rows stay whole; a block may span sheets but never right after its heading. */
    .sh-table tr[b-mvroepoawi] { break-inside: avoid; }
    .sh-facility[b-mvroepoawi] { break-inside: auto; }
    .sh-fac-head[b-mvroepoawi] { break-after: avoid; }
    .sh-section-label[b-mvroepoawi] { break-after: avoid; }
    .sh-table thead[b-mvroepoawi] { display: table-header-group; }

    /* A Total may not begin a sheet on its own. Tampak's rows fitted on sheet one but its Total did not, so sheet two
       opened with a repeated heading row and a lone figure - a page that states a total for rows nobody can see on
       it. The last row and the Total travel together. */
    .sh-table tbody tr:last-child[b-mvroepoawi] { break-after: avoid; }
    .sh-table tfoot[b-mvroepoawi] { break-before: avoid; }

    /* ── The facility label, above its sections ──────────────────────────────────────────────────────────
       The facility is named ONCE, before the section bands, the way the export sheet reads. It was briefly a row
       inside each table instead, which put the name UNDER the section band and then repeated it over every section
       the market has. What the label must not carry onto paper is its screen furniture: the model tag, the active
       count and the monthly figure are all restated by the section band and by the table's own Total row. Its
       surface is the paper's own white, because a grey band here read as a second section heading. */
    .sh-fac-head[b-mvroepoawi] {
        display: block;
        background: #fff;
        border: 0;
        padding: 0;
        margin: 0 0 6px;
    }

    .sh-fac-head .sh-fac-stats[b-mvroepoawi], .sh-fac-head .sh-tag[b-mvroepoawi] { display: none; }

    .sh-fac-name[b-mvroepoawi] {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--navy);
    }

    /* ── Space above a table that continues onto another sheet ───────────────────────────────────────────
       The facility's own padding cannot help here: it is drawn where the facility STARTS, so a facility whose table
       broke across sheets left the continuation hard against the paper's edge. A head repeats at the top of every
       sheet the table runs onto, so a blank first row in the head is the only thing that lands there. It carries no
       border and no fill, and the sheet the table begins on is pulled up by exactly its height, so nothing about
       that sheet changes. The obvious alternative, a top page margin, is refused: @page margin is 0 so the browser
       has no margin box for its date, URL and page number. */
    .sh-gap-row[b-mvroepoawi] { display: table-row; }

    .sh-gap-row td[b-mvroepoawi] {
        height: 7mm;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .sh-table[b-mvroepoawi] { margin-top: -7mm; }

    /* ── One Total per facility, not one per sheet ───────────────────────────────────────────────────────
       A tfoot is repeated on every printed page by default, so a facility that ran onto a second sheet printed
       its Total twice — once after whatever rows fitted on the first page, and again at the end. Two totals for
       one facility on a filed document reads as two different figures. As a row group it prints once, where it
       belongs, after the last row. */
    .sh-table tfoot[b-mvroepoawi] { display: table-row-group; }
}

/* ── Section rail + filtered scope ────────────────────────────────────────────────────────────────────
   When a facility with several sections is selected, its own sections become a second rail below the
   facility rail. The rail is built from the facility's data, so it carries whatever sections the LGU has. */
.sh-controls-sub[b-mvroepoawi] {
    margin-top: -6px;
    padding-top: 10px;
    background: none;
    border: none;
    border-top: 1px dashed var(--border);
    border-radius: 0;
}

/* Filtered scope is stated once in the letterhead. The facility keeps the office's gold; the section under it
   is set in the document's own navy, so the letterhead does not read as two headline colours. */
.sh-doc-section[b-mvroepoawi] {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
}

/* With the section named above, the band inside the table would only repeat it - on screen and on paper. */
.sh-sheet-section .sh-section-label[b-mvroepoawi] { display: none; }

/* A space held without a signed contract: the office's form states this once across the contract columns and leaves
   them blank. Centred and in the document's own italic-free type, so it reads as a statement of fact on the sheet. */
.sh-nc[b-mvroepoawi] {
    text-align: center;
    color: var(--text-muted, #5b6b7c);
    letter-spacing: .01em;
}

/* ── Holder kind rail + the note for an earlier year ───────────────────────────────────────────────── */
.sh-controls-scope[b-mvroepoawi] { margin-bottom: 8px; }
.sh-chip:focus-visible[b-mvroepoawi] { outline: 2px solid var(--accent); outline-offset: 2px; }
.sh-asof-note[b-mvroepoawi] { margin: 0 0 12px; font-size: 12.5px; color: var(--text-subtle); text-align: center; }

/* ── One control band: kind + source on the left, search + joined export + year on the right ── */
.sh-bar[b-mvroepoawi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-bottom: 18px;
}

.sh-bar-filters[b-mvroepoawi], .sh-bar-tools[b-mvroepoawi] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.sh-bar-tools[b-mvroepoawi] { flex: 1 1 auto; justify-content: flex-end; }
.sh-bar .sh-search[b-mvroepoawi] { flex: 1 1 200px; max-width: 280px; }

/* The four actions are one joined group. Labels never wrap; if the band runs out of room the whole group moves down as one. */
.sh-export[b-mvroepoawi] { flex: 0 0 auto; max-width: 100%; }
.sh-export .sh-print-btn[b-mvroepoawi] { padding: 0 14px; height: 38px; white-space: nowrap; border-radius: 0; }
.sh-export .sh-print-btn:first-child[b-mvroepoawi] { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.sh-export .sh-print-btn:last-child[b-mvroepoawi] { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.sh-print-btn:focus-visible[b-mvroepoawi], .sh-chip:focus-visible[b-mvroepoawi] { outline: 2px solid var(--accent); outline-offset: 2px; position: relative; z-index: 2; }

/* The summary fits the cards it actually has: three cards share the width, four stay four, and narrow screens collapse naturally. */
.sh-summary[b-mvroepoawi] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

@media (max-width: 900px) {
    .sh-bar[b-mvroepoawi], .sh-bar-tools[b-mvroepoawi] { justify-content: flex-start; }
    .sh-bar .sh-search[b-mvroepoawi] { max-width: none; flex-basis: 100%; }
    .sh-export[b-mvroepoawi] { overflow-x: auto; }
}

@media print {
    .sh-bar[b-mvroepoawi] { display: none !important; }
}
/* /Components/Pages/Reports/SummaryCashPosition.razor.rz.scp.css */
/* Summary cash position — V3. The strip itself comes from SummaryStrip. */

.scp[b-ajo2qkbdx2] {
    margin-bottom: 16px;
}

.scp-note[b-ajo2qkbdx2] {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
}
/* /Components/Pages/Reports/TccReports.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   TccReports.razor.css — Tampak Commercial Center Reports
   Visual language mirrors NpmReports. All tokens from app.css.
   TCC-specific: stall-size tiers, no fish/section/daily widgets.
══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.rpt-topbar[b-geetc6r2mv] {
    background: var(--navy);
    padding: 18px 28px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.rpt-topbar[b-geetc6r2mv]::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(200,168,75,.16) 0%, transparent 70%);
    pointer-events: none;
}
.rpt-topbar-left[b-geetc6r2mv] { display: flex; align-items: center; gap: 14px; flex: 1; position: relative; z-index: 1; }
.rpt-back-btn[b-geetc6r2mv] {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s;
    flex-shrink: 0;
}
.rpt-back-btn:hover[b-geetc6r2mv] { background: rgba(255,255,255,.14); }
.rpt-back-btn svg[b-geetc6r2mv] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-topbar-icon[b-geetc6r2mv] {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(200,168,75,.18);
    border: 1px solid rgba(200,168,75,.28);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rpt-topbar-icon svg[b-geetc6r2mv] { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpt-eyebrow[b-geetc6r2mv] { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.rpt-title[b-geetc6r2mv] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.rpt-subtitle[b-geetc6r2mv] { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.rpt-header-progress[b-geetc6r2mv] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
}
.rpt-header-progress-fill[b-geetc6r2mv] {
    height: 100%;
    background: var(--gold);
    transition: width .4s ease;
}
.rpt-topbar-right[b-geetc6r2mv] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.rpt-action-btn[b-geetc6r2mv] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.85);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.rpt-action-btn:hover[b-geetc6r2mv] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-geetc6r2mv] { outline: 2px solid color-mix(in srgb, var(--gold) 85%, white); outline-offset: 2px; }
.rpt-action-btn svg[b-geetc6r2mv] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Period bar ── */
.rpt-period-bar[b-geetc6r2mv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}
.rpt-period-tabs[b-geetc6r2mv] {
    display: flex;
    gap: 5px;
    background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 9px;
    padding: 4px;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.rpt-period-tab[b-geetc6r2mv] {
    min-height: 32px;
    min-width: 92px;
    padding: 6px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--navy));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.rpt-period-tab.active[b-geetc6r2mv] {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--navy) 76%, #fff);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14);
}
.rpt-document-tab[b-geetc6r2mv] { gap: 7px; padding: 0 16px; min-width: 0; }
.rpt-document-tab svg[b-geetc6r2mv] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rpt-date-nav[b-geetc6r2mv] { display: flex; align-items: center; gap: 10px; }
.rpt-date-nav.utility-mode .rpt-current-period[b-geetc6r2mv] { color: var(--accent); }
.rpt-nav-btn[b-geetc6r2mv] {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-icon);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .13s;
}
.rpt-nav-btn:hover[b-geetc6r2mv] { background: var(--border); }
.rpt-nav-btn svg[b-geetc6r2mv] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-geetc6r2mv] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ── KPI Strip ── */
.rpt-kpi-strip[b-geetc6r2mv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 28px 0;
}
.rpt-kpi-card[b-geetc6r2mv] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.kpi-icon-wrap[b-geetc6r2mv] {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-icon-wrap svg[b-geetc6r2mv] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Uniform neutral icon tiles — consistent across all facility reports. */
.kpi-icon-green[b-geetc6r2mv],
.kpi-icon-gold[b-geetc6r2mv],
.kpi-icon-red[b-geetc6r2mv],
.kpi-icon-neutral[b-geetc6r2mv] { background: var(--bg-icon); color: var(--navy-3); }
.kpi-body[b-geetc6r2mv] { flex: 1; min-width: 0; }
.kpi-label[b-geetc6r2mv] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
.kpi-value[b-geetc6r2mv] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.kpi-change[b-geetc6r2mv] { font-size: 12px; color: var(--text-subtle); margin-top: 5px; }
.kpi-change-negative[b-geetc6r2mv] { color: var(--red); }

/* ── Main content ── */
.rpt-content[b-geetc6r2mv] {
    padding: 20px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Charts row ── */
.rpt-charts-row[b-geetc6r2mv] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: stretch;
}
.rpt-chart-card[b-geetc6r2mv] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(13,33,55,.06);
}
.rpt-chart-wide[b-geetc6r2mv] { display: flex; flex-direction: column; }
.chart-header[b-geetc6r2mv] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.chart-header-left[b-geetc6r2mv] { flex: 1; }
.chart-title[b-geetc6r2mv] { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.chart-subtitle[b-geetc6r2mv] { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.chart-legend[b-geetc6r2mv] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend-item[b-geetc6r2mv] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-geetc6r2mv] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-label[b-geetc6r2mv] { font-size: 12px; color: var(--text-subtle); font-weight: 500; }

/* ── 3D Bar chart (identical to NPM) ── */
.rpt-bar-chart[b-geetc6r2mv] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex: 1;
    min-height: 250px;
    padding: 14px 18px 10px;
    position: relative;
    background:
        repeating-linear-gradient(to top, transparent 0, transparent 39px, color-mix(in srgb, var(--border) 55%, transparent) 40px),
        linear-gradient(to top, rgba(13,33,55,.02) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.rpt-bar-group[b-geetc6r2mv] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.rpt-bar-wrap[b-geetc6r2mv] { width: 100%; height: calc(100% - 40px); position: relative; flex-shrink: 0; }
.rpt-bar-3d[b-geetc6r2mv] { width: min(100%, 140px); height: 100%; position: relative; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--navy) 8%, transparent)); margin-inline: auto; }
.rpt-bar-group.current .rpt-bar-3d[b-geetc6r2mv] { filter: drop-shadow(0 4px 8px rgba(200,168,75,.2)); }
.bar3d-face[b-geetc6r2mv] { position: absolute; }
/* Flat 2D bar — top/side faces hidden, identical to NPM */
.bar3d-front[b-geetc6r2mv] {
    bottom: 0; left: 10%; width: 80%;
    background: linear-gradient(180deg, #3fa07a 0%, #2d7a5f 100%);
    border-radius: 9px 9px 4px 4px;
    transition: height .4s cubic-bezier(.4,0,.2,1), transform .15s ease, filter .15s ease;
    min-height: 6px;
}
.rpt-bar-group.current .bar3d-front[b-geetc6r2mv] { background: linear-gradient(180deg, #d4b45e 0%, #c8a84b 100%); }
.rpt-bar-group.is-zero .bar3d-front[b-geetc6r2mv] { min-height: 0; background: none; filter: none; }
.rpt-bar-group.is-zero .rpt-bar-3d[b-geetc6r2mv] { filter: none; }
.bar3d-top[b-geetc6r2mv], .bar3d-side[b-geetc6r2mv] { display: none; }
.rpt-bar-group:hover .bar3d-front[b-geetc6r2mv] { transform: translateY(-2px); filter: brightness(1.04); }
.rpt-bar-group:hover .rpt-bar-label[b-geetc6r2mv] { color: var(--navy); }
.rpt-bar-label[b-geetc6r2mv] { font-size: 11px; color: var(--text-muted); white-space: nowrap; text-align: center; margin-top: 6px; font-weight: 500; }
.rpt-bar-val[b-geetc6r2mv] { font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; text-align: center; }
.rpt-bar-group.is-zero .rpt-bar-val[b-geetc6r2mv] { color: var(--text-muted); }

/* ── Donut / Payor Status (identical to NPM) ── */
.rpt-status-card[b-geetc6r2mv] { display: flex; flex-direction: column; }
.rpt-donut-wrap[b-geetc6r2mv] { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; padding-top: 8px; }
.rpt-donut-container[b-geetc6r2mv] { position: relative; }
.rpt-donut-svg[b-geetc6r2mv] { width: 160px; height: 160px; display: block; }
.donut-center-val[b-geetc6r2mv] { text-anchor: middle; font-size: 22px; font-weight: 800; fill: var(--navy); font-family: inherit; }
.donut-center-lbl[b-geetc6r2mv] { text-anchor: middle; font-size: 11px; font-weight: 700; fill: var(--text-muted); letter-spacing: .08em; font-family: inherit; }
.donut-segment[b-geetc6r2mv] { transition: stroke-dasharray .4s; }
.rpt-donut-legend[b-geetc6r2mv] { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.donut-leg-item[b-geetc6r2mv] { display: flex; align-items: center; justify-content: space-between; }
.donut-leg-left[b-geetc6r2mv] { display: flex; align-items: center; gap: 8px; }
.donut-leg-dot[b-geetc6r2mv] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-leg-label[b-geetc6r2mv] { font-size: 12.5px; color: var(--text); }
.donut-leg-value[b-geetc6r2mv] { font-size: 12.5px; font-weight: 700; color: var(--navy); }

/* ── Section heading ── */
.rpt-section-heading[b-geetc6r2mv] { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; }
.rpt-section-rule[b-geetc6r2mv] { flex: 1; height: 1px; background: var(--border); }
.rpt-section-heading h2[b-geetc6r2mv] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); white-space: nowrap; margin: 0; }

/* Audit row cards live in AuditBreakdownRow.razor(.css) — shared by every facility report. */

/* ── Status badges ── */
.status-badge[b-geetc6r2mv] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.status-badge.paid[b-geetc6r2mv], .status-badge.tier-paid[b-geetc6r2mv] { background: var(--green-bg); color: var(--green); }
.status-badge.partial[b-geetc6r2mv], .status-badge.tier-partial[b-geetc6r2mv] { background: rgba(184,115,51,.1); color: #b87333; }
.status-badge.unpaid[b-geetc6r2mv], .status-badge.tier-unpaid[b-geetc6r2mv] { background: var(--red-bg); color: var(--red); }

/* ── Delinquency panel ── */
.rpt-delinquency-panel[b-geetc6r2mv] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.delinq-exposure[b-geetc6r2mv] {
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
/* No fill. The amount above is already set in the office's red, which carries the meaning; a tinted panel behind it
   reads as highlighter on a government screen and prints as a grey block. The border stays as the panel's own. */
.delinq-has-balance[b-geetc6r2mv] { border-color: rgba(139,58,58,.18); }
.delinq-exp-val[b-geetc6r2mv] { font-size: 24px; font-weight: 800; color: var(--red); line-height: 1; }
.delinq-exp-lbl[b-geetc6r2mv] { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.delinq-table-head[b-geetc6r2mv], .delinq-row[b-geetc6r2mv] {
    display: grid;
    grid-template-columns: 80px 1fr 140px 90px 100px 130px;
    padding: 10px 20px;
    align-items: center;
    gap: 8px;
}
.delinq-table-head[b-geetc6r2mv] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.delinq-row[b-geetc6r2mv] { border-bottom: 1px solid var(--border); font-size: 13px; color: var(--navy); }
.delinq-row:last-child[b-geetc6r2mv] { border-bottom: none; }
.delinq-empty[b-geetc6r2mv] { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.missed-badge[b-geetc6r2mv] { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.missed-badge.critical[b-geetc6r2mv] { background: var(--red-bg); color: var(--red); }
.missed-badge.warn[b-geetc6r2mv] { background: rgba(200,168,75,.12); color: #8a6800; }
.balance-due[b-geetc6r2mv] { color: var(--red); font-weight: 700; }
.stall-no[b-geetc6r2mv] { font-weight: 700; }
.text-muted[b-geetc6r2mv] { color: var(--text-muted); }

/* ── All Stalls compliance table ── */
.rpt-compliance-table-wrap[b-geetc6r2mv] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rpt-compliance-table[b-geetc6r2mv] { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-compliance-table th[b-geetc6r2mv] {
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
}
.rpt-compliance-table td[b-geetc6r2mv] { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--navy); }
.rpt-compliance-table tr:last-child td[b-geetc6r2mv] { border-bottom: none; }
.rpt-compliance-table .row-partial[b-geetc6r2mv] { background: rgba(200,168,75,.04); }
.rpt-compliance-table .row-unpaid[b-geetc6r2mv]  { background: rgba(139,58,58,.04); }

/* ── Empty state ── */
.rpt-empty[b-geetc6r2mv] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; }
.rpt-empty-icon[b-geetc6r2mv] { width: 40px; height: 40px; color: var(--text-muted); }
.rpt-empty-icon svg[b-geetc6r2mv] { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rpt-empty-title[b-geetc6r2mv] { font-size: 14px; font-weight: 600; color: var(--navy); }
.rpt-empty-text[b-geetc6r2mv] { font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ── Print document shell (shared with NPM print views) ── */
.print-document-content[b-geetc6r2mv] { display: block; background: #eef3f7; overflow-x: hidden; }
.print-report-sheet[b-geetc6r2mv] {
    width: 100%;
    min-height: 900px;
    padding: 30px 28px 40px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d5dde5;
    box-shadow: 0 18px 38px rgba(9, 31, 52, .08);
    color: #111827;
}
.print-report-actions[b-geetc6r2mv] { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.print-report-btn[b-geetc6r2mv] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 7px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.print-report-btn svg[b-geetc6r2mv] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.print-report-header[b-geetc6r2mv] { text-align: center; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.print-report-logo[b-geetc6r2mv] { display: block; width: 58px; height: 58px; object-fit: contain; margin: 0 auto 10px; }
.print-republic[b-geetc6r2mv] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
.print-report-header h2[b-geetc6r2mv] { margin: 7px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.15; color: #111827; }
.print-report-header p[b-geetc6r2mv] { margin: 0; font-size: 12px; color: #4b5563; }
.print-report-title[b-geetc6r2mv] { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; color: #111827; }
.print-report-meta[b-geetc6r2mv] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 16px;
}
.print-report-meta div[b-geetc6r2mv] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-meta div:last-child[b-geetc6r2mv] { border-right: none; }
.print-report-meta span[b-geetc6r2mv] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-meta strong[b-geetc6r2mv] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-summary[b-geetc6r2mv] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #cfd6de; margin-bottom: 20px; background: #f8fafc;
}
.print-report-summary div[b-geetc6r2mv] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-summary div:last-child[b-geetc6r2mv] { border-right: none; }
.print-report-summary span[b-geetc6r2mv] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-summary strong[b-geetc6r2mv] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-signatures[b-geetc6r2mv] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px; margin-top: 58px;
}
.print-report-signatures div[b-geetc6r2mv] { border-top: 1px solid #111827; padding-top: 8px; text-align: center; }
.print-report-signatures span[b-geetc6r2mv] { display: block; font-size: 11px; color: #6b7280; }
.print-report-signatures strong[b-geetc6r2mv] { display: block; margin-top: 3px; font-size: 11px; color: #111827; }
.print-empty[b-geetc6r2mv] { margin: 22px 0; padding: 16px; text-align: center; font-size: 12px; color: #6b7280; border: 1px dashed #cfd6de; background: #f8fafc; }

/* ── Status Report table ── */
.print-table-wrap[b-geetc6r2mv] { margin-top: 12px; width: 100%; overflow-x: hidden; }
.print-status-table[b-geetc6r2mv] { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; color: #111827; }
.print-status-table th[b-geetc6r2mv], .print-status-table td[b-geetc6r2mv] { border: 1px solid #cfd6de; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-status-table th[b-geetc6r2mv] { background: #f3f6f9; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #374151; }
.status-sheet .print-status-table[b-geetc6r2mv] { font-size: 13px !important; }
.status-sheet .print-status-table th[b-geetc6r2mv] { font-size: 11px !important; }
.status-sheet .print-status-table td[b-geetc6r2mv] { padding: 9px 10px; }
.print-status-table td.status-paid[b-geetc6r2mv]    { color: #2d7a5f; font-weight: 600; }
.print-status-table td.status-partial[b-geetc6r2mv] { color: #b87333; font-weight: 600; }
.print-status-table td.status-unpaid[b-geetc6r2mv]  { color: #8b3a3a; font-weight: 600; }
.text-muted-cell[b-geetc6r2mv] { color: #6b7280; }

/* ── History tables ── */
.print-section-block[b-geetc6r2mv] { margin-top: 24px; }
.print-section-heading[b-geetc6r2mv] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); padding: 6px 0 4px; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.history-sheet .history-table[b-geetc6r2mv] { font-size: 15px !important; }
.history-sheet .history-table th[b-geetc6r2mv] { font-size: 13px !important; }
.history-sheet .history-table td[b-geetc6r2mv] { padding: 13px 14px; }
.history-sheet .history-table th:first-child[b-geetc6r2mv],
.history-sheet .history-table td:first-child[b-geetc6r2mv] { min-width: 110px; white-space: nowrap; }
.history-empty[b-geetc6r2mv] { text-align: center; color: #6b7280; padding: 18px 0; }
.history-total-row td[b-geetc6r2mv] { background: #f3f6f9; border-top: 2px solid #cfd6de; font-size: 13px; }
.rate-good[b-geetc6r2mv]    { color: #2d7a5f; font-weight: 600; }
.rate-partial[b-geetc6r2mv] { color: #b87333; font-weight: 600; }
.rate-low[b-geetc6r2mv]     { color: #8b3a3a; font-weight: 600; }
.balance-due[b-geetc6r2mv]  { color: #8b3a3a; }

/* ── History meta ── */
.history-sheet .print-report-meta span[b-geetc6r2mv]  { font-size: 12px; }
.history-sheet .print-report-meta strong[b-geetc6r2mv] { font-size: 16px; }
.history-sheet .print-section-heading[b-geetc6r2mv]   { font-size: 15px; }
.history-sheet .history-total-row td[b-geetc6r2mv]    { font-size: 15px !important; padding: 13px 14px; }
.history-sheet .print-report-signatures span[b-geetc6r2mv]  { font-size: 13px; }
.history-sheet .print-report-signatures strong[b-geetc6r2mv] { font-size: 15px; }
.status-sheet .print-report-meta span[b-geetc6r2mv]   { font-size: 11px; }
.status-sheet .print-report-meta strong[b-geetc6r2mv] { font-size: 14px; }
.status-sheet .print-report-summary span[b-geetc6r2mv],
.status-sheet .print-report-summary strong[b-geetc6r2mv] { font-size: 14px; }
.status-sheet .print-section-heading[b-geetc6r2mv]   { font-size: 13px; }
.status-sheet .print-report-signatures span[b-geetc6r2mv]  { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-geetc6r2mv] { font-size: 14px; }

@media screen and (max-width: 900px) {
    .rpt-kpi-strip[b-geetc6r2mv] { grid-template-columns: 1fr 1fr; }
    .rpt-charts-row[b-geetc6r2mv] { grid-template-columns: 1fr; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body[b-geetc6r2mv] { background: white !important; }
    .rpt-topbar[b-geetc6r2mv], .rpt-period-bar[b-geetc6r2mv] { background: white !important; border: none !important; box-shadow: none !important; }
    .rpt-topbar-right[b-geetc6r2mv], .rpt-period-tabs[b-geetc6r2mv], .rpt-date-nav[b-geetc6r2mv], .rpt-back-btn[b-geetc6r2mv], .rpt-header-progress[b-geetc6r2mv], .print-report-actions[b-geetc6r2mv] { display: none !important; }
    .rpt-content[b-geetc6r2mv] { padding: 0 !important; }
    .print-document-content[b-geetc6r2mv] { display: block !important; background: white !important; }
    /* 12mm, NOT 0 - the page margin is deliberately nought so the browser has no margin box to print its automatic
       date, URL and page numbers into, which means the SHEET supplies the whitespace. print.css says exactly that and
       sets `.print-report-sheet { padding: 12mm }`, but CSS isolation compiles this rule to
       `.print-report-sheet[b-xxxxx]`, and a class-plus-attribute selector outranks a bare class even when both are
       !important. So this rule quietly won and printed the sheet hard against the paper edge. */
    .print-report-sheet[b-geetc6r2mv] { width: 100% !important; min-height: auto !important; padding: 12mm !important; border: none !important; box-shadow: none !important; }
    /* ── How these sheets break across pages ──────────────────────────────────
       The same three rules the List of Stallholders prints by, so every document this platform issues paginates alike: a table's
       header row REPEATS on each page it continues onto rather than appearing alone at the top of one, a row is never split, and
       a section block may span pages because some areas hold forty rows. Plus the joins that actually broke: a section heading
       stays with what follows it, and the letterhead and meta strip are never split. */
    .print-status-table thead[b-geetc6r2mv] { display: table-header-group; }
    .print-status-table tfoot[b-geetc6r2mv] { display: table-footer-group; }

    .print-status-table tr[b-geetc6r2mv] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-section-heading[b-geetc6r2mv] {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-header[b-geetc6r2mv],
    .print-report-meta[b-geetc6r2mv] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A SECTION IS ONE UNIT: its name, its summary strip and its rows. This was uto, which put a heading and a total at the
       foot of a page with the rows they describe on the next. void is a request, not a constraint: a section taller than the
       page is still split, and the repeating header keeps that readable - so small sections stay whole and large ones still fit. */
    .print-section-block[b-geetc6r2mv] {
        break-inside: avoid;
        page-break-inside: avoid;
        /* The top space is PADDING here, not the margin this block carries on screen. A margin is dropped at a page break; a
           padding is part of the box and survives, so a section that begins a page opens clear of the paper edge instead of
           against it. The page margin is nought, because a page margin is where Chromium prints its own date, title and URL and
           no CSS turns that off - so the document supplies its own whitespace. Sections are kept whole above, which is what makes
           a continued page always begin with one. */
        margin-top: 0 !important;
        padding-top: 10mm;
    }

    .print-section-summary[b-geetc6r2mv] {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Signatures are never split down the middle: "Prepared by" on one page and "Reviewed by" on the next is not a document
       anybody signs. */
    .print-report-signatures[b-geetc6r2mv] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-table-wrap[b-geetc6r2mv] { overflow: visible !important; }
    /* ── Why page two used to start hard against the paper edge ───────────────
       The page box is margin-free and the 12mm of whitespace came from padding on the SHEET. A block's padding applies once, at
       its own top and bottom, not at every page break - so pages after the first began at y=0 with a table header touching the
       edge. Only a page MARGIN repeats per page, so these two documents ask for one of their own; a named page applies solely to
       what asks for it, leaving the roster, the statements and the receipts on the margin-free box they were tuned for.

       Stated rather than buried: a top margin gives the browser somewhere to print its automatic date and page numbers. Untick
       "Headers and footers" in the print dialog if it does. The alternative was figures against the paper edge on every page. */
    /* The page margin these sheets need is injected at print time by stalltrackPrint.reportDocument, NOT set here. An @page in a
       scoped stylesheet does not reach the print engine, and a NAMED page is not honoured at all - print.css assigns a landscape
       named page to .print-report-sheet and this document still printed portrait, which is the proof. Left and right padding is
       injected with it, so nothing about the paper margin is stated in CSS any more. */
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-geetc6r2mv] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-geetc6r2mv]::before,
    .rpt-topbar[b-geetc6r2mv]::after {
        display: none;
    }

.rpt-back-btn[b-geetc6r2mv] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-geetc6r2mv] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-geetc6r2mv] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-geetc6r2mv] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-geetc6r2mv] {
    color: var(--text-tertiary);
}

.rpt-title[b-geetc6r2mv] {
    color: var(--navy);
}

.rpt-subtitle[b-geetc6r2mv] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-geetc6r2mv] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-geetc6r2mv] {
    background: var(--accent);
}

.rpt-action-btn[b-geetc6r2mv] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-geetc6r2mv] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-geetc6r2mv] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-geetc6r2mv],
.rpt-document-tab.active[b-geetc6r2mv],
.utility-section-tab.active[b-geetc6r2mv] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-geetc6r2mv],
.rpt-document-tab:hover:not(.active)[b-geetc6r2mv],
.utility-section-tab:hover:not(.active)[b-geetc6r2mv] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-geetc6r2mv],
.rpt-action-btn:focus-visible[b-geetc6r2mv],
.rpt-period-tab:focus-visible[b-geetc6r2mv],
.rpt-document-tab:focus-visible[b-geetc6r2mv] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/Reports/TpmCollectionReport.razor.rz.scp.css */
.tpm-report-topbar[b-ghm5lp1gyz] {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 2rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.tpm-report-navigation[b-ghm5lp1gyz],
.tpm-report-actions[b-ghm5lp1gyz],
.tpm-report-breadcrumb[b-ghm5lp1gyz] {
    display: flex;
    align-items: center;
}

.tpm-report-navigation[b-ghm5lp1gyz] {
    gap: 0.75rem;
    min-width: 0;
}

.tpm-report-back[b-ghm5lp1gyz] {
    flex: 0 0 34px;
}

.tpm-report-breadcrumb[b-ghm5lp1gyz] {
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-report-breadcrumb a[b-ghm5lp1gyz] {
    color: var(--text-muted);
    text-decoration: none;
}

.tpm-report-breadcrumb a:hover[b-ghm5lp1gyz] {
    color: var(--gold);
}

.tpm-report-breadcrumb strong[b-ghm5lp1gyz] {
    color: var(--navy);
    font-weight: 650;
}

.tpm-report-actions[b-ghm5lp1gyz] {
    flex: 0 0 auto;
    gap: 0.55rem;
}

.tpm-report-action[b-ghm5lp1gyz] {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.8rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.tpm-report-action svg[b-ghm5lp1gyz] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tpm-report-action.primary[b-ghm5lp1gyz] {
    color: #fff;
    background: var(--navy);
    border-color: var(--navy);
}

.tpm-report-action.primary:hover:not(:disabled)[b-ghm5lp1gyz] {
    background: var(--navy-2);
}

.tpm-report-action.secondary[b-ghm5lp1gyz] {
    color: var(--navy);
    background: var(--bg-card);
}

.tpm-report-action.secondary:hover:not(:disabled)[b-ghm5lp1gyz] {
    background: var(--bg);
    border-color: var(--navy-2);
}

.tpm-report-action:disabled[b-ghm5lp1gyz] {
    cursor: wait;
    opacity: 0.55;
}

.tpm-report-page[b-ghm5lp1gyz] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    overflow: auto;
    padding: 1.5rem 2rem 2.5rem;
    background: var(--bg);
}

.tpm-report-intro[b-ghm5lp1gyz] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.tpm-report-eyebrow[b-ghm5lp1gyz] {
    color: var(--gold);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tpm-report-intro h1[b-ghm5lp1gyz] {
    margin: 0.25rem 0 0;
    color: var(--navy);
    font-size: 23px;
    font-weight: 750;
    line-height: 1.2;
}

.tpm-report-intro p[b-ghm5lp1gyz] {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.tpm-report-controls[b-ghm5lp1gyz] {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    gap: 0.65rem;
}

.tpm-report-controls label[b-ghm5lp1gyz],
.tpm-day-picker[b-ghm5lp1gyz] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.tpm-report-print-date[b-ghm5lp1gyz] {
    display: none;
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-report-controls select[b-ghm5lp1gyz],
.tpm-day-picker select[b-ghm5lp1gyz] {
    min-width: 116px;
    min-height: 34px;
    padding: 0 0.55rem;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 550;
    letter-spacing: normal;
    text-transform: none;
}

.tpm-report-controls select:focus-visible[b-ghm5lp1gyz],
.tpm-day-picker select:focus-visible[b-ghm5lp1gyz],
.tpm-report-action:focus-visible[b-ghm5lp1gyz],
.tpm-report-error button:focus-visible[b-ghm5lp1gyz] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.tpm-report-sheet[b-ghm5lp1gyz] {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 1.5rem 1.65rem;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(20, 36, 60, 0.035);
}

.tpm-report-letterhead[b-ghm5lp1gyz] {
    position: relative;
    padding: 0.15rem 4.5rem 1rem;
    border-bottom: 2px solid var(--navy);
    text-align: center;
}

.tpm-report-letterhead img[b-ghm5lp1gyz] {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.tpm-report-republic[b-ghm5lp1gyz] {
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-report-office[b-ghm5lp1gyz] {
    margin-top: 2px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.tpm-report-municipality[b-ghm5lp1gyz] {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-report-letterhead h2[b-ghm5lp1gyz] {
    margin: 0.75rem 0 0.1rem;
    color: var(--navy);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.045em;
}

.tpm-report-fiscal-year[b-ghm5lp1gyz] {
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-report-section[b-ghm5lp1gyz] {
    margin-top: 1.15rem;
}

.tpm-report-section h3[b-ghm5lp1gyz],
.tpm-report-basis h3[b-ghm5lp1gyz] {
    margin: 0 0 0.6rem;
    color: var(--navy);
    font-size: 13px;
    font-weight: 750;
}

.tpm-position-strip[b-ghm5lp1gyz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 7px;
}

.tpm-position-strip > div[b-ghm5lp1gyz] {
    display: flex;
    min-height: 64px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0.65rem 0.85rem;
}

.tpm-position-strip > div + div[b-ghm5lp1gyz] {
    border-left: 1px solid var(--border);
}

.tpm-position-strip span[b-ghm5lp1gyz] {
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tpm-position-strip strong[b-ghm5lp1gyz] {
    color: var(--navy);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.tpm-report-note[b-ghm5lp1gyz],
.tpm-report-basis-inline[b-ghm5lp1gyz] {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-section-heading[b-ghm5lp1gyz] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

.tpm-section-heading h3[b-ghm5lp1gyz] {
    margin: 0;
}

.tpm-section-heading > span[b-ghm5lp1gyz] {
    color: var(--text-muted);
    font-size: 11px;
}

.tpm-day-picker[b-ghm5lp1gyz] {
    align-items: flex-start;
    text-transform: none;
    letter-spacing: normal;
}

.tpm-day-picker select[b-ghm5lp1gyz] {
    min-width: 165px;
}

.tpm-table-scroll[b-ghm5lp1gyz] {
    width: 100%;
    overflow-x: auto;
}

.tpm-report-table[b-ghm5lp1gyz] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 11px;
}

.tpm-report-table thead[b-ghm5lp1gyz] {
    display: table-header-group;
}

.tpm-report-table thead tr[b-ghm5lp1gyz] {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.tpm-report-table th[b-ghm5lp1gyz],
.tpm-report-table td[b-ghm5lp1gyz] {
    padding: 0.55rem 0.65rem;
    color: var(--navy);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.tpm-report-table th[b-ghm5lp1gyz] {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.tpm-report-table tbody th[b-ghm5lp1gyz] {
    color: var(--navy);
}

.tpm-report-table .numeric[b-ghm5lp1gyz] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tpm-report-table .vendor-cell[b-ghm5lp1gyz] {
    font-weight: 700;
}

.tpm-report-table .total-row th[b-ghm5lp1gyz],
.tpm-report-table .total-row td[b-ghm5lp1gyz] {
    border-top: 1px solid var(--navy);
    border-bottom: 0;
    font-weight: 750;
}

.tpm-monthly-table[b-ghm5lp1gyz] {
    min-width: 1050px;
    table-layout: fixed;
    font-size: 11px;
}

.tpm-monthly-table th[b-ghm5lp1gyz],
.tpm-monthly-table td[b-ghm5lp1gyz] {
    padding: 0.5rem 0.22rem;
    text-align: center;
}

.tpm-monthly-table th:first-child[b-ghm5lp1gyz],
.tpm-monthly-table tbody th[b-ghm5lp1gyz] {
    width: 70px;
    text-align: left;
}

.tpm-monthly-table th:nth-child(2)[b-ghm5lp1gyz] {
    width: 88px;
}

.tpm-monthly-table th:nth-last-child(2)[b-ghm5lp1gyz] {
    width: 90px;
}

.tpm-monthly-table th:last-child[b-ghm5lp1gyz] {
    width: 42px;
}

.tpm-monthly-table tbody td[b-ghm5lp1gyz] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tpm-report-empty[b-ghm5lp1gyz],
.tpm-report-empty-block[b-ghm5lp1gyz] {
    padding: 0.9rem;
    color: var(--text-muted) !important;
    font-size: 11px;
    text-align: center;
}

.tpm-report-empty-block[b-ghm5lp1gyz] {
    border: 1px solid var(--border);
    border-radius: 6px;
}

.tpm-day-summary[b-ghm5lp1gyz] {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 0.7rem 0.8rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 6px 6px;
}

.tpm-day-summary > div[b-ghm5lp1gyz] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.tpm-day-summary span[b-ghm5lp1gyz] {
    color: var(--gold);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tpm-day-summary strong[b-ghm5lp1gyz] {
    color: var(--navy);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.tpm-report-basis[b-ghm5lp1gyz] {
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.tpm-report-basis dl[b-ghm5lp1gyz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem 1rem;
    margin: 0;
}

.tpm-report-basis dl > div[b-ghm5lp1gyz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tpm-report-basis dt[b-ghm5lp1gyz] {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tpm-report-basis dd[b-ghm5lp1gyz] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--navy);
    font-size: 11px;
}

.tpm-reconciliation-note[b-ghm5lp1gyz] {
    margin-top: 0.8rem;
    padding: 0.6rem 0.75rem;
    color: var(--navy);
    background: var(--bg);
    border-left: 3px solid var(--gold);
    font-size: 11px;
}

.tpm-report-state[b-ghm5lp1gyz] {
    padding: 2.5rem;
    color: var(--text-muted);
    text-align: center;
}

.tpm-report-error[b-ghm5lp1gyz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 7px;
    font-size: 12px;
}

.tpm-report-error button[b-ghm5lp1gyz] {
    padding: 0.4rem 0.7rem;
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .tpm-report-intro[b-ghm5lp1gyz] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.9rem;
    }

    .tpm-report-controls[b-ghm5lp1gyz] {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .tpm-report-topbar[b-ghm5lp1gyz] {
        padding-inline: 1rem;
    }

    .tpm-report-page[b-ghm5lp1gyz] {
        padding: 1rem;
    }

    .tpm-report-actions[b-ghm5lp1gyz] {
        gap: 0.35rem;
    }

    .tpm-report-action[b-ghm5lp1gyz] {
        gap: 0.25rem;
        padding-inline: 0.5rem;
        font-size: 11px;
    }

    .tpm-report-breadcrumb[b-ghm5lp1gyz] {
        font-size: 11px;
    }

    .tpm-report-sheet[b-ghm5lp1gyz] {
        padding: 1rem;
    }

    .tpm-report-letterhead[b-ghm5lp1gyz] {
        padding-inline: 3.1rem;
    }

    .tpm-report-letterhead img[b-ghm5lp1gyz] {
        width: 38px;
        height: 38px;
    }

    .tpm-position-strip[b-ghm5lp1gyz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tpm-position-strip > div:nth-child(3)[b-ghm5lp1gyz] {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .tpm-position-strip > div:nth-child(4)[b-ghm5lp1gyz] {
        border-top: 1px solid var(--border);
    }

    .tpm-report-basis dl[b-ghm5lp1gyz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tpm-section-heading[b-ghm5lp1gyz] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media print {
    .tpm-report-topbar[b-ghm5lp1gyz],
    .tpm-report-intro[b-ghm5lp1gyz],
    .tpm-report-controls[b-ghm5lp1gyz],
    .tpm-report-actions[b-ghm5lp1gyz],
    .tpm-report-navigation[b-ghm5lp1gyz],
    .tpm-day-picker[b-ghm5lp1gyz],
    .tpm-report-state[b-ghm5lp1gyz],
    .tpm-report-error[b-ghm5lp1gyz] {
        display: none !important;
    }

    .tpm-report-print-date[b-ghm5lp1gyz] {
        display: inline !important;
        color: #333 !important;
    }

    .tpm-report-page[b-ghm5lp1gyz] {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .tpm-report-sheet[b-ghm5lp1gyz] {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .tpm-report-letterhead[b-ghm5lp1gyz],
    .tpm-report-section[b-ghm5lp1gyz],
    .tpm-report-basis[b-ghm5lp1gyz],
    .tpm-position-strip[b-ghm5lp1gyz],
    .tpm-report-table tr[b-ghm5lp1gyz] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .tpm-report-section[b-ghm5lp1gyz] {
        margin-top: 8mm;
    }

    .tpm-report-table[b-ghm5lp1gyz] {
        font-size: 8px;
    }

    .tpm-report-table th[b-ghm5lp1gyz],
    .tpm-report-table td[b-ghm5lp1gyz] {
        padding: 3px 4px;
    }

    .tpm-day-summary[b-ghm5lp1gyz] {
        background: #fff !important;
        border-color: #999 !important;
    }

    .tpm-day-summary span[b-ghm5lp1gyz],
    .tpm-day-summary strong[b-ghm5lp1gyz] {
        color: #111 !important;
    }

    .tpm-monthly-table[b-ghm5lp1gyz] {
        min-width: 100%;
        font-size: 7px;
    }

    .tpm-monthly-table th[b-ghm5lp1gyz],
    .tpm-monthly-table td[b-ghm5lp1gyz] {
        padding: 3px 1px;
    }

    .tpm-table-scroll[b-ghm5lp1gyz] {
        overflow: visible !important;
    }

    .tpm-report-empty-block[b-ghm5lp1gyz],
    .tpm-report-empty[b-ghm5lp1gyz] {
        color: #333 !important;
        background: #fff !important;
    }

    .tpm-ct-mark[b-ghm5lp1gyz] {
        color: #111 !important;
        background: #fff !important;
        border-color: #555 !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.tpm-report-topbar[b-ghm5lp1gyz], .tpm-report-navigation[b-ghm5lp1gyz], .tpm-report-actions[b-ghm5lp1gyz], .tpm-report-page[b-ghm5lp1gyz] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.tpm-report-action.primary[b-ghm5lp1gyz] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

.tpm-report-action.primary:hover:not(:disabled)[b-ghm5lp1gyz] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--surface);
}
/* /Components/Pages/Reports/TpmReports.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   TpmReports.razor.css — Tabo-an Public Market Reports
   Visual language mirrors TccReports / TrmReports. All tokens from app.css.
   TPM-specific: ₱100 vendor fee per Friday, paid/unpaid attendance, goods mix.
══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.rpt-topbar[b-uyuiikgrsm] { background: var(--navy); padding: 18px 28px 16px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; }
.rpt-topbar[b-uyuiikgrsm]::before { content: ""; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(200,168,75,.16) 0%, transparent 70%); pointer-events: none; }
.rpt-topbar-left[b-uyuiikgrsm] { display: flex; align-items: center; gap: 14px; flex: 1; position: relative; z-index: 1; }
.rpt-back-btn[b-uyuiikgrsm] { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); text-decoration: none; transition: background .15s; flex-shrink: 0; }
.rpt-back-btn:hover[b-uyuiikgrsm] { background: rgba(255,255,255,.14); }
.rpt-back-btn svg[b-uyuiikgrsm] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-topbar-icon[b-uyuiikgrsm] { width: 40px; height: 40px; border-radius: 10px; background: rgba(200,168,75,.18); border: 1px solid rgba(200,168,75,.28); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rpt-topbar-icon svg[b-uyuiikgrsm] { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpt-eyebrow[b-uyuiikgrsm] { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.rpt-title[b-uyuiikgrsm] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.rpt-subtitle[b-uyuiikgrsm] { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.rpt-topbar-right[b-uyuiikgrsm] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.rpt-action-btn[b-uyuiikgrsm] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s; }
.rpt-action-btn:hover[b-uyuiikgrsm] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-uyuiikgrsm] { outline: 2px solid color-mix(in srgb, var(--gold) 85%, white); outline-offset: 2px; }
.rpt-action-btn svg[b-uyuiikgrsm] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Period bar ── */
.rpt-period-bar[b-uyuiikgrsm] { display: flex; align-items: center; justify-content: space-between; padding: 10px 28px; background: var(--bg-card); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
.rpt-period-tabs[b-uyuiikgrsm] { display: flex; gap: 5px; background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%); border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 9px; padding: 4px; align-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.86); }
.rpt-period-tab[b-uyuiikgrsm] { min-height: 32px; min-width: 92px; padding: 6px 18px; border-radius: 6px; border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 650; color: color-mix(in srgb, var(--text-muted) 88%, var(--navy)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.rpt-period-tab.active[b-uyuiikgrsm] { background: var(--accent); border-color: color-mix(in srgb, var(--navy) 76%, #fff); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14); }
.rpt-document-tab[b-uyuiikgrsm] { gap: 7px; padding: 0 16px; min-width: 0; }
.rpt-document-tab svg[b-uyuiikgrsm] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rpt-date-nav[b-uyuiikgrsm] { display: flex; align-items: center; gap: 10px; }
.rpt-date-nav.utility-mode .rpt-current-period[b-uyuiikgrsm] { color: var(--accent); }
.rpt-nav-btn[b-uyuiikgrsm] { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-icon); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .13s; }
.rpt-nav-btn:hover[b-uyuiikgrsm] { background: var(--border); }
.rpt-nav-btn svg[b-uyuiikgrsm] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-uyuiikgrsm] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ── Body: summary strip, trend panel, registers (V3: hairlines, no tiles, no gradients) ── */
.rpt-content[b-uyuiikgrsm] { padding: 20px 28px 40px; display: flex; flex-direction: column; gap: 20px; }

.tpm-summary[b-uyuiikgrsm] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

    .tpm-summary > div[b-uyuiikgrsm] {
        display: grid;
        gap: 4px;
        min-width: 0;
        padding: 14px 20px;
        border-right: 1px solid var(--border);
    }

        .tpm-summary > div:last-child[b-uyuiikgrsm] {
            border-right: 0;
        }

    .tpm-summary dt[b-uyuiikgrsm] {
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .tpm-summary dd[b-uyuiikgrsm] {
        margin: 0;
        color: var(--navy);
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.15;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }

.tpm-panel[b-uyuiikgrsm] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 20px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.tpm-panel-title[b-uyuiikgrsm],
.tpm-register-title[b-uyuiikgrsm] {
    margin: 0;
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 700;
}

.tpm-panel-note[b-uyuiikgrsm] {
    margin: 2px 0 12px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.tpm-registers[b-uyuiikgrsm] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px;
    align-items: start;
}

.tpm-goods[b-uyuiikgrsm],
.tpm-log[b-uyuiikgrsm] {
    min-width: 0;
}

.tpm-table-scroll[b-uyuiikgrsm] {
    max-width: 100%;
    overflow-x: auto;
}

.tpm-log .tpm-table-scroll[b-uyuiikgrsm] {
    max-height: 420px;
    overflow-y: auto;
}

.tpm-row-name[b-uyuiikgrsm] {
    color: var(--navy);
    font-weight: 600;
}

.tpm-date[b-uyuiikgrsm] {
    white-space: nowrap;
    color: var(--text-secondary);
}

.tpm-empty[b-uyuiikgrsm] {
    padding: 20px 10px;
    color: var(--text-tertiary);
    text-align: center;
}

/* ── Print document shell (shared) ── */
.print-document-content[b-uyuiikgrsm] { display: block; background: #eef3f7; overflow-x: hidden; }
.print-report-sheet[b-uyuiikgrsm] { width: 100%; min-height: 900px; padding: 30px 28px 40px; box-sizing: border-box; background: #fff; border: 1px solid #d5dde5; box-shadow: 0 18px 38px rgba(9, 31, 52, .08); color: #111827; }
.print-report-header[b-uyuiikgrsm] { text-align: center; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.print-report-logo[b-uyuiikgrsm] { display: block; width: 58px; height: 58px; object-fit: contain; margin: 0 auto 10px; }
.print-republic[b-uyuiikgrsm] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
.print-report-header h2[b-uyuiikgrsm] { margin: 7px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.15; color: #111827; }
.print-report-header p[b-uyuiikgrsm] { margin: 0; font-size: 12px; color: #4b5563; }
.print-report-title[b-uyuiikgrsm] { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; color: #111827; }
.print-report-meta[b-uyuiikgrsm] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cfd6de; margin-bottom: 16px; }
.print-report-meta div[b-uyuiikgrsm] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-meta div:last-child[b-uyuiikgrsm] { border-right: none; }
.print-report-meta span[b-uyuiikgrsm] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-meta strong[b-uyuiikgrsm] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-summary[b-uyuiikgrsm] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cfd6de; margin-bottom: 20px; background: #f8fafc; }
.print-report-summary div[b-uyuiikgrsm] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-summary div:last-child[b-uyuiikgrsm] { border-right: none; }
.print-report-summary span[b-uyuiikgrsm] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-summary strong[b-uyuiikgrsm] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-signatures[b-uyuiikgrsm] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 58px; }
.print-report-signatures div[b-uyuiikgrsm] { border-top: 1px solid #111827; padding-top: 8px; text-align: center; }
.print-report-signatures span[b-uyuiikgrsm] { display: block; font-size: 11px; color: #6b7280; }
.print-report-signatures strong[b-uyuiikgrsm] { display: block; margin-top: 3px; font-size: 11px; color: #111827; }
.print-empty[b-uyuiikgrsm] { margin: 22px 0; padding: 16px; text-align: center; font-size: 12px; color: #6b7280; border: 1px dashed #cfd6de; background: #f8fafc; }
.print-table-wrap[b-uyuiikgrsm] { margin-top: 12px; width: 100%; overflow-x: hidden; }
.print-status-table[b-uyuiikgrsm] { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; color: #111827; }
.print-status-table th[b-uyuiikgrsm], .print-status-table td[b-uyuiikgrsm] { border: 1px solid #cfd6de; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-status-table th[b-uyuiikgrsm] { background: #f3f6f9; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #374151; }
.status-sheet .print-status-table[b-uyuiikgrsm] { font-size: 13px !important; }
.status-sheet .print-status-table th[b-uyuiikgrsm] { font-size: 11px !important; }
.status-sheet .print-status-table td[b-uyuiikgrsm] { padding: 9px 10px; }
.status-paid[b-uyuiikgrsm] { color: #166534; font-weight: 700; }
.status-unpaid[b-uyuiikgrsm] { color: #8b3a3a; font-weight: 700; }
.text-muted-cell[b-uyuiikgrsm] { color: #6b7280; }
.print-section-block[b-uyuiikgrsm] { margin-top: 24px; }
.print-section-heading[b-uyuiikgrsm] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); padding: 6px 0 4px; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.history-sheet .history-table[b-uyuiikgrsm] { font-size: 15px !important; }
.history-sheet .history-table th[b-uyuiikgrsm] { font-size: 12px !important; }
.history-sheet .history-table td[b-uyuiikgrsm] { padding: 12px 12px; }
.history-sheet .history-table th:first-child[b-uyuiikgrsm], .history-sheet .history-table td:first-child[b-uyuiikgrsm] { min-width: 96px; white-space: nowrap; }
.history-empty[b-uyuiikgrsm] { text-align: center; color: #6b7280; padding: 18px 0; }
.history-total-row td[b-uyuiikgrsm] { background: #f3f6f9; border-top: 2px solid #cfd6de; font-size: 13px; }
.history-sheet .print-report-meta span[b-uyuiikgrsm]  { font-size: 12px; }
.history-sheet .print-report-meta strong[b-uyuiikgrsm] { font-size: 16px; }
.history-sheet .print-section-heading[b-uyuiikgrsm]   { font-size: 15px; }
.history-sheet .history-total-row td[b-uyuiikgrsm]    { font-size: 15px !important; padding: 12px 12px; }
.history-sheet .print-report-signatures span[b-uyuiikgrsm]  { font-size: 13px; }
.history-sheet .print-report-signatures strong[b-uyuiikgrsm] { font-size: 15px; }
.status-sheet .print-report-meta span[b-uyuiikgrsm]   { font-size: 11px; }
.status-sheet .print-report-meta strong[b-uyuiikgrsm] { font-size: 14px; }
.status-sheet .print-report-summary span[b-uyuiikgrsm], .status-sheet .print-report-summary strong[b-uyuiikgrsm] { font-size: 14px; }
.status-sheet .print-report-signatures span[b-uyuiikgrsm]  { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-uyuiikgrsm] { font-size: 14px; }

@media screen and (max-width: 900px) {
    .tpm-summary[b-uyuiikgrsm] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tpm-summary > div:nth-child(2)[b-uyuiikgrsm] { border-right: 0; }
    .tpm-summary > div:nth-child(-n+2)[b-uyuiikgrsm] { border-bottom: 1px solid var(--border); }
    .tpm-registers[b-uyuiikgrsm] { grid-template-columns: minmax(0, 1fr); }
    .rpt-content[b-uyuiikgrsm] { padding-inline: 16px; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body[b-uyuiikgrsm] { background: white !important; }
    .rpt-topbar[b-uyuiikgrsm], .rpt-period-bar[b-uyuiikgrsm] { background: white !important; border: none !important; box-shadow: none !important; }
    .rpt-topbar-right[b-uyuiikgrsm], .rpt-period-tabs[b-uyuiikgrsm], .rpt-date-nav[b-uyuiikgrsm], .rpt-back-btn[b-uyuiikgrsm], .print-report-actions[b-uyuiikgrsm] { display: none !important; }
    .rpt-content[b-uyuiikgrsm] { padding: 0 !important; }
    .print-document-content[b-uyuiikgrsm] { display: block !important; background: white !important; }
    /* 12mm, NOT 0 - the page margin is deliberately nought so the browser has no margin box to print its automatic
       date, URL and page numbers into, which means the SHEET supplies the whitespace. print.css says exactly that and
       sets `.print-report-sheet { padding: 12mm }`, but CSS isolation compiles this rule to
       `.print-report-sheet[b-xxxxx]`, and a class-plus-attribute selector outranks a bare class even when both are
       !important. So this rule quietly won and printed the sheet hard against the paper edge. */
    .print-report-sheet[b-uyuiikgrsm] { width: 100% !important; min-height: auto !important; padding: 12mm !important; border: none !important; box-shadow: none !important; }
    /* ── How these sheets break across pages ──────────────────────────────────
       The same three rules the List of Stallholders prints by, so every document this platform issues paginates alike: a table's
       header row REPEATS on each page it continues onto rather than appearing alone at the top of one, a row is never split, and
       a section block may span pages because some areas hold forty rows. Plus the joins that actually broke: a section heading
       stays with what follows it, and the letterhead and meta strip are never split. */
    .print-status-table thead[b-uyuiikgrsm] { display: table-header-group; }
    .print-status-table tfoot[b-uyuiikgrsm] { display: table-footer-group; }

    .print-status-table tr[b-uyuiikgrsm] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-section-heading[b-uyuiikgrsm] {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-header[b-uyuiikgrsm],
    .print-report-meta[b-uyuiikgrsm] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A SECTION IS ONE UNIT: its name, its summary strip and its rows. This was uto, which put a heading and a total at the
       foot of a page with the rows they describe on the next. void is a request, not a constraint: a section taller than the
       page is still split, and the repeating header keeps that readable - so small sections stay whole and large ones still fit. */
    .print-section-block[b-uyuiikgrsm] {
        break-inside: avoid;
        page-break-inside: avoid;
        /* The top space is PADDING here, not the margin this block carries on screen. A margin is dropped at a page break; a
           padding is part of the box and survives, so a section that begins a page opens clear of the paper edge instead of
           against it. The page margin is nought, because a page margin is where Chromium prints its own date, title and URL and
           no CSS turns that off - so the document supplies its own whitespace. Sections are kept whole above, which is what makes
           a continued page always begin with one. */
        margin-top: 0 !important;
        padding-top: 10mm;
    }

    .print-section-summary[b-uyuiikgrsm] {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Signatures are never split down the middle: "Prepared by" on one page and "Reviewed by" on the next is not a document
       anybody signs. */
    .print-report-signatures[b-uyuiikgrsm] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-table-wrap[b-uyuiikgrsm] { overflow: visible !important; }
    /* ── Why page two used to start hard against the paper edge ───────────────
       The page box is margin-free and the 12mm of whitespace came from padding on the SHEET. A block's padding applies once, at
       its own top and bottom, not at every page break - so pages after the first began at y=0 with a table header touching the
       edge. Only a page MARGIN repeats per page, so these two documents ask for one of their own; a named page applies solely to
       what asks for it, leaving the roster, the statements and the receipts on the margin-free box they were tuned for.

       Stated rather than buried: a top margin gives the browser somewhere to print its automatic date and page numbers. Untick
       "Headers and footers" in the print dialog if it does. The alternative was figures against the paper edge on every page. */
    /* The page margin these sheets need is injected at print time by stalltrackPrint.reportDocument, NOT set here. An @page in a
       scoped stylesheet does not reach the print engine, and a NAMED page is not honoured at all - print.css assigns a landscape
       named page to .print-report-sheet and this document still printed portrait, which is the proof. Left and right padding is
       injected with it, so nothing about the paper margin is stated in CSS any more. */
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-uyuiikgrsm] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-uyuiikgrsm]::before,
    .rpt-topbar[b-uyuiikgrsm]::after {
        display: none;
    }

.rpt-back-btn[b-uyuiikgrsm] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-uyuiikgrsm] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-uyuiikgrsm] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-uyuiikgrsm] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-uyuiikgrsm] {
    color: var(--text-tertiary);
}

.rpt-title[b-uyuiikgrsm] {
    color: var(--navy);
}

.rpt-subtitle[b-uyuiikgrsm] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-uyuiikgrsm] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-uyuiikgrsm] {
    background: var(--accent);
}

.rpt-action-btn[b-uyuiikgrsm] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-uyuiikgrsm] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-uyuiikgrsm] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-uyuiikgrsm],
.rpt-document-tab.active[b-uyuiikgrsm],
.utility-section-tab.active[b-uyuiikgrsm] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-uyuiikgrsm],
.rpt-document-tab:hover:not(.active)[b-uyuiikgrsm],
.utility-section-tab:hover:not(.active)[b-uyuiikgrsm] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-uyuiikgrsm],
.rpt-action-btn:focus-visible[b-uyuiikgrsm],
.rpt-period-tab:focus-visible[b-uyuiikgrsm],
.rpt-document-tab:focus-visible[b-uyuiikgrsm] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/Reports/TrmReports.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   TrmReports.razor.css — Transport Terminal Reports
   Visual language mirrors TccReports / SlhReports. All tokens from app.css.
   TRM-specific: per-trip ₱30 fee, OR compliance, organization breakdown.
══════════════════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.rpt-topbar[b-qqblra4qqo] { background: var(--navy); padding: 18px 28px 16px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; }
.rpt-topbar[b-qqblra4qqo]::before { content: ""; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(200,168,75,.16) 0%, transparent 70%); pointer-events: none; }
.rpt-topbar-left[b-qqblra4qqo] { display: flex; align-items: center; gap: 14px; flex: 1; position: relative; z-index: 1; }
.rpt-back-btn[b-qqblra4qqo] { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); text-decoration: none; transition: background .15s; flex-shrink: 0; }
.rpt-back-btn:hover[b-qqblra4qqo] { background: rgba(255,255,255,.14); }
.rpt-back-btn svg[b-qqblra4qqo] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-topbar-icon[b-qqblra4qqo] { width: 40px; height: 40px; border-radius: 10px; background: rgba(200,168,75,.18); border: 1px solid rgba(200,168,75,.28); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rpt-topbar-icon svg[b-qqblra4qqo] { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rpt-eyebrow[b-qqblra4qqo] { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.rpt-title[b-qqblra4qqo] { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.rpt-subtitle[b-qqblra4qqo] { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.rpt-topbar-right[b-qqblra4qqo] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.rpt-action-btn[b-qqblra4qqo] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s; }
.rpt-action-btn:hover[b-qqblra4qqo] { background: rgba(255,255,255,.14); }
.rpt-action-btn:focus-visible[b-qqblra4qqo] { outline: 2px solid color-mix(in srgb, var(--gold) 85%, white); outline-offset: 2px; }
.rpt-action-btn svg[b-qqblra4qqo] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Period bar ── */
.rpt-period-bar[b-qqblra4qqo] { display: flex; align-items: center; justify-content: space-between; padding: 10px 28px; background: var(--bg-card); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
.rpt-period-tabs[b-qqblra4qqo] { display: flex; gap: 5px; background: linear-gradient(180deg, #f8fbfd 0%, var(--bg) 100%); border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 9px; padding: 4px; align-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.86); }
.rpt-period-tab[b-qqblra4qqo] { min-height: 32px; min-width: 92px; padding: 6px 18px; border-radius: 6px; border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 650; color: color-mix(in srgb, var(--text-muted) 88%, var(--navy)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.rpt-period-tab.active[b-qqblra4qqo] { background: var(--accent); border-color: color-mix(in srgb, var(--navy) 76%, #fff); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(9,31,52,.14); }
.rpt-document-tab[b-qqblra4qqo] { gap: 7px; padding: 0 16px; min-width: 0; }
.rpt-document-tab svg[b-qqblra4qqo] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rpt-date-nav[b-qqblra4qqo] { display: flex; align-items: center; gap: 10px; }
.rpt-date-nav.utility-mode .rpt-current-period[b-qqblra4qqo] { color: var(--accent); }
.rpt-nav-btn[b-qqblra4qqo] { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-icon); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .13s; }
.rpt-nav-btn:hover[b-qqblra4qqo] { background: var(--border); }
.rpt-nav-btn svg[b-qqblra4qqo] { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpt-current-period[b-qqblra4qqo] { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ── KPI Strip ── */
.rpt-kpi-strip[b-qqblra4qqo] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px 28px 0; }
.rpt-kpi-card[b-qqblra4qqo] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; box-shadow: 0 1px 4px rgba(13,33,55,.06); }
.kpi-icon-wrap[b-qqblra4qqo] { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon-wrap svg[b-qqblra4qqo] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Uniform neutral icon tiles — consistent across all facility reports. */
.kpi-icon-green[b-qqblra4qqo],
.kpi-icon-gold[b-qqblra4qqo],
.kpi-icon-neutral[b-qqblra4qqo] { background: var(--bg-icon); color: var(--navy-3); }
.kpi-body[b-qqblra4qqo] { flex: 1; min-width: 0; }
.kpi-label[b-qqblra4qqo] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
.kpi-value[b-qqblra4qqo] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.kpi-change[b-qqblra4qqo] { font-size: 12px; color: var(--text-subtle); margin-top: 5px; }

/* ── Main content ── */
.rpt-content[b-qqblra4qqo] { padding: 20px 28px 40px; display: flex; flex-direction: column; gap: 20px; }

/* ── Charts row ── */
.rpt-charts-row[b-qqblra4qqo] { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: stretch; }
.rpt-chart-card[b-qqblra4qqo] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: 0 1px 4px rgba(13,33,55,.06); }
.rpt-chart-wide[b-qqblra4qqo] { display: flex; flex-direction: column; }
.chart-header[b-qqblra4qqo] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.chart-header-left[b-qqblra4qqo] { flex: 1; }
.chart-title[b-qqblra4qqo] { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0; }
.chart-subtitle[b-qqblra4qqo] { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.chart-legend[b-qqblra4qqo] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend-item[b-qqblra4qqo] { display: flex; align-items: center; gap: 6px; }
.legend-dot[b-qqblra4qqo] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-label[b-qqblra4qqo] { font-size: 12px; color: var(--text-subtle); font-weight: 500; }

/* ── 3D Bar chart ── */
.rpt-bar-chart[b-qqblra4qqo] { display: flex; align-items: flex-end; gap: 14px; flex: 1; min-height: 250px; padding: 14px 18px 10px; position: relative; background: repeating-linear-gradient(to top, transparent 0, transparent 39px, color-mix(in srgb, var(--border) 55%, transparent) 40px), linear-gradient(to top, rgba(13,33,55,.02) 0%, transparent 100%); border-radius: 12px; border: 1px solid color-mix(in srgb, var(--border) 68%, transparent); }
.rpt-bar-group[b-qqblra4qqo] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.rpt-bar-wrap[b-qqblra4qqo] { width: 100%; height: calc(100% - 40px); position: relative; flex-shrink: 0; }
.rpt-bar-3d[b-qqblra4qqo] { width: min(100%, 140px); height: 100%; position: relative; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--navy) 8%, transparent)); margin-inline: auto; }
.rpt-bar-group.current .rpt-bar-3d[b-qqblra4qqo] { filter: drop-shadow(0 4px 8px rgba(200,168,75,.2)); }
.bar3d-face[b-qqblra4qqo] { position: absolute; }
.bar3d-front[b-qqblra4qqo] { bottom: 0; left: 10%; width: 80%; background: linear-gradient(180deg, #3fa07a 0%, #2d7a5f 100%); border-radius: 9px 9px 4px 4px; transition: height .4s cubic-bezier(.4,0,.2,1), transform .15s ease, filter .15s ease; min-height: 6px; }
.rpt-bar-group.current .bar3d-front[b-qqblra4qqo] { background: linear-gradient(180deg, #d4b45e 0%, #c8a84b 100%); }
.rpt-bar-group.is-zero .bar3d-front[b-qqblra4qqo] { min-height: 10px; background: #e6ebf1; filter: none; }
.rpt-bar-group.is-zero .rpt-bar-3d[b-qqblra4qqo] { filter: none; }
.bar3d-top[b-qqblra4qqo], .bar3d-side[b-qqblra4qqo] { display: none; }
.rpt-bar-group:hover .bar3d-front[b-qqblra4qqo] { transform: translateY(-2px); filter: brightness(1.04); }
.rpt-bar-group:hover .rpt-bar-label[b-qqblra4qqo] { color: var(--navy); }
.rpt-bar-label[b-qqblra4qqo] { font-size: 11px; color: var(--text-muted); white-space: nowrap; text-align: center; margin-top: 6px; font-weight: 500; }
.rpt-bar-val[b-qqblra4qqo] { font-size: 11px; font-weight: 700; color: var(--navy); white-space: nowrap; text-align: center; }
.rpt-bar-group.is-zero .rpt-bar-val[b-qqblra4qqo] { color: var(--text-muted); }

/* ── Donut ── */
.rpt-status-card[b-qqblra4qqo] { display: flex; flex-direction: column; }
.rpt-donut-wrap[b-qqblra4qqo] { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; padding-top: 8px; }
.rpt-donut-container[b-qqblra4qqo] { position: relative; }
.rpt-donut-svg[b-qqblra4qqo] { width: 160px; height: 160px; display: block; }
.donut-center-val[b-qqblra4qqo] { text-anchor: middle; font-size: 22px; font-weight: 800; fill: var(--navy); font-family: inherit; }
.donut-center-lbl[b-qqblra4qqo] { text-anchor: middle; font-size: 11px; font-weight: 700; fill: var(--text-muted); letter-spacing: .08em; font-family: inherit; }
.donut-segment[b-qqblra4qqo] { transition: stroke-dasharray .4s; }
.rpt-donut-legend[b-qqblra4qqo] { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.donut-leg-item[b-qqblra4qqo] { display: flex; align-items: center; justify-content: space-between; }
.donut-leg-left[b-qqblra4qqo] { display: flex; align-items: center; gap: 8px; }
.donut-leg-dot[b-qqblra4qqo] { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-leg-label[b-qqblra4qqo] { font-size: 12.5px; color: var(--text); }
.donut-leg-value[b-qqblra4qqo] { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.donut-leg-pct[b-qqblra4qqo] { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }

/* ── Section heading ── */
.rpt-section-heading[b-qqblra4qqo] { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; }
.rpt-section-rule[b-qqblra4qqo] { flex: 1; height: 1px; background: var(--border); }
.rpt-section-heading h2[b-qqblra4qqo] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); white-space: nowrap; margin: 0; }

/* ── Audit row ── */
.rpt-audit-row[b-qqblra4qqo] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.audit-card[b-qqblra4qqo] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(13,33,55,.06); }
.audit-card-head[b-qqblra4qqo] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 8px; }
.audit-card-head span[b-qqblra4qqo] { font-size: 14px; font-weight: 700; color: var(--navy); }
.audit-subtitle[b-qqblra4qqo] { font-size: 11.5px; color: var(--text-muted); text-align: right; }
.audit-kpi-stack[b-qqblra4qqo] { display: flex; flex-direction: column; gap: 14px; }
.audit-number-card[b-qqblra4qqo] { flex: 1; background: var(--bg); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); }
.audit-number-card strong[b-qqblra4qqo] { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; }
.audit-number-card span[b-qqblra4qqo] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

/* ── Tally breakdown (organization / route, scrollable) ── */
.trm-breakdown-card[b-qqblra4qqo] { display: flex; flex-direction: column; }
.trm-tally-scroll[b-qqblra4qqo] { display: flex; flex-direction: column; gap: 14px; max-height: 230px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.trm-tally-scroll[b-qqblra4qqo]::-webkit-scrollbar { width: 7px; }
.trm-tally-scroll[b-qqblra4qqo]::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.trm-tally-row[b-qqblra4qqo] { display: flex; flex-direction: column; gap: 6px; }
.trm-tally-top[b-qqblra4qqo] { display: flex; align-items: center; justify-content: space-between; }
.trm-tally-name[b-qqblra4qqo] { font-size: 12.5px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trm-tally-pct[b-qqblra4qqo] { font-size: 11px; font-weight: 700; color: var(--green); }
.trm-tally-pct-gold[b-qqblra4qqo] { color: var(--accent); }
.trm-tally-meter[b-qqblra4qqo] { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.trm-tally-fill[b-qqblra4qqo] { height: 100%; background: var(--green); border-radius: 5px; transition: width .4s ease; }
.trm-tally-fill-gold[b-qqblra4qqo] { background: var(--gold); }
.trm-tally-vals[b-qqblra4qqo] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-subtle); }
.trm-tally-vals strong[b-qqblra4qqo] { color: var(--navy); font-weight: 800; }
.trm-tally-sep[b-qqblra4qqo] { color: var(--text-muted); }

/* ── Fee cell ── */
.trm-fee[b-qqblra4qqo] { font-weight: 700; color: var(--green); }

/* ── Tables ── */
.rpt-compliance-table-wrap[b-qqblra4qqo] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rpt-compliance-table[b-qqblra4qqo] { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-compliance-table th[b-qqblra4qqo] { padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; }
.rpt-compliance-table td[b-qqblra4qqo] { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--navy); }
.rpt-compliance-table tr:last-child td[b-qqblra4qqo] { border-bottom: none; }
.stall-no[b-qqblra4qqo] { font-weight: 700; }
.text-muted[b-qqblra4qqo] { color: var(--text-muted); }
.delinq-empty[b-qqblra4qqo] { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ── Empty state ── */
.rpt-empty[b-qqblra4qqo] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; }
.rpt-empty-icon[b-qqblra4qqo] { width: 40px; height: 40px; color: var(--text-muted); }
.rpt-empty-icon svg[b-qqblra4qqo] { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rpt-empty-title[b-qqblra4qqo] { font-size: 14px; font-weight: 600; color: var(--navy); }
.rpt-empty-text[b-qqblra4qqo] { font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* ── Print document shell (shared) ── */
.print-document-content[b-qqblra4qqo] { display: block; background: #eef3f7; overflow-x: hidden; }
.print-report-sheet[b-qqblra4qqo] { width: 100%; min-height: 900px; padding: 30px 28px 40px; box-sizing: border-box; background: #fff; border: 1px solid #d5dde5; box-shadow: 0 18px 38px rgba(9, 31, 52, .08); color: #111827; }
.print-report-header[b-qqblra4qqo] { text-align: center; padding-bottom: 18px; border-bottom: 2px solid #111827; }
.print-report-logo[b-qqblra4qqo] { display: block; width: 58px; height: 58px; object-fit: contain; margin: 0 auto 10px; }
.print-republic[b-qqblra4qqo] { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: #374151; }
.print-report-header h2[b-qqblra4qqo] { margin: 7px 0 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.15; color: #111827; }
.print-report-header p[b-qqblra4qqo] { margin: 0; font-size: 12px; color: #4b5563; }
.print-report-title[b-qqblra4qqo] { margin-top: 18px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; color: #111827; }
.print-report-meta[b-qqblra4qqo] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cfd6de; margin-bottom: 16px; }
.print-report-meta div[b-qqblra4qqo] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-meta div:last-child[b-qqblra4qqo] { border-right: none; }
.print-report-meta span[b-qqblra4qqo] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-meta strong[b-qqblra4qqo] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-summary[b-qqblra4qqo] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #cfd6de; margin-bottom: 20px; background: #f8fafc; }
.print-report-summary div[b-qqblra4qqo] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
.print-report-summary div:last-child[b-qqblra4qqo] { border-right: none; }
.print-report-summary span[b-qqblra4qqo] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
.print-report-summary strong[b-qqblra4qqo] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }
.print-report-signatures[b-qqblra4qqo] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 58px; }
.print-report-signatures div[b-qqblra4qqo] { border-top: 1px solid #111827; padding-top: 8px; text-align: center; }
.print-report-signatures span[b-qqblra4qqo] { display: block; font-size: 11px; color: #6b7280; }
.print-report-signatures strong[b-qqblra4qqo] { display: block; margin-top: 3px; font-size: 11px; color: #111827; }
.print-empty[b-qqblra4qqo] { margin: 22px 0; padding: 16px; text-align: center; font-size: 12px; color: #6b7280; border: 1px dashed #cfd6de; background: #f8fafc; }
.print-table-wrap[b-qqblra4qqo] { margin-top: 12px; width: 100%; overflow-x: hidden; }
.print-status-table[b-qqblra4qqo] { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; color: #111827; }
.print-status-table th[b-qqblra4qqo], .print-status-table td[b-qqblra4qqo] { border: 1px solid #cfd6de; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-status-table th[b-qqblra4qqo] { background: #f3f6f9; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: #374151; }
.status-sheet .print-status-table[b-qqblra4qqo] { font-size: 13px !important; }
.status-sheet .print-status-table th[b-qqblra4qqo] { font-size: 11px !important; }
.status-sheet .print-status-table td[b-qqblra4qqo] { padding: 9px 10px; }
.text-muted-cell[b-qqblra4qqo] { color: #6b7280; }
.print-section-block[b-qqblra4qqo] { margin-top: 24px; }
.print-section-heading[b-qqblra4qqo] { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); padding: 6px 0 4px; border-bottom: 2px solid var(--navy); margin-bottom: 0; }
.history-sheet .history-table[b-qqblra4qqo] { font-size: 15px !important; }
.history-sheet .history-table th[b-qqblra4qqo] { font-size: 13px !important; }
.history-sheet .history-table td[b-qqblra4qqo] { padding: 13px 14px; }
.history-sheet .history-table th:first-child[b-qqblra4qqo], .history-sheet .history-table td:first-child[b-qqblra4qqo] { min-width: 110px; white-space: nowrap; }
.history-empty[b-qqblra4qqo] { text-align: center; color: #6b7280; padding: 18px 0; }
.history-total-row td[b-qqblra4qqo] { background: #f3f6f9; border-top: 2px solid #cfd6de; font-size: 13px; }
.history-sheet .print-report-meta span[b-qqblra4qqo]  { font-size: 12px; }
.history-sheet .print-report-meta strong[b-qqblra4qqo] { font-size: 16px; }
.history-sheet .print-section-heading[b-qqblra4qqo]   { font-size: 15px; }
.history-sheet .history-total-row td[b-qqblra4qqo]    { font-size: 15px !important; padding: 13px 14px; }
.history-sheet .print-report-signatures span[b-qqblra4qqo]  { font-size: 13px; }
.history-sheet .print-report-signatures strong[b-qqblra4qqo] { font-size: 15px; }
.status-sheet .print-report-meta span[b-qqblra4qqo]   { font-size: 11px; }
.status-sheet .print-report-meta strong[b-qqblra4qqo] { font-size: 14px; }
.status-sheet .print-report-summary span[b-qqblra4qqo], .status-sheet .print-report-summary strong[b-qqblra4qqo] { font-size: 14px; }
.status-sheet .print-report-signatures span[b-qqblra4qqo]  { font-size: 12px; }
.status-sheet .print-report-signatures strong[b-qqblra4qqo] { font-size: 14px; }

@media screen and (max-width: 900px) {
    .rpt-kpi-strip[b-qqblra4qqo] { grid-template-columns: 1fr 1fr; }
    .rpt-charts-row[b-qqblra4qqo] { grid-template-columns: 1fr; }
    .rpt-audit-row[b-qqblra4qqo] { grid-template-columns: 1fr; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body[b-qqblra4qqo] { background: white !important; }
    .rpt-topbar[b-qqblra4qqo], .rpt-period-bar[b-qqblra4qqo] { background: white !important; border: none !important; box-shadow: none !important; }
    .rpt-topbar-right[b-qqblra4qqo], .rpt-period-tabs[b-qqblra4qqo], .rpt-date-nav[b-qqblra4qqo], .rpt-back-btn[b-qqblra4qqo], .print-report-actions[b-qqblra4qqo] { display: none !important; }
    .rpt-content[b-qqblra4qqo] { padding: 0 !important; }
    .print-document-content[b-qqblra4qqo] { display: block !important; background: white !important; }
    /* 12mm, NOT 0 - the page margin is deliberately nought so the browser has no margin box to print its automatic
       date, URL and page numbers into, which means the SHEET supplies the whitespace. print.css says exactly that and
       sets `.print-report-sheet { padding: 12mm }`, but CSS isolation compiles this rule to
       `.print-report-sheet[b-xxxxx]`, and a class-plus-attribute selector outranks a bare class even when both are
       !important. So this rule quietly won and printed the sheet hard against the paper edge. */
    .print-report-sheet[b-qqblra4qqo] { width: 100% !important; min-height: auto !important; padding: 12mm !important; border: none !important; box-shadow: none !important; }
    /* ── How these sheets break across pages ──────────────────────────────────
       The same three rules the List of Stallholders prints by, so every document this platform issues paginates alike: a table's
       header row REPEATS on each page it continues onto rather than appearing alone at the top of one, a row is never split, and
       a section block may span pages because some areas hold forty rows. Plus the joins that actually broke: a section heading
       stays with what follows it, and the letterhead and meta strip are never split. */
    .print-status-table thead[b-qqblra4qqo] { display: table-header-group; }
    .print-status-table tfoot[b-qqblra4qqo] { display: table-footer-group; }

    .print-status-table tr[b-qqblra4qqo] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-section-heading[b-qqblra4qqo] {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-report-header[b-qqblra4qqo],
    .print-report-meta[b-qqblra4qqo] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A SECTION IS ONE UNIT: its name, its summary strip and its rows. This was uto, which put a heading and a total at the
       foot of a page with the rows they describe on the next. void is a request, not a constraint: a section taller than the
       page is still split, and the repeating header keeps that readable - so small sections stay whole and large ones still fit. */
    .print-section-block[b-qqblra4qqo] {
        break-inside: avoid;
        page-break-inside: avoid;
        /* The top space is PADDING here, not the margin this block carries on screen. A margin is dropped at a page break; a
           padding is part of the box and survives, so a section that begins a page opens clear of the paper edge instead of
           against it. The page margin is nought, because a page margin is where Chromium prints its own date, title and URL and
           no CSS turns that off - so the document supplies its own whitespace. Sections are kept whole above, which is what makes
           a continued page always begin with one. */
        margin-top: 0 !important;
        padding-top: 10mm;
    }

    .print-section-summary[b-qqblra4qqo] {
        break-inside: avoid;
        page-break-inside: avoid;
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Signatures are never split down the middle: "Prepared by" on one page and "Reviewed by" on the next is not a document
       anybody signs. */
    .print-report-signatures[b-qqblra4qqo] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .print-table-wrap[b-qqblra4qqo] { overflow: visible !important; }
    /* ── Why page two used to start hard against the paper edge ───────────────
       The page box is margin-free and the 12mm of whitespace came from padding on the SHEET. A block's padding applies once, at
       its own top and bottom, not at every page break - so pages after the first began at y=0 with a table header touching the
       edge. Only a page MARGIN repeats per page, so these two documents ask for one of their own; a named page applies solely to
       what asks for it, leaving the roster, the statements and the receipts on the margin-free box they were tuned for.

       Stated rather than buried: a top margin gives the browser somewhere to print its automatic date and page numbers. Untick
       "Headers and footers" in the print dialog if it does. The alternative was figures against the paper edge on every page. */
    /* The page margin these sheets need is injected at print time by stalltrackPrint.reportDocument, NOT set here. An @page in a
       scoped stylesheet does not reach the print engine, and a NAMED page is not honoured at all - print.css assigns a landscape
       named page to .print-report-sheet and this document still printed portrait, which is the proof. Left and right padding is
       injected with it, so nothing about the paper margin is stated in CSS any more. */
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.rpt-topbar[b-qqblra4qqo] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

    .rpt-topbar[b-qqblra4qqo]::before,
    .rpt-topbar[b-qqblra4qqo]::after {
        display: none;
    }

.rpt-back-btn[b-qqblra4qqo] {
    border-color: var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .rpt-back-btn:hover[b-qqblra4qqo] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-topbar-icon[b-qqblra4qqo] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .rpt-topbar-icon svg[b-qqblra4qqo] {
        stroke: var(--navy);
    }

.rpt-eyebrow[b-qqblra4qqo] {
    color: var(--text-tertiary);
}

.rpt-title[b-qqblra4qqo] {
    color: var(--navy);
}

.rpt-subtitle[b-qqblra4qqo] {
    color: var(--text-tertiary);
}

.rpt-header-progress[b-qqblra4qqo] {
    background: var(--surface-muted);
}

.rpt-header-progress-fill[b-qqblra4qqo] {
    background: var(--accent);
}

.rpt-action-btn[b-qqblra4qqo] {
    border-color: var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
}

    .rpt-action-btn:hover[b-qqblra4qqo] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.rpt-period-tabs[b-qqblra4qqo] {
    background: var(--surface-muted);
    box-shadow: none;
}

.rpt-period-tab.active[b-qqblra4qqo],
.rpt-document-tab.active[b-qqblra4qqo],
.utility-section-tab.active[b-qqblra4qqo] {
    border-color: var(--border);
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--elevation-1);
}

.rpt-period-tab:hover:not(.active)[b-qqblra4qqo],
.rpt-document-tab:hover:not(.active)[b-qqblra4qqo],
.utility-section-tab:hover:not(.active)[b-qqblra4qqo] {
    background: var(--surface);
    color: var(--navy);
}

.rpt-back-btn:focus-visible[b-qqblra4qqo],
.rpt-action-btn:focus-visible[b-qqblra4qqo],
.rpt-period-tab:focus-visible[b-qqblra4qqo],
.rpt-document-tab:focus-visible[b-qqblra4qqo] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
/*
   Reset-password page — right-hand surface (card, password fields, strength meter, buttons).

   Kept as a scoped copy for the same reason AdminActivate.razor.css documents: these form/card styles are
   component-scoped in this codebase, not global, so each auth screen carries its own copy. The LEFT
   branding panel is NOT duplicated here — it comes from the shared <AuthBrandPanel> component, which owns
   its own stylesheet, so the sign-in, forgot-password and reset-password screens cannot drift apart.
*/

.setup-root[b-6rp3i0tx2r] {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: #f5f7fb;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Recovery surface ─────────────────────────────────────────────────── */
.setup-right[b-6rp3i0tx2r] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    flex: 1;
    min-width: 0;
    height: 100vh;
    padding: clamp(28px, 5vh, 60px) clamp(26px, 5.2vw, 92px);
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    background-color: #eef2f7;
    background-image: linear-gradient(135deg, #fbfcfe 0%, #e9edf3 100%);
}

.setup-right[b-6rp3i0tx2r]::-webkit-scrollbar { width: 0; height: 0; }

.activated-icon[b-6rp3i0tx2r] {
    color: #2f7d57 !important;
    border-color: rgba(47, 125, 87, 0.28) !important;
    background: linear-gradient(145deg, #f1faf5, #e5f3ec) !important;
}

.setup-form-wrap[b-6rp3i0tx2r] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
}

.login-card[b-6rp3i0tx2r] {
    display: block;
    padding: clamp(28px, 3.4vw, 44px);
    background: #ffffff;
    border: 1px solid rgba(13, 42, 71, 0.10);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(13, 42, 71, 0.10), 0 2px 6px rgba(13, 42, 71, 0.04);
}

/* ── Header ── */
.setup-form-header[b-6rp3i0tx2r] {
    position: relative;
    min-height: 64px;
    margin-bottom: 24px;
    padding: 2px 0 24px 84px;
    border-bottom: 1px solid rgba(13, 42, 71, 0.10);
}

.login-header-icon[b-6rp3i0tx2r] {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: #6b89ab;
    border: 1px solid rgba(25, 63, 100, 0.1);
    border-radius: 50%;
    background: linear-gradient(145deg, #f8fafc, #eef2f7);
}

.login-header-icon svg[b-6rp3i0tx2r] { width: 32px; height: 32px; }

.setup-form-title[b-6rp3i0tx2r] {
    color: #102d4e;
    font-size: clamp(25px, 1.9vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 5px;
}

.setup-form-desc[b-6rp3i0tx2r] {
    color: #637895;
    font-size: 15px;
    line-height: 1.55;
}

/* ── Form fields ── */
.setup-form[b-6rp3i0tx2r] { display: flex; flex-direction: column; gap: 18px; }

.form-group[b-6rp3i0tx2r] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }

.form-label[b-6rp3i0tx2r] {
    color: #1b3859;
    font-size: 13px;
    font-weight: 700;
}

.form-input-wrap[b-6rp3i0tx2r] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.form-input-wrap-password[b-6rp3i0tx2r] { width: 100%; }

.form-input[b-6rp3i0tx2r] {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 52px;
    padding-left: 48px;
    border: 1.5px solid #dde3ec;
    border-radius: 10px;
    background: #fff;
    color: #173755;
    font-size: 15px;
    outline: none;
}

.form-input[b-6rp3i0tx2r]::placeholder { color: #8193ae; }
.form-input:focus[b-6rp3i0tx2r] { border-color: #315f8d; box-shadow: 0 0 0 4px rgba(49, 95, 141, 0.12); }

.form-input-icon[b-6rp3i0tx2r] { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; transform: translateY(-50%); stroke: #7287a2; pointer-events: none; }
.form-input-password[b-6rp3i0tx2r] { padding-right: 54px; }
.form-eye-btn[b-6rp3i0tx2r] { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: none; cursor: pointer; color: #7287a2; }
.form-eye-btn svg[b-6rp3i0tx2r] { width: 20px; height: 20px; pointer-events: none; }
.form-eye-btn:hover[b-6rp3i0tx2r], .form-eye-btn:focus-visible[b-6rp3i0tx2r] { color: #173755; }
.form-eye-btn:focus-visible[b-6rp3i0tx2r] { outline: 2px solid #315f8d; outline-offset: 2px; border-radius: 4px; }

.form-input-error[b-6rp3i0tx2r] { border-color: var(--red) !important; background: var(--red-bg) !important; }
.form-input-error:focus[b-6rp3i0tx2r] { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(139, 58, 58, 0.11) !important; }

.form-error[b-6rp3i0tx2r] { font-size: 12.5px; color: var(--red); }

/* ── Password strength ── */
.pw-strength[b-6rp3i0tx2r] { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.pw-strength-bars[b-6rp3i0tx2r] { display: flex; gap: 4px; flex: 1; }
.pw-bar[b-6rp3i0tx2r] { height: 4px; flex: 1; border-radius: 2px; background: var(--border); transition: background 0.2s; }
.pw-bar-fill.pw-weak[b-6rp3i0tx2r] { background: var(--red); }
.pw-bar-fill.pw-fair[b-6rp3i0tx2r] { background: #b87333; }
.pw-bar-fill.pw-good[b-6rp3i0tx2r] { background: #4a7c59; }
.pw-bar-fill.pw-strong[b-6rp3i0tx2r] { background: var(--green); }
.pw-strength-label[b-6rp3i0tx2r] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.pw-strength-label.pw-weak[b-6rp3i0tx2r] { color: var(--red); }
.pw-strength-label.pw-fair[b-6rp3i0tx2r] { color: #b87333; }
.pw-strength-label.pw-good[b-6rp3i0tx2r] { color: #4a7c59; }
.pw-strength-label.pw-strong[b-6rp3i0tx2r] { color: var(--green); }

/* ── Error ── */
.setup-error[b-6rp3i0tx2r] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--red);
    border-radius: 9px;
    background: var(--red-bg);
    color: var(--red);
    font-size: 13px;
    font-weight: 500;
}

.setup-error svg[b-6rp3i0tx2r] { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Done state: the surface stays the same clean light panel as the form state, so confirming a reset
   never flips the page to a dark backdrop mid-flow. ── */

/* ── Submit ── */
.setup-submit[b-6rp3i0tx2r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 3px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient(180deg, #1c3252 0%, #16263c 100%);
    box-shadow: 0 7px 16px rgba(13, 42, 71, 0.16);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.setup-submit svg[b-6rp3i0tx2r] { width: 20px; height: 20px; flex-shrink: 0; }
.setup-submit:hover:not(:disabled)[b-6rp3i0tx2r] { background: linear-gradient(180deg, #16263c 0%, #0f1d30 100%); box-shadow: 0 10px 22px rgba(13, 42, 71, 0.23); }
.setup-submit:focus-visible[b-6rp3i0tx2r] { outline: 3px solid #e4bf52; outline-offset: 3px; }
.setup-submit:disabled[b-6rp3i0tx2r] { opacity: 0.7; cursor: not-allowed; }
.setup-submit-loading[b-6rp3i0tx2r] { opacity: 0.75; }

.setup-spinner[b-6rp3i0tx2r] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-6rp3i0tx2r 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes spin-b-6rp3i0tx2r { to { transform: rotate(360deg); } }

/* ── Secondary text link (matches the sign-in page's "Forgot password?") ── */
.login-forgot[b-6rp3i0tx2r] {
    align-self: center;
    padding: 2px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #2f6db5;
}

.login-forgot:hover[b-6rp3i0tx2r] { color: #173e67; text-decoration: underline; }
.login-forgot:focus-visible[b-6rp3i0tx2r] { outline: 2px solid #315f8d; outline-offset: 2px; border-radius: 4px; }

/* ── Security reassurance note ── */
.setup-secure-note[b-6rp3i0tx2r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 6px;
    color: #64788f;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.setup-secure-note svg[b-6rp3i0tx2r] { width: 16px; height: 16px; flex-shrink: 0; stroke: #4a7c59; }

/* ── Responsive (right-hand side) ── */
@media (max-height: 820px) and (min-width: 769px) {
    .login-card[b-6rp3i0tx2r] { padding-top: 28px; padding-bottom: 28px; }
    .setup-form-header[b-6rp3i0tx2r] { margin-bottom: 18px; padding-bottom: 18px; }
    .setup-form[b-6rp3i0tx2r] { gap: 14px; }
}

@media (max-width: 940px) {
    .setup-right[b-6rp3i0tx2r] { padding-right: 32px; padding-left: 32px; }
    .login-card[b-6rp3i0tx2r] { padding: 34px; }
}

@media (max-width: 768px) {
    .setup-root[b-6rp3i0tx2r] { display: block; height: auto; min-height: 100vh; overflow-x: hidden; }
    .setup-right[b-6rp3i0tx2r] { height: auto; min-height: auto; padding: 28px 20px 32px; overflow: visible; }
    .login-card[b-6rp3i0tx2r] { padding: clamp(24px, 7vw, 36px); border-radius: 12px; }
}

@media (max-width: 480px) {
    .setup-right[b-6rp3i0tx2r] { padding: 16px 12px 24px; }
    .login-card[b-6rp3i0tx2r] { padding: 23px 18px; border-radius: 10px; }
    .setup-form-header[b-6rp3i0tx2r] { min-height: 0; margin-bottom: 22px; padding: 0 0 21px; text-align: center; }
    .login-header-icon[b-6rp3i0tx2r] { position: static; width: 60px; height: 60px; margin: 0 auto 13px; }
    .setup-form-title[b-6rp3i0tx2r] { font-size: 26px; }
    .setup-form-desc[b-6rp3i0tx2r] { font-size: 14px; }
    .setup-form[b-6rp3i0tx2r] { gap: 16px; }
}
/* /Components/Pages/SecuritySetup.razor.rz.scp.css */
/*
   SecuritySetup — optional two-factor enrolment, presented as a modal over the portal.

   Self-contained: scoped CSS only applies to the component that declares the markup (the shared
   TwoFactorPanel brings its own styles), with one deliberate ::deep rule to centre the panel's action row
   inside this dialog. Palette is the neutral government set from app.css — white surface, navy text,
   restrained accents. No coloured success block: the confirmation is a quiet white row with a small mark,
   which reads as official rather than celebratory.
*/

/* ── Portal placeholder behind the dialog ──
   Neutral bars only, never figures. Sits in normal page flow so the backdrop's blur falls on it, which is
   what makes the portal read as held back instead of absent. */
.secsetup-stage[b-9yky53hv7i] {
    padding: 22px 26px;
    pointer-events: none;
    user-select: none;
}

.secsetup-stage-head[b-9yky53hv7i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.secsetup-stage-tiles[b-9yky53hv7i] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.secsetup-stage-main[b-9yky53hv7i] {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 16px;
}

.secsetup-stage-card[b-9yky53hv7i] {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card);
}

.secsetup-stage-table[b-9yky53hv7i] { display: flex; flex-direction: column; gap: 12px; }
.secsetup-stage-side[b-9yky53hv7i] { display: flex; flex-direction: column; gap: 13px; }

.secsetup-stage-row[b-9yky53hv7i] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.secsetup-bone[b-9yky53hv7i] {
    border-radius: 5px;
    background: color-mix(in srgb, var(--border) 78%, #fff);
}

.secsetup-bone-title[b-9yky53hv7i] { width: 220px; height: 17px; margin-bottom: 8px; }
.secsetup-bone-sub[b-9yky53hv7i] { width: 320px; height: 10px; }
.secsetup-bone-btn[b-9yky53hv7i] { width: 132px; height: 38px; border-radius: 9px; }
.secsetup-bone-num[b-9yky53hv7i] { width: 54px; height: 21px; margin-bottom: 9px; }
.secsetup-bone-label[b-9yky53hv7i] { width: 96px; height: 9px; }
.secsetup-bone-line[b-9yky53hv7i] { width: 100%; height: 11px; }
.secsetup-bone-cell[b-9yky53hv7i] { height: 11px; }
.secsetup-bone-cell-sm[b-9yky53hv7i] { max-width: 74px; }

/* ── Backdrop ──
   Blurs the placeholder above and the real portal chrome beneath it. */
.secsetup-backdrop[b-9yky53hv7i] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(10, 26, 43, .5);
    backdrop-filter: blur(5px);
}

.secsetup-modal[b-9yky53hv7i] {
    width: 100%;
    max-width: 660px;
    margin: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 28px 64px rgba(6, 20, 36, .34);
    overflow: hidden;
}

/* ── Header ── */
.secsetup-head[b-9yky53hv7i] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 26px 28px 20px;
    border-bottom: 1px solid var(--border);
}

.secsetup-icon[b-9yky53hv7i] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--navy) 14%, transparent);
    background: var(--bg-icon);
    color: var(--navy);
}

.secsetup-icon svg[b-9yky53hv7i] { width: 28px; height: 28px; }

.secsetup-head-text[b-9yky53hv7i] { min-width: 0; }

.secsetup-eyebrow[b-9yky53hv7i] {
    margin-bottom: 6px;
    color: #7a5f13;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.secsetup-title[b-9yky53hv7i] {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.015em;
}

.secsetup-sub[b-9yky53hv7i] {
    margin: 0;
    color: var(--text-subtle);
    font-size: 13.5px;
}

/* ── Body ── */
.secsetup-body[b-9yky53hv7i] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 28px;
}

.secsetup-note[b-9yky53hv7i] {
    margin: 0;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.6;
}

/* Structured reasons live in the shared TwoFactorIntro component (with its own scoped stylesheet), so both
   two-factor dialogs stay identical without a second copy of these rules here. */

/* The dialog leads with one action, so the panel's action row is centred here (::deep is required: the
   panel declares that markup, so this component's scoped selectors cannot reach it otherwise). */
.secsetup-panel[b-9yky53hv7i]  .mfa-actions { justify-content: center; }

/* Quiet, formal confirmation — deliberately NOT a green panel. */
.secsetup-confirm[b-9yky53hv7i] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg-card);
}

.secsetup-confirm-mark[b-9yky53hv7i] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
    color: var(--green);
}

.secsetup-confirm-mark svg[b-9yky53hv7i] { width: 16px; height: 16px; }

.secsetup-confirm-title[b-9yky53hv7i] {
    margin-bottom: 3px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
}

/* ── Footer ── */
.secsetup-foot[b-9yky53hv7i] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 28px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.secsetup-foot-mark[b-9yky53hv7i] {
    display: grid;
    place-items: center;
    padding-right: 12px;
    border-right: 1px solid var(--border);
    color: var(--navy-3);
}

.secsetup-foot-mark svg[b-9yky53hv7i] { width: 17px; height: 17px; }

.secsetup-foot-note[b-9yky53hv7i] {
    color: var(--text-subtle);
    font-size: 12.5px;
}

.secsetup-btn[b-9yky53hv7i] {
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-card);
    color: var(--navy);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.secsetup-btn-primary[b-9yky53hv7i] {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.secsetup-btn-primary:hover[b-9yky53hv7i] { background: var(--navy-2); }

@media (max-width: 1024px) {
    .secsetup-stage-main[b-9yky53hv7i] { grid-template-columns: minmax(0, 1fr); }
    .secsetup-stage-tiles[b-9yky53hv7i] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .secsetup-stage[b-9yky53hv7i] { display: none; }
    .secsetup-backdrop[b-9yky53hv7i] { padding: 12px; }
    .secsetup-head[b-9yky53hv7i], .secsetup-body[b-9yky53hv7i], .secsetup-foot[b-9yky53hv7i] { padding-left: 18px; padding-right: 18px; }
    .secsetup-title[b-9yky53hv7i] { font-size: 19px; }
    .secsetup-btn[b-9yky53hv7i] { width: 100%; }
}
/* /Components/Pages/Shared/Actions/CollectionReceiptModal.razor.rz.scp.css */
/* Collection/payment receipt — mirrors the mobile collector receipt, using the web design tokens. */

.rcpt-wrap[b-1486nalm45] {
    width: 100%;
    max-width: 380px;
    margin: auto;
}

.receipt[b-1486nalm45] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 20px;
    margin-bottom: 14px;
}

.receipt-head[b-1486nalm45] {
    text-align: center;
}

.receipt-seal[b-1486nalm45] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto 8px;
}

.receipt-gov[b-1486nalm45] {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.receipt-org[b-1486nalm45] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin-top: 2px;
}

.receipt-muni[b-1486nalm45] {
    font-size: 11px;
    color: var(--text-subtle);
    margin-top: 2px;
}

.receipt-doc[b-1486nalm45] {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(200, 168, 75, 0.14);
    padding: 4px 12px;
    border-radius: 999px;
}

.receipt-divider[b-1486nalm45] {
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}

.receipt-divider.dashed[b-1486nalm45] {
    background: none;
    border-top: 1px dashed var(--border);
}

.receipt-meta[b-1486nalm45] {
    display: flex;
    flex-direction: column;
}

.receipt-meta-row[b-1486nalm45] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}

.receipt-meta-row span[b-1486nalm45] {
    color: var(--text-muted);
}

.receipt-meta-row strong[b-1486nalm45] {
    color: var(--navy);
    font-weight: 600;
}

.receipt-total-row[b-1486nalm45] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--navy);
    padding: 2px 0;
}

.receipt-grand[b-1486nalm45] {
    font-weight: 700;
}

    .receipt-grand span:last-child[b-1486nalm45] {
        font-size: 18px;
        font-weight: 700;
        color: var(--navy);
    }

.receipt-note[b-1486nalm45] {
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--text-subtle);
    text-align: center;
}

.receipt-close-row[b-1486nalm45] {
    display: flex;
    justify-content: center;
}

.btn-receipt-close[b-1486nalm45] {
    border: 0;
    font: inherit;
    min-height: 44px;
    padding: 0 40px;
    border-radius: 12px;
    background: var(--navy);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .btn-receipt-close:hover[b-1486nalm45] {
        background: var(--navy-2);
    }


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.eemo-modal-overlay[b-1486nalm45] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.btn-receipt-close[b-1486nalm45] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

.btn-receipt-close:hover[b-1486nalm45] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--surface);
}
/* /Components/Pages/Shared/Actions/FacilityPaymentModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   FacilityPaymentModal.razor.css — Status-Report-style clean design
══════════════════════════════════════════════════════════════════════ */

/* ── Status indicator — thin left-bar, no heavy background ── */
[b-t7vyfdq34s] .status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--navy);
}
[b-t7vyfdq34s] .status-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
[b-t7vyfdq34s] .status-badge.paid { border-left: 3px solid var(--green); }
[b-t7vyfdq34s] .status-badge.paid::before { background: var(--green); }
[b-t7vyfdq34s] .status-badge.partial { border-left: 3px solid #b87333; }
[b-t7vyfdq34s] .status-badge.partial::before { background: #b87333; }
[b-t7vyfdq34s] .status-badge.unpaid { border-left: 3px solid var(--text-muted); }
[b-t7vyfdq34s] .status-badge.unpaid::before { background: var(--text-muted); }

/* ── Unpaid notice ── */
[b-t7vyfdq34s] .unpaid-notice {
    padding: 11px 14px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ── Financial breakdown ── */
[b-t7vyfdq34s] .financial-breakdown {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 12px;
}
[b-t7vyfdq34s] .financial-breakdown-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 10px 14px 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
[b-t7vyfdq34s] .breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--navy);
}
[b-t7vyfdq34s] .breakdown-item:last-child { border-bottom: none; }
[b-t7vyfdq34s] .breakdown-item.breakdown-section-header { font-weight: 600; background: var(--bg); }
[b-t7vyfdq34s] .breakdown-item.breakdown-total { font-weight: 700; background: var(--bg); }
[b-t7vyfdq34s] .breakdown-item.balance-due { font-weight: 700; color: var(--red); }
[b-t7vyfdq34s] .breakdown-item:not(.breakdown-total):has(+ .breakdown-total) { border-bottom: none; }
[b-t7vyfdq34s] .breakdown-or-input { align-items: flex-start; gap: 12px; }
[b-t7vyfdq34s] .or-input-col { display: flex; flex-direction: column; gap: 4px; flex: 1; max-width: 220px; }

/* ── OR Number display ── */
[b-t7vyfdq34s] .or-number-display {
    font-size: 13px;
    background: var(--bg);
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--border);
    color: var(--navy);
    letter-spacing: .5px;
}
[b-t7vyfdq34s] .or-encoded-row { display: flex; align-items: center; gap: 8px; }
[b-t7vyfdq34s] .editing-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(184,115,51,.1);
    color: #b87333;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
    vertical-align: middle;
}
[b-t7vyfdq34s] .btn-edit-or {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--navy);
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
[b-t7vyfdq34s] .btn-edit-or:hover { background: var(--bg); border-color: var(--navy); }

/* ── Inputs ── */
[b-t7vyfdq34s] .pay-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--navy);
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .15s;
}
[b-t7vyfdq34s] .pay-input:focus { border-color: var(--navy); }
[b-t7vyfdq34s] .pay-input.input-error { border-color: var(--red); }
[b-t7vyfdq34s] .pay-input-inline { width: 100%; padding: 7px 10px; font-size: 12.5px; }
[b-t7vyfdq34s] .required-star { color: var(--red); margin-left: 2px; }
[b-t7vyfdq34s] .optional-tag { font-size: 11px; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
[b-t7vyfdq34s] .input-error-msg { font-size: 11.5px; color: var(--red); font-weight: 500; margin-top: 2px; }

/* ── Partial section ── */
[b-t7vyfdq34s] .partial-amount-section {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid #b87333;
    border-radius: 6px;
    background: var(--bg);
}
[b-t7vyfdq34s] .partial-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    display: block;
    margin-bottom: 8px;
}
[b-t7vyfdq34s] .partial-input-wrap { position: relative; display: flex; align-items: center; }
[b-t7vyfdq34s] .currency-symbol { position: absolute; left: 12px; font-size: 14px; font-weight: 600; color: var(--text-muted); pointer-events: none; }
[b-t7vyfdq34s] .partial-input { padding-left: 28px; font-weight: 600; }
[b-t7vyfdq34s] .partial-hint { font-size: 11px; color: #b87333; margin-top: 6px; font-weight: 500; }

/* ── Spinner ── */
[b-t7vyfdq34s] .btn-loading { opacity: .75; cursor: not-allowed; display: flex; align-items: center; gap: 8px; }
[b-t7vyfdq34s] .spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin-b-t7vyfdq34s .7s linear infinite; display: inline-block; }
@keyframes spin-b-t7vyfdq34s { to { transform: rotate(360deg); } }

/* ── Confirmation modal ── */
[b-t7vyfdq34s] .confirm-overlay { z-index: 10001; background: rgba(13,33,55,.7); }
[b-t7vyfdq34s] .confirm-modal { max-width: 420px; }
[b-t7vyfdq34s] .confirm-or-display {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    background: var(--bg);
    padding: 12px 16px;
    border-radius: 7px;
    border: 1px solid var(--border);
    text-align: center;
    letter-spacing: 1px;
    margin-top: 8px;
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.eemo-modal-overlay[b-t7vyfdq34s] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}
/* /Components/Pages/Shared/Actions/PayBillModal.razor.rz.scp.css */
/* PayBillModal — full-width, formal payment form. Fixed detail band + ONE scrolling table. */

.pb-modal[b-wzrhbsgqfa] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(13, 33, 55, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.pb-shell[b-wzrhbsgqfa] {
    background: var(--bg-card); border-radius: 16px;
    width: 100%; max-width: min(1000px, 96vw); max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 64px rgba(13, 33, 55, .3);
}

/* Body: fixed detail band on top, one flexible scrolling table below — never a second scrollbar. */
.pb-body[b-wzrhbsgqfa] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 20px 24px; overflow: hidden; }

.pb-loading[b-wzrhbsgqfa], .pb-clear[b-wzrhbsgqfa] {
    display: flex; align-items: center; gap: 10px;
    padding: 24px 4px; color: var(--text-subtle); font-size: 13.5px;
}
.pb-clear svg[b-wzrhbsgqfa] { width: 20px; height: 20px; color: var(--green); flex: 0 0 auto; }

.pb-detail[b-wzrhbsgqfa] { flex: 0 0 auto; }

/* Account summary strip. */
.pb-statement[b-wzrhbsgqfa] {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 16px;
    background: var(--bg); border: 1px solid var(--border);
    border-left: 3px solid var(--navy); border-radius: 8px;
}
.pb-statement-key[b-wzrhbsgqfa] { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-subtle); }
.pb-statement-meta[b-wzrhbsgqfa] { margin-top: 3px; font-size: 12px; color: var(--text-subtle); }
.pb-statement-val[b-wzrhbsgqfa] { font-size: 24px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Controls row: how-to-settle + OR number, side by side. */
.pb-controls[b-wzrhbsgqfa] { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-top: 16px; }
.pb-control[b-wzrhbsgqfa] { flex: 1 1 300px; min-width: 240px; }
.pb-control-or[b-wzrhbsgqfa] { flex: 0 1 280px; }
.pb-label[b-wzrhbsgqfa] { display: block; font-size: 12px; font-weight: 650; color: var(--text); margin-bottom: 7px; }

/* The column count follows the number of choices actually offered: the market has three (whole month, specific days,
   all outstanding) and the monthly facilities two. Hard-coded at two, the market's third choice wrapped onto a second
   row and broke the control in half. minmax(0, 1fr) lets a long label wrap inside its own cell rather than widening it. */
.pb-seg[b-wzrhbsgqfa] { display: grid; grid-template-columns: repeat(var(--pb-seg-count, 2), minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.pb-seg-btn[b-wzrhbsgqfa] {
    padding: 10px 12px; border: none; background: var(--bg-card); cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--text-subtle); transition: background .12s, color .12s;
}
.pb-seg-btn + .pb-seg-btn[b-wzrhbsgqfa] { border-left: 1px solid var(--border); }
.pb-seg-btn:hover:not(.on)[b-wzrhbsgqfa] { background: #f7fafc; color: var(--text); }
.pb-seg-btn.on[b-wzrhbsgqfa] { background: var(--navy); color: #fff; }
.pb-seg-btn:disabled[b-wzrhbsgqfa] { cursor: default; opacity: .6; }

.pb-input[b-wzrhbsgqfa] {
    width: 100%; height: 40px; padding: 0 13px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card);
    font: inherit; font-size: 14px; color: var(--text); transition: border-color .12s, box-shadow .12s;
}
.pb-input:focus[b-wzrhbsgqfa] { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 168, 75, .15); }

/* The caption sits close to the hint above it; 18px on top of the hint's own spacing left a visible gap. */
.pb-caption-row[b-wzrhbsgqfa] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 8px; }
.pb-caption[b-wzrhbsgqfa] { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-subtle); }
.pb-caption-actions[b-wzrhbsgqfa] { display: flex; gap: 16px; }
.pb-caption-right[b-wzrhbsgqfa] { display: flex; align-items: center; gap: 16px; }
.pb-search[b-wzrhbsgqfa] {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; background: var(--bg-card);
}
.pb-search svg[b-wzrhbsgqfa] { width: 14px; height: 14px; color: var(--text-muted); flex: 0 0 auto; }
.pb-search input[b-wzrhbsgqfa] { border: none; outline: none; background: transparent; font: inherit; font-size: 12.5px; color: var(--text); width: 160px; }
.pb-search input[b-wzrhbsgqfa]::placeholder { color: var(--text-muted); }
.pb-linkbtn[b-wzrhbsgqfa] {
    border: none; background: transparent; cursor: pointer; padding: 0;
    font: inherit; font-size: 11.5px; font-weight: 700; color: var(--navy);
}
.pb-linkbtn:hover:not(:disabled)[b-wzrhbsgqfa] { text-decoration: underline; }
.pb-linkbtn:disabled[b-wzrhbsgqfa] { opacity: .5; cursor: default; }

/* The single scroll region. */
/* The period list is the working area of this dialog — an account 37 months behind needs to be scanned, not
   squinted at through two rows. It still flexes, but never collapses below a readable block. */
.pb-scroll[b-wzrhbsgqfa] { flex: 1 1 auto; min-height: min(320px, 46vh); overflow-y: auto; border: 1px solid var(--border); border-radius: 9px; }
.pb-scroll[b-wzrhbsgqfa]::-webkit-scrollbar { width: 10px; }
.pb-scroll[b-wzrhbsgqfa]::-webkit-scrollbar-thumb { background: #cdd8e2; border-radius: 6px; border: 3px solid var(--bg-card); }
.pb-scroll[b-wzrhbsgqfa]::-webkit-scrollbar-track { background: transparent; }

.pb-table[b-wzrhbsgqfa] { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pb-table thead th[b-wzrhbsgqfa] {
    position: sticky; top: 0; z-index: 1;
    background: var(--bg); color: var(--text-subtle);
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.pb-table th.c[b-wzrhbsgqfa], .pb-table td.c[b-wzrhbsgqfa] { text-align: center; width: 1%; white-space: nowrap; }
.pb-table th.r[b-wzrhbsgqfa], .pb-table td.r[b-wzrhbsgqfa] { text-align: right; white-space: nowrap; }
.pb-table tbody td[b-wzrhbsgqfa] { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.pb-table tbody tr:last-child td[b-wzrhbsgqfa] { border-bottom: none; }
.pb-table tbody tr[b-wzrhbsgqfa] { cursor: pointer; transition: background .1s; }
.pb-table tbody tr:hover[b-wzrhbsgqfa] { background: #f7fafc; }
.pb-table tbody tr.on[b-wzrhbsgqfa] { background: #f4f8fb; }
.pb-table tbody tr.on td[b-wzrhbsgqfa] { font-weight: 650; }
.pb-table .amt[b-wzrhbsgqfa] { font-variant-numeric: tabular-nums; }
.pb-table .due[b-wzrhbsgqfa] { color: var(--red); font-weight: 700; }
.pb-table .pb-muted[b-wzrhbsgqfa] { color: var(--text-muted); font-weight: 500; }
.pb-badge[b-wzrhbsgqfa] { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.pb-badge.unpaid[b-wzrhbsgqfa] { background: var(--red-bg); color: var(--red); }
.pb-badge.partial[b-wzrhbsgqfa] { background: #fbf1dd; color: #97701e; }
.pb-table input[type=radio][b-wzrhbsgqfa], .pb-table input[type=checkbox][b-wzrhbsgqfa] { width: 16px; height: 16px; accent-color: var(--navy); }
.pb-table .pb-tick[b-wzrhbsgqfa] { width: 16px; height: 16px; color: var(--green); }
.pb-table .pb-chevron[b-wzrhbsgqfa] { width: 15px; height: 15px; color: var(--text-muted); }
.pb-table tfoot td[b-wzrhbsgqfa] {
    position: sticky; bottom: 0;
    padding: 10px 14px; background: var(--bg); border-top: 1px solid var(--border);
    font-size: 12px; font-weight: 700; color: var(--text);
}
.pb-table tfoot td.r[b-wzrhbsgqfa] { color: var(--navy); font-variant-numeric: tabular-nums; }

.pb-error[b-wzrhbsgqfa] {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 8px; margin-top: 12px;
    background: var(--red-bg); color: var(--red); font-size: 13px;
}
.pb-error svg[b-wzrhbsgqfa] { width: 17px; height: 17px; flex: 0 0 auto; }

.pb-foot-hint[b-wzrhbsgqfa] { margin-right: auto; font-size: 11.5px; color: var(--text-subtle); max-width: 52%; }

.pb-orhint[b-wzrhbsgqfa] { margin-top: 6px; font-size: 12px; color: var(--text-subtle); }

/* Footer transaction summary — what THIS record action will settle. */
.pb-txnbar[b-wzrhbsgqfa] { margin-right: auto; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pb-txn-cap[b-wzrhbsgqfa] { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-subtle); }
.pb-txn-amt[b-wzrhbsgqfa] { font-size: 17px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.pb-txn-sub[b-wzrhbsgqfa] { font-size: 11.5px; color: var(--text-subtle); }

@media (max-width: 620px) {
    .pb-control-or[b-wzrhbsgqfa] { flex: 1 1 100%; }
    .pb-txn-sub[b-wzrhbsgqfa] { display: none; }
}


/* A former occupancy's account. Stated as a plain sentence — a fact about what is being collected, not a warning. */
.pb-past-note[b-wzrhbsgqfa] {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--navy);
    background: var(--surface-2, #f4f6f9);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-strong, #0b2239);
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.pb-modal[b-wzrhbsgqfa] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.pb-seg-btn.on[b-wzrhbsgqfa] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--surface);
}
/* /Components/Pages/Shared/Actions/PaymentHistoryModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   PaymentHistoryModal.razor.css — Status-Report-style clean design
══════════════════════════════════════════════════════════════════════ */

/* ── Modal shell ── */
.ph-modal[b-6ciwzi9z9d] {
    background: var(--bg-card);
    border-radius: 12px;
    width: 100%;
    max-width: 1040px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(13,33,55,.22), 0 0 0 1px rgba(13,33,55,.07);
    overflow: hidden;
}

/* ── Header — Status Report meta-row style ── */
.ph-header[b-6ciwzi9z9d] {
    background: var(--bg-card);
    padding: 0;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}
/* Decorative elements hidden */
.ph-header-glow[b-6ciwzi9z9d] { display: none; }

/* Title row */
.ph-header-left[b-6ciwzi9z9d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex: 1;
    min-width: 0;
    background: var(--navy);
}
.ph-header-icon[b-6ciwzi9z9d] {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: rgba(200,168,75,.18);
    border: 1px solid rgba(200,168,75,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ph-header-icon svg[b-6ciwzi9z9d] {
    width: 16px;
    height: 16px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ph-header-text[b-6ciwzi9z9d] { flex: 1; min-width: 0; }
.ph-header-eyebrow[b-6ciwzi9z9d] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ph-dot[b-6ciwzi9z9d] { opacity: .4; }
.ph-header-name[b-6ciwzi9z9d] {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ph-header-contract[b-6ciwzi9z9d] { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 2px; }

/* Right side — badge + close, absolute within title row */
.ph-header-right[b-6ciwzi9z9d] {
    position: absolute;
    top: 14px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ph-header-right-actions[b-6ciwzi9z9d] { display: flex; align-items: center; gap: 8px; }

/* Status badge */
.ph-status-badge[b-6ciwzi9z9d] {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1.5px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
}
.ph-badge-consistent[b-6ciwzi9z9d] { border-color: rgba(200,168,75,.5); color: var(--gold-light); background: rgba(200,168,75,.14); }
.ph-badge-arrears[b-6ciwzi9z9d] { border-color: rgba(200,168,75,.3); color: rgba(232,204,118,.75); background: rgba(200,168,75,.08); }
.ph-badge-delinquent[b-6ciwzi9z9d] { border-color: rgba(139,58,58,.5); color: #e09090; background: rgba(139,58,58,.22); }

/* Close button */
.ph-close-btn[b-6ciwzi9z9d] {
    width: 27px;
    height: 27px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s;
    flex-shrink: 0;
}
.ph-close-btn:hover[b-6ciwzi9z9d] { background: rgba(255,255,255,.16); }
.ph-close-btn svg[b-6ciwzi9z9d] { width: 13px; height: 13px; stroke: rgba(255,255,255,.7); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Stats grid — own row below the title, never overlaps it */
.ph-header-stats[b-6ciwzi9z9d] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
}
.ph-hstat[b-6ciwzi9z9d] {
    padding: 9px 14px;
    border-right: 1px solid var(--border);
    min-width: 0;
    overflow: hidden;
}
.ph-hstat:last-of-type[b-6ciwzi9z9d] { border-right: none; }
.ph-hstat-div[b-6ciwzi9z9d] { display: none; }
.ph-hstat-val[b-6ciwzi9z9d] {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ph-hstat-of[b-6ciwzi9z9d] { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.ph-hstat-red[b-6ciwzi9z9d] { color: var(--red); }
.ph-hstat-partial[b-6ciwzi9z9d] { color: #b87333; }
.ph-hstat-key[b-6ciwzi9z9d] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* Progress bar hidden (redundant with stats row) */
.ph-header-progress[b-6ciwzi9z9d] { display: none; }

/* Compliance row hidden (duplicate of stats) */
.ph-compliance-row[b-6ciwzi9z9d] { display: none; }

/* ── Ledger ── */
.ph-body[b-6ciwzi9z9d] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}
.ph-ledger-header[b-6ciwzi9z9d] {
    display: grid;
    grid-template-columns: 160px 90px 140px 150px 150px 100px 100px;
    padding: 9px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    min-width: 900px;
}
.ph-ledger-header > div[b-6ciwzi9z9d] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
}
.ph-ledger-body[b-6ciwzi9z9d] { min-width: 900px; }
.ph-ledger-row[b-6ciwzi9z9d] {
    display: grid;
    grid-template-columns: 160px 90px 140px 150px 150px 100px 100px;
    padding: 11px 24px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    background: var(--bg-card);
    transition: background .1s;
}
.ph-ledger-row:hover[b-6ciwzi9z9d] { background: var(--bg); }
.ph-ledger-row:last-child[b-6ciwzi9z9d] { border-bottom: none; }

/* Row variants — left-border only */
.ph-row-paid[b-6ciwzi9z9d] { border-left: 3px solid var(--green); }
.ph-row-partial[b-6ciwzi9z9d] { border-left: 3px solid #b87333; }
.ph-row-unpaid[b-6ciwzi9z9d] { border-left: 3px solid var(--border); }
.ph-row-absent[b-6ciwzi9z9d] { border-left: 3px solid #c8a84b; }
.ph-row-before-contract[b-6ciwzi9z9d] { opacity: .55; background: var(--bg) !important; }
.ph-row-current[b-6ciwzi9z9d] { outline: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border)); outline-offset: -1px; }

/* Period cell */
.ph-cell-period[b-6ciwzi9z9d] { display: flex; align-items: center; gap: 8px; }
.ph-period-dot[b-6ciwzi9z9d] { width: 0; height: 0; display: none; }
.ph-dot-paid[b-6ciwzi9z9d],.ph-dot-unpaid[b-6ciwzi9z9d],.ph-dot-partial[b-6ciwzi9z9d],.ph-dot-gray[b-6ciwzi9z9d],.ph-dot-absent[b-6ciwzi9z9d] { display: none; }
.ph-period-month[b-6ciwzi9z9d] { font-size: 13px; font-weight: 500; color: var(--navy); }
.ph-period-year[b-6ciwzi9z9d] { font-size: 13px; color: var(--text-muted); }
.ph-current-tag[b-6ciwzi9z9d] {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--gold);
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Status pills — plain text + left-border color does the signaling */
.ph-pay-pill[b-6ciwzi9z9d] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
}
.ph-pay-pill svg[b-6ciwzi9z9d] { display: none; }
.ph-pill-paid[b-6ciwzi9z9d] { color: var(--green); }
.ph-pill-partial[b-6ciwzi9z9d] { color: #b87333; }
.ph-pill-unpaid[b-6ciwzi9z9d] { color: var(--text-muted); }
.ph-pill-absent[b-6ciwzi9z9d] { color: #8a6d1a; }
.ph-pill-gray[b-6ciwzi9z9d] { color: var(--text-muted); opacity: .6; }

/* Cells */
.ph-or-num[b-6ciwzi9z9d] { font-size: 13px; color: var(--navy); white-space: nowrap; }
.ph-pay-date[b-6ciwzi9z9d] { font-size: 13px; color: var(--navy); }
.ph-cell-empty[b-6ciwzi9z9d] { font-size: 13px; color: var(--text-muted); }
.ph-collector-name[b-6ciwzi9z9d] { font-size: 13px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.ph-collector-avatar[b-6ciwzi9z9d] { display: none; }
.ph-collector-cell[b-6ciwzi9z9d] { display: flex; align-items: center; }
.ph-amount-paid[b-6ciwzi9z9d],.ph-amount-unpaid[b-6ciwzi9z9d],.ph-balance-due[b-6ciwzi9z9d],.ph-balance-zero[b-6ciwzi9z9d] { font-size: 13px; color: var(--navy); font-family: inherit; }
.ph-balance-due[b-6ciwzi9z9d] { color: var(--red); }

/* ── Footer ── */
.ph-footer[b-6ciwzi9z9d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}
.ph-footer-meta[b-6ciwzi9z9d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.ph-footer-meta svg[b-6ciwzi9z9d] {
    width: 13px;
    height: 13px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.ph-footer-actions[b-6ciwzi9z9d] { display: flex; align-items: center; gap: 10px; }
.ph-balance-alert[b-6ciwzi9z9d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid rgba(139,58,58,.2);
    padding: 6px 12px;
    border-radius: 7px;
}
.ph-balance-alert svg[b-6ciwzi9z9d] {
    width: 13px;
    height: 13px;
    stroke: var(--red);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — 12-Month Payment History modal (mobile/tablet ≤768px).
   Desktop untouched.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* The status badge is absolutely positioned top-right and the title eyebrow spans the full width
       beneath it, so on a phone "12-Month Payment Record" ran under the "Consistent Payer" badge.
       The badge is non-essential here (the outstanding/status is restated by the footer bar), so hide it
       and reserve space for the close button so the eyebrow/name stay clear of it. */
    .ph-status-badge[b-6ciwzi9z9d] {
        display: none;
    }

    .ph-header-text[b-6ciwzi9z9d] {
        padding-right: 34px;
    }

    /* The 7-column stat strip gave each cell ~50px on a phone, truncating every peso value to "₱...".
       Reflow to a clean, fully-readable 3-up grid with row + column dividers. */
    .ph-header-stats[b-6ciwzi9z9d] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ph-hstat[b-6ciwzi9z9d] {
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 9px 10px;
    }

        .ph-hstat:nth-child(3n)[b-6ciwzi9z9d] {
            border-right: none;
        }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   The header becomes a light identity row; the status badges keep their meaning (text first) in light form.
   ══════════════════════════════════════════════════════════════ */
.eemo-modal-overlay[b-6ciwzi9z9d] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.ph-header-left[b-6ciwzi9z9d] {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.ph-header-icon[b-6ciwzi9z9d] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .ph-header-icon svg[b-6ciwzi9z9d] {
        stroke: var(--navy);
    }

.ph-header-eyebrow[b-6ciwzi9z9d] {
    color: var(--text-tertiary);
}

.ph-header-name[b-6ciwzi9z9d] {
    color: var(--navy);
}

.ph-header-contract[b-6ciwzi9z9d] {
    color: var(--text-tertiary);
}

.ph-status-badge[b-6ciwzi9z9d] {
    border-color: var(--border-strong);
    background: var(--surface-muted);
    color: var(--text-secondary);
}

.ph-badge-consistent[b-6ciwzi9z9d] {
    border-color: color-mix(in srgb, var(--green) 35%, transparent);
    background: var(--green-bg);
    color: var(--green);
}

.ph-badge-arrears[b-6ciwzi9z9d] {
    border-color: color-mix(in srgb, var(--gold-light) 60%, transparent);
    background: color-mix(in srgb, var(--gold-light) 18%, var(--surface));
    color: #7a5c10;
}

.ph-badge-delinquent[b-6ciwzi9z9d] {
    border-color: color-mix(in srgb, var(--red) 35%, transparent);
    background: var(--red-bg);
    color: var(--red);
}

.ph-close-btn[b-6ciwzi9z9d] {
    background: transparent;
}

    .ph-close-btn:hover[b-6ciwzi9z9d] {
        background: var(--surface-hover);
    }

    .ph-close-btn svg[b-6ciwzi9z9d] {
        stroke: var(--text-secondary);
    }

    .ph-close-btn:focus-visible[b-6ciwzi9z9d] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
/* /Components/Pages/Shared/Actions/Profile.razor.rz.scp.css */
/* ============================================================
   Profile.razor.css  —  Stall Profile page-scoped styles
   Blazor CSS isolation: only applies to Profile.razor
   Use --* tokens from app.css; do NOT redefine them here.
   ============================================================ */


/* ── Back Button ─────────────────────────────────────────── */
.prof-back-btn[b-l50rp4tqzv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

    .prof-back-btn:hover[b-l50rp4tqzv] {
        background: var(--bg-icon);
        color: var(--navy);
        border-color: var(--navy);
    }

    .prof-back-btn svg[b-l50rp4tqzv] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* ── Hero ────────────────────────────────────────────────── */
/* A light card, but not a sheet of white: set on the page's own tint with a slightly stronger edge, so it reads as a
   header band rather than as a panel that lost its background. The navy slab it replaced opened the page on a block of
   colour; plain white opened it on nothing at all. */
.prof-hero[b-l50rp4tqzv] {
    display: flex;
    align-items: center;
    gap: 22px;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg, #f1f4f8) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    position: relative;
    box-shadow: 0 1px 2px rgba(13, 33, 55, .04);
}

/* The facility's icon, the same tile the facility hero and the sidebar use, so a stall's page is marked the way its
   facility is everywhere else. */
.prof-hero-badge[b-l50rp4tqzv] {
    width: 56px;
    height: 56px;
    border-radius: 13px;
    background: rgba(13, 33, 55, .06);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    /* The mark is drawn by a child component, so it carries no scope of this page's own - hence ::deep. Without it the
       browser's own defaults would decide the size and the drawing would arrive at whatever the SVG asked for. */
    .prof-hero-badge[b-l50rp4tqzv]  svg {
        width: 30px;
        height: 30px;
        stroke: var(--navy);
        fill: none;
    }

.prof-hero-identity[b-l50rp4tqzv] {
    flex: 1 1 200px;
}

.prof-hero-eyebrow[b-l50rp4tqzv] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.prof-hero-name[b-l50rp4tqzv] {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.prof-hero-meta[b-l50rp4tqzv] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.prof-hero-chip[b-l50rp4tqzv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
}

    .prof-hero-chip svg[b-l50rp4tqzv] {
        width: 13px;
        height: 13px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.prof-hero-actions[b-l50rp4tqzv] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Action Buttons ──────────────────────────────────────── */
.btn-outline[b-l50rp4tqzv],
.btn-primary[b-l50rp4tqzv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.btn-outline[b-l50rp4tqzv] {
    background: #fff;
    color: var(--navy);
    border-color: var(--border);
}

    .btn-outline:hover[b-l50rp4tqzv] {
        background: var(--bg-card);
        border-color: var(--navy);
    }

    .btn-outline svg[b-l50rp4tqzv] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.btn-primary[b-l50rp4tqzv] {
    /* Navy, the colour every other primary action in the portal uses. Gold was chosen against the navy hero this card
       replaced; on a light hero it read as a warning rather than as the page's main action. */
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    font-weight: 700;
}

    .btn-primary:hover[b-l50rp4tqzv] {
        background: #16324f;
        border-color: #16324f;
    }

    .btn-primary svg[b-l50rp4tqzv] {
        width: 16px;
        height: 16px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Status pills used in hero + cards */
.prof-status-pill[b-l50rp4tqzv] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pill-paid[b-l50rp4tqzv] {
    background: var(--green-bg);
    color: var(--green);
}

.pill-unpaid[b-l50rp4tqzv] {
    background: var(--red-bg);
    color: var(--red);
}

.pill-partial[b-l50rp4tqzv] {
    background: #fff8e1;
    color: #7a5c00;
}

.pill-active[b-l50rp4tqzv] {
    background: var(--green-bg);
    color: var(--green);
}

.pill-inactive[b-l50rp4tqzv] {
    background: var(--bg-icon);
    color: var(--text-subtle);
}


/* ── 2-Column Grid ───────────────────────────────────────── */
.prof-grid[b-l50rp4tqzv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 812px);
    gap: 16px;
    align-items: start;
}

.prof-col[b-l50rp4tqzv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* ── Cards ───────────────────────────────────────────────── */
.prof-card[b-l50rp4tqzv] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.prof-card-header[b-l50rp4tqzv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.prof-card-icon[b-l50rp4tqzv] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .prof-card-icon svg[b-l50rp4tqzv] {
        width: 14px;
        height: 14px;
        stroke: var(--navy);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.prof-card-title[b-l50rp4tqzv] {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}


/* ── Field List ──────────────────────────────────────────── */
.prof-field-list[b-l50rp4tqzv] {
    padding: 6px 0;
}

.prof-field[b-l50rp4tqzv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--border);
}

    .prof-field:last-child[b-l50rp4tqzv] {
        border-bottom: none;
    }

.prof-field-label[b-l50rp4tqzv] {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 160px;
}

.prof-field-val[b-l50rp4tqzv] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-align: right;
}

    .prof-field-val.bold[b-l50rp4tqzv] {
        font-weight: 700;
        color: var(--navy);
    }

    .prof-field-val.mono[b-l50rp4tqzv] {
        font-family: monospace;
    }

    /* A figure on an official record is not decorated. It reads as the document's own ink, one step larger than
       the label beside it. */
    .prof-field-val.gold[b-l50rp4tqzv] {
        color: var(--navy);
        font-weight: 700;
        font-size: 15px;
    }

    .prof-field-val.text-warn[b-l50rp4tqzv] {
        color: #a06010;
    }

.prof-no-contract[b-l50rp4tqzv] {
    font-size: 11px;
    color: var(--text-subtle);
}

.prof-expiry-warn[b-l50rp4tqzv] {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

/* Utility badges */
.prof-util-badge[b-l50rp4tqzv] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Whether a service is billed on this space is a fact, not a verdict: both states are the same neutral chip,
   told apart by the word inside and a hairline, not by green and grey. */
.util-yes[b-l50rp4tqzv] {
    background: var(--bg-card);
    border: 1px solid var(--navy);
    color: var(--navy);
}

.util-no[b-l50rp4tqzv] {
    background: var(--bg-icon);
    border: 1px solid var(--border);
    color: var(--text-subtle);
}


/* ── Total Bill line ─────────────────────────────────────────
   The month's charge as a document states it: ruled off from the fields above, in the page's own ink. */
.prof-bill-banner[b-l50rp4tqzv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    margin-top: 0;
}

.prof-bill-label[b-l50rp4tqzv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-subtle);
}

.prof-bill-sub[b-l50rp4tqzv] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.prof-bill-val[b-l50rp4tqzv] {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}


/* ── This Month Status Block ─────────────────────────────── */
.prof-month-status[b-l50rp4tqzv] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.prof-month-icon[b-l50rp4tqzv] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .prof-month-icon svg[b-l50rp4tqzv] {
        width: 20px;
        height: 20px;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.month-paid .prof-month-icon[b-l50rp4tqzv] {
    background: var(--green-bg);
}

    .month-paid .prof-month-icon svg[b-l50rp4tqzv] {
        stroke: var(--green);
    }

.month-partial .prof-month-icon[b-l50rp4tqzv] {
    background: #fff8e1;
}

    .month-partial .prof-month-icon svg[b-l50rp4tqzv] {
        stroke: #b07d2b;
    }

.month-unpaid .prof-month-icon[b-l50rp4tqzv] {
    background: var(--red-bg);
}

    .month-unpaid .prof-month-icon svg[b-l50rp4tqzv] {
        stroke: var(--red);
    }

.prof-month-label[b-l50rp4tqzv] {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

.month-partial .prof-month-label[b-l50rp4tqzv] {
    color: #7a5500;
}

.month-unpaid .prof-month-label[b-l50rp4tqzv] {
    color: var(--red);
}

.prof-month-sub[b-l50rp4tqzv] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}


/* ── 12-Month History ────────────────────────────────────── */
.prof-hist-grid[b-l50rp4tqzv] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 14px 18px 10px;
}

.prof-hist-month[b-l50rp4tqzv] {
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    border: 1.5px solid var(--border);
    transition: transform .1s;
}

    .prof-hist-month:hover[b-l50rp4tqzv] {
        transform: translateY(-1px);
    }

.hist-paid[b-l50rp4tqzv] {
    background: var(--green-bg);
    border-color: var(--green);
}

.hist-partial[b-l50rp4tqzv] {
    background: #fff8e1;
    border-color: #b07d2b;
}

.hist-unpaid[b-l50rp4tqzv] {
    background: var(--red-bg);
    border-color: #d9b0b0;
}

.hist-absent[b-l50rp4tqzv] {
    background: rgba(200, 168, 75, 0.14);
    border-color: #c8a84b;
}

.hist-na[b-l50rp4tqzv],
.hist-future[b-l50rp4tqzv] {
    background: #f5f7f9;
    border-color: #dde4ea;
    opacity: 0.6;
}

.hist-current[b-l50rp4tqzv] {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

.prof-hist-month-name[b-l50rp4tqzv] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--navy);
}

.prof-hist-month-year[b-l50rp4tqzv] {
    font-size: 11px;
    color: var(--text-subtle);
    margin-top: 1px;
}

.prof-hist-icon[b-l50rp4tqzv] {
    font-size: 13px;
    margin-top: 5px;
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hist-partial .prof-hist-icon[b-l50rp4tqzv] {
    color: #b07d2b;
}

.hist-unpaid .prof-hist-icon[b-l50rp4tqzv] {
    color: var(--red);
}

.hist-na .prof-hist-icon[b-l50rp4tqzv] {
    color: var(--text-muted);
}

.prof-hist-summary[b-l50rp4tqzv] {
    display: grid;
    /* One row, however many figures there are: a fifth (an earlier term's balance) must not wrap onto a line of
       its own, which reads as a separate section rather than one set of totals. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 0 18px 14px;
}

.prof-hist-stat[b-l50rp4tqzv] {
    padding: 10px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: center;
}

    /* No wash and no coloured border. A figure that is owed is stated, not alarmed about; the amount itself
       already carries the emphasis. */
    .prof-hist-stat.stat-warn[b-l50rp4tqzv] {
        background: var(--bg-subtle);
        border-color: var(--border);
    }

.prof-hist-stat-val[b-l50rp4tqzv] {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

    .prof-hist-stat-val.green[b-l50rp4tqzv] {
        color: var(--green);
    }

    .prof-hist-stat-val.red[b-l50rp4tqzv] {
        color: var(--red);
    }

.prof-hist-stat-key[b-l50rp4tqzv] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
}


/* ── Remarks ─────────────────────────────────────────────── */
.prof-notes-body[b-l50rp4tqzv] {
    padding: 14px 18px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
    min-height: 60px;
}

.prof-notes-empty[b-l50rp4tqzv] {
    color: var(--text-subtle);
}


/* ── Edit Form Grid ──────────────────────────────────────── */
.edit-form-grid[b-l50rp4tqzv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Clarify which fields are editable: locked = muted + dashed; editable = crisp + gold focus. */
.prof-edit-note[b-l50rp4tqzv] { font-size: 11.5px; color: var(--text-subtle); margin-top: 4px; }
.edit-form-grid .form-input[readonly][b-l50rp4tqzv] {
    background: var(--bg);
    color: var(--text-subtle);
    border-style: dashed;
    cursor: default;
}
.edit-form-grid .form-input[readonly]:focus[b-l50rp4tqzv] {
    border-color: var(--border);
    box-shadow: none;
    outline: none;
}
.edit-form-grid .form-input:not([readonly]):focus[b-l50rp4tqzv] {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 168, 75, .15);
    outline: none;
}

.form-group-full[b-l50rp4tqzv] {
    grid-column: 1 / -1;
}

.form-textarea[b-l50rp4tqzv] {
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
}


/* ── Payment Modal reuse ─────────────────────────────────── */
.pay-options[b-l50rp4tqzv] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pay-option[b-l50rp4tqzv] {
    flex: 1 1 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}

    .pay-option svg[b-l50rp4tqzv] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pay-option:hover[b-l50rp4tqzv] {
        border-color: var(--navy);
        color: var(--navy);
    }

.pay-opt-paid[b-l50rp4tqzv] {
    border-color: var(--green);
    background: var(--green-bg);
    color: var(--green);
}

.pay-opt-partial[b-l50rp4tqzv] {
    border-color: #b07d2b;
    background: #fffbea;
    color: #7a5500;
}

.pay-opt-unpaid[b-l50rp4tqzv] {
    border-color: var(--red);
    background: var(--red-bg);
    color: var(--red);
}

.pay-fee-block[b-l50rp4tqzv] {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    margin-top: 12px;
}

.pay-fee-header[b-l50rp4tqzv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pay-fee-label[b-l50rp4tqzv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.pay-fee-rate[b-l50rp4tqzv] {
    font-size: 12px;
    color: var(--text-muted);
}

.pay-record-row[b-l50rp4tqzv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}

.pay-record-key[b-l50rp4tqzv] {
    font-size: 12px;
    color: var(--text-muted);
}

.pay-record-val[b-l50rp4tqzv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

    .pay-record-val.green[b-l50rp4tqzv] {
        color: var(--green);
    }

    .pay-record-val.red[b-l50rp4tqzv] {
        color: var(--red);
    }


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .prof-grid[b-l50rp4tqzv] {
        grid-template-columns: 1fr;
    }

    .edit-form-grid[b-l50rp4tqzv] {
        grid-template-columns: 1fr;
    }

    .prof-hist-grid[b-l50rp4tqzv] {
        grid-template-columns: repeat(4, 1fr);
    }

    .prof-hist-summary[b-l50rp4tqzv] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .prof-hero[b-l50rp4tqzv] {
        padding: 16px;
        gap: 14px;
    }

    .prof-hero-name[b-l50rp4tqzv] {
        font-size: 18px;
    }

    .prof-field-label[b-l50rp4tqzv] {
        min-width: 120px;
    }

    .prof-hist-grid[b-l50rp4tqzv] {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ── Partial Amount Input Section ────────────────────────── */
.partial-amount-section[b-l50rp4tqzv] {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(184, 115, 51, 0.05);
    border-radius: 10px;
    border-left: 3px solid #b87333;
}

.partial-label[b-l50rp4tqzv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
    margin-bottom: 8px;
}

.partial-input-wrap[b-l50rp4tqzv] {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-symbol[b-l50rp4tqzv] {
    position: absolute;
    left: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    pointer-events: none;
}

.partial-input[b-l50rp4tqzv] {
    width: 100%;
    padding: 9px 12px 9px 28px;
    font-size: 13px;
    font-weight: 600;
    font-family: monospace;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--navy);
    outline: none;
    transition: border-color 0.15s ease;
}

    .partial-input:focus[b-l50rp4tqzv] {
        border-color: #b87333;
        box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.08);
    }

    .partial-input.input-error[b-l50rp4tqzv] {
        border-color: var(--red);
        background: var(--red-bg);
    }

.partial-hint[b-l50rp4tqzv] {
    font-size: 11px;
    color: #b87333;
    margin-top: 6px;
    font-weight: 500;
}

.input-error-msg[b-l50rp4tqzv] {
    font-size: 11.5px;
    color: var(--red);
    font-weight: 500;
    margin-top: 4px;
    display: block;
}

.required-star[b-l50rp4tqzv] {
    color: var(--red);
    margin-left: 2px;
}


/* ── Loading State ────────────────────────────────────────── */
.btn-loading[b-l50rp4tqzv] {
    opacity: 0.75;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    gap: 8px;
}

.spinner[b-l50rp4tqzv] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-l50rp4tqzv 0.7s linear infinite;
    display: inline-block;
}

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

/* ── NPM daily collection heatmap (GitHub-style) ── */
.ph-heat-head[b-l50rp4tqzv] { font-size: 13px; font-weight: 700; color: var(--navy); padding: 14px 18px 2px; }

/* ── Daily heatmap year navigation ─────────────────────────────── */
.ph-year-nav[b-l50rp4tqzv] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ph-year-arrow[b-l50rp4tqzv] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .ph-year-arrow:hover:not(:disabled)[b-l50rp4tqzv] { background: var(--bg-icon); border-color: var(--navy); }
    .ph-year-arrow:disabled[b-l50rp4tqzv] { opacity: .4; cursor: default; }
    .ph-year-arrow svg[b-l50rp4tqzv] { width: 13px; height: 13px; stroke: var(--navy); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.ph-year-picker[b-l50rp4tqzv] { position: relative; }

.ph-year-btn[b-l50rp4tqzv] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 84px;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    transition: border-color .12s;
}

    .ph-year-btn:hover[b-l50rp4tqzv], .ph-year-btn.open[b-l50rp4tqzv] { border-color: var(--navy); }
    .ph-year-btn svg[b-l50rp4tqzv] { width: 14px; height: 14px; stroke: var(--text-subtle); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.ph-year-backdrop[b-l50rp4tqzv] { position: fixed; inset: 0; z-index: 299; }

.ph-year-menu[b-l50rp4tqzv] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 300;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(13,33,55,0.16);
    padding: 10px;
    width: 232px;
}

.ph-year-grid[b-l50rp4tqzv] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.ph-year-cell[b-l50rp4tqzv] {
    padding: 9px 0;
    border-radius: 8px;
    border: none;
    background: var(--bg-icon);
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .ph-year-cell:hover[b-l50rp4tqzv] { background: var(--border); }
    .ph-year-cell.active[b-l50rp4tqzv] { background: var(--navy); color: #fff; }

.ph-year-current[b-l50rp4tqzv] {
    width: 100%;
    margin-top: 8px;
    padding: 8px 0;
    border: none;
    background: transparent;
    border-top: 1px solid var(--border);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .ph-year-current:hover[b-l50rp4tqzv] { color: var(--navy); }
.ph-heat-scroll[b-l50rp4tqzv] { overflow-x: auto; padding: 12px 18px 2px; }
.ph-heat-months[b-l50rp4tqzv] { display: flex; padding-left: 30px; margin-bottom: 5px; }
/* One segment per month, sized to the weeks it covers, so the names stay apart and inside the card. */
.ph-heat-mcol[b-l50rp4tqzv] { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ph-heat-body[b-l50rp4tqzv] { display: flex; gap: 6px; }
.ph-heat-dow[b-l50rp4tqzv] { display: grid; grid-template-rows: repeat(7, 11px); gap: 3px; width: 24px; }
.ph-heat-dow span[b-l50rp4tqzv] { font-size: 11px; line-height: 11px; color: var(--text-muted); }
.ph-heat-grid[b-l50rp4tqzv] { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; grid-auto-columns: 11px; gap: 3px; }
.ph-cell[b-l50rp4tqzv] { width: 11px; height: 11px; border-radius: 2px; background: #eceff3; display: inline-block; position: relative; }

/* GitHub-style hover tooltip — right-anchored so recent (right-side) cells never clip */
.ph-cell[data-tip]:hover[b-l50rp4tqzv]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    right: -4px;
    background: #1b2733;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    padding: 6px 9px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    z-index: 40;
    pointer-events: none;
}
.ph-collected[b-l50rp4tqzv] { background: #2d7a5f; }
.ph-excused[b-l50rp4tqzv] { background: #c8a84b; }
.ph-missed[b-l50rp4tqzv] { background: #ecc4c4; }
.ph-none[b-l50rp4tqzv] { background: #eceff3; }
.ph-future[b-l50rp4tqzv] { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.ph-heat-legend[b-l50rp4tqzv] { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding: 0 18px 4px; font-size: 11px; color: var(--text-subtle); }
.ph-legend-item[b-l50rp4tqzv] { display: inline-flex; align-items: center; gap: 6px; }
.ph-legend-item .ph-cell[b-l50rp4tqzv] { width: 11px; height: 11px; }

/* ── Edit modal: slim, arrow-less scrollbar ── */
.eemo-modal-body[b-l50rp4tqzv] { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.eemo-modal-body[b-l50rp4tqzv]::-webkit-scrollbar { width: 8px; }
.eemo-modal-body[b-l50rp4tqzv]::-webkit-scrollbar-track { background: transparent; }
.eemo-modal-body[b-l50rp4tqzv]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.eemo-modal-body[b-l50rp4tqzv]::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.eemo-modal-body[b-l50rp4tqzv]::-webkit-scrollbar-button { display: none; height: 0; width: 0; }


/* ---- Collection History (transparency log) ---- */
.prof-ch-state[b-l50rp4tqzv] {
    padding: 22px 4px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.prof-ch-wrap[b-l50rp4tqzv] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.prof-ch-table[b-l50rp4tqzv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: transparent;
}

.prof-ch-table thead th[b-l50rp4tqzv] {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: 10px 14px;
    background: rgba(13, 33, 55, 0.03);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.prof-ch-table tbody td[b-l50rp4tqzv] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
}

.prof-ch-table tbody tr:last-child td[b-l50rp4tqzv] {
    border-bottom: none;
}

.prof-ch-table tbody tr:hover td[b-l50rp4tqzv] {
    background: rgba(13, 33, 55, 0.02);
}

.prof-ch-r[b-l50rp4tqzv] {
    text-align: right;
}

.prof-ch-date[b-l50rp4tqzv] {
    color: var(--text-subtle);
}

.prof-ch-table .mono[b-l50rp4tqzv] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.prof-ch-pill[b-l50rp4tqzv] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.prof-ch-paid[b-l50rp4tqzv] {
    background: var(--green-bg);
    color: var(--green);
}

.prof-ch-partial[b-l50rp4tqzv] {
    background: #fdf6e3;
    color: #9a7b1f;
}

.prof-ch-unpaid[b-l50rp4tqzv] {
    background: var(--red-bg);
    color: var(--red);
}

.prof-ch-absent[b-l50rp4tqzv] {
    background: var(--bg-icon);
    color: var(--text-subtle);
}

.prof-ch-more[b-l50rp4tqzv] {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 9px 14px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.prof-ch-more:hover:not(:disabled)[b-l50rp4tqzv] {
    background: #e6ebf1;
    border-color: var(--text-muted);
}

.prof-ch-more:disabled[b-l50rp4tqzv] {
    opacity: .6;
    cursor: default;
}

.prof-ch-retry[b-l50rp4tqzv] {
    margin-left: 8px;
    padding: 4px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.prof-ch-retry:hover:not(:disabled)[b-l50rp4tqzv] {
    background: var(--bg-icon);
    border-color: var(--text-muted);
}

.prof-ch-retry:disabled[b-l50rp4tqzv] {
    opacity: .6;
    cursor: default;
}

/* ── Skeleton loading state ─────────────────────────────────────── */
.skel[b-l50rp4tqzv] {
    position: relative;
    overflow: hidden;
    background: #e8edf2;
    border-radius: 6px;
}

    .skel[b-l50rp4tqzv]::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
        animation: skel-shimmer-b-l50rp4tqzv 1.25s infinite;
    }

@keyframes skel-shimmer-b-l50rp4tqzv {
    100% { transform: translateX(100%); }
}

.skel-line[b-l50rp4tqzv] { border-radius: 6px; }

.skel-chip[b-l50rp4tqzv] { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }

.prof-hero-skel[b-l50rp4tqzv] { align-items: center; }

/* The hero's placeholders are dark-on-light, like every other skeleton on the page. They were white-on-navy for the
   navy hero; left as they were against the light card they would have been invisible, so the page would have appeared
   to load with an empty hero rather than a loading one. */
.skel-hero-badge[b-l50rp4tqzv] { width: 56px; height: 56px; border-radius: 13px; background: rgba(13, 33, 55, 0.10); flex-shrink: 0; }

    .prof-hero-skel .skel[b-l50rp4tqzv]::after {
        background: linear-gradient(90deg, transparent, rgba(13, 33, 55, 0.10), transparent);
    }

.prof-hero-skel .skel-line[b-l50rp4tqzv] { background: rgba(13, 33, 55, 0.09); }

.skel-field[b-l50rp4tqzv] { display: flex; align-items: center; justify-content: space-between; }

.skel-body[b-l50rp4tqzv] { padding: 16px 18px; }

/* Heatmap placeholder: 7 rows (Sun→Sat), columns flow horizontally like the real grid. */
.skel-heat[b-l50rp4tqzv] {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 11px;
    gap: 3px;
}

.skel-heat-cell[b-l50rp4tqzv] { width: 11px; height: 11px; border-radius: 2px; }


/* "N months / N days" hint on a grouped (one-OR, one-transaction) collection-history row */
.prof-ch-multi[b-l50rp4tqzv] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg-icon, #eef2f6);
    color: var(--text-subtle, #6a8aa0);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: middle;
}



/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Stall Profile (mobile/tablet ≤768px). Desktop untouched.
   Root cause of the "whole page shifted left / labels clipped" bug:
   .prof-field-label was min-width:160px + flex-shrink:0 while .prof-field-val
   had no min-width:0, so a long field value could not shrink — the field row
   (and therefore the card and the whole document) grew wider than the phone
   viewport, making the page horizontally scrollable and dragging the topbar +
   hero off-screen. Fix: let the label/value shrink & wrap, and add a hard
   overflow-x guard so nothing can shift the page again.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Belt: no descendant may make the document horizontally scrollable.
       (The daily heatmap keeps its OWN inner .ph-heat-scroll, so it is unaffected.) */
    .content-area[b-l50rp4tqzv] {
        overflow-x: hidden;
    }

    /* Suspenders: field rows fit by letting the label size to its text and the
       value shrink + wrap instead of forcing the card wider than the screen. */
    .prof-field[b-l50rp4tqzv] {
        gap: 10px;
    }

    .prof-field-label[b-l50rp4tqzv] {
        min-width: 0;
    }

    .prof-field-val[b-l50rp4tqzv] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* History stat grids must be able to shrink below their content width. */
    .prof-hist-grid[b-l50rp4tqzv] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .prof-hist-summary[b-l50rp4tqzv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Earlier terms on this stall: facts and figures, no colour of their own. */
.prof-prior[b-l50rp4tqzv] {
    /* Same 18px gutter as .prof-field, so these rows line up with every other field in the column
       instead of running into both edges of the card. */
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
}

.prof-prior:last-of-type[b-l50rp4tqzv] {
    border-bottom: none;
}

.prof-prior-head[b-l50rp4tqzv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Amount and its action stacked at the right edge, so the button sits under the figure it settles
   rather than spanning the card. */
.prof-prior-amt-col[b-l50rp4tqzv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

/* Name and period on the left, amount and its action on the right — so the period line sits directly under the
   name instead of being pushed down by the height of the button column. */
.prof-prior-main[b-l50rp4tqzv] {
    min-width: 0;
}

.prof-prior-who[b-l50rp4tqzv] {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.prof-prior-amt[b-l50rp4tqzv] {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.prof-prior-meta[b-l50rp4tqzv] {
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
}

.prof-prior-tag[b-l50rp4tqzv] {
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.prof-prior-note[b-l50rp4tqzv] {
    padding: 10px 18px 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}


/* Collect an earlier term's balance from the sitting lessee. Restrained: it is an action, not an alarm. */
.prof-prior-pay[b-l50rp4tqzv] {
    margin-top: 0;
    padding: 5px 11px;
    white-space: nowrap;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

    .prof-prior-pay:hover[b-l50rp4tqzv] {
        border-color: var(--text-muted);
    }



/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Flat white identity band, civic-blue primary action and selection, readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.topbar[b-l50rp4tqzv],
.content-area[b-l50rp4tqzv],
.eemo-modal-overlay[b-l50rp4tqzv] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.prof-hero[b-l50rp4tqzv] {
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

.prof-hero-badge[b-l50rp4tqzv] {
    border-color: transparent;
    background: var(--accent-soft);
}

.btn-outline[b-l50rp4tqzv],
.btn-primary[b-l50rp4tqzv] {
    border-width: 1px;
    border-radius: 6px;
}

.btn-outline[b-l50rp4tqzv] {
    border-color: var(--border-strong);
}

    .btn-outline:hover[b-l50rp4tqzv] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

.btn-primary[b-l50rp4tqzv] {
    border-color: var(--accent);
    background: var(--accent);
}

    .btn-primary:hover[b-l50rp4tqzv] {
        border-color: var(--accent-hover);
        background: var(--accent-hover);
    }

.btn-outline:focus-visible[b-l50rp4tqzv],
.btn-primary:focus-visible[b-l50rp4tqzv] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ph-year-cell.active[b-l50rp4tqzv] {
    background: var(--accent);
    color: var(--surface);
}
/* /Components/Pages/Shared/AddVendorModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   AddVendorModal.razor.css
   Scoped styles for the shared Add/Edit Vendor modal.
   All classes use the avm-* prefix to avoid any collision with
   page-level stylesheets (Vendor_razor.css, NPM_razor.css, etc.).
   Global eemo-modal-* classes come from app.css / site.css as usual.
══════════════════════════════════════════════════════════════════════ */

/* ── Hide number spinners globally inside this modal ────────── */
.avm-input[type=number][b-jo60fwkr9j]::-webkit-outer-spin-button,
.avm-input[type=number][b-jo60fwkr9j]::-webkit-inner-spin-button,
.avm-spin-input[b-jo60fwkr9j]::-webkit-outer-spin-button,
.avm-spin-input[b-jo60fwkr9j]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Info box (SLH fixed charges) ───────────────────────────── */
.avm-info-box[b-jo60fwkr9j] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.avm-info-box-title[b-jo60fwkr9j] {
    font-size: 12px;
    color: var(--text);
    margin-bottom: 8px;
}

.avm-info-box-grid[b-jo60fwkr9j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    font-size: 12px;
    color: var(--text-muted);
}

.avm-info-box-hint[b-jo60fwkr9j] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ── Fee highlight banners (NPM section-specific) ───────────── */
.avm-fee-highlight[b-jo60fwkr9j] {
    background: rgba(13,33,55,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.7;
}

/* ── Applicable Charges divider header ──────────────────────── */
.avm-divider-header[b-jo60fwkr9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.avm-divider-line[b-jo60fwkr9j] {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.avm-divider-text[b-jo60fwkr9j] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Base Rental card ───────────────────────────────────────── */
.avm-rental-card[b-jo60fwkr9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.avm-rental-info[b-jo60fwkr9j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The tile is a neutral surface, so the facility's own mark (drawn in navy) reads correctly inside it and the
   two paths — a facility with artwork, and the plain glyph for one without — share the same ink. */
.avm-rental-icon[b-jo60fwkr9j] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .avm-rental-icon svg[b-jo60fwkr9j] {
        width: 17px;
        height: 17px;
        stroke: var(--navy);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.avm-rental-title[b-jo60fwkr9j] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.avm-rental-sub[b-jo60fwkr9j] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── ± Spinner ──────────────────────────────────────────────── */
.avm-spinner[b-jo60fwkr9j] {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
    background: var(--bg-card);
}

.avm-spin-btn[b-jo60fwkr9j] {
    width: 34px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

    .avm-spin-btn:hover[b-jo60fwkr9j] {
        background: var(--bg-icon);
        color: var(--navy);
    }

.avm-spin-left[b-jo60fwkr9j] {
    border-right: 1px solid var(--border);
}

.avm-spin-right[b-jo60fwkr9j] {
    border-left: 1px solid var(--border);
}

.avm-spin-inner[b-jo60fwkr9j] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 10px;
    height: 38px;
}

.avm-spin-currency[b-jo60fwkr9j] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.avm-spin-input[b-jo60fwkr9j] {
    width: 68px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    font-family: monospace;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
}

.avm-spin-freq[b-jo60fwkr9j] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── Whole-year hint strip ──────────────────────────────────── */
.avm-yearly-hint[b-jo60fwkr9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: var(--bg);
    border-radius: 8px;
    /* A hairline all round rather than a coloured spine down one side. */
    border: 1px solid var(--border);
    margin-bottom: 12px;
}

.avm-yearly-label[b-jo60fwkr9j] {
    font-size: 11px;
    color: var(--text-muted);
}

.avm-yearly-value[b-jo60fwkr9j] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-family: monospace;
}

/* ── Utility section divider ────────────────────────────────── */
.avm-util-divider[b-jo60fwkr9j] {
    height: 1px;
    background: var(--border);
    margin: 4px 0 12px;
}

/* ── Fee toggle rows (Electricity / Water) ──────────────────── */
.avm-fee-toggle[b-jo60fwkr9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font: inherit;
    background: var(--bg-card);
    padding: 12px 14px;
    border-radius: 8px;
    border: 0.5px solid var(--border);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.avm-fee-toggle:focus-visible[b-jo60fwkr9j] { outline: 2px solid var(--navy-3, #1e3a5f); outline-offset: 2px; }

/* The tick that says a service is billed on this space. Structure, not colour: a navy hairline round the row
   and a mark in the box, the same on both services. */
.avm-fee-mark[b-jo60fwkr9j] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-card);
}
.avm-fee-toggle.active .avm-fee-mark[b-jo60fwkr9j] { background: var(--navy); border-color: var(--navy); }
.avm-fee-mark svg[b-jo60fwkr9j] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The checkbox is a visual indicator only — the whole row is the click target (single toggle). */
.avm-fee-checkbox[b-jo60fwkr9j] {
    pointer-events: none;
}

    .avm-fee-toggle:hover[b-jo60fwkr9j] {
        border-color: var(--navy);
    }

    /* Selected state. A government form marks a choice with structure, not a wash of colour: the row keeps
       its white surface and gains a navy hairline plus a filled checkbox, so the two utilities look like the
       same control rather than an amber one and a blue one. */
    .avm-fee-toggle.active[b-jo60fwkr9j] {
        background: var(--bg-card);
        border-color: var(--navy);
        box-shadow: inset 2px 0 0 var(--navy);
    }

.avm-fee-icon[b-jo60fwkr9j] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg);
    color: var(--navy);
    transition: background 0.15s;
}

.avm-fee-toggle.active .avm-fee-icon[b-jo60fwkr9j] {
    background: var(--bg-icon);
}

.avm-fee-icon svg[b-jo60fwkr9j] {
    width: 16px;
    height: 16px;
    fill: none;
    /* One ink for both utilities. The services are told apart by their name, not by an amber bolt and a
       blue drop — this is a billing form, not a dashboard. */
    stroke: var(--navy);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avm-fee-text[b-jo60fwkr9j] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.avm-fee-title[b-jo60fwkr9j] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.avm-fee-sub[b-jo60fwkr9j] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Checkbox dot */
.avm-fee-check[b-jo60fwkr9j] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

    .avm-fee-check.checked[b-jo60fwkr9j] {
        background: var(--navy);
        border-color: var(--navy);
    }

    .avm-fee-check svg[b-jo60fwkr9j] {
        width: 11px;
        height: 11px;
        stroke: white;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Native utility checkbox — reliable instant toggle, navy accent to match the theme. */
.avm-fee-checkbox[b-jo60fwkr9j] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--navy);
    cursor: pointer;
    margin: 0;
}

/* Water shares the electricity treatment — one control, two services. Kept as a named class so the markup
   does not have to change, but it no longer carries a tint of its own. */
.avm-fee-toggle-water[b-jo60fwkr9j] {
    background: var(--bg-card);
    border-color: var(--border);
}

    .avm-fee-toggle-water .avm-fee-icon[b-jo60fwkr9j] {
        background: var(--bg);
    }

    .avm-fee-toggle-water.active[b-jo60fwkr9j] {
        background: var(--bg-card);
        border-color: var(--navy);
    }

        .avm-fee-toggle-water.active .avm-fee-check[b-jo60fwkr9j] {
            background: var(--navy);
            border-color: var(--navy);
        }

/* ── Fish fee display row ───────────────────────────────────── */
.avm-fish-fee[b-jo60fwkr9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 8px;
    border: 0.5px solid var(--border);
    margin-bottom: 8px;
}

/* The section fee is a stated fact, not a highlight: a plain row on the form's own surface. The icon tile and
   the green "always included" pill were decoration on a government form. */
.avm-fish-icon[b-jo60fwkr9j],
.avm-fish-badge[b-jo60fwkr9j] {
    display: none;
}

.avm-fish-text[b-jo60fwkr9j] {
    flex: 1;
}

.avm-fish-title[b-jo60fwkr9j] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.avm-fish-sub[b-jo60fwkr9j] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.avm-fish-badge[b-jo60fwkr9j] {
    display: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .avm-row-2[b-jo60fwkr9j] {
        grid-template-columns: 1fr;
    }

    .avm-rental-card[b-jo60fwkr9j] {
        flex-direction: column;
        align-items: flex-start;
    }

    .avm-info-box-grid[b-jo60fwkr9j] {
        grid-template-columns: 1fr;
    }
}

/* Bulk-import shortcut in the footer — pushed to the left, away from Cancel/Save. */
/* The two imports as one pair, pushed left of Cancel and Add Vendor. The auto margin belongs to the GROUP: when it
   sat on each button, two of them each pushed the other away and left a gap between what should read as a pair. */
.avm-import-group[b-jo60fwkr9j] {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.avm-import-btn[b-jo60fwkr9j] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.avm-import-btn svg[b-jo60fwkr9j] {
    width: 15px;
    height: 15px;
}


/* ══════════════════════════════════════════
   RESPONSIVE — Add/Edit Vendor modal (mobile/tablet ≤768px)
   Desktop (≥769px) is untouched.
══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Two-column form rows (e.g. Stall No. + Monthly Rate) collapse to one column — a ~150px input on a
       phone is too cramped for its label + placeholder. */
    .avm-row-2[b-jo60fwkr9j] {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ── Take over a vacated stall ─────────────────────────────────────────────────────────────────────────
   Offered when the number entered belongs to a stall the office has vacated. Stated plainly: it is a choice
   about an official record, not a warning. It is asked as a dialog over the form — the clerk answers it where
   they are, instead of scrolling to the foot of the form to find the offer. */
.avm-nested-overlay[b-jo60fwkr9j] {
    position: fixed;
    inset: 0;
    /* Above the drawer (1001), so the question is not hidden behind the form it is about. */
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(13, 33, 55, 0.35);
}

.avm-nested-dialog[b-jo60fwkr9j] {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(13, 33, 55, 0.18);
}

.avm-nested-head[b-jo60fwkr9j] {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

.avm-nested-body[b-jo60fwkr9j] {
    padding: 16px 20px;
}

    .avm-nested-body p[b-jo60fwkr9j] {
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
        color: var(--text-subtle);
    }

.avm-nested-foot[b-jo60fwkr9j] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
    .avm-choice[b-jo60fwkr9j] { grid-template-columns: 1fr; }
}

/* A space with no meters. Stated plainly, with a way to record one if a meter is later installed. */
.avm-util-none[b-jo60fwkr9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    background: var(--surface-2, #f4f6f9);
    border: 1px solid var(--border, #d6dde5);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--text-muted, #5b6b7c);
}

.avm-util-add[b-jo60fwkr9j] {
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy, #0b2239);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.avm-util-add:hover[b-jo60fwkr9j] {
    opacity: .8;
}

.avm-fee-toggle.active .avm-fee-mark[b-jo60fwkr9j], .avm-fee-check.checked[b-jo60fwkr9j], .avm-fee-toggle-water.active .avm-fee-check[b-jo60fwkr9j] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--surface);
}

.avm-util-hint[b-jo60fwkr9j] {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: none;
    letter-spacing: 0;
}

.avm-fee-toggle:disabled[b-jo60fwkr9j] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* The reuse offer is raised above the drawer, so it carries the drawer colour aliases itself. */
.avm-nested-overlay[b-jo60fwkr9j] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}
/* /Components/Pages/Shared/AuditBreakdownRow.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════
   Audit Breakdown row — shared by the fixed-rent facility reports.
   Neutral document styling: white cards, hairline rules, one red accent.
   ══════════════════════════════════════════════════════════════════ */

/* Three columns of the SAME height, with each one's content spread to fill it.

   They used to take their natural heights side by side (align-items: start), so the row ended ragged: the fee mix ran
   longest, the compliance card stopped short of it, and the two figures on the right left a gap beneath them. Nothing
   was misaligned in itself; the row simply never agreed on a height. Stretching the columns and letting each card
   distribute its own content squares the row off, and the two headline figures share the height rather than floating at
   the top of it. */
.rpt-audit-row[b-3adbcorm1i] {
    display: grid;
    grid-template-columns: 1fr 1fr 280px;
    gap: 16px;
    align-items: stretch;
}

.audit-card[b-3adbcorm1i] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(13, 33, 55, .06);
    display: flex;
    flex-direction: column;
}

/* The fee-mix rows and the compliance figures take the room left after their heading, so both cards read from the same
   top line and finish on the same bottom one. */
.fm-list[b-3adbcorm1i], .cmp-grid[b-3adbcorm1i] {
    flex: 1 1 auto;
    justify-content: center;
}

/* The compliance card's closing line sits on the floor of the card, level with the last fee-mix row. */
.cmp-foot[b-3adbcorm1i] {
    margin-top: auto;
}

.audit-card-head[b-3adbcorm1i] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.audit-card-head > span[b-3adbcorm1i] {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -.01em;
}
.audit-subtitle[b-3adbcorm1i] {
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: right;
}

/* ── Billing reconciliation ── */
.fm-list[b-3adbcorm1i] { display: flex; flex-direction: column; }
.fm-row[b-3adbcorm1i] {
    display: grid;
    grid-template-columns: 150px 1fr 96px;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.fm-row:last-child[b-3adbcorm1i] { border-bottom: none; padding-bottom: 2px; }
.fm-label[b-3adbcorm1i] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-subtle);
}
.fm-track[b-3adbcorm1i] {
    height: 6px;
    background: var(--bg-icon);
    border-radius: 999px;
    overflow: hidden;
}
.fm-fill[b-3adbcorm1i] {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}
.fm-billed[b-3adbcorm1i] { background: var(--accent); }
.fm-collected[b-3adbcorm1i] { background: var(--accent); }
.fm-open[b-3adbcorm1i] { background: var(--red); }
.fm-vals[b-3adbcorm1i] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.fm-amount[b-3adbcorm1i] {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.fm-pct[b-3adbcorm1i] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Compliance distribution ── */
.cmp-grid[b-3adbcorm1i] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.cmp-cell[b-3adbcorm1i] {
    padding: 16px 10px;
    text-align: center;
    border-left: 1px solid var(--border);
}
.cmp-cell:first-child[b-3adbcorm1i] { border-left: none; }
.cmp-count[b-3adbcorm1i] {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cmp-label[b-3adbcorm1i] {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}
.cmp-pct[b-3adbcorm1i] {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
.cmp-foot[b-3adbcorm1i] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-subtle);
}

/* ── Headline figures ── */
.audit-kpi-stack[b-3adbcorm1i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    /* The two figures share the column's height instead of sitting at the top of it, so the right-hand edge of the row
       finishes level with the two cards beside it. */
    .audit-kpi-stack > .audit-number-card[b-3adbcorm1i] {
        flex: 1 1 0;
        justify-content: center;
    }
.audit-number-card[b-3adbcorm1i] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(13, 33, 55, .06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.num-label[b-3adbcorm1i] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}
.audit-number-card strong[b-3adbcorm1i] {
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.num-note[b-3adbcorm1i] {
    font-size: 11.5px;
    color: var(--text-subtle);
}

@media (max-width: 900px) {
    .rpt-audit-row[b-3adbcorm1i] { grid-template-columns: 1fr; }
    .fm-row[b-3adbcorm1i] { grid-template-columns: 130px 1fr 88px; gap: 8px; }
}

@media print {
    .audit-card[b-3adbcorm1i], .audit-number-card[b-3adbcorm1i] { box-shadow: none; }
    .fm-fill[b-3adbcorm1i] { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* /Components/Pages/Shared/AuthBrandPanel.razor.rz.scp.css */
/*
   AuthBrandPanel — civic identity panel shared by the forgot-password and reset-password screens.

   These rules are a verbatim copy of the sign-in page's left-panel styling (Login.razor.css). The auth
   screens in this app each carry their own scoped copy of this panel CSS (Login / AccountSetup /
   AdminActivate all do); putting it here lets the two recovery pages share ONE copy through the component
   instead of duplicating it again. Being component-scoped, it cannot affect any other page.

   Blazor scoped CSS applies to the component that DECLARES the markup, so the panel's styles must live
   here (in the component's own stylesheet) rather than in the pages that use it.
*/

/* ── Civic identity panel ─────────────────────────────────────────────── */
.setup-left[b-75r0urcqjo] {
    width: clamp(355px, 38.2vw, 580px);
    background-color: #0b2846;
    background-image:
        linear-gradient(180deg, rgba(6, 27, 49, 0.84) 0%, rgba(7, 31, 56, 0.91) 58%, rgba(5, 24, 44, 0.97) 100%),
        url('/images/eemo_image.png');
    background-position: center;
    background-size: cover;
}

/* Non-default LGUs: neutral navy backdrop only — the building photo carries Cantilan-specific signage,
   so it must not appear behind another municipality's branding. */
.setup-left--neutral[b-75r0urcqjo] {
    background-image:
        linear-gradient(180deg, rgba(6, 27, 49, 0.92) 0%, rgba(7, 31, 56, 0.95) 58%, rgba(5, 24, 44, 0.99) 100%);
}

.setup-left[b-75r0urcqjo]::before {
    z-index: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(212, 175, 55, 0.13), transparent 34%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px);
    background-size: auto, 62px 62px;
}

.setup-left-inner[b-75r0urcqjo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: min(100%, 395px);
    min-height: 100%;
    margin: 0 auto;
    justify-content: center;
    gap: 24px;
    padding: 48px 38px 34px;
    box-sizing: border-box;
}

/* ── Seals ────────────────────────────────────────────────────────────── */
.government-seals[b-75r0urcqjo] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    gap: 14px;
    margin-top: auto;
    margin-bottom: 10px;
}

.government-logo-card[b-75r0urcqjo] {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 14px 30px rgba(0, 0, 0, 0.22);
}

.government-logo-card img[b-75r0urcqjo] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.government-logo-card.stalltrack-logo[b-75r0urcqjo] {
    background: transparent;
}

.government-logo-card.stalltrack-logo img[b-75r0urcqjo] {
    object-fit: contain;
}

/* ── Brand block ──────────────────────────────────────────────────────── */
.setup-brand[b-75r0urcqjo] {
    gap: 7px;
}

.setup-brand-label[b-75r0urcqjo] {
    color: rgba(255, 255, 255, 0.73);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.setup-brand-city[b-75r0urcqjo] {
    color: rgba(255, 255, 255, 0.93);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 13px;
}

.setup-brand-title[b-75r0urcqjo] {
    color: #e4bf52;
    font-size: clamp(52px, 5vw, 68px);
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-left: 0.1em;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.22);
}

.setup-brand-sub[b-75r0urcqjo] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
}

/* ── Secure-access blurb ──────────────────────────────────────────────── */
.login-secure-access[b-75r0urcqjo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    width: min(100%, 320px);
    text-align: center;
    margin: 4px auto 0;
}

.login-secure-icon[b-75r0urcqjo] {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    color: #dce8f4;
    border: 1px solid rgba(220, 232, 244, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.login-secure-icon svg[b-75r0urcqjo] { width: 24px; height: 24px; }

.login-secure-title[b-75r0urcqjo] {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-secure-access p[b-75r0urcqjo] {
    margin: 0;
    color: rgba(235, 242, 249, 0.75);
    font-size: 13px;
    line-height: 1.5;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.setup-left-footer[b-75r0urcqjo] {
    margin-top: auto;
    padding-top: 26px;
    border-top-color: rgba(255, 255, 255, 0.17);
}

.setup-system-name[b-75r0urcqjo] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    letter-spacing: 0.1em;
}

.setup-version[b-75r0urcqjo] { color: rgba(255, 255, 255, 0.62); font-size: 12px; margin-top: 8px; }

/* ── Responsive (left panel only — the pages own their right-hand side) ── */
@media (max-height: 820px) and (min-width: 769px) {
    .setup-left-inner[b-75r0urcqjo] { gap: 17px; padding-top: 28px; padding-bottom: 24px; }
    .government-logo-card[b-75r0urcqjo] { width: 82px; height: 82px; }
    .setup-brand-city[b-75r0urcqjo] { margin-bottom: 6px; }
    .setup-brand-title[b-75r0urcqjo] { font-size: 48px; }
    .setup-brand-sub[b-75r0urcqjo] { font-size: 14px; }
    .login-secure-access[b-75r0urcqjo] { margin-top: 10px; }
    .setup-left-footer[b-75r0urcqjo] { padding-top: 18px; }
}

@media (max-width: 940px) {
    .setup-left[b-75r0urcqjo] { width: clamp(300px, 35vw, 360px); }
    .government-logo-card[b-75r0urcqjo] { width: 82px; height: 82px; }
    .setup-left-inner[b-75r0urcqjo] { padding-right: 24px; padding-left: 24px; }
    .setup-brand-city[b-75r0urcqjo] { font-size: 15px; }
    .setup-brand-title[b-75r0urcqjo] { font-size: 48px; }
    .setup-brand-sub[b-75r0urcqjo] { font-size: 14px; }
    .login-secure-access[b-75r0urcqjo] { width: 100%; }
}

/* Phones: the panel becomes a short banner above the card. */
@media (max-width: 768px) {
    .setup-left[b-75r0urcqjo] { width: 100%; height: auto; min-height: 235px; position: relative; }
    .setup-left-inner[b-75r0urcqjo] { width: 100%; min-height: 235px; justify-content: center; gap: 12px; padding: 28px 22px; }
    .government-seals[b-75r0urcqjo] { gap: 13px; margin: 0; }
    .government-logo-card[b-75r0urcqjo] { width: 62px; height: 62px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05); }
    .setup-brand[b-75r0urcqjo] { gap: 3px; }
    .setup-brand-label[b-75r0urcqjo] { font-size: 9px; }
    .setup-brand-city[b-75r0urcqjo] { font-size: 13px; margin-bottom: 5px; }
    .setup-brand-title[b-75r0urcqjo] { font-size: 39px; }
    .setup-brand-sub[b-75r0urcqjo] { font-size: 12px; }
    .login-secure-access[b-75r0urcqjo], .setup-left-footer[b-75r0urcqjo] { display: none; }
}
/* /Components/Pages/Shared/CollectionTrendChart.razor.rz.scp.css */
/* ══ Shared Collection Trend chart (3D bars + nice Y-axis + tooltip) ══ */

.rpt-chart-area[b-305x6dpx8w] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1;
    overflow: visible;
}

/* Y-axis labels — top (max) → bottom (0), aligned to the bar plot region */
.rpt-yaxis[b-305x6dpx8w] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 0 50px;
    min-width: 30px;
    text-align: right;
}
.rpt-ytick[b-305x6dpx8w] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-subtle);
    line-height: 1;
}

.rpt-bar-chart[b-305x6dpx8w] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex: 1;
    min-height: 250px;
    padding: 14px 18px 10px;
    position: relative;
    overflow: visible;
    background: linear-gradient(to top, rgba(13, 33, 55, 0.02) 0%, transparent 100%);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

/* Gridlines + L-shaped axis, confined to the exact region the bars rise in (top:14px, bottom:50px) */
.rpt-bar-chart[b-305x6dpx8w]::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 18px;
    right: 18px;
    bottom: 50px;
    border-left: 1.5px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-bottom: 1.5px solid color-mix(in srgb, var(--border) 85%, transparent);
    background: repeating-linear-gradient(
        to top,
        color-mix(in srgb, var(--border) 50%, transparent) 0,
        color-mix(in srgb, var(--border) 50%, transparent) 1px,
        transparent 1px,
        transparent 20%
    );
    pointer-events: none;
}

.rpt-bar-group[b-305x6dpx8w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
}

/* Fixed-height area that holds the 3D bar, anchored to bottom */
.rpt-bar-wrap[b-305x6dpx8w] {
    width: 100%;
    height: calc(100% - 40px);
    position: relative;
    flex-shrink: 0;
}

/* ── 3D stacked bar: rent (green) base + fish-kilo (blue) cap, with top & side faces ── */
.bar3d[b-305x6dpx8w] {
    --depth: 13px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(calc(-50% - (var(--depth) / 2)));
    width: min(58%, 74px);
    display: flex;
    flex-direction: column;
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s ease, filter 0.18s ease;
    min-height: 4px;
    filter: drop-shadow(6px 10px 12px color-mix(in srgb, var(--navy) 10%, transparent));
}
.seg3d[b-305x6dpx8w] { position: relative; width: 100%; }

/* Front faces */
.seg-rent[b-305x6dpx8w] { background: linear-gradient(180deg, #3a9970 0%, #2d7a5f 100%); }
.seg-fish[b-305x6dpx8w] { background: linear-gradient(180deg, #5fb0ff 0%, #4a9eff 100%); }

/* Right side face (leans up-right by --depth) */
.face-side[b-305x6dpx8w] {
    position: absolute;
    top: 0;
    left: 100%;
    width: var(--depth);
    height: 100%;
    transform-origin: left top;
    transform: skewY(-45deg);
}
.seg-rent .face-side[b-305x6dpx8w] { background: #1f5d47; }
.seg-fish .face-side[b-305x6dpx8w] { background: #356fb8; }

/* Top face (leans up-right by --depth) — only on the topmost segment */
.face-top[b-305x6dpx8w] {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: var(--depth);
    transform-origin: left bottom;
    transform: skewX(-45deg);
}
.seg-rent .face-top[b-305x6dpx8w] { background: #50b88c; }
.seg-fish .face-top[b-305x6dpx8w] { background: #84c4ff; }

.bar3d > .seg3d:first-child[b-305x6dpx8w] { border-radius: 4px 4px 0 0; }

/* Current period — warm gold glow + gold label & value (no extra row element) */
.rpt-bar-group.current .bar3d[b-305x6dpx8w] { filter: drop-shadow(4px 9px 13px rgba(200, 168, 75, 0.42)); }
.rpt-bar-group.current .rpt-bar-label[b-305x6dpx8w] { color: var(--accent); font-weight: 700; }
.rpt-bar-group.current .rpt-bar-val[b-305x6dpx8w] { color: var(--accent); }

/* Zero-value period — small muted baseline platform so the period still reads (not blank) */
.rpt-bar-group.is-zero .bar3d[b-305x6dpx8w] { height: 11px !important; filter: none; }
.rpt-bar-group.is-zero .seg-rent[b-305x6dpx8w] { background: color-mix(in srgb, var(--border) 88%, #fff); }
.rpt-bar-group.is-zero .seg-rent .face-side[b-305x6dpx8w] { background: color-mix(in srgb, var(--border) 60%, #9aa7b3); }
.rpt-bar-group.is-zero .seg-rent .face-top[b-305x6dpx8w] { background: color-mix(in srgb, var(--border) 95%, #fff); }
.rpt-bar-group.is-zero .rpt-bar-val[b-305x6dpx8w] { color: var(--text-muted); }

.rpt-bar-group:hover .bar3d[b-305x6dpx8w] {
    transform: translateX(calc(-50% - (var(--depth) / 2))) translateY(-3px);
    filter: drop-shadow(8px 14px 16px color-mix(in srgb, var(--navy) 14%, transparent)) brightness(1.03);
}
.rpt-bar-group:hover .rpt-bar-label[b-305x6dpx8w] { color: var(--navy); }

/* Hover tooltip — meaningful breakdown (total + rent/fish split) */
.rpt-bar-tip[b-305x6dpx8w] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 158px;
    background: #ffffff;
    color: var(--navy);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    opacity: 0;
    pointer-events: none;
    z-index: 6;
    box-shadow: 0 10px 28px rgba(13, 33, 55, 0.14);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.rpt-bar-group:hover .rpt-bar-tip[b-305x6dpx8w] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.rpt-bar-tip .tip-title[b-305x6dpx8w] {
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
}
.rpt-bar-tip .tip-total[b-305x6dpx8w] {
    font-size: 16px; font-weight: 800; color: var(--navy);
    margin: 2px 0 7px; padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
}
.rpt-bar-tip .tip-row[b-305x6dpx8w] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-subtle);
    margin-top: 4px;
}
.rpt-bar-tip .tip-row strong[b-305x6dpx8w] { margin-left: auto; color: var(--navy); font-weight: 700; }
.rpt-bar-tip .tip-dot[b-305x6dpx8w] { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.rpt-bar-tip .tip-dot.rent[b-305x6dpx8w] { background: #2d7a5f; }
.rpt-bar-tip .tip-dot.fish[b-305x6dpx8w] { background: #4a9eff; }
.rpt-bar-tip .tip-current[b-305x6dpx8w] { margin-top: 7px; font-size: 11px; font-weight: 600; color: var(--text-subtle); }
.rpt-bar-tip .tip-empty[b-305x6dpx8w] { margin-top: 5px; font-size: 11px; color: var(--text-subtle); }

.rpt-bar-label[b-305x6dpx8w] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-top: 6px;
    font-weight: 500;
}
.rpt-bar-val[b-305x6dpx8w] {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
}

/* Empty state — fills the exact gridline box (top:14 / bottom:50 / sides:18) so it sits dead-centre */
.rpt-empty[b-305x6dpx8w] {
    position: absolute;
    top: 14px;
    left: 18px;
    right: 18px;
    bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    text-align: center;
}
.rpt-empty-icon svg[b-305x6dpx8w] { width: 40px; height: 40px; stroke: var(--text-subtle); opacity: 0.6; }
.rpt-empty-title[b-305x6dpx8w] { font-size: 14px; font-weight: 700; color: var(--text-subtle); }
.rpt-empty-text[b-305x6dpx8w] { font-size: 12px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Flat bars: V3 forbids decorative gradients and 3-D effects. The extruded faces and drop-shadows are
   removed; rent stays green, the fish fee civic blue; the current month is marked by its blue label.
   ══════════════════════════════════════════════════════════════ */
.bar3d[b-305x6dpx8w],
.rpt-bar-group.current .bar3d[b-305x6dpx8w],
.rpt-bar-group:hover .bar3d[b-305x6dpx8w] {
    filter: none;
}

.face-side[b-305x6dpx8w],
.face-top[b-305x6dpx8w] {
    display: none;
}

.seg-rent[b-305x6dpx8w] {
    background: var(--green);
}

.seg-fish[b-305x6dpx8w] {
    background: var(--accent);
}

.rpt-bar-group:hover .seg3d[b-305x6dpx8w] {
    opacity: .88;
}
/* /Components/Pages/Shared/FacilityStallsTable.razor.rz.scp.css */
/* ============================================================
   FacilityStallsTable.razor.css  —  Reusable stalls table styles
   Blazor CSS isolation: only applies to FacilityStallsTable.razor
   ============================================================ */

/* Row status left-border indicators */
.row-paid td:first-child[b-jei023ynky] {
    border-left: 3px solid var(--green);
}

.row-unpaid td:first-child[b-jei023ynky] {
    border-left: 3px solid var(--red);
}

.row-partial td:first-child[b-jei023ynky] {
    border-left: 3px solid #b87333;
}

.row-inactive td:first-child[b-jei023ynky] {
    border-left: 3px solid var(--border);
}

/* ── Operational 2-per-row card grid ── */
.ops-grid[b-jei023ynky] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

/* Mobile: a 2-up grid leaves ~150px per card — too narrow for the badge + 3 action icons + name/rate,
   which is what caused the clipped/overlapping cards. One column reads cleanly instead. */
@media (max-width: 640px) {
    .ops-grid[b-jei023ynky] {
        grid-template-columns: 1fr;
    }
}

.ops-card[b-jei023ynky] {
    background: var(--bg-card);
    padding: 14px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: background .1s;
}
.ops-card:hover[b-jei023ynky] { background: var(--surface-hover); }
/* Trailing placeholder that fills the empty grid cell on odd counts */
.ops-card.ops-card-empty[b-jei023ynky] {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg);
    border-left: 3px solid transparent;
    color: var(--text-muted);
    cursor: default;
}
.ops-card.ops-card-empty:hover[b-jei023ynky] { background: var(--bg); }
.ops-card-empty svg[b-jei023ynky] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .7;
}
.ops-empty-label[b-jei023ynky] {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
}
/* Left-border status indicator — same token as the row tints */
.ops-card.row-paid[b-jei023ynky]    { border-left: 3px solid var(--green); }
.ops-card.row-unpaid[b-jei023ynky]  { border-left: 3px solid var(--red); }
.ops-card.row-absent[b-jei023ynky]  { border-left: 3px solid #c8a84b; }
.ops-card.row-partial[b-jei023ynky] { border-left: 3px solid #b87333; }
.ops-card.row-inactive[b-jei023ynky] { border-left: 3px solid var(--border); opacity: .6; }

.ops-card-top[b-jei023ynky] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ops-stall-no[b-jei023ynky] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: .06em;
    text-transform: uppercase;
    min-width: 28px;
}
.ops-card-name[b-jei023ynky] {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-card-meta[b-jei023ynky] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ops-meta-item[b-jei023ynky] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-subtle);
}
.ops-meta-item svg[b-jei023ynky] {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.ops-meta-sep[b-jei023ynky] { color: var(--text-tertiary); font-size: 11px; }
.ops-or[b-jei023ynky] { font-size: 11.5px; color: var(--navy); font-weight: 500; }
.ops-actions[b-jei023ynky] { margin-left: auto; flex-shrink: 0; }

/* ── Operational (NPM daily) column styles ── */
.today-pill[b-jei023ynky] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.today-pill svg[b-jei023ynky] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.today-paid[b-jei023ynky] {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
}
.today-pending[b-jei023ynky] {
    color: var(--text-secondary);
    background: var(--surface-muted);
    box-shadow: inset 0 0 0 1px var(--border);
}
.today-partial[b-jei023ynky] {
    color: #b87333;
    background: color-mix(in srgb, #b87333 12%, transparent);
}
.today-absent[b-jei023ynky] {
    color: #8a6d1a;
    background: color-mix(in srgb, #c8a84b 16%, transparent);
}
/* The Operational today-pill (Not yet / Absent) is clickable to toggle the day's absent state. */
.today-pending[role="button"][b-jei023ynky],
.today-absent[role="button"][b-jei023ynky] {
    cursor: pointer;
}
.today-pending[role="button"]:hover[b-jei023ynky],
.today-absent[role="button"]:hover[b-jei023ynky] {
    filter: brightness(0.96);
}
.today-pending[role="button"]:focus-visible[b-jei023ynky],
.today-absent[role="button"]:focus-visible[b-jei023ynky] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.days-paid[b-jei023ynky] {
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.days-unit[b-jei023ynky] {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Awaiting-OR call-to-action (NPM ops card): an interactive civic-blue action button (V3). */
.action-btn.action-btn-or[b-jei023ynky] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.action-btn.action-btn-or svg[b-jei023ynky] {
    stroke: var(--accent);
}
.action-btn.action-btn-or:hover[b-jei023ynky] {
    background: var(--accent);
    color: var(--surface);
    border-color: var(--accent);
}
.action-btn.action-btn-or:hover svg[b-jei023ynky] {
    stroke: var(--surface);
}

/* Generic lease-table loading state: keep the table frame visible while rows load. */
.facility-loading-table[b-jei023ynky] {
    overflow-x: auto;
}

.facility-loading-table tbody tr[b-jei023ynky] {
    pointer-events: none;
}

.facility-loading-table tbody tr:hover[b-jei023ynky] {
    background: transparent;
}

.facility-loading-actions[b-jei023ynky] {
    gap: 7px;
    justify-content: flex-start;
    pointer-events: none;
}



/* ── Utility (electricity + water) bill status — colours the ICON ONLY, never the button background ──
   green = both settled · gold = one/partial · red = billed but unpaid · (no class = no bill → neutral).
   The bolt svg uses stroke="currentColor", so setting the svg colour/stroke tints only the glyph. */
.action-btn.util-paid svg[b-jei023ynky] {
    color: var(--green, #2d7a5f);
    stroke: var(--green, #2d7a5f);
}

.action-btn.util-partial svg[b-jei023ynky] {
    color: var(--gold, #c8a84b);
    stroke: var(--gold, #c8a84b);
}

.action-btn.util-unpaid svg[b-jei023ynky] {
    color: var(--red, #8b3a3a);
    stroke: var(--red, #8b3a3a);
}


/* Locked utility action — stall has no electricity/water charge (not metered). */
.action-btn.action-locked[b-jei023ynky] {
    opacity: 0.4;
    cursor: not-allowed;
}
.monthly-money[b-jei023ynky] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.monthly-status[b-jei023ynky] { display: inline-flex; padding: 3px 8px; border: 1px solid var(--border); border-radius: 20px; font-size: 11px; color: var(--text-secondary); }
/* /Components/Pages/Shared/PayorStatusDonut.razor.rz.scp.css */
/* ══ Shared 3D Payor Status donut ══ */

.rpt-donut-wrap[b-xqgt6srloi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.rpt-donut-container[b-xqgt6srloi] {
    position: relative;
}
.rpt-donut-container svg[b-xqgt6srloi] {
    filter: drop-shadow(0 6px 11px rgba(13, 33, 55, 0.05));
}

.rpt-donut-svg[b-xqgt6srloi] {
    width: 140px;
    height: 140px;
}

.donut-segment[b-xqgt6srloi] {
    transition: opacity 0.2s ease;
}
.donut-segment:hover[b-xqgt6srloi] {
    opacity: 0.88;
}

.donut-center-value[b-xqgt6srloi] {
    font-size: 23px;
    font-weight: 800;
    fill: var(--navy);
    text-anchor: middle;
    dominant-baseline: middle;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: -0.02em;
}
.donut-center-lbl[b-xqgt6srloi] {
    font-size: 11px;
    font-weight: 700;
    fill: var(--text-muted);
    text-anchor: middle;
    letter-spacing: 0.1em;
    font-family: 'DM Sans', sans-serif;
}

.rpt-donut-legend[b-xqgt6srloi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.donut-leg-item[b-xqgt6srloi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--bg);
    transition: background 0.2s ease;
}
.donut-leg-item:hover[b-xqgt6srloi] {
    background: rgba(13, 33, 55, 0.05);
}

.donut-leg-left[b-xqgt6srloi] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.donut-leg-dot[b-xqgt6srloi] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.donut-leg-dot.paid[b-xqgt6srloi] { background: linear-gradient(180deg, #3fa07a 0%, #256b53 100%); }
.donut-leg-dot.partial[b-xqgt6srloi] { background: linear-gradient(180deg, #e8cc76 0%, #b8902f 100%); }
.donut-leg-dot.unpaid[b-xqgt6srloi] { background: linear-gradient(180deg, #a85454 0%, #6f2a2a 100%); }

.donut-leg-label[b-xqgt6srloi] {
    color: var(--text-subtle);
    font-weight: 500;
}

.donut-leg-value[b-xqgt6srloi] {
    color: var(--navy);
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.donut-leg-value span[b-xqgt6srloi] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}

/* V3: flat legend markers in the same semantic colours as the status pills. */
.donut-leg-dot.paid[b-xqgt6srloi] {
    background: var(--green);
}

.donut-leg-dot.partial[b-xqgt6srloi] {
    background: #c8942c;
}

.donut-leg-dot.unpaid[b-xqgt6srloi] {
    background: var(--red);
}
/* /Components/Pages/Shared/SH/AddSlaughterTransactionModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   AddSlaughterTransactionModal.razor.css
   Slide-in panel for adding slaughter transactions
═══════════════════════════════════════════════════ */

/* ── Backdrop ──────────────────────────────────── */
.slh-backdrop[b-e8zn6pcjpv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 33, 55, 0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
}

/* ── Slide-in Panel ────────────────────────────── */
.slh-transaction-panel[b-e8zn6pcjpv] {
    position: fixed;
    top: 0;
    right: -480px;
    width: 480px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(13, 33, 55, 0.12);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slh-panel-open[b-e8zn6pcjpv] {
    right: 0;
}

/* ── Panel Header ──────────────────────────────── */
.slh-panel-header[b-e8zn6pcjpv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom: 1px solid rgba(200, 168, 75, 0.2);
    flex-shrink: 0;
}

.slh-panel-header-left[b-e8zn6pcjpv] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.slh-panel-avatar[b-e8zn6pcjpv] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(200, 168, 75, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    flex-shrink: 0;
}

.slh-panel-title[b-e8zn6pcjpv] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.slh-panel-sub[b-e8zn6pcjpv] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.slh-panel-close[b-e8zn6pcjpv] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .slh-panel-close:hover[b-e8zn6pcjpv] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .slh-panel-close svg[b-e8zn6pcjpv] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
    }

/* ── Panel Body ────────────────────────────────── */
.slh-panel-body[b-e8zn6pcjpv] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Form Elements ─────────────────────────────── */
.slh-form-group[b-e8zn6pcjpv] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.slh-form-label[b-e8zn6pcjpv] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}

.slh-form-input[b-e8zn6pcjpv] {
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--navy);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

    .slh-form-input:focus[b-e8zn6pcjpv] {
        border-color: var(--navy-2);
    }

.slh-form-section-label[b-e8zn6pcjpv] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
}

.req[b-e8zn6pcjpv] {
    color: var(--red);
}

/* ── Animal Cards ──────────────────────────────── */
.slh-animal-card[b-e8zn6pcjpv] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
}

    .slh-animal-card:hover[b-e8zn6pcjpv] {
        background: #fff;
        border-color: var(--navy-2);
    }

    .slh-animal-card.selected[b-e8zn6pcjpv] {
        background: rgba(200, 168, 75, 0.08);
        border-color: var(--gold);
    }

.slh-animal-header[b-e8zn6pcjpv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slh-animal-icon[b-e8zn6pcjpv] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .slh-animal-icon svg[b-e8zn6pcjpv] {
        width: 18px;
        height: 18px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
    }

.hog-icon[b-e8zn6pcjpv] {
    background: #e8a87c;
}

.carabao-icon[b-e8zn6pcjpv] {
    background: #8b7355;
}

.cow-icon[b-e8zn6pcjpv] {
    background: #a0826d;
}

.other-icon[b-e8zn6pcjpv] {
    background: var(--text-muted);
}

    .other-icon svg[b-e8zn6pcjpv] {
        stroke-width: 2.5;
    }

.slh-animal-info[b-e8zn6pcjpv] {
    flex: 1;
}

.slh-animal-name[b-e8zn6pcjpv] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
}

.slh-animal-rate[b-e8zn6pcjpv] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.slh-animal-check[b-e8zn6pcjpv] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.slh-animal-card.selected .slh-animal-check[b-e8zn6pcjpv] {
    background: var(--gold);
    border-color: var(--gold);
}

    .slh-animal-check svg[b-e8zn6pcjpv] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.slh-animal-input[b-e8zn6pcjpv] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .slh-animal-input label[b-e8zn6pcjpv] {
        font-size: 12px;
        font-weight: 600;
        color: var(--navy);
    }

    .slh-animal-input input[b-e8zn6pcjpv] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 13px;
        color: var(--navy);
        font-family: inherit;
    }

        .slh-animal-input input[type="number"][b-e8zn6pcjpv] {
            text-align: left;
        }

        .slh-animal-input input:focus[b-e8zn6pcjpv] {
            outline: none;
            border-color: var(--navy-2);
        }

    .slh-animal-input select[b-e8zn6pcjpv] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 13px;
        color: var(--navy);
        font-family: inherit;
        background: var(--surface);
    }

        .slh-animal-input select:focus-visible[b-e8zn6pcjpv] {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

    .slh-animal-input input[readonly][b-e8zn6pcjpv] {
        background: var(--surface-muted);
    }

.slh-approved-note[b-e8zn6pcjpv] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

/* ── Summary Block ─────────────────────────────── */
.slh-summary-block[b-e8zn6pcjpv] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-top: 0.5rem;
}

.slh-summary-label[b-e8zn6pcjpv] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.slh-summary-row[b-e8zn6pcjpv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    padding: 0.4rem 0;
    color: var(--navy);
}

.slh-summary-total[b-e8zn6pcjpv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
    color: var(--navy);
}

    .slh-summary-total span:last-child[b-e8zn6pcjpv] {
        color: var(--green);
        font-family: 'Courier New', monospace;
    }

/* ── Error Banner ──────────────────────────────── */
.slh-error-banner[b-e8zn6pcjpv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--red-bg);
    border: 1px solid rgba(139, 58, 58, 0.2);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--red);
    font-weight: 500;
}

    .slh-error-banner svg[b-e8zn6pcjpv] {
        width: 16px;
        height: 16px;
        stroke: var(--red);
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
    }

/* ── Submit Button ─────────────────────────────── */
.slh-submit-btn[b-e8zn6pcjpv] {
    width: 100%;
    padding: 0.75rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .slh-submit-btn:hover[b-e8zn6pcjpv] {
        background: var(--navy-3);
    }

    .slh-submit-btn svg[b-e8zn6pcjpv] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 1024px) {
    .slh-transaction-panel[b-e8zn6pcjpv] {
        width: 100%;
        right: -100%;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.slh-backdrop[b-e8zn6pcjpv], .slh-transaction-panel[b-e8zn6pcjpv] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.slh-panel-header[b-e8zn6pcjpv] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.slh-panel-avatar[b-e8zn6pcjpv] {
    background: var(--accent-soft);
    color: var(--navy);
}

    .slh-panel-avatar svg[b-e8zn6pcjpv] {
        stroke: var(--navy);
    }

.slh-panel-title[b-e8zn6pcjpv] {
    color: var(--navy);
}

.slh-panel-sub[b-e8zn6pcjpv] {
    color: var(--text-tertiary);
}

.slh-panel-close[b-e8zn6pcjpv] {
    border-color: transparent;
    background: transparent;
}

    .slh-panel-close:hover[b-e8zn6pcjpv] {
        border-color: transparent;
        background: var(--surface-hover);
    }

    .slh-panel-close svg[b-e8zn6pcjpv] {
        stroke: var(--text-secondary);
    }

    .slh-panel-close:focus-visible[b-e8zn6pcjpv] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.slh-submit-btn[b-e8zn6pcjpv] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

.slh-submit-btn:hover[b-e8zn6pcjpv] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--surface);
}
/* /Components/Pages/Shared/SH/EditSlaughterTransactionModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   EditSlaughterTransactionModal.razor.css
   Slide-in panel for editing slaughter transactions
═══════════════════════════════════════════════════ */

/* ── Backdrop ──────────────────────────────────── */
.slh-edit-backdrop[b-x8vm4yek1x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 33, 55, 0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
}

/* ── Slide-in Panel ────────────────────────────── */
.slh-edit-panel[b-x8vm4yek1x] {
    position: fixed;
    top: 0;
    right: -480px;
    width: 480px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(13, 33, 55, 0.12);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slh-edit-panel-open[b-x8vm4yek1x] {
    right: 0;
}

/* ── Panel Header ──────────────────────────────── */
.slh-edit-panel-header[b-x8vm4yek1x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom: 1px solid rgba(200, 168, 75, 0.2);
    flex-shrink: 0;
}

.slh-edit-panel-header-left[b-x8vm4yek1x] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.slh-edit-panel-icon[b-x8vm4yek1x] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(200, 168, 75, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .slh-edit-panel-icon svg[b-x8vm4yek1x] {
        width: 20px;
        height: 20px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.slh-edit-panel-title[b-x8vm4yek1x] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.slh-edit-panel-sub[b-x8vm4yek1x] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.slh-edit-panel-close[b-x8vm4yek1x] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .slh-edit-panel-close:hover[b-x8vm4yek1x] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .slh-edit-panel-close svg[b-x8vm4yek1x] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
    }

/* ── Panel Body ────────────────────────────────── */
.slh-edit-panel-body[b-x8vm4yek1x] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Info Card ─────────────────────────────────── */
.slh-edit-info-card[b-x8vm4yek1x] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.slh-edit-info-row[b-x8vm4yek1x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slh-edit-info-label[b-x8vm4yek1x] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.slh-edit-info-value[b-x8vm4yek1x] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

/* ── Form Elements ─────────────────────────────── */
.slh-edit-form-group[b-x8vm4yek1x] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.slh-edit-form-label[b-x8vm4yek1x] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}

.slh-edit-form-input[b-x8vm4yek1x] {
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--navy);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

    .slh-edit-form-input:focus[b-x8vm4yek1x] {
        border-color: var(--navy-2);
    }

    .slh-edit-form-input[b-x8vm4yek1x]::placeholder {
        color: var(--text-muted);
    }

.slh-edit-form-section-label[b-x8vm4yek1x] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
}

.req[b-x8vm4yek1x] {
    color: var(--red);
}

/* ── Animal Cards ──────────────────────────────── */
.slh-edit-animal-card[b-x8vm4yek1x] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
}

    .slh-edit-animal-card:hover[b-x8vm4yek1x] {
        background: #fff;
        border-color: var(--navy-2);
    }

    .slh-edit-animal-card.selected[b-x8vm4yek1x] {
        background: rgba(200, 168, 75, 0.08);
        border-color: var(--gold);
    }

.slh-edit-animal-header[b-x8vm4yek1x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slh-edit-animal-icon[b-x8vm4yek1x] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .slh-edit-animal-icon svg[b-x8vm4yek1x] {
        width: 18px;
        height: 18px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
    }

.hog-icon[b-x8vm4yek1x] {
    background: #e8a87c;
}

.carabao-icon[b-x8vm4yek1x] {
    background: #8b7355;
}

.cow-icon[b-x8vm4yek1x] {
    background: #a0826d;
}

.other-icon[b-x8vm4yek1x] {
    background: var(--text-muted);
}

    .other-icon svg[b-x8vm4yek1x] {
        stroke-width: 2.5;
    }

.slh-edit-animal-info[b-x8vm4yek1x] {
    flex: 1;
}

.slh-edit-animal-name[b-x8vm4yek1x] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
}

.slh-edit-animal-rate[b-x8vm4yek1x] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.slh-edit-animal-check[b-x8vm4yek1x] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.slh-edit-animal-card.selected .slh-edit-animal-check[b-x8vm4yek1x] {
    background: var(--gold);
    border-color: var(--gold);
}

    .slh-edit-animal-check svg[b-x8vm4yek1x] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.slh-edit-animal-input[b-x8vm4yek1x] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .slh-edit-animal-input label[b-x8vm4yek1x] {
        font-size: 12px;
        font-weight: 600;
        color: var(--navy);
    }

    .slh-edit-animal-input input[b-x8vm4yek1x] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 13px;
        color: var(--navy);
        font-family: inherit;
    }

        .slh-edit-animal-input input[type="number"][b-x8vm4yek1x] {
            text-align: left;
        }

        .slh-edit-animal-input input:focus[b-x8vm4yek1x] {
            outline: none;
            border-color: var(--navy-2);
        }

/* ── Error Banner ──────────────────────────────── */
.slh-edit-error-banner[b-x8vm4yek1x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--red-bg);
    border: 1px solid rgba(139, 58, 58, 0.2);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--red);
    font-weight: 500;
}

    .slh-edit-error-banner svg[b-x8vm4yek1x] {
        width: 16px;
        height: 16px;
        stroke: var(--red);
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
    }

/* ── Action Buttons ────────────────────────────── */
.slh-edit-actions[b-x8vm4yek1x] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.slh-edit-btn-cancel[b-x8vm4yek1x],
.slh-edit-btn-save[b-x8vm4yek1x] {
    flex: 1;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.slh-edit-btn-cancel[b-x8vm4yek1x] {
    background: var(--bg);
    color: var(--navy);
    border: 1px solid var(--border);
}

    .slh-edit-btn-cancel:hover[b-x8vm4yek1x] {
        background: var(--bg-icon);
        border-color: var(--navy-2);
    }

.slh-edit-btn-save[b-x8vm4yek1x] {
    background: var(--navy);
    color: #fff;
}

    .slh-edit-btn-save:hover[b-x8vm4yek1x] {
        background: var(--navy-3);
    }

    .slh-edit-btn-save svg[b-x8vm4yek1x] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 1024px) {
    .slh-edit-panel[b-x8vm4yek1x] {
        width: 100%;
        right: -100%;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.slh-edit-backdrop[b-x8vm4yek1x], .slh-edit-panel[b-x8vm4yek1x] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.slh-edit-panel-header[b-x8vm4yek1x] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.slh-edit-panel-icon[b-x8vm4yek1x] {
    background: var(--accent-soft);
    color: var(--navy);
}

    .slh-edit-panel-icon svg[b-x8vm4yek1x] {
        stroke: var(--navy);
    }

.slh-edit-panel-title[b-x8vm4yek1x] {
    color: var(--navy);
}

.slh-edit-panel-sub[b-x8vm4yek1x] {
    color: var(--text-tertiary);
}

.slh-edit-panel-close[b-x8vm4yek1x] {
    border-color: transparent;
    background: transparent;
}

    .slh-edit-panel-close:hover[b-x8vm4yek1x] {
        border-color: transparent;
        background: var(--surface-hover);
    }

    .slh-edit-panel-close svg[b-x8vm4yek1x] {
        stroke: var(--text-secondary);
    }

    .slh-edit-panel-close:focus-visible[b-x8vm4yek1x] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.slh-edit-btn-save[b-x8vm4yek1x] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

.slh-edit-btn-save:hover[b-x8vm4yek1x] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--surface);
}
/* /Components/Pages/Shared/SH/SlaughterApprovedAnimals.razor.rz.scp.css */
/* Approved slaughter animals — Head/Admin approval panel. Tokens come from app.css. */

.saa[b-90oyhn4mz6] {
    margin: 0 0 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.saa summary[b-90oyhn4mz6] {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
}

.saa summary:focus-visible[b-90oyhn4mz6] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.saa-body[b-90oyhn4mz6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
}

.saa-table[b-90oyhn4mz6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.saa-table th[b-90oyhn4mz6],
.saa-table td[b-90oyhn4mz6] {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.saa-form[b-90oyhn4mz6] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.saa-form label[b-90oyhn4mz6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.saa-error[b-90oyhn4mz6] {
    margin: 0;
    color: var(--danger, #b42318);
    font-size: 0.8125rem;
}

.saa-sr[b-90oyhn4mz6] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
/* /Components/Pages/Shared/SH/SlaughterRecordModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   SlaughterRecordModal.razor.css
   Slide-in panel for recording slaughter transactions
═══════════════════════════════════════════════════ */

/* ── Backdrop ──────────────────────────────────── */
.slh-record-backdrop[b-smnjpi66k4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 33, 55, 0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
}

/* ── Slide-in Panel ────────────────────────────── */
.slh-record-panel[b-smnjpi66k4] {
    position: fixed;
    top: 0;
    right: -480px;
    width: 480px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(13, 33, 55, 0.12);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slh-record-panel-open[b-smnjpi66k4] {
    right: 0;
}

/* ── Panel Header ──────────────────────────────── */
.slh-record-panel-header[b-smnjpi66k4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom: 1px solid rgba(200, 168, 75, 0.2);
    flex-shrink: 0;
}

.slh-record-panel-header-left[b-smnjpi66k4] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.slh-record-panel-icon[b-smnjpi66k4] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(200, 168, 75, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .slh-record-panel-icon svg[b-smnjpi66k4] {
        width: 20px;
        height: 20px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.slh-record-panel-title[b-smnjpi66k4] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.slh-record-panel-sub[b-smnjpi66k4] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.slh-record-panel-close[b-smnjpi66k4] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .slh-record-panel-close:hover[b-smnjpi66k4] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .slh-record-panel-close svg[b-smnjpi66k4] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
    }

/* ── Panel Body ────────────────────────────────── */
.slh-record-panel-body[b-smnjpi66k4] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Form Elements ─────────────────────────────── */
.slh-record-form-group[b-smnjpi66k4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.slh-record-form-label[b-smnjpi66k4] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}

.slh-record-form-input[b-smnjpi66k4] {
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--navy);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

    .slh-record-form-input:focus[b-smnjpi66k4] {
        border-color: var(--navy-2);
    }

    .slh-record-form-input[b-smnjpi66k4]::placeholder {
        color: var(--text-muted);
    }

.slh-record-form-section-label[b-smnjpi66k4] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
}

.req[b-smnjpi66k4] {
    color: var(--red);
}

/* ── Animal Cards ──────────────────────────────── */
.slh-record-animal-card[b-smnjpi66k4] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
}

    .slh-record-animal-card:hover[b-smnjpi66k4] {
        background: #fff;
        border-color: var(--navy-2);
    }

    .slh-record-animal-card.selected[b-smnjpi66k4] {
        background: rgba(200, 168, 75, 0.08);
        border-color: var(--gold);
    }

.slh-record-animal-header[b-smnjpi66k4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slh-record-animal-icon[b-smnjpi66k4] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .slh-record-animal-icon svg[b-smnjpi66k4] {
        width: 18px;
        height: 18px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
    }

.hog-icon[b-smnjpi66k4] {
    background: #e8a87c;
}

.carabao-icon[b-smnjpi66k4] {
    background: #8b7355;
}

.cow-icon[b-smnjpi66k4] {
    background: #a0826d;
}

.other-icon[b-smnjpi66k4] {
    background: var(--text-muted);
}

    .other-icon svg[b-smnjpi66k4] {
        stroke-width: 2.5;
    }

.slh-record-animal-info[b-smnjpi66k4] {
    flex: 1;
}

.slh-record-animal-name[b-smnjpi66k4] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
}

.slh-record-animal-rate[b-smnjpi66k4] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.slh-record-animal-check[b-smnjpi66k4] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.slh-record-animal-card.selected .slh-record-animal-check[b-smnjpi66k4] {
    background: var(--gold);
    border-color: var(--gold);
}

    .slh-record-animal-check svg[b-smnjpi66k4] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.slh-record-animal-input[b-smnjpi66k4] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .slh-record-animal-input label[b-smnjpi66k4] {
        font-size: 12px;
        font-weight: 600;
        color: var(--navy);
    }

    .slh-record-animal-input input[b-smnjpi66k4] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 13px;
        color: var(--navy);
        font-family: inherit;
    }

        .slh-record-animal-input input[type="number"][b-smnjpi66k4] {
            text-align: left;
        }

        .slh-record-animal-input input:focus[b-smnjpi66k4] {
            outline: none;
            border-color: var(--navy-2);
        }

/* ── Transaction Summary ───────────────────────── */
.slh-record-summary-block[b-smnjpi66k4] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.slh-record-summary-label[b-smnjpi66k4] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.slh-record-summary-row[b-smnjpi66k4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 13px;
    color: var(--navy);
}

    .slh-record-summary-row span:last-child[b-smnjpi66k4] {
        font-weight: 600;
        font-family: 'Courier New', monospace;
    }

.slh-record-summary-total[b-smnjpi66k4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0 0 0;
    margin-top: 0.75rem;
    border-top: 2px solid var(--border);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

    .slh-record-summary-total span:last-child[b-smnjpi66k4] {
        font-size: 16px;
        color: var(--green);
        font-family: 'Courier New', monospace;
    }

/* ── Error Banner ──────────────────────────────── */
.slh-record-error-banner[b-smnjpi66k4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--red-bg);
    border: 1px solid rgba(139, 58, 58, 0.2);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--red);
    font-weight: 500;
}

    .slh-record-error-banner svg[b-smnjpi66k4] {
        width: 16px;
        height: 16px;
        stroke: var(--red);
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
    }

/* ── Submit Button ─────────────────────────────── */
.slh-record-submit-btn[b-smnjpi66k4] {
    width: 100%;
    padding: 0.75rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .slh-record-submit-btn:hover[b-smnjpi66k4] {
        background: var(--navy-3);
    }

    .slh-record-submit-btn svg[b-smnjpi66k4] {
        width: 14px;
        height: 14px;
        stroke: #fff;
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 1024px) {
    .slh-record-panel[b-smnjpi66k4] {
        width: 100%;
        right: -100%;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.slh-record-backdrop[b-smnjpi66k4], .slh-record-panel[b-smnjpi66k4] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.slh-record-panel-header[b-smnjpi66k4] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.slh-record-panel-icon[b-smnjpi66k4] {
    background: var(--accent-soft);
    color: var(--navy);
}

    .slh-record-panel-icon svg[b-smnjpi66k4] {
        stroke: var(--navy);
    }

.slh-record-panel-title[b-smnjpi66k4] {
    color: var(--navy);
}

.slh-record-panel-sub[b-smnjpi66k4] {
    color: var(--text-tertiary);
}

.slh-record-panel-close[b-smnjpi66k4] {
    border-color: transparent;
    background: transparent;
}

    .slh-record-panel-close:hover[b-smnjpi66k4] {
        border-color: transparent;
        background: var(--surface-hover);
    }

    .slh-record-panel-close svg[b-smnjpi66k4] {
        stroke: var(--text-secondary);
    }

    .slh-record-panel-close:focus-visible[b-smnjpi66k4] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.slh-record-submit-btn[b-smnjpi66k4] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

.slh-record-submit-btn:hover[b-smnjpi66k4] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--surface);
}

.slh-record-animal-input select[b-smnjpi66k4] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--navy);
    font-family: inherit;
    background: var(--surface);
}

.slh-record-animal-input select:focus-visible[b-smnjpi66k4] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.slh-record-animal-input input[readonly][b-smnjpi66k4] {
    background: var(--surface-muted);
}

.slh-approved-note[b-smnjpi66k4] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}
/* /Components/Pages/Shared/SH/SlaughterViewDetails.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   SlaughterViewDetails.razor.css
   Scoped styles — uses global design tokens from app.css
══════════════════════════════════════════════════════ */

/* ── Page Shell ── */
.page-container[b-ckeonzcnau] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
}

/* ── Topbar override (back button variant) ── */
.topbar[b-ckeonzcnau] {
    height: var(--topbar-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 12px;
}

.topbar-left[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.back-btn[b-ckeonzcnau] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    color: var(--navy);
}

    .back-btn:hover[b-ckeonzcnau] {
        background: var(--bg);
        border-color: var(--navy-3);
    }

    .back-btn svg[b-ckeonzcnau] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.topbar-info[b-ckeonzcnau] {
    min-width: 0;
}

.topbar-title[b-ckeonzcnau] {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.2;
}

.topbar-breadcrumb[b-ckeonzcnau] {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-sep[b-ckeonzcnau] {
    opacity: 0.4;
}

.breadcrumb-active[b-ckeonzcnau] {
    color: var(--gold);
}

.topbar-right[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.topbar-date[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

    .topbar-date svg[b-ckeonzcnau] {
        width: 14px;
        height: 14px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.topbar-admin[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

    .topbar-admin:hover[b-ckeonzcnau] {
        background: var(--bg);
    }

.admin-avatar[b-ckeonzcnau] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-name[b-ckeonzcnau] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.admin-role[b-ckeonzcnau] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Content Area ── */
.content-area[b-ckeonzcnau] {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ══════════════════════════════════════════
   HERO BANNER (NPM-style)
══════════════════════════════════════════ */
.slh-hero[b-ckeonzcnau] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 28px 32px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    flex-wrap: wrap;
}

    .slh-hero[b-ckeonzcnau]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
        pointer-events: none;
    }

.slh-hero-left[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 260px;
}

.slh-hero-icon[b-ckeonzcnau] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .slh-hero-icon svg[b-ckeonzcnau] {
        width: 26px;
        height: 26px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.slh-icon-svg[b-ckeonzcnau] {
    color: var(--gold);
}

.slh-hero-eyebrow[b-ckeonzcnau] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.slh-hero-title[b-ckeonzcnau] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.slh-hero-sub[b-ckeonzcnau] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.slh-hero-stats[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.slh-hero-stat[b-ckeonzcnau] {
    padding: 0 24px;
    text-align: center;
}

    .slh-hero-stat:first-child[b-ckeonzcnau] {
        padding-left: 0;
    }

.slh-hero-val[b-ckeonzcnau] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.slh-hero-key[b-ckeonzcnau] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.slh-hero-divider[b-ckeonzcnau] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.slh-hero-progress[b-ckeonzcnau] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.slh-hero-progress-fill[b-ckeonzcnau] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 0 2px 2px 0;
    transition: width .5s ease;
}

/* ══════════════════════════════════════════
   PANEL / TABLE
══════════════════════════════════════════ */
.panel[b-ckeonzcnau] {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.panel-header[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    gap: 20px;
}

.panel-header-right[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.animal-counts[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.animal-count-item[b-ckeonzcnau] {
    text-align: center;
}

.animal-count-val[b-ckeonzcnau] {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.animal-count-label[b-ckeonzcnau] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.panel-title[b-ckeonzcnau] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.panel-count[b-ckeonzcnau] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.btn-print[b-ckeonzcnau] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    letter-spacing: 0.2px;
}

    .btn-print:hover[b-ckeonzcnau] {
        background: var(--navy-3);
    }

    .btn-print svg[b-ckeonzcnau] {
        width: 14px;
        height: 14px;
        stroke: white;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.table-wrap[b-ckeonzcnau] {
    overflow-x: auto;
}

.txn-table[b-ckeonzcnau] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .txn-table thead th[b-ckeonzcnau] {
        padding: 10px 14px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--text-muted);
        text-align: left;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
        background: var(--bg-card);
    }

    .txn-table tbody .txn-row td[b-ckeonzcnau] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        color: var(--text);
        font-size: 13px;
    }

    /* Group styling - remove border between same OR number */
    .txn-table tbody .txn-row.group-middle td[b-ckeonzcnau],
    .txn-table tbody .txn-row.group-first:not(.group-last) td[b-ckeonzcnau] {
        border-bottom: 1px solid rgba(221, 228, 234, 0.3);
    }

    .txn-table tbody .txn-row.group-last td[b-ckeonzcnau] {
        border-bottom: 1px solid var(--border);
    }

    .txn-table tbody .txn-row:last-child td[b-ckeonzcnau] {
        border-bottom: none;
    }

    .txn-table tbody .txn-row:hover td[b-ckeonzcnau] {
        background: var(--bg);
    }




/* ══════════════════════════════════════════
   COLLECTION SUMMARY CARD
══════════════════════════════════════════ */
.summary-card[b-ckeonzcnau] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.summary-header[b-ckeonzcnau] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.summary-title[b-ckeonzcnau] {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
}

.summary-period[b-ckeonzcnau] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-grid[b-ckeonzcnau] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.summary-item[b-ckeonzcnau] {
    padding: 20px;
    text-align: center;
    border-right: 1px solid var(--border);
}

    .summary-item:last-child[b-ckeonzcnau] {
        border-right: none;
    }

.summary-label[b-ckeonzcnau] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.summary-value[b-ckeonzcnau] {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
}

    .summary-value.highlight[b-ckeonzcnau] {
        color: var(--green);
    }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
    .summary-grid[b-ckeonzcnau] {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-item[b-ckeonzcnau] {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

        .summary-item:nth-child(2n)[b-ckeonzcnau] {
            border-right: 1px solid var(--border);
        }

        .summary-item:last-child[b-ckeonzcnau],
        .summary-item:nth-last-child(2)[b-ckeonzcnau] {
            border-bottom: none;
        }
}

@media (max-width: 768px) {
    .content-area[b-ckeonzcnau] {
        padding: 16px;
    }

    .slh-hero[b-ckeonzcnau] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 20px;
    }

    .slh-hero-stats[b-ckeonzcnau] {
        align-self: stretch;
        justify-content: space-around;
    }

    .slh-hero-stat[b-ckeonzcnau] {
        padding: 0 12px;
    }

    .topbar-date[b-ckeonzcnau] {
        display: none;
    }

    .animal-counts[b-ckeonzcnau] {
        display: none;
    }
}

@media (max-width: 480px) {
    .slh-hero-stats[b-ckeonzcnau] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .slh-hero-divider[b-ckeonzcnau] {
        display: none;
    }
}

/* ── Print styles ── */
/* ── The printed record ───────────────────────────────────────────────────────────────────────
   The letterhead and meta strip exist only on paper; the screen leads with the hero instead. */
.print-doc-header[b-ckeonzcnau],
.print-doc-meta[b-ckeonzcnau] {
    display: none;
}

@media print {
    .topbar[b-ckeonzcnau],
    .btn-print[b-ckeonzcnau],
    .back-btn[b-ckeonzcnau] {
        display: none !important;
    }

    /* The paper margin. The print helper sets the PAGE margin to nought so Chromium has nowhere to draw its own date, title and
       URL, so the whitespace has to come from inside the document — otherwise the record prints hard against the paper edge. */
    .content-area[b-ckeonzcnau] {
        padding: 12mm;
    }

    /* THE HERO IS FOR THE SCREEN. Printed, it took a third of the page: a forced navy background, a full-width progress bar and
       three figures the Collection Summary states again below. The office asked for the record — the transactions and the
       summary — so the decoration goes and the letterhead above takes its place. */
    .slh-hero[b-ckeonzcnau],
    .animal-counts[b-ckeonzcnau] {
        display: none !important;
    }

    .print-doc-header[b-ckeonzcnau],
    .print-doc-meta[b-ckeonzcnau] {
        display: block;
    }

    .print-doc-header[b-ckeonzcnau] {
        text-align: center;
        padding-bottom: 18px;
        border-bottom: 2px solid #111827;
    }

    .print-doc-logo[b-ckeonzcnau] {
        display: block;
        width: 58px;
        height: 58px;
        object-fit: contain;
        margin: 0 auto 10px;
    }

    .print-doc-republic[b-ckeonzcnau] {
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: 11px;
        color: #374151;
    }

    .print-doc-header h2[b-ckeonzcnau] {
        margin: 7px 0 3px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 22px;
        line-height: 1.15;
        color: #111827;
    }

    .print-doc-header p[b-ckeonzcnau] {
        margin: 0;
        font-size: 12px;
        color: #4b5563;
    }

    .print-doc-title[b-ckeonzcnau] {
        margin-top: 18px;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 13px;
        font-weight: 800;
        color: #111827;
    }

    .print-doc-meta[b-ckeonzcnau] {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border: 1px solid #cfd6de;
        margin: 16px 0;
    }

    .print-doc-meta div[b-ckeonzcnau] { padding: 10px 12px; border-right: 1px solid #cfd6de; }
    .print-doc-meta div:last-child[b-ckeonzcnau] { border-right: none; }
    .print-doc-meta span[b-ckeonzcnau] { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: #6b7280; }
    .print-doc-meta strong[b-ckeonzcnau] { display: block; margin-top: 4px; font-size: 12px; color: #111827; }

    /* The letterhead and the strip are never split across a page break. */
    .print-doc-header[b-ckeonzcnau],
    .print-doc-meta[b-ckeonzcnau] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* THE TABLE WAS THE WORST OF IT. On screen .table-wrap scrolls sideways; on paper a scroll region cannot be scrolled, so the
       right-hand columns — the receipt number and the collector — were simply unreachable. Overflow is released and the table is
       laid out to the paper width instead. */
    .table-wrap[b-ckeonzcnau] {
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
    }

    .txn-table[b-ckeonzcnau] {
        width: 100% !important;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 11px;
    }

    .txn-table th[b-ckeonzcnau],
    .txn-table td[b-ckeonzcnau] {
        border: 1px solid #cfd6de;
        padding: 7px 8px;
        overflow-wrap: anywhere;
    }

    .txn-table th[b-ckeonzcnau] {
        background: #f3f6f9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* The date read "Sep / 11, / 2026" down three lines in a column the fixed layout had starved. */
    .txn-table th:nth-child(2)[b-ckeonzcnau],
    .txn-table td:nth-child(2)[b-ckeonzcnau] {
        white-space: nowrap;
        width: 15%;
    }

    /* The header repeats on every page the table continues onto, and a row is never split down the middle — the same two rules
       every other document here paginates by. */
    .txn-table thead[b-ckeonzcnau] { display: table-header-group; }
    .txn-table tr[b-ckeonzcnau] { break-inside: avoid; page-break-inside: avoid; }

    /* Flat on paper: a card's shadow prints as a grey smear and its radius as a broken rule. */
    .summary-card[b-ckeonzcnau],
    .panel[b-ckeonzcnau] {
        border: 1px solid #cfd6de !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* The summary is four figures and is kept whole. The transactions panel deliberately is NOT: a client with forty records must
       be allowed to run onto a second page, which is what the repeating header row above is for. Telling it to avoid breaking
       would push the whole table to a fresh page and then overflow it anyway. */
    .summary-card[b-ckeonzcnau] {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.topbar[b-ckeonzcnau], .content-area[b-ckeonzcnau] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.slh-hero[b-ckeonzcnau] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .slh-hero[b-ckeonzcnau]::before {
        display: none;
    }

.slh-hero-icon[b-ckeonzcnau] {
    background: var(--accent-soft);
}

    .slh-hero-icon svg[b-ckeonzcnau] {
        stroke: var(--navy) !important;
    }

.slh-hero-eyebrow[b-ckeonzcnau] {
    color: var(--text-tertiary);
}

.slh-hero-title[b-ckeonzcnau],
.slh-hero-val[b-ckeonzcnau] {
    color: var(--navy);
}

.slh-hero-val[b-ckeonzcnau] {
    font-variant-numeric: tabular-nums;
}

.slh-hero-sub[b-ckeonzcnau] {
    color: var(--text-tertiary);
}

.slh-hero-key[b-ckeonzcnau] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.slh-hero-divider[b-ckeonzcnau] {
    background: var(--border);
}

.slh-hero-progress[b-ckeonzcnau] {
    height: 3px;
    background: var(--surface-muted);
}

.slh-hero-progress-fill[b-ckeonzcnau] {
    background: var(--accent);
}

.btn-print[b-ckeonzcnau] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

.btn-print:hover[b-ckeonzcnau] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--surface);
}
/* /Components/Pages/Shared/SH/StallHoldersList.razor.rz.scp.css */
/* ============================================================
   ListStallHolders.razor.css
   Blazor CSS isolation — only applies to ListStallHolders.razor
   ============================================================ */

/* ── Back Button ─────────────────────────────────────────── */
.lsh-back-btn[b-elvv7hzh8b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}

    .lsh-back-btn:hover[b-elvv7hzh8b] {
        background: var(--bg-icon);
        color: var(--navy);
        border-color: var(--navy);
    }

    .lsh-back-btn svg[b-elvv7hzh8b] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── Hero ────────────────────────────────────────────────── */
.lsh-hero[b-elvv7hzh8b] {
    position: relative;
    background: var(--navy);
    border-radius: 14px;
    padding: 28px 32px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    flex-wrap: wrap;
}

    .lsh-hero[b-elvv7hzh8b]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(200,168,75,.18) 0%, transparent 70%);
        pointer-events: none;
    }

.lsh-hero-left[b-elvv7hzh8b] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 260px;
}

.lsh-hero-icon[b-elvv7hzh8b] {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(200,168,75,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .lsh-hero-icon svg[b-elvv7hzh8b] {
        width: 24px;
        height: 24px;
        stroke: var(--gold);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.lsh-hero-eyebrow[b-elvv7hzh8b] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}

.lsh-hero-title[b-elvv7hzh8b] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.lsh-hero-sub[b-elvv7hzh8b] {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

.lsh-hero-stats[b-elvv7hzh8b] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.lsh-hero-stat[b-elvv7hzh8b] {
    padding: 0 24px;
    text-align: center;
}

    .lsh-hero-stat:first-child[b-elvv7hzh8b] {
        padding-left: 0;
    }

.lsh-hero-val[b-elvv7hzh8b] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.lsh-hero-key[b-elvv7hzh8b] {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.lsh-hero-divider[b-elvv7hzh8b] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

.lsh-hero-progress[b-elvv7hzh8b] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,.1);
}

.lsh-hero-progress-fill[b-elvv7hzh8b] {
    height: 100%;
    background: linear-gradient(90deg,var(--gold),var(--gold-light));
    border-radius: 0 2px 2px 0;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.page-toolbar[b-elvv7hzh8b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar-left[b-elvv7hzh8b] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-outline[b-elvv7hzh8b] {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}

    .btn-outline:hover[b-elvv7hzh8b] {
        border-color: var(--gold);
        background: #fffbf0;
        color: var(--navy);
    }

/* ── Document Panel ──────────────────────────────────────── */
.lsh-doc-panel[b-elvv7hzh8b] {
    background: #fff;
    border: 1px solid #d5dde5;
    border-radius: 0;
    padding: 30px 28px 40px;
    margin-bottom: 24px;
    width: 100%;
    min-height: 900px;
    box-sizing: border-box;
    box-shadow: 0 18px 38px rgba(9, 31, 52, .08);
    color: #111827;
}

/* ── Document Header ─────────────────────────────────────── */
.lsh-doc-header[b-elvv7hzh8b] {
    text-align: center;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 2px solid #111827;
}

.lsh-doc-logo[b-elvv7hzh8b] {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
    margin: 0 auto 10px;
}

.lsh-doc-republic[b-elvv7hzh8b] {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    color: #374151;
}

.lsh-doc-office[b-elvv7hzh8b] {
    margin: 7px 0 3px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.15;
    color: #111827;
}

.lsh-doc-gov[b-elvv7hzh8b] {
    font-size: 12px;
    color: #4b5563;
    font-weight: 400;
}

.lsh-doc-title[b-elvv7hzh8b] {
    margin-top: 18px;
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.lsh-doc-facility[b-elvv7hzh8b] {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #b98f27;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* ── Section Block ───────────────────────────────────────── */
.lsh-section-block[b-elvv7hzh8b] {
    margin-bottom: 22px;
}

.lsh-section-label-row[b-elvv7hzh8b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f6f9;
    border: 1px solid #cfd6de;
    border-bottom: none;
    border-radius: 0;
    padding: 9px 12px;
}

.lsh-section-label[b-elvv7hzh8b] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    color: #111827;
    text-transform: uppercase;
}

.lsh-section-count[b-elvv7hzh8b] {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Table — compact, no x-scroll ───────────────────────── */
.lsh-table[b-elvv7hzh8b] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #111827;
    border: 1px solid #cfd6de;
    border-top: none;
    table-layout: fixed;
}

    .lsh-table thead tr[b-elvv7hzh8b] {
        background: #f3f6f9;
    }

    .lsh-table th[b-elvv7hzh8b] {
        padding: 9px 10px;
        font-size: 11px;
        font-weight: 700;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom: 1px solid #cfd6de;
        border-right: 1px solid #cfd6de;
        text-align: center;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

        .lsh-table th:last-child[b-elvv7hzh8b] {
            border-right: none;
        }

.th-sub[b-elvv7hzh8b] {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0;
    display: block;
}

.lsh-table td[b-elvv7hzh8b] {
    padding: 9px 10px;
    border-bottom: 1px solid #cfd6de;
    border-right: 1px solid #cfd6de;
    vertical-align: middle;
    line-height: 1.35;
    font-family: inherit;
    font-weight: 400;
    color: #111827;
    overflow-wrap: anywhere;
    word-break: normal;
}

    .lsh-table td:last-child[b-elvv7hzh8b] {
        border-right: none;
    }

.lsh-table tbody tr:last-child td[b-elvv7hzh8b] {
    border-bottom: none;
}

.lsh-table tbody tr:hover[b-elvv7hzh8b] {
    background: #f8fafc;
}

/* Column fixed widths — tuned to fit sidebar layout */
.col-no[b-elvv7hzh8b] {
    width: 28px;
}

.col-name[b-elvv7hzh8b] {
    width: 13%;
}

.col-contract[b-elvv7hzh8b] {
    width: 13%;
}

.col-stall[b-elvv7hzh8b] {
    width: 52px;
}

.col-date[b-elvv7hzh8b] {
    width: 72px;
}

.col-years[b-elvv7hzh8b] {
    width: 44px;
}

.col-area[b-elvv7hzh8b] {
    width: 62px;
}

.col-rate[b-elvv7hzh8b] {
    width: 80px;
}

.col-actual[b-elvv7hzh8b] {
    width: 76px;
}

.col-whole[b-elvv7hzh8b] {
    width: 82px;
}

.col-arealoc[b-elvv7hzh8b] {
    width: 76px;
}

.col-fish[b-elvv7hzh8b] {
    width: 64px;
}

.col-status[b-elvv7hzh8b] {
    width: 58px;
}

/* Cell alignment helpers */
.c[b-elvv7hzh8b] {
    text-align: center;
}

.tl[b-elvv7hzh8b] {
    text-align: left;
}

.r[b-elvv7hzh8b] {
    text-align: right;
    font-family: inherit;
}

.fw[b-elvv7hzh8b] {
    font-weight: 400;
    color: #111827;
}

/* Muted contract name */
.txt-muted[b-elvv7hzh8b] {
    color: var(--text-muted);
}

.txt-closed[b-elvv7hzh8b] {
    /* Plain, not italic: a government roster should not slant a lessee's name. */
    color: var(--text-subtle);
}

/* The one cell a no-contract row states across the contract columns. Matches the Stall Holder List menu sheet, so
   the same space reads the same way whichever of the two the office prints. */
.lsh-nc[b-elvv7hzh8b] {
    text-align: center;
    color: var(--text-muted);
    letter-spacing: .01em;
}

.txt-partial[b-elvv7hzh8b] {
    color: #b87333;
    font-weight: 600;
}

/* ── Row left-border accents ─────────────────────────────── */
.row-closed[b-elvv7hzh8b] {
    opacity: .55;
}

/* ── Table Footer (section totals) ──────────────────────── */
.tfoot-row[b-elvv7hzh8b] {
    background: #f8fafc;
}

.tfoot-label[b-elvv7hzh8b] {
    padding: 8px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: right;
    border-top: 1px solid #cfd6de;
}

.tfoot-val[b-elvv7hzh8b] {
    font-weight: 700;
    color: #111827;
    border-top: 1px solid #cfd6de;
    font-family: inherit;
}

/* ── Grand Total ─────────────────────────────────────────── */
.lsh-grand-total[b-elvv7hzh8b] {
    margin-top: 8px;
    border: 1px solid #cfd6de;
    border-radius: 0;
    padding: 14px 16px;
    background: #f8fafc;
}

.lsh-grand-label[b-elvv7hzh8b] {
    font-size: 11px;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}

.lsh-grand-stats[b-elvv7hzh8b] {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.lsh-grand-val[b-elvv7hzh8b] {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    font-family: inherit;
}

.lsh-grand-key[b-elvv7hzh8b] {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
    .admin-layout > :not(.admin-main)[b-elvv7hzh8b] {
        display: none !important;
    }

    .admin-main[b-elvv7hzh8b] {
        margin: 0 !important;
    }

    .topbar[b-elvv7hzh8b], .page-toolbar[b-elvv7hzh8b], .lsh-hero[b-elvv7hzh8b] {
        display: none !important;
    }

    .content-area[b-elvv7hzh8b] {
        padding: 0 !important;
    }

    .lsh-doc-panel[b-elvv7hzh8b] {
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        /* The screen's 900px floor exceeds one landscape sheet and otherwise emits a blank trailing page. */
        min-height: 0 !important;
    }

    .lsh-section-label-row[b-elvv7hzh8b] {
        background: #f3f6f9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .lsh-table[b-elvv7hzh8b] {
        font-size: 11px;
    }

        .lsh-table th[b-elvv7hzh8b], .lsh-table td[b-elvv7hzh8b] {
            padding: 5px 5px;
        }

    .lsh-section-block[b-elvv7hzh8b] {
        page-break-inside: avoid;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — List of Stall Holders (mobile/tablet ≤768px). Desktop untouched.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hero: stack, drop the decorative icon, and lay the stats out as a shrinkable grid. */
    .lsh-hero[b-elvv7hzh8b] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px 16px 14px;
    }

    .lsh-hero-left[b-elvv7hzh8b] {
        flex: none;
        min-width: 0;
        gap: 12px;
    }

    .lsh-hero-icon[b-elvv7hzh8b] {
        display: none;
    }

    .lsh-hero-title[b-elvv7hzh8b] {
        font-size: 19px;
    }

    .lsh-hero-stats[b-elvv7hzh8b] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        width: 100%;
    }

    .lsh-hero-stat[b-elvv7hzh8b] {
        padding: 0;
        text-align: left;
    }

    .lsh-hero-divider[b-elvv7hzh8b] {
        display: none;
    }

    /* Document panel: tighten the generous print padding and drop the tall min-height on a phone. */
    .lsh-doc-panel[b-elvv7hzh8b] {
        padding: 16px 12px 24px;
        min-height: 0;
    }

    /* The ~10-column stallholder document table is unreadable if crushed into the viewport, so scroll it
       horizontally at a comfortable width instead. */
    .lsh-table-wrap[b-elvv7hzh8b] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lsh-table[b-elvv7hzh8b] {
        table-layout: auto;
        min-width: 760px;
    }
}

/* ══════════════════════════════════════════════════════════════
   TOOLBAR EXPORT GROUP · CENTRED SECTION LINE · LANDSCAPE PRINTING
   Appended as its own block so the document styles above are untouched.
   ══════════════════════════════════════════════════════════════ */

/* Same export trio as the Export Data page, so both documents are operated identically. */
.lsh-actions[b-elvv7hzh8b] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lsh-btn[b-elvv7hzh8b] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-card);
    color: var(--navy);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.lsh-btn:hover[b-elvv7hzh8b] {
    background: var(--bg);
    border-color: var(--navy);
}

.lsh-btn svg[b-elvv7hzh8b] {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lsh-btn-primary[b-elvv7hzh8b] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.lsh-btn-primary:hover[b-elvv7hzh8b] {
    background: var(--navy-2);
    border-color: var(--navy-2);
}

/* The filtered section, stated once in the document's centre instead of above the only table. */
.lsh-doc-section[b-elvv7hzh8b] {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 800;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .12em;
}

@media print {
    /* Orientation and paper margin come from js/print.js, injected immediately before printing: CSS isolation
       does not scope @page, so declaring it here would change every other printable page in the app. */

    .lsh-actions[b-elvv7hzh8b] { display: none !important; }

    /* Never slant a name or a figure on the printed record. */
    .txt-closed[b-elvv7hzh8b], .lsh-table em[b-elvv7hzh8b], .lsh-table i[b-elvv7hzh8b] { font-style: normal !important; }
}


/* ══════════════════════════════════════════════════════════════
   SECTION RAIL · CENTRED SECTION BAND
   ══════════════════════════════════════════════════════════════ */

/* One quiet rail instead of loose pills, matching the reports strip and the slaughterhouse report. */
.lsh-seg[b-elvv7hzh8b] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.lsh-seg-item[b-elvv7hzh8b] {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    padding: 0 12px;
    min-height: 32px;
    color: var(--text-subtle);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.lsh-seg-item:hover[b-elvv7hzh8b] {
    color: var(--navy);
    background: var(--bg-card);
}

.lsh-seg-item:focus-visible[b-elvv7hzh8b] {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

.lsh-seg-item.active[b-elvv7hzh8b] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* The section band reads across the table, as on the office's paper form, rather than hugging the left edge.
   The row is a flex container above, so the label is centred by the flex axis and the stall count is lifted
   out of the flow to keep its place at the right — the row still states both facts. */
.lsh-section-label-row[b-elvv7hzh8b] {
    position: relative;
    justify-content: center;
}

.lsh-section-count[b-elvv7hzh8b] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* ══════════════════════════════════════════════════════════════
   TYPE SCALE — matched to the Export Data sheet
   The two documents sit side by side in the same folder, so they now share one scale: 12.5px body, 10px
   uppercase column headings, and the same cell padding. Only sizing and spacing change here.
   ══════════════════════════════════════════════════════════════ */

.lsh-table[b-elvv7hzh8b] {
    font-size: 12.5px;
}

.lsh-table th[b-elvv7hzh8b] {
    font-size: 11px;
    letter-spacing: .5px;
    padding: 8px 10px;
}

.lsh-table th .th-sub[b-elvv7hzh8b] {
    font-size: 11px;
    letter-spacing: normal;
}

.lsh-table td[b-elvv7hzh8b] {
    padding: 8px 10px;
}

.lsh-section-label[b-elvv7hzh8b] {
    font-size: 10.5px;
    letter-spacing: .8px;
}

.lsh-section-count[b-elvv7hzh8b] {
    font-size: 11px;
}

/* Trim the vertical air between the letterhead, the rule and the first table so the sheet does not open with
   a band of empty paper — the same rhythm the collection report uses. */
.lsh-doc-header[b-elvv7hzh8b] {
    margin-bottom: 14px;
}

.lsh-section-block[b-elvv7hzh8b] {
    margin-bottom: 16px;
}


@media print {
    /* Nothing but the document, and no surface that could print as an empty card: the hero, toolbar, search
       and any loading or empty state are dropped, and the sheet loses its card treatment. Matches the Reports
       roster and the collection report exactly, so all three print the same way. */
    .lsh-hero[b-elvv7hzh8b], .page-toolbar[b-elvv7hzh8b], .lsh-actions[b-elvv7hzh8b], .lsh-seg[b-elvv7hzh8b], .search-box[b-elvv7hzh8b] { display: none !important; }

    .lsh-doc-panel[b-elvv7hzh8b] {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Compact letterhead — landscape leaves little vertical room. */
    .lsh-doc-header[b-elvv7hzh8b] { margin-bottom: 10px; }
    .lsh-doc-logo[b-elvv7hzh8b] { width: 46px; height: 46px; }
    .lsh-doc-office[b-elvv7hzh8b] { font-size: 13px; }
    .lsh-doc-republic[b-elvv7hzh8b], .lsh-doc-gov[b-elvv7hzh8b] { font-size: 11px; }
    .lsh-doc-title[b-elvv7hzh8b] { font-size: 12px; }
    .lsh-doc-facility[b-elvv7hzh8b], .lsh-doc-section[b-elvv7hzh8b] { font-size: 11px; }

    /* Rows stay whole; a section never breaks straight after its band. */
    .lsh-table tr[b-elvv7hzh8b] { break-inside: avoid; }
    .lsh-section-block[b-elvv7hzh8b] { break-inside: auto; margin-bottom: 14px; }
    .lsh-section-label-row[b-elvv7hzh8b] { break-after: avoid; }
    .lsh-table thead[b-elvv7hzh8b] { display: table-header-group; }
}


@media print {
    /* Protect rows, not whole sections. Guarding the entire block pushed a long section to the next sheet and
       left the first one nearly empty — the same regression the other two sheets had. A section may now span
       sheets, but a row never splits and a band never sits alone at the foot of a page. */
    .lsh-section-block[b-elvv7hzh8b] { page-break-inside: auto; break-inside: auto; }
    .lsh-table tr[b-elvv7hzh8b] { break-inside: avoid; }
    .lsh-section-label-row[b-elvv7hzh8b] { break-after: avoid; }
    .lsh-table thead[b-elvv7hzh8b] { display: table-header-group; }

    /* Only the document's own ink prints: no card surfaces left over from the screen layout. */
    .lsh-doc-panel[b-elvv7hzh8b] { background: #fff !important; box-shadow: none !important; }
}

/* ── Letterhead: one scale for all three official sheets ──────────────────────────────────────────────
   The roster used a 22px Georgia office name and a heavy black rule, while the Reports roster and the
   collection report used the office's sans face at 15px with no rule. Three sheets from one office should
   not disagree on their own letterhead, so this adopts the shared scale. */
.lsh-doc-header[b-elvv7hzh8b] {
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: none;
}

.lsh-doc-logo[b-elvv7hzh8b] {
    width: 54px;
    height: 54px;
    /* contain, never cover: another LGU's seal need not be square, and cropping a municipal seal is not
       something a government sheet may do. */
    object-fit: contain;
    margin: 0 auto 8px;
}

.lsh-doc-republic[b-elvv7hzh8b] {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.lsh-doc-office[b-elvv7hzh8b] {
    margin: 2px 0 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--navy);
}

.lsh-doc-gov[b-elvv7hzh8b] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-subtle);
}

.lsh-doc-title[b-elvv7hzh8b] {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--navy);
}

.lsh-doc-facility[b-elvv7hzh8b], .lsh-doc-section[b-elvv7hzh8b] {
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: .1em;
}


/* The facility keeps the office's gold; the section under it is set in the document's navy, so the letterhead
   does not carry two headline colours. */
.lsh-doc-section[b-elvv7hzh8b] {
    color: var(--navy);
}

/* Close the table under the total, as the paper form does. */
.lsh-table tfoot td[b-elvv7hzh8b] {
    border-bottom: 1px solid #cfd6de;
}


/* The total is the line the office reads first, so it carries a little more weight than a data row — and the
   same weight on both official sheets. */
.tfoot-label[b-elvv7hzh8b] {
    font-size: 11px;
}

.tfoot-val[b-elvv7hzh8b] {
    font-size: 13px;
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.topbar[b-elvv7hzh8b], .content-area[b-elvv7hzh8b] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.lsh-hero[b-elvv7hzh8b] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .lsh-hero[b-elvv7hzh8b]::before {
        display: none;
    }

.lsh-hero-icon[b-elvv7hzh8b] {
    background: var(--accent-soft);
}

    .lsh-hero-icon svg[b-elvv7hzh8b] {
        stroke: var(--navy) !important;
    }

.lsh-hero-eyebrow[b-elvv7hzh8b] {
    color: var(--text-tertiary);
}

.lsh-hero-title[b-elvv7hzh8b],
.lsh-hero-val[b-elvv7hzh8b] {
    color: var(--navy);
}

.lsh-hero-val[b-elvv7hzh8b] {
    font-variant-numeric: tabular-nums;
}

.lsh-hero-sub[b-elvv7hzh8b] {
    color: var(--text-tertiary);
}

.lsh-hero-key[b-elvv7hzh8b] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.lsh-hero-divider[b-elvv7hzh8b] {
    background: var(--border);
}

.lsh-hero-progress[b-elvv7hzh8b] {
    height: 3px;
    background: var(--surface-muted);
}

.lsh-hero-progress-fill[b-elvv7hzh8b] {
    background: var(--accent);
}

.lsh-btn-primary[b-elvv7hzh8b] {
    border-color: var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: var(--surface);
}

.lsh-btn-primary:hover[b-elvv7hzh8b] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--surface);
}

.lsh-seg-item.active[b-elvv7hzh8b] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--surface);
}
/* /Components/Pages/Shared/Sidebar.razor.rz.scp.css */
/* SIDEBAR styles moved from global app.css.
   V3 (docs/interface/STALLTRACK_UI_V3_DIRECTION.md §5): a light shell where only the active destination is
   strongly highlighted. Presentation only — routes, role visibility, collapse and drawer behavior are unchanged. */
.sidebar[b-z8wb0j2a0r] {
    width: var(--sidebar-w);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    transition: width 0.25s ease;
    overflow: hidden;
    border-right: 1px solid var(--border);
}

    .sidebar.collapsed[b-z8wb0j2a0r] {
        width: var(--sidebar-w-col);
    }

.sidebar-brand[b-z8wb0j2a0r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px 16px;
    flex-shrink: 0;
}

.sidebar-seal[b-z8wb0j2a0r] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    overflow: hidden;
    flex-shrink: 0;
}

    .sidebar-seal img[b-z8wb0j2a0r] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #fff;
    }

.sidebar-brand-name[b-z8wb0j2a0r] {
    font-family: 'EB Garamond', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sidebar-brand-sub[b-z8wb0j2a0r] {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar-divider[b-z8wb0j2a0r] {
    height: 1px;
    background: var(--border);
    margin: 0 16px 12px;
    flex-shrink: 0;
}

.sidebar-nav[b-z8wb0j2a0r] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8px 12px;
    scrollbar-width: none;
}

    .sidebar-nav[b-z8wb0j2a0r]::-webkit-scrollbar {
        display: none;
    }

.nav-group-label[b-z8wb0j2a0r] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 0 10px 6px;
    white-space: nowrap;
    overflow: hidden;
}

.nav-item[b-z8wb0j2a0r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 2px;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}

/* NavLink renders its own <a> inside a child component, so CSS isolation
   won't attach this file's scope attribute to that generated anchor.
   ::deep intentionally reaches into the NavLink output while still keeping
   the rule anchored to this sidebar component. */
.sidebar[b-z8wb0j2a0r]  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 2px;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

/* The facility nav labels are data-driven (the tenant's own facility names), which can be long
   (e.g. "Madrid Commercial Center"). Let the label flex and truncate with an ellipsis so it never
   overflows the fixed-width sidebar; the count badge keeps its natural width. */
.sidebar[b-z8wb0j2a0r]  .nav-item > span:not(.nav-badge) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The facility nav labels are data-driven (the tenant's own facility names), which can be long
   (e.g. "Madrid Commercial Center"). Let the label flex and truncate with an ellipsis so it never
   overflows the fixed-width sidebar; the count badge keeps its natural width. */
.sidebar[b-z8wb0j2a0r]  .nav-item > span:not(.nav-badge) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Raw SVGs inserted via MarkupString don't receive the component scope
   attribute, so expose the SVG rule globally to ensure they render
   correctly when injected as raw markup. */
:global(.nav-item svg)[b-z8wb0j2a0r] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Head-only items (Collectors, Audit Trail) shown to a plain Admin: visible for context but locked —
   dimmed, non-navigable, with a small padlock. Keeps the nav honest without hiding capabilities. */
.nav-item-locked[b-z8wb0j2a0r] {
    color: var(--text-disabled);
    cursor: not-allowed;
}
    .nav-item-locked:hover[b-z8wb0j2a0r] {
        background: transparent;
        color: var(--text-disabled);
    }
    .nav-item-locked .nav-lock[b-z8wb0j2a0r] {
        margin-left: auto;
        width: 13px !important;
        height: 13px !important;
        opacity: 0.85;
        flex-shrink: 0;
    }

    .nav-item:hover[b-z8wb0j2a0r] {
        background: var(--surface-hover);
        color: var(--navy);
    }

    .sidebar[b-z8wb0j2a0r]  .nav-item:hover {
        background: var(--surface-hover);
        color: var(--navy);
    }

    .nav-item.active[b-z8wb0j2a0r] {
        background: var(--accent-soft);
        color: var(--accent);
        font-weight: 600;
    }

    .sidebar[b-z8wb0j2a0r]  .nav-item.active {
        background: var(--accent-soft);
        color: var(--accent);
        font-weight: 600;
    }

        :global(.nav-item.active svg)[b-z8wb0j2a0r] {
            stroke: var(--accent);
        }

    /* The selected destination is the only strongly marked item: a short civic-blue bar at the rail edge. */
    .sidebar[b-z8wb0j2a0r]  .nav-item.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--accent);
    }

    .sidebar[b-z8wb0j2a0r]  .nav-item:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

.nav-badge[b-z8wb0j2a0r] {
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

.sidebar-toggle[b-z8wb0j2a0r] {
    margin: 8px;
    padding: 8px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

    .sidebar-toggle:hover[b-z8wb0j2a0r] {
        background: var(--surface-hover);
    }

    .sidebar-toggle:focus-visible[b-z8wb0j2a0r],
    .sidebar-hamburger:focus-visible[b-z8wb0j2a0r] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .sidebar-toggle svg[b-z8wb0j2a0r] {
        width: 16px;
        height: 16px;
        stroke: var(--text-tertiary);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Collapsed state */
.sidebar.collapsed .sidebar-brand-text[b-z8wb0j2a0r],
.sidebar.collapsed .nav-group-label[b-z8wb0j2a0r],
.sidebar.collapsed .nav-item span[b-z8wb0j2a0r],
.sidebar.collapsed .nav-badge[b-z8wb0j2a0r] {
    display: none;
}

.sidebar.collapsed[b-z8wb0j2a0r]  .nav-item span,
.sidebar.collapsed[b-z8wb0j2a0r]  .nav-badge {
    display: none;
}

.sidebar.collapsed .nav-item[b-z8wb0j2a0r] {
    justify-content: center;
    padding: 9px 0;
}

.sidebar.collapsed[b-z8wb0j2a0r]  .nav-item {
    justify-content: center;
    padding: 9px 0;
}


/* ══════════════════════════════════════════
   RESPONSIVE — off-canvas drawer (mobile/tablet ≤768px)
   Desktop (≥769px) is untouched: these rules only exist below the breakpoint.
   Lives in the sidebar's SCOPED stylesheet so it can override the sidebar's own
   scoped base rules (a global app.css rule can't win on specificity).
══════════════════════════════════════════ */
.sidebar-hamburger[b-z8wb0j2a0r] { display: none; }
.sidebar-backdrop[b-z8wb0j2a0r] { display: none; }

@media (max-width: 768px) {
    /* Slide the sidebar in from the left as a drawer; hidden off-canvas by default. Always full width
       (ignore the desktop collapse), and it sits above the backdrop. */
    .sidebar[b-z8wb0j2a0r],
    .sidebar.collapsed[b-z8wb0j2a0r] {
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

        .sidebar.mobile-open[b-z8wb0j2a0r] {
            transform: translateX(0);
            box-shadow: 0 8px 32px rgba(13, 33, 55, 0.18);
        }

    /* Hamburger: fixed top-left, above the sticky topbar (z-index 100) but below the open sidebar (z 200),
       so the sidebar covers it when the drawer is open. */
    .sidebar-hamburger[b-z8wb0j2a0r] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        left: 12px;
        width: 40px;
        height: 40px;
        border-radius: 9px;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--navy);
        cursor: pointer;
        z-index: 150;
        box-shadow: 0 2px 8px rgba(13, 33, 55, 0.12);
    }

        .sidebar-hamburger svg[b-z8wb0j2a0r] {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    /* Dimmed overlay behind the open drawer — tap to close. */
    .sidebar-backdrop[b-z8wb0j2a0r] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(13, 33, 55, 0.5);
        z-index: 150;
    }

    /* The desktop collapse toggle is meaningless in drawer mode. */
    .sidebar-toggle[b-z8wb0j2a0r] {
        display: none;
    }
}


/* The Dashboard mark is the same drawing as the page hero's — identical rects, identical viewBox — so what was
   left was making it survive the rail's small size. Two things were fighting it: at 16-18px the 4-unit gap
   between panels lands on 1-2 device pixels, and anti-aliasing then smears those gaps until the four panels
   read as one grid. Drawn at 20px with crisp edges the gaps snap to whole pixels and the mark reads exactly as
   it does on the Dashboard page. Established by rendering both at 1x and inspecting the pixels, not a scaled
   screenshot — which is what hid the problem the first two times. */
:global(.nav-item .nav-icon-dashboard)[b-z8wb0j2a0r] {
    width: 20px;
    height: 20px;
    /* Negative margins keep the occupied box at the rail's 16px, so every nav label still starts on the same
       vertical line — the mark is drawn larger without shifting the list. */
    margin: -2px;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    shape-rendering: crispEdges;
}
/* /Components/Pages/Shared/Toolbar.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Toolbar.razor.css  —  Reusable toolbar component (Unified Design)
   Single-row layout with search, filters, middle content, and actions
   ════════════════════════════════════════════════════════════════ */

/* V3: white bar, thin border, civic-blue focus and active states. */
.toolbar-unified[b-ryfdveg98j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: var(--elevation-1);
}


/* ── Search Box ──────────────────────────────────────────────── */
.search-box[b-ryfdveg98j] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 7px 10px;
    flex: 1;
    min-width: 180px;
    max-width: 350px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .search-box:focus-within[b-ryfdveg98j] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-ring);
    }

.search-icon[b-ryfdveg98j] {
    width: 15px;
    height: 15px;
    stroke: var(--text-tertiary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.search-input[b-ryfdveg98j] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text);
    outline: none;
    min-width: 0;
}

.search-input[b-ryfdveg98j]::placeholder {
    color: var(--text-tertiary);
}

.search-clear[b-ryfdveg98j] {
    font-size: 16px;
    color: var(--text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
    user-select: none;
}

    .search-clear:hover[b-ryfdveg98j] {
        color: var(--text);
    }


/* ── Filter Tabs (Inline): a quiet segmented control ─────────── */
.filter-tabs-inline[b-ryfdveg98j] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 2px;
    border-radius: 8px;
    background: var(--surface-muted);
}

.filter-tab[b-ryfdveg98j] {
    padding: 6px 12px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

    .filter-tab:hover[b-ryfdveg98j] {
        background: var(--surface);
        color: var(--navy);
    }

    .filter-tab.active[b-ryfdveg98j] {
        background: var(--surface);
        border-color: var(--border);
        color: var(--accent);
        box-shadow: var(--elevation-1);
    }

        .filter-tab.active:hover[b-ryfdveg98j] {
            background: var(--surface);
        }

    .filter-tab:focus-visible[b-ryfdveg98j] {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }


/* ── Middle Content (flexible area) ──────────────────────────── */
.toolbar-middle[b-ryfdveg98j] {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    min-width: 0;
}


/* ── Actions (buttons & content) ────────────────────────────── */
.toolbar-actions[b-ryfdveg98j] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/* ── Buttons ─────────────────────────────────────────────────── */
.btn[b-ryfdveg98j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    height: auto;
    text-decoration: none;
}

    .btn:focus-visible[b-ryfdveg98j] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.btn-icon[b-ryfdveg98j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-icon svg[b-ryfdveg98j] {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Button Variants */
.btn-outline[b-ryfdveg98j],
.btn-secondary[b-ryfdveg98j] {
    background: var(--surface);
    color: var(--navy);
    border-color: var(--border-strong);
}

    .btn-outline:hover[b-ryfdveg98j],
    .btn-secondary:hover[b-ryfdveg98j] {
        background: var(--accent-soft);
        color: var(--accent);
        border-color: var(--accent);
    }

.btn-primary[b-ryfdveg98j] {
    background: var(--accent);
    color: var(--surface);
    border-color: var(--accent);
}

    .btn-primary:hover[b-ryfdveg98j] {
        background: var(--accent-hover);
        border-color: var(--accent-hover);
        color: var(--surface);
    }

@media (prefers-reduced-motion: reduce) {
    .search-box[b-ryfdveg98j],
    .search-clear[b-ryfdveg98j],
    .filter-tab[b-ryfdveg98j],
    .btn[b-ryfdveg98j] {
        transition: none;
    }
}


/* ── Responsive (collapse to vertical on small screens) ──────── */
@media (max-width: 1024px) {
    .toolbar-unified[b-ryfdveg98j] {
        gap: 10px;
        padding: 8px 10px;
    }

    .filter-tabs-inline[b-ryfdveg98j] {
        gap: 2px;
    }

    .filter-tab[b-ryfdveg98j] {
        padding: 5px 10px;
        font-size: 11px;
    }

    .search-box[b-ryfdveg98j] {
        min-width: 140px;
        max-width: 240px;
    }

    .btn[b-ryfdveg98j] {
        padding: 5px 12px;
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .toolbar-unified[b-ryfdveg98j] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }

    .search-box[b-ryfdveg98j] {
        width: 100%;
        max-width: 100%;
        flex: 0;
    }

    .filter-tabs-inline[b-ryfdveg98j] {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .toolbar-middle[b-ryfdveg98j] {
        width: 100%;
        justify-content: flex-start;
    }

    .toolbar-actions[b-ryfdveg98j] {
        width: 100%;
        justify-content: flex-end;
    }

    .btn[b-ryfdveg98j] {
        flex: auto;
        min-width: auto;
    }
}

/* ── V3 (2026-10-02): the toolbar's groups never squeeze into each other. Search flexes; the filter rail, the page's
      middle links and the actions keep their natural size, and the links + actions sit to the right. When a facility's
      groups exceed the width they wrap as whole groups onto a second line rather than overlapping. ── */
.toolbar-unified[b-ryfdveg98j] {
    flex-wrap: wrap;
    row-gap: 8px;
}

.search-box[b-ryfdveg98j] {
    flex: 1 1 220px;
}

.filter-tabs-inline[b-ryfdveg98j],
.toolbar-middle[b-ryfdveg98j],
.toolbar-actions[b-ryfdveg98j] {
    flex: none;
}

.toolbar-middle[b-ryfdveg98j] {
    margin-left: auto;
}

    .toolbar-middle + .toolbar-actions[b-ryfdveg98j] {
        margin-left: 0;
    }

/* A page's middle group (several links and actions) may wrap inside the bar instead of running past its edge. */
.toolbar-middle[b-ryfdveg98j] {
    min-width: 0;
    max-width: 100%;
}

/* ── Laptop width (2026-10-05): search, filters and the page's actions stay on one row at 1366px; the search yields first. Below
      that the groups still wrap as whole groups. ── */
.toolbar-unified[b-ryfdveg98j] {
    column-gap: 10px;
}

.search-box[b-ryfdveg98j] {
    flex: 1 1 150px;
    min-width: 150px;
}

@media (min-width: 1025px) {
    .btn[b-ryfdveg98j] {
        padding: 6px 12px;
    }

    .filter-tab[b-ryfdveg98j] {
        padding: 6px 10px;
    }
}

/* In the stacked toolbar, a desktop flex basis would become a 150px search height. */
@media (max-width: 768px) {
    .search-box[b-ryfdveg98j] { flex: 0 0 auto; min-height: 36px; }
}
/* /Components/Pages/Shared/TwoFactorIntro.razor.rz.scp.css */
/*
   TwoFactorIntro — shared explanatory rows for both two-factor dialogs.

   Neutral government palette from app.css: white surface, navy marks, hairline rules. Nothing here is
   coloured for emphasis; hierarchy comes from the rules and the icon circles.
*/

.tfi-rows[b-yrlkjfcwww] {
    display: flex;
    flex-direction: column;
}

.tfi-row[b-yrlkjfcwww] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 0;
}

.tfi-row:first-child[b-yrlkjfcwww] { padding-top: 4px; }

.tfi-row + .tfi-row[b-yrlkjfcwww] { border-top: 1px solid var(--border); }

.tfi-icon[b-yrlkjfcwww] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-icon);
    color: var(--navy);
}

.tfi-icon svg[b-yrlkjfcwww] { width: 21px; height: 21px; }

.tfi-text[b-yrlkjfcwww] {
    margin: 0;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.55;
}

.tfi-apps[b-yrlkjfcwww] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    color: var(--text-subtle);
    font-size: 12.5px;
}

.tfi-apps-mark[b-yrlkjfcwww] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--navy-3);
}

.tfi-apps-mark svg[b-yrlkjfcwww] { width: 16px; height: 16px; }

@media (max-width: 768px) {
    .tfi-row[b-yrlkjfcwww] { align-items: flex-start; }
    .tfi-icon[b-yrlkjfcwww] { width: 36px; height: 36px; }
    .tfi-icon svg[b-yrlkjfcwww] { width: 18px; height: 18px; }
}
/* /Components/Pages/Shared/TwoFactorPanel.razor.rz.scp.css */
/*
   TwoFactorPanel — self-contained styling.

   Scoped CSS applies only to the component that declares the markup, so this panel carries every class it
   renders rather than borrowing the Settings page's `set-card` styles. Visual language (card, head, icon,
   rows) intentionally matches the surrounding Settings cards.
*/

.mfa-card[b-rf9e4p1mfc] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Hosted in a modal: the modal supplies the surface, title and padding, so the panel adds none of its own
   (avoids a card drawn inside a card). */
.mfa-card-flat[b-rf9e4p1mfc] {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

/* ── Header ── */
.mfa-head[b-rf9e4p1mfc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mfa-icon[b-rf9e4p1mfc] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--bg-icon);
    color: var(--navy);
}

.mfa-icon svg[b-rf9e4p1mfc] { width: 19px; height: 19px; }

.mfa-titles[b-rf9e4p1mfc] { min-width: 0; flex: 1; }

.mfa-title[b-rf9e4p1mfc] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
}

.mfa-sub[b-rf9e4p1mfc] {
    font-size: 12px;
    color: var(--text-subtle);
    margin-top: 2px;
}

.mfa-state[b-rf9e4p1mfc] {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.mfa-state-on[b-rf9e4p1mfc] { background: var(--green-bg); color: var(--green); }
.mfa-state-off[b-rf9e4p1mfc] { background: var(--bg-icon); color: var(--text-subtle); }

/* ── Body ── */
.mfa-body[b-rf9e4p1mfc] { display: flex; flex-direction: column; gap: 12px; }

.mfa-step[b-rf9e4p1mfc] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}

.mfa-rows[b-rf9e4p1mfc] { display: flex; flex-direction: column; gap: 8px; }

.mfa-row[b-rf9e4p1mfc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.mfa-key-label[b-rf9e4p1mfc] { color: var(--text-subtle); }
.mfa-val[b-rf9e4p1mfc] { color: var(--navy); font-weight: 600; }

.mfa-pill-warn[b-rf9e4p1mfc] {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--red-bg);
    color: var(--red);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ── Enrollment (QR + manual key) ── */
.mfa-enroll[b-rf9e4p1mfc] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.mfa-qr[b-rf9e4p1mfc] {
    width: 148px;
    height: 148px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #fff;
}

.mfa-manual[b-rf9e4p1mfc] { min-width: 0; }

.mfa-manual-label[b-rf9e4p1mfc] {
    font-size: 12px;
    color: var(--text-subtle);
    margin-bottom: 6px;
}

.mfa-key[b-rf9e4p1mfc] {
    display: inline-block;
    padding: 7px 10px;
    border: 1px dashed var(--border);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--navy);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    word-break: break-all;
}

.mfa-manual-hint[b-rf9e4p1mfc] {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* ── Inputs & actions ── */
.mfa-label[b-rf9e4p1mfc] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}

.mfa-inline[b-rf9e4p1mfc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mfa-input[b-rf9e4p1mfc] {
    height: 40px;
    width: 130px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
    letter-spacing: 2px;
    outline: none;
}

.mfa-input-wide[b-rf9e4p1mfc] { width: 230px; letter-spacing: normal; }

.mfa-input:focus[b-rf9e4p1mfc] {
    border-color: var(--navy-3);
    box-shadow: 0 0 0 3px rgba(49, 95, 141, .12);
}

.mfa-actions[b-rf9e4p1mfc] { display: flex; gap: 8px; flex-wrap: wrap; }

.mfa-btn[b-rf9e4p1mfc] {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--navy);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.mfa-btn:hover:not(:disabled)[b-rf9e4p1mfc] { background: var(--bg-icon); }
.mfa-btn:disabled[b-rf9e4p1mfc] { opacity: .6; cursor: not-allowed; }

.mfa-btn-primary[b-rf9e4p1mfc] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.mfa-btn-primary:hover:not(:disabled)[b-rf9e4p1mfc] { background: var(--navy-2); }

.mfa-btn-danger[b-rf9e4p1mfc] {
    border-color: color-mix(in srgb, var(--red) 40%, transparent);
    color: var(--red);
}

.mfa-btn-danger:hover:not(:disabled)[b-rf9e4p1mfc] { background: var(--red-bg); }

.mfa-confirm[b-rf9e4p1mfc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

/* ── Recovery codes ── */
.mfa-codes[b-rf9e4p1mfc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 14px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.mfa-codes li[b-rf9e4p1mfc] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13.5px;
    letter-spacing: 1px;
    color: var(--navy);
    text-align: center;
}

/* ── Notices ── */
.mfa-notice[b-rf9e4p1mfc] {
    padding: 10px 13px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.5;
}

.mfa-notice-warn[b-rf9e4p1mfc] {
    border: 1px solid var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--navy);
}

.mfa-notice-error[b-rf9e4p1mfc] {
    border: 1px solid var(--red);
    background: var(--red-bg);
    color: var(--red);
}

/* A statement of fact, not a celebration. Government screens should not colour-code good news: the office is
   told what the state is, and the eye is left for the warnings and errors that actually need it. Neutral
   surface, hairline border, navy text — the same treatment as any other stated value on the page. */
.mfa-notice-ok[b-rf9e4p1mfc] {
    border: 1px solid var(--border);
    background: var(--bg-icon);
    color: var(--text);
}

/* ── Phones ── */
@media (max-width: 768px) {
    .mfa-card[b-rf9e4p1mfc] { padding: 16px; }
    .mfa-enroll[b-rf9e4p1mfc] { gap: 14px; }
    .mfa-qr[b-rf9e4p1mfc] { width: 128px; height: 128px; }
    .mfa-input[b-rf9e4p1mfc], .mfa-input-wide[b-rf9e4p1mfc] { width: 100%; }
    .mfa-inline > .mfa-btn[b-rf9e4p1mfc] { flex: 1 1 auto; }
}


/* ── Nested operator-recovery section inside the dialog ── */
.mfa-divider[b-rf9e4p1mfc] {
    height: 1px;
    margin: 6px 0 2px;
    background: var(--border);
}
/* /Components/Pages/Shared/TwoFactorRecoveryPanel.razor.rz.scp.css */
/*
   TwoFactorPanel — self-contained styling.

   Scoped CSS applies only to the component that declares the markup, so this panel carries every class it
   renders rather than borrowing the Settings page's `set-card` styles. Visual language (card, head, icon,
   rows) intentionally matches the surrounding Settings cards.
*/

.mfa-card[b-s3cel4gr3w] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Hosted in a modal: the modal supplies the surface, title and padding, so the panel adds none of its own
   (avoids a card drawn inside a card). */
.mfa-card-flat[b-s3cel4gr3w] {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

/* ── Header ── */
.mfa-head[b-s3cel4gr3w] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mfa-icon[b-s3cel4gr3w] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--bg-icon);
    color: var(--navy);
}

.mfa-icon svg[b-s3cel4gr3w] { width: 19px; height: 19px; }

.mfa-titles[b-s3cel4gr3w] { min-width: 0; flex: 1; }

.mfa-title[b-s3cel4gr3w] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
}

.mfa-sub[b-s3cel4gr3w] {
    font-size: 12px;
    color: var(--text-subtle);
    margin-top: 2px;
}

.mfa-state[b-s3cel4gr3w] {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.mfa-state-on[b-s3cel4gr3w] { background: var(--green-bg); color: var(--green); }
.mfa-state-off[b-s3cel4gr3w] { background: var(--bg-icon); color: var(--text-subtle); }

/* ── Body ── */
.mfa-body[b-s3cel4gr3w] { display: flex; flex-direction: column; gap: 12px; }

.mfa-step[b-s3cel4gr3w] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}

.mfa-rows[b-s3cel4gr3w] { display: flex; flex-direction: column; gap: 8px; }

.mfa-row[b-s3cel4gr3w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.mfa-key-label[b-s3cel4gr3w] { color: var(--text-subtle); }
.mfa-val[b-s3cel4gr3w] { color: var(--navy); font-weight: 600; }

.mfa-pill-warn[b-s3cel4gr3w] {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--red-bg);
    color: var(--red);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ── Enrollment (QR + manual key) ── */
.mfa-enroll[b-s3cel4gr3w] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.mfa-qr[b-s3cel4gr3w] {
    width: 148px;
    height: 148px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #fff;
}

.mfa-manual[b-s3cel4gr3w] { min-width: 0; }

.mfa-manual-label[b-s3cel4gr3w] {
    font-size: 12px;
    color: var(--text-subtle);
    margin-bottom: 6px;
}

.mfa-key[b-s3cel4gr3w] {
    display: inline-block;
    padding: 7px 10px;
    border: 1px dashed var(--border);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--navy);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    word-break: break-all;
}

.mfa-manual-hint[b-s3cel4gr3w] {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* ── Inputs & actions ── */
.mfa-label[b-s3cel4gr3w] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}

.mfa-inline[b-s3cel4gr3w] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mfa-input[b-s3cel4gr3w] {
    height: 40px;
    width: 130px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
    letter-spacing: 2px;
    outline: none;
}

.mfa-input-wide[b-s3cel4gr3w] { width: 230px; letter-spacing: normal; }

.mfa-input:focus[b-s3cel4gr3w] {
    border-color: var(--navy-3);
    box-shadow: 0 0 0 3px rgba(49, 95, 141, .12);
}

.mfa-actions[b-s3cel4gr3w] { display: flex; gap: 8px; flex-wrap: wrap; }

.mfa-btn[b-s3cel4gr3w] {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--navy);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.mfa-btn:hover:not(:disabled)[b-s3cel4gr3w] { background: var(--bg-icon); }
.mfa-btn:disabled[b-s3cel4gr3w] { opacity: .6; cursor: not-allowed; }

.mfa-btn-primary[b-s3cel4gr3w] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.mfa-btn-primary:hover:not(:disabled)[b-s3cel4gr3w] { background: var(--navy-2); }

.mfa-btn-danger[b-s3cel4gr3w] {
    border-color: color-mix(in srgb, var(--red) 40%, transparent);
    color: var(--red);
}

.mfa-btn-danger:hover:not(:disabled)[b-s3cel4gr3w] { background: var(--red-bg); }

.mfa-confirm[b-s3cel4gr3w] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

/* ── Recovery codes ── */
.mfa-codes[b-s3cel4gr3w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 14px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.mfa-codes li[b-s3cel4gr3w] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13.5px;
    letter-spacing: 1px;
    color: var(--navy);
    text-align: center;
}

/* ── Notices ── */
.mfa-notice[b-s3cel4gr3w] {
    padding: 10px 13px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.5;
}

.mfa-notice-warn[b-s3cel4gr3w] {
    border: 1px solid var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--navy);
}

.mfa-notice-error[b-s3cel4gr3w] {
    border: 1px solid var(--red);
    background: var(--red-bg);
    color: var(--red);
}

/* Neutral, like the sibling panel's: the office is told the position, not congratulated in green. Colour is
   reserved for warnings and errors. This rule is a duplicate of the one in TwoFactorPanel.razor.css because
   scoped CSS cannot be shared between components; both must stay in step. */
.mfa-notice-ok[b-s3cel4gr3w] {
    border: 1px solid var(--border);
    background: var(--bg-icon);
    color: var(--text);
}

/* ── Phones ── */
@media (max-width: 768px) {
    .mfa-card[b-s3cel4gr3w] { padding: 16px; }
    .mfa-enroll[b-s3cel4gr3w] { gap: 14px; }
    .mfa-qr[b-s3cel4gr3w] { width: 128px; height: 128px; }
    .mfa-input[b-s3cel4gr3w], .mfa-input-wide[b-s3cel4gr3w] { width: 100%; }
    .mfa-inline > .mfa-btn[b-s3cel4gr3w] { flex: 1 1 auto; }
}


/* ── Enrolled-account rows (operator recovery list) ── */
.mfa-recov-row[b-s3cel4gr3w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
}

.mfa-recov-who[b-s3cel4gr3w] {
    min-width: 0;
}

.mfa-recov-name[b-s3cel4gr3w] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
}

.mfa-recov-tag[b-s3cel4gr3w] {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 18%, transparent);
    color: #7a5f13;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.mfa-recov-meta[b-s3cel4gr3w] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-subtle);
}

@media (max-width: 768px) {
    .mfa-recov-row[b-s3cel4gr3w] { flex-direction: column; align-items: stretch; }
    .mfa-recov-row .mfa-btn[b-s3cel4gr3w] { width: 100%; }
}


/* Nested inside the two-factor dialog: a quieter sub-heading, since the dialog already has the main title. */
.mfa-head-sub .mfa-title[b-s3cel4gr3w] {
    font-size: 13.5px;
}

.mfa-head-sub .mfa-icon[b-s3cel4gr3w] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.mfa-head-sub .mfa-icon svg[b-s3cel4gr3w] { width: 16px; height: 16px; }
/* /Components/Pages/VerifyEmail.razor.rz.scp.css */
/*
   Forgot-password page — right-hand surface (card, fields, buttons).

   Kept as a scoped copy for the same reason AdminActivate.razor.css documents: these form/card styles are
   component-scoped in this codebase, not global, so each auth screen carries its own copy. The LEFT
   branding panel is NOT duplicated here — it comes from the shared <AuthBrandPanel> component, which owns
   its own stylesheet, so the sign-in, forgot-password and reset-password screens cannot drift apart.
*/

.setup-root[b-l608pag4hx] {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: #f5f7fb;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Recovery surface ─────────────────────────────────────────────────── */
.setup-right[b-l608pag4hx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    flex: 1;
    min-width: 0;
    height: 100vh;
    padding: clamp(28px, 5vh, 60px) clamp(26px, 5.2vw, 92px);
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    background-color: #eef2f7;
    background-image: linear-gradient(135deg, #fbfcfe 0%, #e9edf3 100%);
}

.setup-right[b-l608pag4hx]::-webkit-scrollbar { width: 0; height: 0; }

.activated-icon[b-l608pag4hx] {
    color: #2f7d57 !important;
    border-color: rgba(47, 125, 87, 0.28) !important;
    background: linear-gradient(145deg, #f1faf5, #e5f3ec) !important;
}

.setup-form-wrap[b-l608pag4hx] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
}

.login-card[b-l608pag4hx] {
    display: block;
    padding: clamp(28px, 3.4vw, 44px);
    background: #ffffff;
    border: 1px solid rgba(13, 42, 71, 0.10);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(13, 42, 71, 0.10), 0 2px 6px rgba(13, 42, 71, 0.04);
}

/* ── Header ── */
.setup-form-header[b-l608pag4hx] {
    position: relative;
    min-height: 64px;
    margin-bottom: 24px;
    padding: 2px 0 24px 84px;
    border-bottom: 1px solid rgba(13, 42, 71, 0.10);
}

.login-header-icon[b-l608pag4hx] {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: #6b89ab;
    border: 1px solid rgba(25, 63, 100, 0.1);
    border-radius: 50%;
    background: linear-gradient(145deg, #f8fafc, #eef2f7);
}

.login-header-icon svg[b-l608pag4hx] { width: 32px; height: 32px; }

.setup-form-title[b-l608pag4hx] {
    color: #102d4e;
    font-size: clamp(25px, 1.9vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 5px;
}

.setup-form-desc[b-l608pag4hx] {
    color: #637895;
    font-size: 15px;
    line-height: 1.55;
}

/* ── Form fields ── */
.setup-form[b-l608pag4hx] { display: flex; flex-direction: column; gap: 18px; }

.form-group[b-l608pag4hx] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }

.form-label[b-l608pag4hx] {
    color: #1b3859;
    font-size: 13px;
    font-weight: 700;
}

.form-input-wrap[b-l608pag4hx] {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.form-input[b-l608pag4hx] {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 52px;
    padding-left: 48px;
    border: 1.5px solid #dde3ec;
    border-radius: 10px;
    background: #fff;
    color: #173755;
    font-size: 15px;
    outline: none;
}

.form-input[b-l608pag4hx]::placeholder { color: #8193ae; }
.form-input:focus[b-l608pag4hx] { border-color: #315f8d; box-shadow: 0 0 0 4px rgba(49, 95, 141, 0.12); }

.form-input-icon[b-l608pag4hx] { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; transform: translateY(-50%); stroke: #7287a2; pointer-events: none; }

.form-input-error[b-l608pag4hx] { border-color: var(--red) !important; background: var(--red-bg) !important; }
.form-input-error:focus[b-l608pag4hx] { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(139, 58, 58, 0.11) !important; }

.form-error[b-l608pag4hx] { font-size: 12.5px; color: var(--red); }

/* ── Submit ── */
.setup-submit[b-l608pag4hx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 3px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient(180deg, #1c3252 0%, #16263c 100%);
    box-shadow: 0 7px 16px rgba(13, 42, 71, 0.16);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.setup-submit svg[b-l608pag4hx] { width: 20px; height: 20px; flex-shrink: 0; }
.setup-submit:hover:not(:disabled)[b-l608pag4hx] { background: linear-gradient(180deg, #16263c 0%, #0f1d30 100%); box-shadow: 0 10px 22px rgba(13, 42, 71, 0.23); }
.setup-submit:focus-visible[b-l608pag4hx] { outline: 3px solid #e4bf52; outline-offset: 3px; }
.setup-submit:disabled[b-l608pag4hx] { opacity: 0.7; cursor: not-allowed; }
.setup-submit-loading[b-l608pag4hx] { opacity: 0.75; }

.setup-spinner[b-l608pag4hx] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-l608pag4hx 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

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

/* ── Secondary text link (matches the sign-in page's "Forgot password?") ── */
.login-forgot[b-l608pag4hx] {
    align-self: center;
    padding: 2px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #2f6db5;
}

.login-forgot:hover[b-l608pag4hx] { color: #173e67; text-decoration: underline; }
.login-forgot:focus-visible[b-l608pag4hx] { outline: 2px solid #315f8d; outline-offset: 2px; border-radius: 4px; }

/* ── Security reassurance note ── */
.setup-secure-note[b-l608pag4hx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 6px;
    color: #64788f;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.setup-secure-note svg[b-l608pag4hx] { width: 16px; height: 16px; flex-shrink: 0; stroke: #4a7c59; }

/* ── Responsive (right-hand side) ── */
@media (max-height: 820px) and (min-width: 769px) {
    .login-card[b-l608pag4hx] { padding-top: 28px; padding-bottom: 28px; }
    .setup-form-header[b-l608pag4hx] { margin-bottom: 18px; padding-bottom: 18px; }
    .setup-form[b-l608pag4hx] { gap: 14px; }
}

@media (max-width: 940px) {
    .setup-right[b-l608pag4hx] { padding-right: 32px; padding-left: 32px; }
    .login-card[b-l608pag4hx] { padding: 34px; }
}

@media (max-width: 768px) {
    .setup-root[b-l608pag4hx] { display: block; height: auto; min-height: 100vh; overflow-x: hidden; }
    .setup-right[b-l608pag4hx] { height: auto; min-height: auto; padding: 28px 20px 32px; overflow: visible; }
    .login-card[b-l608pag4hx] { padding: clamp(24px, 7vw, 36px); border-radius: 12px; }
}

@media (max-width: 480px) {
    .setup-right[b-l608pag4hx] { padding: 16px 12px 24px; }
    .login-card[b-l608pag4hx] { padding: 23px 18px; border-radius: 10px; }
    .setup-form-header[b-l608pag4hx] { min-height: 0; margin-bottom: 22px; padding: 0 0 21px; text-align: center; }
    .login-header-icon[b-l608pag4hx] { position: static; width: 60px; height: 60px; margin: 0 auto 13px; }
    .setup-form-title[b-l608pag4hx] { font-size: 26px; }
    .setup-form-desc[b-l608pag4hx] { font-size: 14px; }
    .setup-form[b-l608pag4hx] { gap: 16px; }
}
/* /Components/Shared/AccessDenied.razor.rz.scp.css */
.ad-overlay[b-5v0l5z68ec] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg, #f0f4f8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ad-card[b-5v0l5z68ec] {
    max-width: 380px;
    width: 100%;
    text-align: center;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #dde4ea);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 12px 32px rgba(13, 33, 55, 0.10);
}

.ad-icon[b-5v0l5z68ec] {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--red-bg, #fdf0f0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-icon svg[b-5v0l5z68ec] { width: 26px; height: 26px; stroke: var(--red, #8b3a3a); }
.ad-title[b-5v0l5z68ec] { font-size: 18px; font-weight: 700; color: var(--navy, #0d2137); }
.ad-text[b-5v0l5z68ec] { font-size: 13px; color: var(--text-subtle, #6a8aa0); margin: 8px 0 20px; line-height: 1.5; }

.ad-btn[b-5v0l5z68ec] {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ad-btn:hover[b-5v0l5z68ec] { background: var(--accent-hover); }
/* /Components/Shared/AccountFineAssessments.razor.rz.scp.css */
.account-fines[b-mo3kv25t9q] { min-width: 0; }
.fine-list[b-mo3kv25t9q] { list-style: none; padding: 0; margin: 0 0 12px; }
.fine-row[b-mo3kv25t9q] { border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.fine-heading[b-mo3kv25t9q] { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.fine-heading span[b-mo3kv25t9q], .fine-meta[b-mo3kv25t9q] { color: var(--text-muted); font-size: 12px; }
.fine-meta[b-mo3kv25t9q] { margin: 4px 0 10px; }
.fine-amounts[b-mo3kv25t9q] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.fine-amounts dt[b-mo3kv25t9q] { font-size: 12px; color: var(--text-muted); }
.fine-amounts dd[b-mo3kv25t9q] { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.fine-actions[b-mo3kv25t9q] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fine-actions .fine-meta[b-mo3kv25t9q] { margin: 0; }
.fine-details[b-mo3kv25t9q] { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.fine-details dl[b-mo3kv25t9q] { margin: 0; }
.fine-details dt[b-mo3kv25t9q] { font-size: 12px; color: var(--text-muted); }
.fine-details dd[b-mo3kv25t9q] { margin: 2px 0 10px; }
.fine-details h4[b-mo3kv25t9q] { font-size: 13px; margin: 12px 0 6px; }
.fine-history[b-mo3kv25t9q] { padding-left: 16px; font-size: 12px; }
.fine-history li[b-mo3kv25t9q] { margin: 6px 0; }
@media (max-width: 420px) {
    .fine-heading[b-mo3kv25t9q] { flex-wrap: wrap; gap: 4px; }
    .fine-amounts[b-mo3kv25t9q] { font-size: 13px; }
}
/* /Components/Shared/AccountStatusPill.razor.rz.scp.css */
.status-pill[b-c984d3lss2] { padding: 3px 8px; font-size: 11px; line-height: 1.4; }
.pill-unpaid[b-c984d3lss2] { background: var(--red-bg); color: var(--red); }
.pill-inactive[b-c984d3lss2] { background: var(--surface-muted); color: var(--text-secondary); }
/* /Components/Shared/DailyCollectionCalendar.razor.rz.scp.css */
/* ══════════════════════════════════════════
   CALENDAR NAVIGATION
══════════════════════════════════════════ */
.cal-nav[b-xfcw3yxcwn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cal-nav-btn[b-xfcw3yxcwn] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
}

    .cal-nav-btn:hover:not(:disabled)[b-xfcw3yxcwn] {
        background: var(--bg-icon);
        border-color: var(--navy);
    }

    .cal-nav-btn:disabled[b-xfcw3yxcwn] {
        opacity: .4;
        cursor: default;
    }

    /* Year-jump buttons (double chevron) — slightly muted to read as a coarser step than months. */
    .cal-nav-year svg[b-xfcw3yxcwn] {
        stroke: var(--text-subtle);
    }

    .cal-nav-year:hover:not(:disabled) svg[b-xfcw3yxcwn] {
        stroke: var(--navy);
    }

    .cal-nav-btn svg[b-xfcw3yxcwn] {
        width: 13px;
        height: 13px;
        stroke: var(--navy);
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.cal-month-label[b-xfcw3yxcwn] {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    flex: 1;
    letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════
   CALENDAR GRID
══════════════════════════════════════════ */
.cal-grid-wrap[b-xfcw3yxcwn] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Fixed row height — every cell in every row is identical, no shifting */
    grid-auto-rows: 72px;
    gap: 4px;
    margin-bottom: 20px;
}

/* Fish mode: taller rows for the kilo input area */
.cal-grid-fish[b-xfcw3yxcwn] {
    grid-auto-rows: 84px;
}

/* Override — day-header row stays slim regardless of auto-rows */
.cal-day-hdr[b-xfcw3yxcwn] {
    height: auto !important;
    min-height: 0 !important;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 2px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ── Base cell ── */
.cal-cell[b-xfcw3yxcwn] {
    position: relative;
    /* Height is driven by grid-auto-rows; min/max keep it locked */
    height: 100%;
    min-height: 0;
    max-height: none;
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 6px 5px 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    cursor: default;
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--bg-card);
}

/* Fish cells: same height rule, grid-auto-rows does the heavy lifting */
.cal-cell-fish[b-xfcw3yxcwn] {
    /* No explicit px height — parent grid-auto-rows controls it */
}

.cal-cell-top[b-xfcw3yxcwn] {
    display: contents;
}

/* Top row: day number left, status icon right */
.cal-cell-header[b-xfcw3yxcwn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    /* Header is the only toggle hit-area; give it a clear pointer */
    cursor: default;
    border-radius: 5px;
    padding: 1px 2px;
    margin: -1px -2px;
    transition: background 0.12s;
}

/* Only actionable (non-future, non-empty) headers get pointer + hover */
.cal-cell-header-clickable[b-xfcw3yxcwn] {
    cursor: pointer;
}

    .cal-cell-header-clickable:hover[b-xfcw3yxcwn] {
        background: rgba(13, 33, 55, 0.05);
    }

/* ── Kilo block — stacked column, centered at bottom of cell ── */
.cal-kilo-bottom[b-xfcw3yxcwn] {
    display: flex;
    flex-direction: column; /* input on top, "kg" label below */
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    flex: 1; /* fills remaining vertical space after header */
}

/* Invisible placeholder keeps cell height identical whether marked or not */
.cal-kilo-placeholder[b-xfcw3yxcwn] {
    visibility: hidden;
    pointer-events: none;
}

/* ── Collected — clean navy border all around ── */
.cal-cell.cal-paid[b-xfcw3yxcwn] {
    background: var(--bg-card);
    border-color: var(--navy);
    border-width: 1.5px;
}

/* ── Missed — just slightly muted, no red bg ── */
.cal-cell.cal-miss[b-xfcw3yxcwn] {
    background: var(--bg);
    border-color: var(--border);
}

/* ── Absent (excused) — amber tint, distinct from missed/collected ── */
.cal-cell.cal-absent[b-xfcw3yxcwn] {
    background: rgba(200, 168, 75, 0.12);
    border-color: rgba(200, 168, 75, 0.5);
}

/* ── Empty (blank offset cells) ── */
.cal-cell.cal-empty[b-xfcw3yxcwn] {
    background: transparent;
    border: none;
    cursor: default;
}

/* ── Future / upcoming days ── */
.cal-cell.cal-future[b-xfcw3yxcwn] {
    background: rgba(168, 184, 200, 0.08);
    border-color: var(--border);
    cursor: not-allowed;
    position: relative;
}

/* ── Before contract days ── */
.cal-cell.cal-before-contract[b-xfcw3yxcwn] {
    background: rgba(139, 58, 58, 0.04);
    border-color: #d4a5a5;
    cursor: not-allowed;
    position: relative;
}

/* ── Overlay labels for future and before-contract ── */
.cal-overlay-label[b-xfcw3yxcwn] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a8fa5;
    pointer-events: none;
    z-index: 1;
}

.cal-overlay-before[b-xfcw3yxcwn] {
    color: #a67676;
}

/* ── Today highlight ── */
.cal-cell.cal-today[b-xfcw3yxcwn] {
    border-color: var(--gold) !important;
    border-width: 2px;
}

/* Hover — only actionable cells */
.cal-cell:hover:not(.cal-future):not(.cal-empty)[b-xfcw3yxcwn] {
    border-color: var(--navy-2);
    box-shadow: 0 1px 6px rgba(13,33,55,0.09);
}

/* ── Day number ── */
.cal-num[b-xfcw3yxcwn] {
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: var(--navy);
}

.cal-cell.cal-future .cal-num[b-xfcw3yxcwn] {
    color: var(--text-muted);
}

/* ── Status icon — inline in header row ── */
.cal-status-icon[b-xfcw3yxcwn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .cal-status-icon svg[b-xfcw3yxcwn] {
        width: 9px;
        height: 9px;
        fill: none;
        stroke-width: 2.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Collected — navy circle, white check */
.cal-icon-yes[b-xfcw3yxcwn] {
    background: var(--navy);
}

    .cal-icon-yes svg[b-xfcw3yxcwn] {
        stroke: #fff;
    }

/* Missed — visible X for days with no recorded collection */
.cal-icon-no[b-xfcw3yxcwn] {
    background: rgba(139, 58, 58, 0.08);
    border: 1.5px solid rgba(139, 58, 58, 0.4);
}

    .cal-icon-no svg[b-xfcw3yxcwn] {
        stroke: #8b3a3a;
    }

/* Absent (excused) — amber circle with a dash */
.cal-icon-absent[b-xfcw3yxcwn] {
    background: rgba(200, 168, 75, 0.14);
    border: 1.5px solid rgba(200, 168, 75, 0.55);
}

    .cal-icon-absent svg[b-xfcw3yxcwn] {
        stroke: #b5872a;
    }

.cal-sum-amber[b-xfcw3yxcwn] {
    color: #b5872a;
}

.cal-checkmark-corner[b-xfcw3yxcwn] {
    position: static;
}

/* ══════════════════════════════════════════
   FISH KILO DISPLAY
══════════════════════════════════════════ */
.cal-kilo-display[b-xfcw3yxcwn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    margin-top: 1px;
}

.cal-kilo-input[b-xfcw3yxcwn] {
    width: 38px;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
    outline: none;
    line-height: 1.1;
    -moz-appearance: textfield;
}

    .cal-kilo-input[b-xfcw3yxcwn]::-webkit-outer-spin-button,
    .cal-kilo-input[b-xfcw3yxcwn]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.cal-kilo-unit[b-xfcw3yxcwn] {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.4;
}

.cal-kilo-val[b-xfcw3yxcwn] {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 5px;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

.cal-kilo-compact[b-xfcw3yxcwn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 3px;
}

/* ── Inline kilo input — number centered, "kg" badge directly below ── */
.cal-kilo-input-inline[b-xfcw3yxcwn] {
    width: 36px;
    height: 20px;
    padding: 0 2px;
    border: 1px solid var(--border);
    background: var(--bg);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    outline: none;
    border-radius: 4px;
    font-family: inherit;
    -moz-appearance: textfield;
    transition: border-color 0.12s;
    display: block;
}

    .cal-kilo-input-inline:focus[b-xfcw3yxcwn] {
        border-color: var(--navy-2);
        background: var(--bg-card);
    }

    .cal-kilo-input-inline[b-xfcw3yxcwn]::-webkit-outer-spin-button,
    .cal-kilo-input-inline[b-xfcw3yxcwn]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* "kg" badge — sits directly below the input */
.cal-kilo-label-inline[b-xfcw3yxcwn] {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.4;
}

/* ══════════════════════════════════════════
   FOOTER STATS
══════════════════════════════════════════ */
.cal-footer-stats[b-xfcw3yxcwn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    padding: 16px 0 6px;
}

.cal-sum-item[b-xfcw3yxcwn] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px 16px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    min-height: 72px;
}

.cal-sum-val[b-xfcw3yxcwn] {
    font-weight: 800;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.cal-sum-green[b-xfcw3yxcwn] {
    color: var(--navy);
}

.cal-sum-red[b-xfcw3yxcwn] {
    color: var(--navy);
}

.cal-sum-key[b-xfcw3yxcwn] {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    line-height: 1.4;
}

.fish-fee-item[b-xfcw3yxcwn],
.vegetables-section-fee-item[b-xfcw3yxcwn],
.meat-section-fee-item[b-xfcw3yxcwn] {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--gold) !important;
}

    .fish-fee-item .cal-sum-val[b-xfcw3yxcwn],
    .vegetables-section-fee-item .cal-sum-val[b-xfcw3yxcwn],
    .meat-section-fee-item .cal-sum-val[b-xfcw3yxcwn] {
        color: var(--navy);
        font-weight: 800;
    }

    .fish-fee-item .cal-sum-key[b-xfcw3yxcwn],
    .vegetables-section-fee-item .cal-sum-key[b-xfcw3yxcwn],
    .meat-section-fee-item .cal-sum-key[b-xfcw3yxcwn] {
        color: var(--text-muted);
        font-weight: 600;
    }

/* ══════════════════════════════════════════
   DETAIL MODAL STYLES
══════════════════════════════════════════ */
.detail-section[b-xfcw3yxcwn] {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    min-width: 0;
    box-sizing: border-box;
}

    .detail-section:last-child[b-xfcw3yxcwn] {
        border-bottom: none;
    }

.detail-section-title[b-xfcw3yxcwn] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 14px;
}

    .detail-section-title svg[b-xfcw3yxcwn] {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.detail-section.vegetables-section[b-xfcw3yxcwn],
.detail-section.meat-section[b-xfcw3yxcwn] {
    background: transparent;
}

.detail-info-row[b-xfcw3yxcwn] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    min-height: 30px;
}

    .detail-info-row:last-child[b-xfcw3yxcwn] {
        border-bottom: none;
    }

.detail-info-key[b-xfcw3yxcwn] {
    min-width: 140px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
}

.detail-info-val[b-xfcw3yxcwn] {
    color: var(--navy);
    font-weight: 500;
    flex: 1;
}

/* ── Market closed (whole market shut that day) — neutral slate, locked (not toggleable) ── */
.cal-cell.cal-closed[b-xfcw3yxcwn] {
    background: rgba(13, 33, 55, 0.05);
    border-color: rgba(13, 33, 55, 0.18);
    cursor: not-allowed;
}
.cal-icon-closed[b-xfcw3yxcwn] {
    background: rgba(13, 33, 55, 0.08);
    border: 1.5px solid rgba(13, 33, 55, 0.35);
}
    .cal-icon-closed svg[b-xfcw3yxcwn] {
        stroke: #44607d;
    }
.cal-sum-val.cal-sum-closed[b-xfcw3yxcwn] { color: #44607d; }


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.detail-section[b-xfcw3yxcwn] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}
/* /Components/Shared/DatabaseHealthPanel.razor.rz.scp.css */
/* Database health panel — self-contained set-card styling (component-scoped CSS does not inherit
   the Settings page's scoped .set-card rules, so the look is replicated here using shared tokens). */

.set-card[b-6ib8nn3jt4] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.15rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(13, 33, 55, 0.04);
}

.set-card-head[b-6ib8nn3jt4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.set-card-icon[b-6ib8nn3jt4] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-icon);
    color: var(--navy);
    display: grid;
    place-items: center;
}

.set-card-icon svg[b-6ib8nn3jt4] {
    width: 20px;
    height: 20px;
}

.set-card-titles[b-6ib8nn3jt4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.set-card-title[b-6ib8nn3jt4] {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.set-card-sub[b-6ib8nn3jt4] {
    font-size: 0.78rem;
    color: var(--text-subtle);
    margin-top: 0.1rem;
}

/* Live badge */
.dh-live[b-6ib8nn3jt4] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--green);
    background: var(--green-bg);
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.dh-live-dot[b-6ib8nn3jt4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: dh-pulse-b-6ib8nn3jt4 1.6s ease-in-out infinite;
}

@keyframes dh-pulse-b-6ib8nn3jt4 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

/* Rows */
.set-rows[b-6ib8nn3jt4] {
    display: flex;
    flex-direction: column;
}

.set-row[b-6ib8nn3jt4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}

.set-row:last-child[b-6ib8nn3jt4] {
    border-bottom: none;
}

.set-key[b-6ib8nn3jt4] {
    color: var(--text-subtle);
    font-weight: 500;
}

.set-val[b-6ib8nn3jt4] {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}

.set-val.mono[b-6ib8nn3jt4] {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

/* Connections row with usage bar */
.dh-row-stack[b-6ib8nn3jt4] {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
}

.dh-conn-val[b-6ib8nn3jt4] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    text-align: left;
}

.dh-conn-nums[b-6ib8nn3jt4] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dh-conn-nums strong[b-6ib8nn3jt4] {
    font-size: 1.05rem;
}

.dh-conn-sub[b-6ib8nn3jt4] {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-subtle);
    margin-left: auto;
}

.dh-bar[b-6ib8nn3jt4] {
    display: block;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: var(--bg-icon);
    overflow: hidden;
}

.dh-bar-fill[b-6ib8nn3jt4] {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}

.dh-bar-ok[b-6ib8nn3jt4] { background: var(--green); }
.dh-bar-warn[b-6ib8nn3jt4] { background: var(--gold); }
.dh-bar-err[b-6ib8nn3jt4] { background: var(--red); }

/* Metric emphasis */
.dh-metric[b-6ib8nn3jt4] {
    font-weight: 700;
}

.dh-ok[b-6ib8nn3jt4] { color: var(--green); }
.dh-warn[b-6ib8nn3jt4] { color: var(--accent); }

.dh-err[b-6ib8nn3jt4] {
    color: var(--red);
    background: var(--red-bg);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* Empty / error state */
.dh-empty[b-6ib8nn3jt4] {
    padding: 1.5rem 0.5rem;
    text-align: center;
}

.dh-empty-title[b-6ib8nn3jt4] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.dh-empty-text[b-6ib8nn3jt4] {
    font-size: 0.82rem;
    color: var(--text-subtle);
    margin-top: 0.3rem;
}

/* Skeleton */
.sk[b-6ib8nn3jt4] {
    display: inline-block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--bg-icon) 25%, #f4f7fa 37%, var(--bg-icon) 63%);
    background-size: 400% 100%;
    animation: dh-shimmer-b-6ib8nn3jt4 1.4s ease infinite;
}

.dh-sk-key[b-6ib8nn3jt4] {
    width: 38%;
    height: 12px;
}

.dh-sk-val[b-6ib8nn3jt4] {
    width: 22%;
    height: 12px;
}

/* Placeholders for the stacked Connections row, so the skeleton has the same shape as the real metric. */
.dh-sk-num[b-6ib8nn3jt4] {
    display: inline-block;
    width: 92px;
    height: 13px;
}

.dh-sk-sub[b-6ib8nn3jt4] {
    display: inline-block;
    width: 150px;
    height: 10px;
}

.dh-sk-bar[b-6ib8nn3jt4] {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    margin-top: 6px;
}

@keyframes dh-shimmer-b-6ib8nn3jt4 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* V3 consistency: one quiet civic-blue icon tile for every settings card (status colour stays on the status itself). */
.set-card-icon[b-6ib8nn3jt4] {
    background: var(--accent-soft);
    color: var(--civic-panel);
}
/* /Components/Shared/DirectFineCollectionDrawer.razor.rz.scp.css */
.df-fields[b-v0kmlccgj0] { display: grid; gap: 14px; grid-column: 1 / -1; }
.df-fields input[b-v0kmlccgj0], .df-fields select[b-v0kmlccgj0], .df-fields textarea[b-v0kmlccgj0] { width: 100%; box-sizing: border-box; min-width: 0; }
.df-note[b-v0kmlccgj0] { margin: -6px 0 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.5; }

/* Review: the amount leads, the particulars follow as label / value pairs. */
.df-total[b-v0kmlccgj0] { display: grid; grid-column: 1 / -1; gap: 2px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--accent-soft); }
.df-total span[b-v0kmlccgj0] { color: var(--text-secondary); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.df-total strong[b-v0kmlccgj0] { color: var(--navy); font-size: 1.375rem; }
.df-total small[b-v0kmlccgj0] { color: var(--text-secondary); font-size: .8125rem; }
.df-review[b-v0kmlccgj0] { display: grid; grid-column: 1 / -1; grid-template-columns: 140px minmax(0,1fr); gap: 0; margin: 0 0 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.df-review dt[b-v0kmlccgj0], .df-review dd[b-v0kmlccgj0] { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.df-review dt[b-v0kmlccgj0] { background: var(--surface-muted); color: var(--text-secondary); font-size: .8125rem; }
.df-review dd[b-v0kmlccgj0] { margin: 0; overflow-wrap: anywhere; }
.df-review dt:nth-last-of-type(1)[b-v0kmlccgj0], .df-review dd:last-of-type[b-v0kmlccgj0] { border-bottom: 0; }
.df-amount[b-v0kmlccgj0] { font-weight: 700; font-variant-numeric: tabular-nums; }
.df-check[b-v0kmlccgj0] { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; margin-bottom: 16px; }
.df-check input[b-v0kmlccgj0] { width: 16px; height: 16px; flex: 0 0 16px; }

/* Success: the authoritative SRC is the one thing to read. */
.df-success[b-v0kmlccgj0] { display: grid; gap: 4px; margin: 0 0 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--border)); border-radius: 10px; background: var(--green-bg); }
.df-success > span:first-child[b-v0kmlccgj0] { color: var(--green); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.df-src[b-v0kmlccgj0] { color: var(--navy); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 1.25rem; letter-spacing: .02em; }
.df-success-amount[b-v0kmlccgj0] { color: var(--text-secondary); font-size: .8125rem; }

@media (max-width: 480px) { .df-review[b-v0kmlccgj0] { grid-template-columns: minmax(0,1fr); } .df-review dt[b-v0kmlccgj0] { border-bottom: 0; padding-bottom: 2px; } .df-review dd[b-v0kmlccgj0] { padding-top: 2px; } }
/* /Components/Shared/EcfActivationDialog.razor.rz.scp.css */
.ecfa-modal[b-5ybpomfse2] {
    width: min(640px, calc(100vw - 32px));
}

.ecfa-close[b-5ybpomfse2] {
    min-width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
}

    .ecfa-close:focus-visible[b-5ybpomfse2] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.ecfa-hint[b-5ybpomfse2] {
    margin: 0 0 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ecfa-checks[b-5ybpomfse2],
.ecfa-collectors[b-5ybpomfse2] {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--accent-soft);
}

    .ecfa-checks legend[b-5ybpomfse2],
    .ecfa-collectors legend[b-5ybpomfse2] {
        padding: 0 4px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--navy);
    }

    .ecfa-checks label[b-5ybpomfse2] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 4px 0;
        font-size: 0.875rem;
        color: var(--text);
    }

.ecfa-collector[b-5ybpomfse2] {
    display: grid;
    grid-template-columns: 1fr 160px auto;
    align-items: end;
    gap: 10px;
    padding: 6px 0;
}

    .ecfa-collector + .ecfa-collector[b-5ybpomfse2] {
        border-top: 1px solid var(--border);
    }

.ecfa-inline[b-5ybpomfse2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    font-size: 0.875rem;
}

.ecfa-blockers[b-5ybpomfse2] {
    margin: 0 0 12px;
    padding: 10px 14px 10px 30px;
    border-left: 3px solid var(--red);
    border-radius: 6px;
    background: var(--red-bg);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text);
}

@media (max-width: 640px) {
    .ecfa-collector[b-5ybpomfse2] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/FacilityCanonicalCollection.razor.rz.scp.css */
.fcc[b-lwadrrwvcr] {
    display: grid;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--v3-border, #e3e8ef);
}

.fcc-head[b-lwadrrwvcr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fcc-title[b-lwadrrwvcr] {
    font-weight: 600;
    font-size: 0.875rem;
}

.fcc-state[b-lwadrrwvcr] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--v3-border, #e3e8ef);
}

.fcc-state-on[b-lwadrrwvcr] {
    color: var(--v3-accent, #1d4ed8);
    border-color: currentColor;
}

.fcc-note[b-lwadrrwvcr],
.fcc-saved[b-lwadrrwvcr],
.fcc-error[b-lwadrrwvcr] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.fcc-error[b-lwadrrwvcr] {
    color: var(--v3-danger, #b42318);
}

.fcc-actions[b-lwadrrwvcr] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.fcc-date[b-lwadrrwvcr] {
    display: grid;
    gap: 4px;
    font-size: 0.75rem;
}

.fcc-date input[b-lwadrrwvcr] {
    min-height: 40px;
    padding: 0 8px;
}
/* /Components/Shared/FacilityHero.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   FacilityHero.razor.css — facility / workspace identity band, V3
   (docs/interface/STALLTRACK_UI_V3_DIRECTION.md). The civic-blue hero family (see V3 block below): identity on the
   left, the page's figures on the right and a thin rate line. Shared by NPM, TCC, SLH, TRM, TPM and Collection Activity;
   presentation only — every figure is still the page's own.
═══════════════════════════════════════════════════ */

.facility-hero-scope[b-asynm4zk1w] {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

.facility-hero[b-asynm4zk1w] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    margin-bottom: 20px;
    padding: 20px 24px 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

.facility-hero-left[b-asynm4zk1w] {
    display: flex;
    flex: 1 1 280px;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.facility-hero-icon[b-asynm4zk1w] {
    display: flex;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--navy);
}

    .facility-hero-icon[b-asynm4zk1w]  svg {
        width: 24px;
        height: 24px;
        stroke: var(--navy) !important;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.facility-hero-eyebrow[b-asynm4zk1w] {
    margin-bottom: 2px;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.facility-hero-title[b-asynm4zk1w] {
    color: var(--navy);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.facility-hero-sub[b-asynm4zk1w] {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 13px;
}

.facility-hero-stats[b-asynm4zk1w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.facility-hero-stat[b-asynm4zk1w] {
    padding: 0 20px;
    text-align: right;
}

    .facility-hero-stat:first-child[b-asynm4zk1w] {
        padding-left: 0;
    }

    .facility-hero-stat:last-child[b-asynm4zk1w] {
        padding-right: 0;
    }

.facility-hero-val[b-asynm4zk1w] {
    color: var(--navy);
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.facility-hero-key[b-asynm4zk1w] {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
}

.facility-hero-divider[b-asynm4zk1w] {
    width: 1px;
    height: 36px;
    flex-shrink: 0;
    background: var(--border);
}

.facility-hero-progress[b-asynm4zk1w] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--surface-muted);
}

.facility-hero-progress-fill[b-asynm4zk1w] {
    height: 100%;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
    transition: width .4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .facility-hero-progress-fill[b-asynm4zk1w] {
        transition: none;
    }
}

/* ── V3 hero family (2026-10-02): the facility band takes the Dashboard's civic blue — one solid --civic-panel
      surface, white identity and figures, translucent dividers and icon tile, a white rate line. It matches V3Hero so
      every primary workspace reads as one family; each facility still shows only its own figures. ── */
.facility-hero[b-asynm4zk1w] {
    padding: 18px 24px;
    border: 0;
    background: var(--civic-panel);
    box-shadow: none;
}

.facility-hero-icon[b-asynm4zk1w] {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

    .facility-hero-icon[b-asynm4zk1w]  svg {
        stroke: #ffffff !important;
    }

.facility-hero-eyebrow[b-asynm4zk1w] {
    color: rgba(255, 255, 255, 0.78);
}

.facility-hero-title[b-asynm4zk1w],
.facility-hero-val[b-asynm4zk1w] {
    color: #ffffff;
}

    .facility-hero-title:focus[b-asynm4zk1w] {
        outline: none;
    }

.facility-hero-sub[b-asynm4zk1w] {
    color: rgba(255, 255, 255, 0.82);
}

.facility-hero-key[b-asynm4zk1w] {
    color: rgba(255, 255, 255, 0.88);
}

.facility-hero-divider[b-asynm4zk1w] {
    background: rgba(255, 255, 255, 0.22);
}

.facility-hero-progress[b-asynm4zk1w] {
    background: rgba(255, 255, 255, 0.18);
}

.facility-hero-progress-fill[b-asynm4zk1w] {
    background: #ffffff;
}

@media print {
    .facility-hero[b-asynm4zk1w] {
        background: none;
        border: 1px solid var(--border);
    }

    .facility-hero-title[b-asynm4zk1w],
    .facility-hero-val[b-asynm4zk1w],
    .facility-hero-eyebrow[b-asynm4zk1w],
    .facility-hero-sub[b-asynm4zk1w],
    .facility-hero-key[b-asynm4zk1w] {
        color: var(--navy);
    }
}

/* ══════════════════════════════════════════
   RESPONSIVE — facility hero (≤768px): stack identity above a two-column figure grid.
══════════════════════════════════════════ */
@media (max-width: 768px) {
    .facility-hero[b-asynm4zk1w] {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .facility-hero-left[b-asynm4zk1w] {
        flex: none;
        gap: 12px;
    }

    .facility-hero-icon[b-asynm4zk1w] {
        display: none;
    }

    .facility-hero-title[b-asynm4zk1w] {
        font-size: 20px;
    }

    .facility-hero-stats[b-asynm4zk1w] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 10px;
        width: 100%;
    }

    .facility-hero-stat[b-asynm4zk1w] {
        padding: 0;
        text-align: left;
        min-width: 0;
    }

    .facility-hero-divider[b-asynm4zk1w] {
        display: none;
    }
}
/* /Components/Shared/FacilityMark.razor.rz.scp.css */
/*
   FacilityMark — the facility's line mark.

   Layout only: stroke colour, width and caps are set on the element itself (one drawing, any ink), so this
   sheet just keeps the mark from being stretched or from stealing clicks meant for the row behind it.
*/

.fmark[b-yqvnrzgfy7] {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
}
/* /Components/Shared/FacilityPage.razor.rz.scp.css */
/* ============================================================
   FacilityPage.razor.css — shared facility page (NCC / BBQ / ICE / custom), V3.
   The hero mirrors FacilityHero's V3 identity band so every facility looks the same.
   Use --* tokens from app.css; do NOT redefine them here.
   ============================================================ */


/* ── Back Button ─────────────────────────────────────────── */
.tcc-back-btn[b-qfv3t4gzkp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .tcc-back-btn:hover[b-qfv3t4gzkp] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

    .tcc-back-btn:focus-visible[b-qfv3t4gzkp] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .tcc-back-btn svg[b-qfv3t4gzkp] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* ── Info Bar ────────────────────────────────────────────── */
.tcc-section-info[b-qfv3t4gzkp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 14px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.tcc-section-label[b-qfv3t4gzkp] {
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
}

.tcc-section-desc[b-qfv3t4gzkp] {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 12px;
}

.tcc-section-mini-stats[b-qfv3t4gzkp] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.tcc-mini-stat[b-qfv3t4gzkp] {
    min-width: 60px;
    text-align: right;
}

.tcc-mini-val[b-qfv3t4gzkp] {
    color: var(--navy);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tcc-mini-key[b-qfv3t4gzkp] {
    margin-top: 2px;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 500;
}

.tcc-mini-stat.unpaid-stat .tcc-mini-val[b-qfv3t4gzkp] {
    color: var(--red);
}

.tcc-mini-stat.partial-stat .tcc-mini-val[b-qfv3t4gzkp] {
    color: #9a6a1f;
}

@media (prefers-reduced-motion: reduce) {
    .tcc-back-btn[b-qfv3t4gzkp] {
        transition: none;
    }
}


/* /Components/Shared/FeeOptionDefinitions.razor.rz.scp.css */
/* Fee option definitions — V3. Panels, tables, fields and buttons come from the v3- layer in app.css. */

.fod-notice[b-q8rvap2phy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 20px 0;
}

.fod-notice .v3-notice[b-q8rvap2phy] {
    flex: 1 1 auto;
    margin: 0;
}

.fod-form[b-q8rvap2phy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.fod-inline[b-q8rvap2phy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fod-grid[b-q8rvap2phy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    align-items: end;
    gap: 12px;
}

.fod-rule[b-q8rvap2phy] {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.fod-rule legend[b-q8rvap2phy] {
    margin-bottom: 6px;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Two-way rule choice: one joined control, the selected half in civic blue. */
.fod-segmented[b-q8rvap2phy] {
    display: flex;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.fod-segmented label[b-q8rvap2phy] {
    position: relative;
    flex: 1 1 0;
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.fod-segmented label + label[b-q8rvap2phy] {
    border-left: 1px solid var(--border-strong);
}

.fod-segmented input[b-q8rvap2phy] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fod-segmented label.is-selected[b-q8rvap2phy] {
    background: var(--accent-soft);
    color: var(--accent);
}

.fod-segmented label:focus-within[b-q8rvap2phy] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.fod-note[b-q8rvap2phy] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.fod-actions[b-q8rvap2phy] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.fod-row-actions[b-q8rvap2phy] {
    white-space: nowrap;
    text-align: right;
}

.fod-row-actions .v3-btn + .v3-btn[b-q8rvap2phy] {
    margin-left: 6px;
}

.fod-status[b-q8rvap2phy] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.fod-status-active[b-q8rvap2phy] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.fod-status-retired[b-q8rvap2phy] {
    color: var(--text-tertiary);
}

.v3-table tbody tr.fod-detail td[b-q8rvap2phy],
.v3-table tbody tr.fod-detail:hover td[b-q8rvap2phy] {
    background: var(--surface-muted);
}

/* Amount history: a compact, indented ledger under the option, not a second set of table columns. */
.fod-history-title[b-q8rvap2phy] {
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.fod-history[b-q8rvap2phy] {
    max-width: 44rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fod-history li[b-q8rvap2phy] {
    display: grid;
    grid-template-columns: 9.5rem 7rem 8rem minmax(0, 1fr);
    gap: 12px;
    padding: 6px 0;
    font-size: 0.8125rem;
}

.fod-history li + li[b-q8rvap2phy] {
    border-top: 1px solid var(--border);
}

.fod-history-date[b-q8rvap2phy] {
    font-weight: 600;
}

.fod-history-amount[b-q8rvap2phy] {
    font-variant-numeric: tabular-nums;
}

.fod-history-by[b-q8rvap2phy] {
    color: var(--text-tertiary);
}

.fod-saved[b-q8rvap2phy] {
    margin: 12px 20px 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--green-bg);
    color: var(--green);
    font-size: 0.8125rem;
}

.fod-totals[b-q8rvap2phy] {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border);
}

.fod-totals h3[b-q8rvap2phy] {
    margin: 0 0 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

@media (max-width: 720px) {
    /* The register scrolls sideways on a phone; the open form and history stay pinned to the visible width. */
    .fod-inline[b-q8rvap2phy],
    .fod-history[b-q8rvap2phy],
    .fod-history-title[b-q8rvap2phy] {
        position: sticky;
        left: 20px;
        width: calc(100vw - 104px);
    }

    .fod-history li[b-q8rvap2phy] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .fod-row-actions[b-q8rvap2phy] {
        white-space: normal;
    }
}
/* /Components/Shared/FhSelect.razor.rz.scp.css */
/* Matches the Follow-up History year/month picker (fh-dd). */

.fh-dd[b-50rid5zw29] { position: relative; display: inline-flex; }
.fh-dd-block[b-50rid5zw29] { display: flex; width: 100%; }
.fh-dd-block .fh-dd-trigger[b-50rid5zw29] { flex: 1; }
.fh-dd-block .fh-dd-menu[b-50rid5zw29] { left: 0; right: 0; min-width: 0; }

.fh-dd-trigger[b-50rid5zw29] {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    height: 42px; padding: 0 12px 0 14px; cursor: pointer; user-select: none;
    background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 10px;
    font: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.fh-dd-trigger:hover[b-50rid5zw29] { border-color: var(--accent); }
.fh-dd-trigger.open[b-50rid5zw29] { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13, 33, 55, .07); }
.fh-dd-body[b-50rid5zw29] { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.fh-dd-cap[b-50rid5zw29] { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); line-height: 1; }
.fh-dd-val[b-50rid5zw29] { font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.25; margin-top: 2px; white-space: nowrap; }
.fh-dd-chevron[b-50rid5zw29] { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; transition: transform .2s ease; }
.fh-dd-trigger.open .fh-dd-chevron[b-50rid5zw29] { transform: rotate(180deg); }

.fh-dd-backdrop[b-50rid5zw29] { position: fixed; inset: 0; z-index: 299; }
.fh-dd-menu[b-50rid5zw29] {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 300;
    min-width: 180px; max-height: 320px; overflow-y: auto;
    background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px;
    box-shadow: 0 8px 32px rgba(13, 33, 55, .14); padding-bottom: 6px;
    animation: fh-dd-in-b-50rid5zw29 .15s ease;
}
.fh-dd-menu-right[b-50rid5zw29] { left: auto; right: 0; }
@keyframes fh-dd-in-b-50rid5zw29 { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.fh-dd-header[b-50rid5zw29] { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); padding: 10px 14px 6px; }
.fh-dd-item[b-50rid5zw29] { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; transition: background .12s; }
.fh-dd-item:hover[b-50rid5zw29] { background: var(--bg); }
.fh-dd-item.active[b-50rid5zw29] { background: rgba(13, 33, 55, .04); }
.fh-dd-name[b-50rid5zw29] { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); font-weight: 500; white-space: nowrap; }
.fh-dd-item.active .fh-dd-name[b-50rid5zw29] { font-weight: 700; color: var(--navy); }
.fh-dd-check[b-50rid5zw29] { width: 14px; height: 14px; stroke: var(--navy); flex-shrink: 0; }


/* ── Scrollbars ───────────────────────────────────────────────────────────────────────────────────────
   The platform's default scrollbars are far heavier than this menu: a wide grey trough down the side and a
   horizontal one along the bottom, both of which read as chrome rather than a list. The menu never needs to
   scroll sideways (long labels wrap), and the vertical bar is drawn thin and in the portal's own ink. */
.fh-dd-menu[b-50rid5zw29] {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--navy) 28%, transparent) transparent;
}

    .fh-dd-menu[b-50rid5zw29]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .fh-dd-menu[b-50rid5zw29]::-webkit-scrollbar-track {
        background: transparent;
    }

    .fh-dd-menu[b-50rid5zw29]::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 999px;
    }

        .fh-dd-menu[b-50rid5zw29]::-webkit-scrollbar-thumb:hover {
            background: var(--accent-hover);
        }

/* A long option ("Npm Market Closure", a facility's full name) wraps instead of forcing the menu to scroll
   sideways. */
.fh-dd-item[b-50rid5zw29] {
    white-space: normal;
}

.fh-dd-name[b-50rid5zw29] {
    overflow-wrap: break-word;
}


/* ── Scrollbars ───────────────────────────────────────────────────────────────────────────────────────
   The platform's default scrollbars are far heavier than this menu: a wide grey trough down the side and a
   horizontal one along the bottom, both of which read as chrome rather than a list. The menu never needs to
   scroll sideways (long labels wrap now), and the vertical bar is drawn thin, in the portal's own ink. */
.fh-dd-menu[b-50rid5zw29] {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--navy) 28%, transparent) transparent;
}

    .fh-dd-menu[b-50rid5zw29]::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .fh-dd-menu[b-50rid5zw29]::-webkit-scrollbar-track {
        background: transparent;
    }

    .fh-dd-menu[b-50rid5zw29]::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 999px;
    }

        .fh-dd-menu[b-50rid5zw29]::-webkit-scrollbar-thumb:hover {
            background: var(--accent-hover);
        }

/* A long option ("Npm Market Closure", a facility's full name) wraps rather than forcing the menu sideways. */
.fh-dd-item[b-50rid5zw29] {
    white-space: normal;
}

.fh-dd-name[b-50rid5zw29] {
    overflow-wrap: break-word;
}
/* /Components/Shared/FineAssessmentDrawer.razor.rz.scp.css */
/* Assess fine: a stepped, structured assessment — account, fine details, review. */

/* ── Steps ── */
.fine-assessment[b-jtx6nfboms]  .fine-steps { display:flex; gap:6px; margin:0 0 20px; padding:0; list-style:none; }
.fine-assessment[b-jtx6nfboms]  .fine-steps li { display:flex; flex:1 1 0; align-items:center; gap:8px; padding:8px 10px; border-bottom:2px solid var(--border); color:var(--text-tertiary); font-size:.8125rem; font-weight:600; }
.fine-assessment[b-jtx6nfboms]  .fine-step-n { display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border:1px solid var(--border-strong); border-radius:50%; background:var(--surface); font-size:.6875rem; }
.fine-assessment[b-jtx6nfboms]  .fine-steps li.done { border-bottom-color:var(--accent); color:var(--text-secondary); }
.fine-assessment[b-jtx6nfboms]  .fine-steps li.done .fine-step-n { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.fine-assessment[b-jtx6nfboms]  .fine-steps li.current { border-bottom-color:var(--accent); color:var(--navy); }
.fine-assessment[b-jtx6nfboms]  .fine-steps li.current .fine-step-n { border-color:var(--accent); background:var(--accent); color:var(--surface); }

/* ── Account search ── */
.fine-assessment[b-jtx6nfboms]  .fine-search { display:flex; gap:8px; align-items:end; }
.fine-assessment[b-jtx6nfboms]  .fine-search .v3-field { flex:1; min-width:0; }
.fine-assessment[b-jtx6nfboms]  .fine-hint { margin:10px 0 0; color:var(--text-secondary); font-size:.8125rem; line-height:1.45; }
.fine-assessment[b-jtx6nfboms]  .fine-results { display:grid; gap:6px; margin-top:12px; }
.fine-assessment[b-jtx6nfboms]  .fine-result { display:grid; text-align:left; gap:3px; padding:11px 14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); cursor:pointer; }
.fine-assessment[b-jtx6nfboms]  .fine-result:hover { border-color:var(--accent); background:var(--accent-soft); }
.fine-assessment[b-jtx6nfboms]  .fine-result:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fine-assessment[b-jtx6nfboms]  .fine-result-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fine-assessment[b-jtx6nfboms]  .fine-result strong { color:var(--navy); }
.fine-assessment[b-jtx6nfboms]  .fine-result span,.fine-assessment[b-jtx6nfboms]  .fine-result small { color:var(--text-secondary); }
.fine-assessment[b-jtx6nfboms]  .fine-result small { font-size:.75rem; }

/* ── Selected account ── */
.fine-assessment[b-jtx6nfboms]  .fine-account { border:1px solid var(--border); border-radius:10px; background:var(--surface-muted); overflow:hidden; }
.fine-assessment[b-jtx6nfboms]  .fine-account-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--surface); }
.fine-assessment[b-jtx6nfboms]  .fine-account-name { display:block; color:var(--navy); font-size:1rem; font-weight:700; }
.fine-assessment[b-jtx6nfboms]  .fine-account-sub { display:block; margin-top:2px; color:var(--text-secondary); font-size:.8125rem; }
.fine-assessment[b-jtx6nfboms]  .fine-account-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; margin:0; padding:14px 16px; }
.fine-assessment[b-jtx6nfboms]  .fine-account-facts dt { margin-bottom:2px; color:var(--text-tertiary); font-size:.75rem; font-weight:500; }
.fine-assessment[b-jtx6nfboms]  .fine-account-facts dd { margin:0; overflow-wrap:anywhere; font-size:.875rem; }
.fine-assessment[b-jtx6nfboms]  .fine-change { margin-top:10px; }

/* ── Fine details ── */
.fine-assessment[b-jtx6nfboms]  .fine-empty { display:grid; gap:6px; justify-items:start; padding:16px; border:1px dashed var(--border-strong); border-radius:10px; background:var(--surface-muted); }
.fine-assessment[b-jtx6nfboms]  .fine-empty p { margin:0; color:var(--navy); font-weight:600; }
.fine-assessment[b-jtx6nfboms]  .fine-empty span { color:var(--text-secondary); font-size:.8125rem; line-height:1.45; }
.fine-assessment[b-jtx6nfboms]  .fine-empty a { margin-top:6px; }
.fine-assessment[b-jtx6nfboms]  .fine-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; margin:0; }
.fine-assessment[b-jtx6nfboms]  .fine-facts dt { color:var(--text-tertiary); font-size:.75rem; font-weight:500; margin-bottom:2px; }
.fine-assessment[b-jtx6nfboms]  .fine-facts dd { margin:0; overflow-wrap:anywhere; }
.fine-assessment[b-jtx6nfboms]  .fine-wide { grid-column:1/-1; }
.fine-assessment[b-jtx6nfboms]  .fine-amount-rule { align-self:end; margin:0; font-size:.8rem; color:var(--text-secondary); }
.fine-assessment[b-jtx6nfboms]  .fine-total { display:grid; gap:2px; margin-top:16px; padding:14px 16px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; background:var(--accent-soft); }
.fine-assessment[b-jtx6nfboms]  .fine-total span { color:var(--text-secondary); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.fine-assessment[b-jtx6nfboms]  .fine-total strong { color:var(--navy); font-size:1.375rem; font-variant-numeric:tabular-nums; }
.fine-assessment[b-jtx6nfboms]  .fine-total small { color:var(--text-secondary); font-size:.8125rem; }
.fine-assessment[b-jtx6nfboms]  .fine-check { display:flex; gap:8px; align-items:flex-start; font-size:.85rem; margin-top:14px; }
.fine-assessment[b-jtx6nfboms]  .fine-check input { width:16px; height:16px; flex:none; margin-top:2px; }

@media(max-width:600px) {
    .fine-assessment[b-jtx6nfboms]  .fine-facts,.fine-assessment[b-jtx6nfboms]  .fine-account-facts,.fine-assessment[b-jtx6nfboms]  .vds .avm-row-2 { grid-template-columns:1fr; }
    .fine-assessment[b-jtx6nfboms]  .fine-search { flex-wrap:wrap; }
    .fine-assessment[b-jtx6nfboms]  .fine-steps li { padding:8px 4px; font-size:.75rem; }
}
/* /Components/Shared/FineAssessmentsRegister.razor.rz.scp.css */
/* Fine assessments register: a case register of outstanding and settled fines, and its detail drawer. */

.far-meta[b-r3crnliqcn] { margin-right: auto; }

.far-search[b-r3crnliqcn] { flex: 1 1 260px; max-width: 440px; min-width: 0; }
.far-search input[b-r3crnliqcn] { width: 100%; }
.far-search-btn[b-r3crnliqcn] { align-self: flex-end; }

/* Saved-assessment confirmation: a calm inline strip, not a banner. */
.far-saved[b-r3crnliqcn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--navy);
    font-size: 0.8125rem;
}

/* ── Register ── */
.far-table th[b-r3crnliqcn] { padding-top: 11px; padding-bottom: 11px; }
.far-table td[b-r3crnliqcn] { padding-top: 14px; padding-bottom: 14px; }
.far-table tbody tr:hover td[b-r3crnliqcn] { background: var(--accent-soft); }
.far-table tbody tr:hover .v3-empty[b-r3crnliqcn] { background: var(--surface); }
.far-table td > strong[b-r3crnliqcn] { display: block; color: var(--navy); font-weight: 600; }
.far-secondary[b-r3crnliqcn] { color: var(--text-secondary); }
.far-reason[b-r3crnliqcn] {
    max-width: 36ch;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.far-remaining[b-r3crnliqcn] { color: var(--text-tertiary); }
.far-remaining.far-open[b-r3crnliqcn] { color: var(--navy); font-size: 0.9375rem; font-weight: 700; }
.far-table .v3-empty[b-r3crnliqcn] { padding: 36px 20px; }
.far-table .v3-empty-block svg[b-r3crnliqcn] { width: 32px; height: 32px; }

/* Row actions stay together at the right edge. */
.far-row-actions[b-r3crnliqcn] { width: 1%; white-space: nowrap; }
.far-actions[b-r3crnliqcn] { display: inline-flex; gap: 6px; }
.far-pay[b-r3crnliqcn] { border-color: var(--accent); color: var(--accent); }
.far-pay:hover[b-r3crnliqcn] { background: var(--accent); color: var(--surface); }

/* ── Case detail drawer ── */
.far-case[b-r3crnliqcn] {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
}
.far-case-head[b-r3crnliqcn] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.far-case-name[b-r3crnliqcn] { color: var(--navy); font-size: 1rem; font-weight: 700; }
.far-amounts[b-r3crnliqcn] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 14px 0 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--border);
}
.far-amounts > div[b-r3crnliqcn] { padding: 10px 12px; background: var(--surface); }
.far-amounts dt[b-r3crnliqcn] { color: var(--text-tertiary); font-size: 0.6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.far-amounts dd[b-r3crnliqcn] { margin: 4px 0 0; color: var(--navy); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.far-amounts .far-due[b-r3crnliqcn] { background: var(--accent-soft); }
.far-amounts .far-due dd[b-r3crnliqcn] { color: var(--accent); }

.far-section[b-r3crnliqcn] { margin-bottom: 20px; }
.far-section h3[b-r3crnliqcn] {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.far-facts[b-r3crnliqcn] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.far-facts dt[b-r3crnliqcn] { margin-bottom: 2px; color: var(--text-tertiary); font-size: 0.75rem; font-weight: 500; }
.far-facts dd[b-r3crnliqcn] { margin: 0; color: var(--text); font-size: 0.875rem; overflow-wrap: anywhere; }
.far-wide[b-r3crnliqcn] { grid-column: 1 / -1; }
.far-mini th:first-child[b-r3crnliqcn], .far-mini td:first-child[b-r3crnliqcn] { padding-left: 0; }
.far-mini th:last-child[b-r3crnliqcn], .far-mini td:last-child[b-r3crnliqcn] { padding-right: 0; }
.far-src[b-r3crnliqcn] { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .02em; }
.far-note[b-r3crnliqcn] { margin: 0 0 12px; color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.45; }

@media (max-width: 600px) {
    .far-search[b-r3crnliqcn] { max-width: none; }
    .far-facts[b-r3crnliqcn] { grid-template-columns: 1fr; }
    .far-amounts[b-r3crnliqcn] { grid-template-columns: 1fr; }
}
/* /Components/Shared/FinePaymentDrawer.razor.rz.scp.css */
/* Record fine payment: the liable account, the balance, then the OR draft and confirmation. */
.fp-account[b-lehwaops7h] { display: grid; gap: 2px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.fp-account strong[b-lehwaops7h] { color: var(--navy); font-size: 1rem; }
.fp-account span[b-lehwaops7h] { color: var(--text-secondary); font-size: .8125rem; }

.fp-amounts[b-lehwaops7h] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--border); }
.fp-amounts > div[b-lehwaops7h] { padding: 10px 12px; background: var(--surface); }
.fp-amounts dt[b-lehwaops7h] { color: var(--text-tertiary); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fp-amounts dd[b-lehwaops7h] { margin: 4px 0 0; color: var(--navy); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-amounts .fp-due[b-lehwaops7h] { background: var(--accent-soft); }
.fp-amounts .fp-due dd[b-lehwaops7h] { color: var(--accent); }

.fp-note[b-lehwaops7h] { margin: 0 0 12px; color: var(--text-secondary); font-size: .8125rem; line-height: 1.45; }
.fp-confirm[b-lehwaops7h] { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--accent-soft); color: var(--navy); font-weight: 600; }
.fp-done[b-lehwaops7h] { margin: 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--border)); border-radius: 10px; background: var(--green-bg); color: var(--green); font-weight: 700; }

@media (max-width: 480px) { .fp-amounts[b-lehwaops7h] { grid-template-columns: 1fr; } }
/* /Components/Shared/FinePolicySetup.razor.rz.scp.css */
.fine-policy[b-7eryjhwehm]  .policy-check { display:flex; align-items:flex-start; gap:8px; margin-top:12px; font-size:.85rem; }
.fine-policy[b-7eryjhwehm]  .policy-check input { width:16px; height:16px; flex:none; margin-top:2px; }
.fine-policy[b-7eryjhwehm]  .policy-summary { display:grid; grid-template-columns:minmax(120px,1fr) 2fr; gap:10px 16px; margin:0 0 16px; }
.fine-policy[b-7eryjhwehm]  .policy-summary dt { color:var(--text-secondary); }
.fine-policy[b-7eryjhwehm]  .policy-summary dd { margin:0; overflow-wrap:anywhere; }
.fine-policy[b-7eryjhwehm]  details { margin-top:12px; }

/* The applicability register reads as the second half of Penalty settings: same row rhythm as the categories above it. */
.fine-policy[b-7eryjhwehm] { margin-top:8px; border-top:1px solid var(--border); }
.fine-policy[b-7eryjhwehm]  .v3-panel-header { background:var(--surface-muted); border-bottom:1px solid var(--border); }
.fine-policy[b-7eryjhwehm]  .v3-panel-header h3 { margin:0; color:var(--navy); font-size:.9375rem; font-weight:700; }
.fine-policy[b-7eryjhwehm]  .v3-table td { padding-top:14px; padding-bottom:14px; }
.fine-policy[b-7eryjhwehm]  .v3-table td:first-child { color:var(--navy); font-weight:600; }
.fine-policy[b-7eryjhwehm]  .v3-table tbody tr:hover td { background:var(--accent-soft); }
.fine-policy[b-7eryjhwehm]  .v3-table tbody tr:hover .v3-empty { background:var(--surface); }
@media(max-width:600px) { .fine-policy[b-7eryjhwehm]  .vds .avm-row-2 { grid-template-columns:1fr; } .fine-policy[b-7eryjhwehm]  .policy-summary { grid-template-columns:1fr; gap:4px; } .fine-policy[b-7eryjhwehm]  .policy-summary dd { margin-bottom:10px; } }
/* /Components/Shared/FollowUpAccountReview.razor.rz.scp.css */
.review-scope[b-gnlsirc7lu] { color: var(--text-secondary); font-size: .8125rem; line-height: 1.5; }
.review-summary[b-gnlsirc7lu], .review-facts[b-gnlsirc7lu] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 12px 0 20px; }
.review-summary dt[b-gnlsirc7lu], .review-facts dt[b-gnlsirc7lu] { color: var(--text-secondary); font-size: .75rem; }
.review-summary dd[b-gnlsirc7lu], .review-facts dd[b-gnlsirc7lu] { margin: 4px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
h3[b-gnlsirc7lu] { font-size: .9375rem; margin: 20px 0 10px; }
p[b-gnlsirc7lu] { font-size: .8125rem; line-height: 1.5; }
.review-year[b-gnlsirc7lu] { border: 1px solid var(--border); border-radius: 8px; margin: 10px 0; }
.review-year > summary[b-gnlsirc7lu] { padding: 12px; cursor: pointer; font-weight: 600; font-size: .875rem; }
.review-year > summary span[b-gnlsirc7lu] { display: block; margin: 4px 0 0 16px; font-weight: 400; color: var(--text-secondary); font-size: .75rem; }
.review-year .review-facts[b-gnlsirc7lu] { padding: 0 12px; }
.review-table-wrap[b-gnlsirc7lu] { overflow-x: auto; }
.review-table[b-gnlsirc7lu] { width: 100%; font-variant-numeric: tabular-nums; }
.review-table th[b-gnlsirc7lu], .review-table td[b-gnlsirc7lu] { padding: 9px; font-size: .75rem; text-align: right; white-space: nowrap; }
.review-table th:first-child[b-gnlsirc7lu], .review-table td:first-child[b-gnlsirc7lu] { text-align: left; white-space: normal; min-width: 110px; }
.review-period-toggle[b-gnlsirc7lu] { border: 0; background: transparent; padding: 2px 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.review-period-toggle:focus-visible[b-gnlsirc7lu] { outline: 2px solid var(--civic-panel); outline-offset: 3px; }
.review-period-detail[b-gnlsirc7lu] { font-weight: 400; text-align: left; white-space: normal; padding: 4px 8px; }
.review-period-detail p[b-gnlsirc7lu] { font-size: .75rem; }
.review-detail-row[b-gnlsirc7lu] { background: var(--bg-app, #f5f7fa); }
.review-days[b-gnlsirc7lu] { margin-top: 10px; max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.review-day-table[b-gnlsirc7lu] { width: 100%; border-collapse: collapse; }
.review-day-table th[b-gnlsirc7lu], .review-day-table td[b-gnlsirc7lu] { text-align: left; padding: 8px; }
.review-day-table th[b-gnlsirc7lu] { position: sticky; top: 0; background: var(--bg-app, #f5f7fa); }
.review-days p[b-gnlsirc7lu] { margin: 8px; }
.review-charges[b-gnlsirc7lu] { border-top: 1px solid var(--border); margin-top: 18px; }
.review-charges h3[b-gnlsirc7lu] { margin-top: 14px; }
.review-charges p[b-gnlsirc7lu] { color: var(--text-secondary); }
summary:focus-visible[b-gnlsirc7lu] { outline: 2px solid var(--civic-panel); outline-offset: -2px; }
.review-footer-actions[b-gnlsirc7lu] { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; }
@media(max-width: 768px) { .account-review[b-gnlsirc7lu]  .eemo-drawer { width: 100%; max-width: 100%; } }
@media(max-width: 480px) {
    .review-facts[b-gnlsirc7lu] { grid-template-columns: minmax(0,1fr); }
    .review-table > thead[b-gnlsirc7lu] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .review-table > tbody[b-gnlsirc7lu] { display: block; }
    .review-table > tbody > tr[b-gnlsirc7lu] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--border); }
    .review-table > tbody > tr > td[b-gnlsirc7lu] { display: block; text-align: left; white-space: normal; min-width: 0; border: 0; }
    .review-table > tbody > tr > td:first-child[b-gnlsirc7lu] { grid-column: 1 / -1; min-width: 0; }
    .review-table > tbody > tr > td[data-label][b-gnlsirc7lu]::before { content: attr(data-label); display: block; font-size: .6875rem; color: var(--text-secondary); margin-bottom: 4px; }
    .review-period-detail[b-gnlsirc7lu] { max-width: none; }
}
/* /Components/Shared/GlobalLoadingBar.razor.rz.scp.css */
.global-progress[b-xr03kb3m3l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10000;
    overflow: hidden;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
    background: var(--accent);
}

.global-progress.is-active[b-xr03kb3m3l] {
    opacity: 1;
}

.global-progress[b-xr03kb3m3l]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -45%;
    height: 100%;
    width: 45%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg,
        transparent,
        var(--gold, #c8a84b),
        var(--gold-light, #e8cc76),
        transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--gold, #c8a84b) 60%, transparent);
}

.global-progress.is-active[b-xr03kb3m3l]::before {
    animation: gp-indeterminate-b-xr03kb3m3l 1.05s ease-in-out infinite;
}

@keyframes gp-indeterminate-b-xr03kb3m3l {
    0% { left: -45%; }
    100% { left: 100%; }
}
/* /Components/Shared/GovernedServiceWorkspace.razor.rz.scp.css */
/* Governed service workspace — V3. Panels, tables, facts and buttons come from the v3- layer in app.css. */

.gsw-layout[b-qqmhmmdvmu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    align-items: start;
    gap: 20px;
}

.gsw-period[b-qqmhmmdvmu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.gsw-notice[b-qqmhmmdvmu] {
    margin: 12px 20px 0;
}

.gsw-note[b-qqmhmmdvmu] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.gsw-state[b-qqmhmmdvmu] {
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-muted);
}

.gsw-state-active[b-qqmhmmdvmu] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.gsw-issues[b-qqmhmmdvmu] {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Setup facts read as a compact register: hairline dividers, aligned values. */
.v3-facts[b-qqmhmmdvmu] {
    gap: 0;
}

.v3-facts > div[b-qqmhmmdvmu] {
    padding: 9px 0;
}

.v3-facts > div + div[b-qqmhmmdvmu] {
    border-top: 1px solid var(--border);
}

.v3-facts > div:first-child[b-qqmhmmdvmu] {
    padding-top: 0;
}

.gsw-edit[b-qqmhmmdvmu] {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

/* Edit form: tight vertical rhythm, full-width fields, actions on one line. */
.gsw-form[b-qqmhmmdvmu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.gsw-form .v3-field[b-qqmhmmdvmu] {
    width: 100%;
}

.gsw-form .v3-field input[b-qqmhmmdvmu],
.gsw-form .v3-field select[b-qqmhmmdvmu] {
    width: 100%;
}

.gsw-form .gsw-note[b-qqmhmmdvmu] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.gsw-form .gsw-actions[b-qqmhmmdvmu] {
    margin-top: 2px;
}

.gsw-form .gsw-actions .v3-btn[b-qqmhmmdvmu] {
    flex: 1 1 0;
    justify-content: center;
}

/* Saved confirmation: a quiet success line under the button, not a boxed notice. */
.gsw-saved[b-qqmhmmdvmu] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--green-bg);
    color: var(--green);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.gsw-saved svg[b-qqmhmmdvmu] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gsw-check[b-qqmhmmdvmu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text);
}

.gsw-actions[b-qqmhmmdvmu] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.gsw-retry[b-qqmhmmdvmu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.v3-panel-note a[b-qqmhmmdvmu] {
    color: var(--accent);
    font-weight: 600;
}

.gsw-fee-options[b-qqmhmmdvmu] {
    margin-top: 20px;
}

.gsw-fee[b-qqmhmmdvmu] {
    display: block;
    font-weight: 600;
    color: var(--text);
}

@media (max-width: 1100px) {
    .gsw-layout[b-qqmhmmdvmu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gsw-fee-rule[b-qqmhmmdvmu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 12px;
}

.gsw-period .v3-input[b-qqmhmmdvmu] { min-height: 36px; padding-block: 4px; }

/* The collections history is bounded: about four rows show, the rest scroll inside the panel, with the heading and the total held in place. */
.gsw-scroll[b-qqmhmmdvmu] { max-height: 17.5rem; overflow-y: auto; overscroll-behavior: contain; }
.gsw-scroll thead th[b-qqmhmmdvmu] { position: sticky; top: 0; z-index: 2; background: var(--surface-muted); }
.gsw-measured-scroll[b-qqmhmmdvmu] { max-height: none; }
.gsw-total[b-qqmhmmdvmu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
    font-size: 0.8125rem;
}
.gsw-total strong:last-child[b-qqmhmmdvmu] { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* /Components/Shared/ImportButton.razor.rz.scp.css */
/* Import buttons — moved verbatim from the stallholder import so every import shares one button. */
/* ── Buttons ── */
.imp-btn[b-3nzbkiyoyd] {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 650; border-radius: 9px; padding: 9px 16px;
    cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background .14s ease, color .14s ease;
}
.imp-btn[b-3nzbkiyoyd]  svg { width: 16px; height: 16px; }
.imp-btn-primary[b-3nzbkiyoyd] { background: var(--accent); color: #fff; }
.imp-btn-primary:hover[b-3nzbkiyoyd] { background: var(--accent-hover); }
.imp-btn-primary:disabled[b-3nzbkiyoyd] { opacity: .5; cursor: not-allowed; }
.imp-btn-outline[b-3nzbkiyoyd] { background: var(--bg-card); color: var(--navy); border-color: var(--border); }
.imp-btn-outline:hover[b-3nzbkiyoyd] { background: var(--bg-icon); }
.imp-btn-ghost[b-3nzbkiyoyd] { background: var(--bg); color: var(--text); border-color: var(--border); }
.imp-btn-ghost:hover[b-3nzbkiyoyd] { background: var(--bg-icon); }
/* /Components/Shared/ImportFootBar.razor.rz.scp.css */
/* Import footer bar — moved verbatim from the stallholder import. */
/* ── Footer bar ── */
.imp-foot-bar[b-m45598wjtf] {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}

.imp-save-error[b-m45598wjtf] {
    font-size: 13px; color: var(--red); background: var(--red-bg);
    border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); border-radius: 9px;
    padding: 10px 14px; margin-bottom: 12px;
}

.imp-btn-spin[b-m45598wjtf] {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    display: inline-block; animation: setSpin-b-m45598wjtf .7s linear infinite;
}
@keyframes setSpin-b-m45598wjtf { to { transform: rotate(360deg); } }
/* /Components/Shared/ImportGrid.razor.rz.scp.css */
/* Import editable register — moved verbatim from the stallholder import. */
/* ── Editable table ── */
.imp-table-wrap[b-hdn48esf3h] {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    overflow: auto; max-height: 60vh;
}
.imp-table[b-hdn48esf3h] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.imp-table thead th[b-hdn48esf3h] {
    position: sticky; top: 0; z-index: 1;
    text-align: center; white-space: nowrap;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-subtle); background: var(--bg);
    padding: 10px 10px; border-bottom: 1px solid var(--border);
}
.imp-th-num[b-hdn48esf3h], .imp-td-num[b-hdn48esf3h] { width: 44px; text-align: center; color: var(--text-muted); font-weight: 700; }
.imp-th-act[b-hdn48esf3h], .imp-td-act[b-hdn48esf3h] { width: 48px; text-align: center; }
.imp-table tbody td[b-hdn48esf3h] { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); vertical-align: middle; }
.imp-table tbody tr:last-child td[b-hdn48esf3h] { border-bottom: none; }

.imp-cell[b-hdn48esf3h] {
    width: 100%; box-sizing: border-box;
    font-size: 13px; color: var(--text); text-align: center;
    border: 1px solid transparent; border-radius: 7px;
    padding: 7px 9px; background: transparent; transition: border-color .12s ease, background .12s ease;
}
.imp-cell:hover[b-hdn48esf3h] { background: var(--bg); }
.imp-cell:focus[b-hdn48esf3h] { outline: none; border-color: var(--accent); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(200, 168, 75, .14); }
.imp-cell-num[b-hdn48esf3h] { text-align: center; font-variant-numeric: tabular-nums; }

/* A space the office does not number: the identifier is shown, because the row has to be identifiable on
   screen, but it is the system's own and is not the office's to type over. It reads as settled rather than
   disabled - the muted ink already in use, and none of the hover or focus affordances that invite typing. */
.imp-cell-locked[b-hdn48esf3h] { color: var(--text-muted); cursor: default; }
.imp-cell-locked:hover[b-hdn48esf3h] { background: transparent; }
.imp-cell-locked:focus[b-hdn48esf3h] { outline: none; border-color: transparent; background: transparent; box-shadow: none; }

/* Dropdown — native arrow removed; a single overlay caret (.imp-select-caret) is positioned by
   the wrapping .imp-select-wrap, so there's exactly one caret regardless of browser. */
.imp-cell-select[b-hdn48esf3h] {
    cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    text-align: center; text-align-last: center;
    padding: 7px 26px 7px 12px;
}
.imp-cell-select:hover[b-hdn48esf3h] { background-color: var(--bg); }
.imp-cell-select:focus[b-hdn48esf3h] { border-color: var(--accent); background-color: var(--bg-card); }
.imp-cell-select[b-hdn48esf3h]::-ms-expand { display: none; }
.imp-cell-select option[b-hdn48esf3h] { text-align: left; color: var(--text); }

.imp-select-wrap[b-hdn48esf3h] { position: relative; display: block; }
.imp-select-caret[b-hdn48esf3h] {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; pointer-events: none; color: var(--text-muted);
}
.imp-select-wrap:focus-within .imp-select-caret[b-hdn48esf3h] { color: var(--accent); }

.imp-row-del[b-hdn48esf3h] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid transparent; background: none; color: var(--text-muted); cursor: pointer;
}
.imp-row-del:hover[b-hdn48esf3h] { background: var(--red-bg); color: var(--red); }
.imp-row-del svg[b-hdn48esf3h] { width: 16px; height: 16px; }
.imp-empty[b-hdn48esf3h] { text-align: center; color: var(--text-muted); padding: 28px 12px; font-size: 13px; }

.imp-cell-dup[b-hdn48esf3h] {
    color: var(--red, #8b3a3a) !important;
}
.imp-th-status[b-hdn48esf3h], .imp-td-status[b-hdn48esf3h] { text-align: left; }
/* /Components/Shared/ImportHero.razor.rz.scp.css */
/* Import hero and its three steps — moved verbatim from the stallholder import. */
/* ── Hero ── */
.imp-hero[b-fsnsto85e5] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--elevation-1);
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    overflow: hidden; flex-wrap: wrap;
}
.imp-hero[b-fsnsto85e5]::before {
    content: ""; position: absolute; top: -50px; right: -30px; width: 220px; height: 220px;
    display: none;
}
.imp-hero-left[b-fsnsto85e5] { display: flex; align-items: center; gap: 18px; min-width: 260px; }
.imp-hero-icon[b-fsnsto85e5] {
    width: 54px; height: 54px; border-radius: 12px; flex-shrink: 0;
    background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center;
}
.imp-hero-icon svg[b-fsnsto85e5] { width: 26px; height: 26px; stroke: var(--accent); }
.imp-hero-eyebrow[b-fsnsto85e5] { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.imp-hero-title[b-fsnsto85e5] { font-size: 21px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.imp-hero-sub[b-fsnsto85e5] { font-size: 13px; color: var(--text-secondary); margin-top: 4px; max-width: 460px; }

/* Step indicator */
.imp-steps[b-fsnsto85e5] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.imp-step[b-fsnsto85e5] {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--text-tertiary);
}
.imp-step-no[b-fsnsto85e5] {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    background: var(--bg-icon); color: var(--text-secondary);
}
.imp-step.active[b-fsnsto85e5] { color: var(--navy); }
.imp-step.active .imp-step-no[b-fsnsto85e5] { background: var(--accent); color: var(--surface); }
.imp-step.done[b-fsnsto85e5] { color: var(--text-secondary); }
.imp-step.done .imp-step-no[b-fsnsto85e5] { background: var(--accent-soft); color: var(--accent); }
.imp-step-line[b-fsnsto85e5] { width: 26px; height: 1px; background: var(--border-strong); }

/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   Light identity band / drawer headers; civic-blue interaction; readable secondary text.
   ══════════════════════════════════════════════════════════════ */
.imp-hero[b-fsnsto85e5] {
    padding: 20px 24px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

    .imp-hero[b-fsnsto85e5]::before,
    .imp-hero[b-fsnsto85e5]::after {
        display: none;
    }

.imp-hero-icon[b-fsnsto85e5] {
    border-color: transparent;
    background: var(--accent-soft);
}

    .imp-hero-icon svg[b-fsnsto85e5] {
        stroke: var(--navy) !important;
    }

.imp-hero-eyebrow[b-fsnsto85e5] {
    color: var(--text-tertiary);
}

.imp-hero-title[b-fsnsto85e5],
.imp-hero-val[b-fsnsto85e5] {
    color: var(--navy);
}

.imp-hero-val[b-fsnsto85e5] {
    font-variant-numeric: tabular-nums;
}

.imp-hero-sub[b-fsnsto85e5],
.imp-hero-sub2[b-fsnsto85e5] {
    color: var(--text-tertiary);
}

.imp-hero-key[b-fsnsto85e5] {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.imp-hero-divider[b-fsnsto85e5] {
    background: var(--border);
}

.imp-hero-progress[b-fsnsto85e5] {
    height: 3px;
    background: var(--surface-muted);
}

.imp-hero-progress-fill[b-fsnsto85e5] {
    background: var(--accent);
}

/* ── Civic-blue variant (opt-in): the same band the Operations heroes use, with the three steps inside it ── */
.imp-hero-blue[b-fsnsto85e5] {
    background: var(--civic-panel);
    border-color: transparent;
    box-shadow: none;
    color: #ffffff;
}

.imp-hero-blue .imp-hero-icon[b-fsnsto85e5] { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); }
.imp-hero-blue .imp-hero-icon svg[b-fsnsto85e5] { stroke: #ffffff !important; }
.imp-hero-blue .imp-hero-eyebrow[b-fsnsto85e5] { color: rgba(255, 255, 255, 0.78); }
.imp-hero-blue .imp-hero-title[b-fsnsto85e5] { color: #ffffff; }
.imp-hero-blue .imp-hero-sub[b-fsnsto85e5] { color: rgba(255, 255, 255, 0.82); }
.imp-hero-blue .imp-step[b-fsnsto85e5] { color: rgba(255, 255, 255, 0.72); }
.imp-hero-blue .imp-step-no[b-fsnsto85e5] { background: rgba(255, 255, 255, 0.18); color: #ffffff; }
.imp-hero-blue .imp-step.active[b-fsnsto85e5] { color: #ffffff; }
.imp-hero-blue .imp-step.active .imp-step-no[b-fsnsto85e5] { background: #ffffff; color: var(--civic-panel); }
.imp-hero-blue .imp-step.done[b-fsnsto85e5] { color: rgba(255, 255, 255, 0.9); }
.imp-hero-blue .imp-step.done .imp-step-no[b-fsnsto85e5] { background: rgba(255, 255, 255, 0.32); color: #ffffff; }
.imp-hero-blue .imp-step-line[b-fsnsto85e5] { background: rgba(255, 255, 255, 0.35); }
/* /Components/Shared/ImportLink.razor.rz.scp.css */
.imp-link[b-o3laaj8v3j] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none;
    background: none; border: none; cursor: pointer; padding: 0;
}
.imp-link[b-o3laaj8v3j]  svg { width: 15px; height: 15px; }
.imp-link:hover[b-o3laaj8v3j] { color: var(--accent); }
/* /Components/Shared/ImportResultCard.razor.rz.scp.css */
/* Import result card — moved verbatim from the stallholder import. */
/* ── State panels (unsupported / saved) ── */
.imp-state[b-zmm9vavq5x] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center; min-height: 300px; padding: 40px 20px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
}
.imp-state-ok[b-zmm9vavq5x] { border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
.imp-state-badge[b-zmm9vavq5x] {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--green-bg); color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.imp-state-badge svg[b-zmm9vavq5x] { width: 28px; height: 28px; }
.imp-state-title[b-zmm9vavq5x] { font-size: 17px; font-weight: 800; color: var(--navy); }
.imp-state-text[b-zmm9vavq5x] { font-size: 13px; color: var(--text-muted); max-width: 460px; line-height: 1.5; }
.imp-state-actions[b-zmm9vavq5x] { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

@media (max-width: 760px) {
    .imp-hero[b-zmm9vavq5x] { padding: 18px; }
    .imp-hero-title[b-zmm9vavq5x] { font-size: 18px; }
    .imp-steps[b-zmm9vavq5x] { width: 100%; }
}


/* ── Import results / errors ── */
.imp-state-badge.warn[b-zmm9vavq5x] { background: rgba(200, 168, 75, .16); color: #8a6d1b; }

.imp-result-errors[b-zmm9vavq5x] {
    width: 100%; max-width: 720px; margin-top: 8px;
    display: flex; flex-direction: column; gap: 6px;
    max-height: 240px; overflow: auto;
    text-align: left;
}
.imp-result-err-row[b-zmm9vavq5x] {
    display: grid; grid-template-columns: 70px minmax(120px, 1fr) 1.4fr; gap: 10px; align-items: baseline;
    background: var(--red-bg); border: 1px solid color-mix(in srgb, var(--red) 22%, transparent);
    border-radius: 8px; padding: 7px 11px; font-size: 12.5px;
}
.imp-result-err-row-no[b-zmm9vavq5x] { font-weight: 700; color: var(--red); white-space: nowrap; }
.imp-result-err-row-name[b-zmm9vavq5x] { color: var(--navy); font-weight: 600; }
.imp-result-err-row-msg[b-zmm9vavq5x] { color: var(--red); }


@media (max-width: 640px) {
    .imp-result-err-row[b-zmm9vavq5x] { grid-template-columns: 1fr; gap: 2px; }
}
/* /Components/Shared/ImportReviewBar.razor.rz.scp.css */
/* Import review bar — moved verbatim from the stallholder import. */
/* ── Review bar ── */
.imp-review-bar[b-stxa1liviy] {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 18px; margin-bottom: 14px;
}
.imp-review-left[b-stxa1liviy] { display: flex; align-items: center; gap: 14px; }
.imp-review-count[b-stxa1liviy] {
    font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1;
    background: var(--bg-icon); border-radius: 10px; padding: 8px 14px; font-variant-numeric: tabular-nums;
}
.imp-review-title[b-stxa1liviy] { font-size: 14px; font-weight: 700; color: var(--navy); }
.imp-review-sub[b-stxa1liviy] { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.imp-review-actions[b-stxa1liviy] { display: flex; gap: 10px; flex-wrap: wrap; }

.imp-review-detail[b-stxa1liviy] { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* /Components/Shared/ImportUploadCard.razor.rz.scp.css */
/* Import upload card — moved verbatim from the stallholder import. */
/* ── Upload card ── */
.imp-upload-card[b-bmuwhzby10] {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 22px; box-shadow: 0 1px 2px rgba(13, 33, 55, .04);
}
.imp-drop[b-bmuwhzby10] {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    border: 2px dashed var(--border); border-radius: 12px;
    padding: 40px 20px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.imp-drop:hover[b-bmuwhzby10] { border-color: var(--accent); background: var(--bg); }
/* Hide the native file input rendered by <InputFile>. It lives inside a child component, so the
   scoped class alone won't reach it — ::deep does. The whole dropzone stays the clickable target. */
.imp-drop[b-bmuwhzby10]  input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0; color: transparent;
}
.imp-drop-icon[b-bmuwhzby10] {
    width: 52px; height: 52px; border-radius: 14px; background: var(--bg-icon); color: var(--navy);
    display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.imp-drop-icon svg[b-bmuwhzby10] { width: 24px; height: 24px; }
.imp-drop-title[b-bmuwhzby10] { font-size: 15px; font-weight: 700; color: var(--navy); }
.imp-drop-sub[b-bmuwhzby10] { font-size: 12.5px; color: var(--text-muted); }
.imp-drop-err[b-bmuwhzby10] { font-size: 12.5px; color: var(--red); margin-top: 6px; }

.imp-upload-foot[b-bmuwhzby10] {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    margin-top: 16px;
}
.imp-foot-sep[b-bmuwhzby10] { color: var(--text-subtle); }

.imp-cols-preview[b-bmuwhzby10] { margin-top: 20px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.imp-cols-label[b-bmuwhzby10] { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.imp-cols-chips[b-bmuwhzby10] { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-chip[b-bmuwhzby10] {
    font-size: 11.5px; font-weight: 600; color: var(--text);
    background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
}

/* How to record a space let without a contract. A note about the office's own paperwork, in the document's voice. */
.imp-cols-preview[b-bmuwhzby10]  .imp-cols-note {
    margin-top: 16px;
    padding: 13px 16px;
    /* Matched to the payment-history note so both imports explain themselves the same way. Muted body text with the
       key column names in navy: the emphasis carries the meaning, and a full-strength paragraph competes with the
       table below it. */
    border-left: 3px solid var(--navy, #0b2239);
    border-radius: 0 9px 9px 0;
    background: var(--bg-page, #f4f6f9);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-muted);
}

.imp-cols-preview[b-bmuwhzby10]  .imp-cols-note strong {
    font-weight: 700;
    color: var(--navy);
}
/* /Components/Shared/InstrumentChip.razor.rz.scp.css */
.ic[b-3nsprnl1a1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.ic-code[b-3nsprnl1a1] {
    display: inline-flex;
    min-width: 30px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--navy);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}

.ic-or .ic-code[b-3nsprnl1a1] {
    border-color: color-mix(in srgb, var(--gold) 55%, var(--border));
    background: color-mix(in srgb, var(--gold) 9%, var(--surface));
}

.ic-name[b-3nsprnl1a1] {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ic-sr[b-3nsprnl1a1] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Shared/LiveClock.razor.rz.scp.css */
.live-clock[b-v84fwi0ccd] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    user-select: none;
}

.live-clock-icon[b-v84fwi0ccd] {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.live-clock-text[b-v84fwi0ccd] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.live-clock-date[b-v84fwi0ccd] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
}

.live-clock-time[b-v84fwi0ccd] {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: #fff;
}

/* Hide the clock when printing — it isn't part of the report content. */
@media print {
    .live-clock[b-v84fwi0ccd] { display: none !important; }
}
/* /Components/Shared/MarketRentReminder.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   MarketRentReminder — the one-time confirmation of an LGU's monthly market rent.
   Deliberately the same calm dialog as the two-factor offer: the figure in force
   is correct until the office says otherwise, so nothing here is coloured as a
   fault. Government paper, not an alarm.
   ══════════════════════════════════════════════════════════════════════════════ */
.rent-confirm-backdrop[b-5n0jtehhfw] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 22, 35, .5);
}

.rent-confirm[b-5n0jtehhfw] {
    position: fixed;
    z-index: 2001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px));
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(15, 35, 55, .24);
}

.rent-confirm-mark[b-5n0jtehhfw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: rgba(200, 168, 75, .16);
    color: var(--accent);
}

    .rent-confirm-mark svg[b-5n0jtehhfw] {
        width: 21px;
        height: 21px;
    }

.rent-confirm-title[b-5n0jtehhfw] {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
}

.rent-confirm-text[b-5n0jtehhfw] {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}

    .rent-confirm-text strong[b-5n0jtehhfw] {
        color: var(--navy);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

.rent-confirm-note[b-5n0jtehhfw] {
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-subtle);
}

    .rent-confirm-note strong[b-5n0jtehhfw] {
        color: var(--navy);
        font-weight: 700;
    }

.rent-confirm-error[b-5n0jtehhfw] {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
    color: var(--danger, #b3261e);
}

.rent-confirm-actions[b-5n0jtehhfw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.rent-confirm-later[b-5n0jtehhfw],
.rent-confirm-secondary[b-5n0jtehhfw],
.rent-confirm-go[b-5n0jtehhfw] {
    height: 36px;
    padding: 0 15px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    border-radius: 9px;
    cursor: pointer;
}

.rent-confirm-later[b-5n0jtehhfw] {
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
}

    .rent-confirm-later:hover[b-5n0jtehhfw] {
        color: var(--navy);
    }

.rent-confirm-secondary[b-5n0jtehhfw] {
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
}

    .rent-confirm-secondary:hover[b-5n0jtehhfw] {
        border-color: var(--navy);
    }

.rent-confirm-go[b-5n0jtehhfw] {
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
}

    .rent-confirm-go:hover[b-5n0jtehhfw] {
        background: var(--accent-hover);
    }

.rent-confirm-later:disabled[b-5n0jtehhfw],
.rent-confirm-secondary:disabled[b-5n0jtehhfw],
.rent-confirm-go:disabled[b-5n0jtehhfw] {
    opacity: .6;
    cursor: default;
}

@media (max-width: 520px) {
    .rent-confirm-actions[b-5n0jtehhfw] {
        flex-wrap: wrap;
    }
}

@media print {
    .rent-confirm[b-5n0jtehhfw],
    .rent-confirm-backdrop[b-5n0jtehhfw] {
        display: none !important;
    }
}

/* ── Which rule a month is measured by ──
   Two answers, each stated in the office's own figures. Built from the dialog's existing tokens: this is the same calm
   notice, asking one more question, not a second design. */
/* Side by side, so the two rules are compared rather than read in sequence. Stacks on a narrow screen. */
.rent-basis-choices[b-5n0jtehhfw] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
@media (max-width: 560px) { .rent-basis-choices[b-5n0jtehhfw] { grid-template-columns: 1fr; } }
.rent-basis-choice[b-5n0jtehhfw] {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px;
    align-items: start; padding: 12px 13px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 11px; background: var(--bg);
}
.rent-basis-choice input[b-5n0jtehhfw] { grid-row: 1 / span 2; margin-top: 3px; accent-color: var(--navy); }
.rent-basis-on[b-5n0jtehhfw] { border-color: var(--accent); }
.rent-basis-name[b-5n0jtehhfw] { font-size: 13.5px; font-weight: 700; color: var(--text); }
.rent-basis-meta[b-5n0jtehhfw] { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
/* /Components/Shared/MfaReminderPrompt.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   MfaReminderPrompt — the one-time offer of two-factor for a Head.
   Deliberately a calm notice, not an alarm: two-factor is recommended here,
   never demanded, so the copy and the buttons carry no warning colour.
   ══════════════════════════════════════════════════════════════════════ */
.mfa-remind-backdrop[b-s3q9e7huwt] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 22, 35, .5);
}

.mfa-remind[b-s3q9e7huwt] {
    position: fixed;
    z-index: 2001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(430px, calc(100vw - 32px));
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(15, 35, 55, .24);
}

.mfa-remind-mark[b-s3q9e7huwt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: rgba(200, 168, 75, .16);
    color: var(--accent);
}

    .mfa-remind-mark svg[b-s3q9e7huwt] {
        width: 21px;
        height: 21px;
    }

.mfa-remind-title[b-s3q9e7huwt] {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
}

.mfa-remind-text[b-s3q9e7huwt] {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}

.mfa-remind-note[b-s3q9e7huwt] {
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-subtle);
}

    .mfa-remind-note strong[b-s3q9e7huwt] {
        color: var(--navy);
        font-weight: 700;
    }

.mfa-remind-actions[b-s3q9e7huwt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.mfa-remind-later[b-s3q9e7huwt],
.mfa-remind-go[b-s3q9e7huwt] {
    height: 36px;
    padding: 0 15px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    border-radius: 9px;
    cursor: pointer;
}

.mfa-remind-later[b-s3q9e7huwt] {
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
}

    .mfa-remind-later:hover[b-s3q9e7huwt] {
        border-color: var(--navy);
    }

.mfa-remind-go[b-s3q9e7huwt] {
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
}

    .mfa-remind-go:hover[b-s3q9e7huwt] {
        background: var(--accent-hover);
    }

.mfa-remind-later:disabled[b-s3q9e7huwt],
.mfa-remind-go:disabled[b-s3q9e7huwt] {
    opacity: .6;
    cursor: default;
}

@media print {
    .mfa-remind[b-s3q9e7huwt],
    .mfa-remind-backdrop[b-s3q9e7huwt] {
        display: none !important;
    }
}
/* /Components/Shared/MonthlyPaymentCalendar.razor.rz.scp.css */
/* ══════════════════════════════════════════
   MONTHLY PAYMENT CALENDAR
══════════════════════════════════════════ */

.monthly-cal-section[b-cxf04rlqr1] {
    margin-top: 0;
}

.mo-cal-grid[b-cxf04rlqr1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin: 12px 0;
}

.mo-cal-cell[b-cxf04rlqr1] {
    position: relative;
    height: 72px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--bg-card);
}

.mo-cell-header[b-cxf04rlqr1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex: 1;
}

.mo-cell-name[b-cxf04rlqr1] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--navy);
    line-height: 1;
}

.mo-status-icon[b-cxf04rlqr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .mo-status-icon svg[b-cxf04rlqr1] {
        width: 9px;
        height: 9px;
        fill: none;
        stroke-width: 2.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.mo-icon-yes[b-cxf04rlqr1] {
    background: var(--navy);
}

    .mo-icon-yes svg[b-cxf04rlqr1] {
        stroke: #fff;
    }

.mo-icon-partial[b-cxf04rlqr1] {
    background: #f59e0b;
}

    .mo-icon-partial svg[b-cxf04rlqr1] {
        stroke: #fff;
    }

.mo-icon-no[b-cxf04rlqr1] {
    background: transparent;
    border: 1.5px solid var(--border);
}

    .mo-icon-no svg[b-cxf04rlqr1] {
        stroke: var(--text-muted);
    }

.mo-overlay-label[b-cxf04rlqr1] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a8fa5;
    pointer-events: none;
    z-index: 1;
}

.mo-overlay-before[b-cxf04rlqr1] {
    color: #a67676;
}

.mo-cell-paid[b-cxf04rlqr1] {
    background: var(--bg-card);
    border-color: var(--navy);
    border-width: 1.5px;
}

.mo-cell-partial[b-cxf04rlqr1] {
    background: #fff8e1;
    border-color: #f59e0b;
    border-width: 1.5px;
}

.mo-cell-miss[b-cxf04rlqr1] {
    background: var(--bg);
    border-color: #c5d1dc;
}

.mo-cell-future[b-cxf04rlqr1] {
    background: rgba(168, 184, 200, 0.08);
    border-color: #c5d1dc;
    border-width: 1.5px;
}

.mo-cell-before-contract[b-cxf04rlqr1] {
    background: rgba(139, 58, 58, 0.04);
    border-color: #d4a5a5;
    border-width: 1.5px;
}

.mo-cell-today[b-cxf04rlqr1] {
    border-color: var(--gold) !important;
    border-width: 2px;
}

.mo-cell:hover:not(.mo-cell-future):not(.mo-cell-before-contract)[b-cxf04rlqr1] {
    border-color: var(--navy-2);
    box-shadow: 0 1px 6px rgba(13,33,55,0.09);
}

.mo-cell-clickable[b-cxf04rlqr1] {
    cursor: pointer;
}

    .mo-cell-clickable:hover[b-cxf04rlqr1] {
        transform: translateY(-1px);
        border-color: var(--navy) !important;
        box-shadow: 0 2px 8px rgba(13,33,55,0.15) !important;
    }

/* ══════════════════════════════════════════
   CALENDAR NAVIGATION
══════════════════════════════════════════ */
.cal-nav[b-cxf04rlqr1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cal-nav-btn[b-cxf04rlqr1] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .cal-nav-btn:hover:not(:disabled)[b-cxf04rlqr1] {
        background: var(--bg-icon);
        border-color: var(--navy);
    }

    .cal-nav-btn:disabled[b-cxf04rlqr1] {
        opacity: .4;
        cursor: default;
    }

    .cal-nav-btn svg[b-cxf04rlqr1] {
        width: 14px;
        height: 14px;
        stroke: var(--navy);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.cal-month-label[b-cxf04rlqr1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    flex: 1;
}

/* ══════════════════════════════════════════
   FOOTER STATS
══════════════════════════════════════════ */
.cal-footer-stats[b-cxf04rlqr1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-top: 12px;
}

.cal-sum-item[b-cxf04rlqr1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 14px 16px 12px;
    border-radius: 10px;
    border: 1.5px solid #c5d1dc;
    background: var(--bg);
    min-height: 72px;
}

.cal-sum-val[b-cxf04rlqr1] {
    font-weight: 800;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.cal-sum-green[b-cxf04rlqr1] {
    color: var(--navy);
}

.cal-sum-key[b-cxf04rlqr1] {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    line-height: 1.4;
}

/* ══════════════════════════════════════════
   MONTHLY SUMMARY STATS
══════════════════════════════════════════ */
.monthly-summary[b-cxf04rlqr1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.monthly-stat[b-cxf04rlqr1] {
    padding: 12px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: left;
    transition: all 0.15s;
}

    .monthly-stat:hover[b-cxf04rlqr1] {
        border-color: var(--gold);
        box-shadow: 0 2px 8px rgba(200,168,75,0.1);
    }

.monthly-stat-val[b-cxf04rlqr1] {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 4px;
}

.monthly-stat-key[b-cxf04rlqr1] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.monthly-stat-green .monthly-stat-val[b-cxf04rlqr1] {
    color: var(--green);
}

.monthly-stat-red .monthly-stat-val[b-cxf04rlqr1] {
    color: var(--red);
}

.monthly-stat-gold .monthly-stat-val[b-cxf04rlqr1] {
    color: #c8900a;
}

/* ══════════════════════════════════════════
   DETAIL MODAL STYLES
══════════════════════════════════════════ */
.detail-section[b-cxf04rlqr1] {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    min-width: 0;
    box-sizing: border-box;
}

    .detail-section:last-child[b-cxf04rlqr1] {
        border-bottom: none;
    }

.detail-section-title[b-cxf04rlqr1] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

    .detail-section-title svg[b-cxf04rlqr1] {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.detail-info-row[b-cxf04rlqr1] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    min-height: 28px;
}

    .detail-info-row:last-child[b-cxf04rlqr1] {
        border-bottom: none;
    }

.detail-info-key[b-cxf04rlqr1] {
    min-width: 140px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 12px;
}

.detail-info-val[b-cxf04rlqr1] {
    color: var(--text);
    font-weight: 500;
    flex: 1;
}

.hist-label[b-cxf04rlqr1] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.hist-grid[b-cxf04rlqr1] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.hist-month[b-cxf04rlqr1] {
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    border: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 64px;
    transition: all 0.15s;
}

    .hist-month:hover[b-cxf04rlqr1] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13,33,55,0.12);
    }

.hist-paid[b-cxf04rlqr1] {
    background: var(--green-bg);
    border-color: var(--green);
}

.hist-unpaid[b-cxf04rlqr1] {
    background: var(--red-bg);
    border-color: #d9b0b0;
}

.hist-month-name[b-cxf04rlqr1] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--navy);
    line-height: 1;
}

.hist-month-year[b-cxf04rlqr1] {
    font-size: 11px;
    color: var(--text-subtle);
    font-weight: 600;
    opacity: 0.7;
}

.hist-month-icon[b-cxf04rlqr1] {
    font-size: 16px;
    font-weight: 700;
    color: var(--green);
}

.hist-unpaid .hist-month-icon[b-cxf04rlqr1] {
    color: var(--red);
}

.hist-summary[b-cxf04rlqr1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.act-stat[b-cxf04rlqr1] {
    padding: 12px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: center;
    transition: all 0.15s;
}

    .act-stat:hover[b-cxf04rlqr1] {
        border-color: var(--gold);
        box-shadow: 0 2px 8px rgba(200,168,75,0.1);
    }

.act-stat-val[b-cxf04rlqr1] {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.act-stat-key[b-cxf04rlqr1] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}


/* ══════════════════════════════════════════
   PAYMENT MODAL STYLES
══════════════════════════════════════════ */
.payment-modal-info[b-cxf04rlqr1] {
    background: var(--bg);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.payment-info-row[b-cxf04rlqr1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

    .payment-info-row:last-child[b-cxf04rlqr1] {
        border-bottom: none;
    }

.payment-info-label[b-cxf04rlqr1] {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.payment-info-value[b-cxf04rlqr1] {
    font-size: 14px;
    color: var(--navy);
    font-weight: 600;
}

.payment-balance[b-cxf04rlqr1] {
    background: #fff8e1;
    margin: 8px -16px -16px;
    padding: 12px 16px;
    border-radius: 0 0 10px 10px;
}

.payment-balance-amount[b-cxf04rlqr1] {
    color: #f59e0b;
    font-size: 16px;
    font-weight: 700;
}

.payment-status-badge[b-cxf04rlqr1] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-paid[b-cxf04rlqr1] {
    background: var(--green-bg);
    color: var(--green);
}

.status-partial[b-cxf04rlqr1] {
    background: #fff8e1;
    color: #f59e0b;
}

.status-unpaid[b-cxf04rlqr1] {
    background: var(--red-bg);
    color: var(--red);
}

.payment-action-section[b-cxf04rlqr1] {
    margin-top: 16px;
}

.payment-status-options[b-cxf04rlqr1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.payment-status-btn[b-cxf04rlqr1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

    .payment-status-btn svg[b-cxf04rlqr1] {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .payment-status-btn:hover[b-cxf04rlqr1] {
        border-color: var(--navy);
        background: var(--bg-icon);
    }

    .payment-status-btn.active[b-cxf04rlqr1] {
        border-color: var(--navy);
        background: var(--navy);
        color: #fff;
    }


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Monthly Payment (Collection Management) calendar (≤768px).
   Desktop untouched. Shrinks the 12-month grid + footer cards so the whole
   calendar fits comfortably on a phone.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mo-cal-grid[b-cxf04rlqr1] {
        gap: 4px;
        margin: 10px 0;
    }

    /* Shorter, tighter month cells so all 12 (4×3) fit without a huge scroll. */
    .mo-cal-cell[b-cxf04rlqr1] {
        height: 56px;
        padding: 5px 3px;
        border-radius: 7px;
    }

    .mo-cell-name[b-cxf04rlqr1] {
        font-size: 11px;
        letter-spacing: 0.3px;
    }

    .mo-cell-header[b-cxf04rlqr1] {
        gap: 4px;
    }

    /* Footer summary cards: keep 2-up but drop the tall min-height and heavy padding. */
    .cal-footer-stats[b-cxf04rlqr1] {
        gap: 8px;
    }

    .cal-sum-item[b-cxf04rlqr1] {
        padding: 10px 12px;
        min-height: 0;
    }

    .cal-sum-val[b-cxf04rlqr1] {
        font-size: 17px;
    }
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.detail-section[b-cxf04rlqr1] {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.payment-status-btn.active[b-cxf04rlqr1] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--surface);
}
/* /Components/Shared/NpmOccupancyVendorContext.razor.rz.scp.css */
.npm-occupancy-context[b-z154vz0cr3] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; font-size: 13px; }
/* /Components/Shared/NpmVendorLinkedContext.razor.rz.scp.css */
.npm-linked-context[b-1wyqn2zohe] { display: grid; gap: 5px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; font-size: 13px; overflow-wrap: anywhere; }
.npm-linked-context small[b-1wyqn2zohe] { color: #64748b; }
.npm-linked-context a[b-1wyqn2zohe] { color: #245ca4; }
/* /Components/Shared/NpmVendorRegistrationWorkflow.razor.rz.scp.css */
.npm-link-options[b-45o673ilh0] { display: grid; gap: 10px; margin: 14px 0; font-size: .8125rem; }
.npm-link-options label[b-45o673ilh0] { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: 8px; }
.npm-link-options label span[b-45o673ilh0] { grid-column: 2; color: var(--text-secondary); font-size: .75rem; margin-top: 3px; }
.npm-link-filters[b-45o673ilh0] { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.npm-link-candidate[b-45o673ilh0] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px; margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); cursor: pointer; font: inherit; }
.npm-link-candidate:hover[b-45o673ilh0] { border-color: var(--accent); background: var(--bg); }
.npm-link-candidate:focus-visible[b-45o673ilh0], summary:focus-visible[b-45o673ilh0] { outline: 2px solid var(--accent); outline-offset: 2px; }
.npm-link-identity[b-45o673ilh0] { display: grid; gap: 4px; min-width: 0; }
.npm-link-identity strong[b-45o673ilh0] { font-size: .875rem; overflow-wrap: anywhere; }
.npm-link-identity span[b-45o673ilh0], .npm-link-identity small[b-45o673ilh0] { font-size: .75rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.npm-link-chevron[b-45o673ilh0] { color: var(--accent); flex-shrink: 0; }
.npm-link-summary h3[b-45o673ilh0] { margin: 0 0 6px; font-size: 1rem; overflow-wrap: anywhere; }
.npm-link-summary p[b-45o673ilh0], .npm-link-section p[b-45o673ilh0] { font-size: .8125rem; line-height: 1.5; margin: 6px 0 12px; color: var(--text-secondary); }
.npm-link-facts[b-45o673ilh0] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 12px 0; font-size: .8125rem; }
.npm-link-facts dt[b-45o673ilh0] { font-size: .75rem; color: var(--text-secondary); }
.npm-link-facts dd[b-45o673ilh0] { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.npm-link-evidence[b-45o673ilh0] { font-size: .75rem; margin: 10px 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.npm-link-evidence summary[b-45o673ilh0] { cursor: pointer; padding: 3px 0; }
.npm-link-section[b-45o673ilh0] { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.npm-link-section h3[b-45o673ilh0] { font-size: .9375rem; margin: 0 0 10px; }
.npm-link-section .avm-group[b-45o673ilh0] { margin-top: 14px; min-width: 0; }
.npm-link-record[b-45o673ilh0], .npm-link-confirmation[b-45o673ilh0] { display: grid; gap: 6px; padding: 10px 0; font-size: .8125rem; overflow-wrap: anywhere; }
.npm-link-record + .npm-link-record[b-45o673ilh0] { border-top: 1px solid var(--border); }
.npm-link-record a[b-45o673ilh0], .npm-link-evidence a[b-45o673ilh0] { color: var(--accent); }
.npm-link-record button[b-45o673ilh0] { justify-self: start; }
.npm-link-confirmation[b-45o673ilh0] { border-left: 3px solid var(--accent); padding-left: 12px; margin-top: 14px; }
.npm-link-confirmation span[b-45o673ilh0] { color: var(--text-secondary); font-size: .75rem; }
@media (max-width: 480px) { .npm-link-facts[b-45o673ilh0] { grid-template-columns: minmax(0,1fr); } }
/* /Components/Shared/ObligationHolderDetails.razor.rz.scp.css */
.holder-details[b-33k1tr4ugx]{width:min(840px,calc(100vw - 32px));max-height:calc(100dvh - 40px);display:flex;flex-direction:column;background:var(--surface,#fff);border-radius:12px;overflow:hidden;box-shadow:0 18px 50px #142b4b35;color:var(--navy,#142c47)}
.ohd-header[b-33k1tr4ugx]{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 28px 18px;border-bottom:1px solid var(--border,#d9e2ed)}
.ohd-header h2[b-33k1tr4ugx]{margin:0;font-size:22px;line-height:1.25}
.ohd-sub[b-33k1tr4ugx]{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--text-secondary,#586b81);font-size:13px;margin-top:7px}
.ohd-close[b-33k1tr4ugx]{border:1px solid var(--border,#d9e2ed);border-radius:7px;background:transparent;color:var(--text-secondary,#586b81);font-size:24px;line-height:1;width:34px;height:34px;cursor:pointer}
.ohd-body[b-33k1tr4ugx]{padding:20px 28px 22px;overflow-y:auto;min-height:0}
.ohd-stats[b-33k1tr4ugx]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ohd-stats>div[b-33k1tr4ugx]{padding:14px;border:1px solid var(--border,#d9e2ed);border-radius:8px;background:var(--surface-muted,#f5f7fa);min-width:0}
.ohd-stats small[b-33k1tr4ugx]{display:block;font-size:11px;color:var(--text-secondary,#586b81);margin-bottom:7px}
.ohd-stats strong[b-33k1tr4ugx]{font-size:16px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ohd-section[b-33k1tr4ugx]{padding-top:23px;margin-top:20px;border-top:1px solid var(--border,#d9e2ed)}
.ohd-section h3[b-33k1tr4ugx]{text-transform:uppercase;letter-spacing:.10em;font-size:12px;color:var(--text-secondary,#586b81);margin:0 0 15px}
.ohd-section dl[b-33k1tr4ugx]{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.ohd-section dl>div[b-33k1tr4ugx]{min-width:0}.ohd-section dt[b-33k1tr4ugx]{font-size:12px;color:var(--text-secondary,#586b81);margin-bottom:4px}
.ohd-section dd[b-33k1tr4ugx]{font-size:14px;font-weight:600;margin:0;overflow-wrap:anywhere}
.ohd-note[b-33k1tr4ugx]{font-size:12px;line-height:1.5;color:var(--text-secondary,#586b81);padding-top:12px}
.ohd-footer[b-33k1tr4ugx]{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:14px 28px;border-top:1px solid var(--border,#d9e2ed);background:var(--surface,#fff)}
@media(max-width:620px){.holder-details[b-33k1tr4ugx]{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.ohd-header[b-33k1tr4ugx],.ohd-body[b-33k1tr4ugx],.ohd-footer[b-33k1tr4ugx]{padding-left:16px;padding-right:16px}.ohd-stats[b-33k1tr4ugx]{grid-template-columns:1fr 1fr}.ohd-section dl[b-33k1tr4ugx]{grid-template-columns:1fr}.ohd-footer>*[b-33k1tr4ugx]{flex:1 1 auto}}
/* /Components/Shared/ObligationRentalDetails.razor.rz.scp.css */
.rph-modal[b-kn9fw5v2uf]{width:min(1120px,calc(100vw - 36px));max-height:min(88vh,860px);background:#fff;border:1px solid #d4deea;border-radius:15px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 58px rgba(18,38,65,.19);color:#17304d}
.rph-heading[b-kn9fw5v2uf]{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 26px;background:#fff;border-bottom:1px solid #d9e2ec}
.rph-kicker[b-kn9fw5v2uf]{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:#4c6990}
.rph-name[b-kn9fw5v2uf]{font-size:22px;font-weight:750;margin-top:5px}
.rph-sub[b-kn9fw5v2uf]{font-size:12px;color:#5c728a;margin-top:3px}
.rph-x[b-kn9fw5v2uf]{border:1px solid #d5deeb;background:#fff;color:#4f647e;border-radius:8px;width:36px;height:36px;font-size:22px;cursor:pointer;flex-shrink:0}
.rph-stats[b-kn9fw5v2uf]{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:#f2f6fa;border-bottom:1px solid #d6e0e9}
.rph-stats.rph-event[b-kn9fw5v2uf]{grid-template-columns:repeat(5,minmax(0,1fr))}
.rph-stats>div[b-kn9fw5v2uf]{padding:13px 16px;border-right:1px solid #d6e0e9;min-width:0}
.rph-stats>div:last-child[b-kn9fw5v2uf]{border-right:0}
.rph-stats strong[b-kn9fw5v2uf]{display:block;font-size:18px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rph-stats small[b-kn9fw5v2uf]{display:block;font-size:10px;letter-spacing:.025em;color:#5f7185;margin-top:3px}
.rph-body[b-kn9fw5v2uf]{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:18px 24px;flex:1}
.rph-title[b-kn9fw5v2uf]{font-size:14px;font-weight:700;margin-bottom:12px}
.rph-scroll[b-kn9fw5v2uf]{max-width:100%;overflow:auto;border:1px solid #d9e2eb;border-radius:9px}
.rph-table[b-kn9fw5v2uf]{border-collapse:collapse;width:100%;min-width:560px;font-size:12px}
.rph-table th[b-kn9fw5v2uf]{background:#f3f6fa;text-transform:uppercase;letter-spacing:.035em;color:#526a84;font-size:10px;font-weight:700;text-align:left;position:sticky;top:0;z-index:1}
.rph-table td[b-kn9fw5v2uf],.rph-table th[b-kn9fw5v2uf]{padding:11px 14px;border-bottom:1px solid #e3eaf1;vertical-align:middle}
.rph-table tbody tr:last-child td[b-kn9fw5v2uf]{border-bottom:0}
.rph-table tbody tr:nth-child(even)[b-kn9fw5v2uf]{background:#fafcff}
.rph-money[b-kn9fw5v2uf]{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rph-status[b-kn9fw5v2uf]{display:inline-block;padding:4px 9px;border-radius:12px;font-size:11px;color:#596d82;background:#eff3f7;font-weight:650}
.rph-status.paid[b-kn9fw5v2uf]{color:#217458;background:#e4f4ee}
.rph-status.partial[b-kn9fw5v2uf]{color:#966019;background:#fff5da}
.rph-status.unpaid[b-kn9fw5v2uf]{color:#a33f41;background:#fceced}
.rph-hint[b-kn9fw5v2uf]{color:#647990;font-size:11px;line-height:1.5;margin:12px 0 18px}
.rph-history-heading[b-kn9fw5v2uf]{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0}
.rph-history-heading strong[b-kn9fw5v2uf]{margin-right:auto;font-size:13px}
.rph-history-heading label[b-kn9fw5v2uf]{font-size:12px;color:#536b83}
.rph-history-heading input[b-kn9fw5v2uf]{width:auto;min-width:170px}
.rph-line[b-kn9fw5v2uf]{display:block;color:#647990;overflow-wrap:anywhere}
.rph-footer[b-kn9fw5v2uf]{border-top:1px solid #d9e2eb;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#647990;font-size:11px;background:#f7fafc}
@media(max-width:780px){.rph-modal[b-kn9fw5v2uf]{width:calc(100vw - 18px);max-height:92vh}.rph-stats[b-kn9fw5v2uf]{grid-template-columns:repeat(3,minmax(0,1fr))}.rph-stats.rph-event[b-kn9fw5v2uf]{grid-template-columns:repeat(2,minmax(0,1fr))}.rph-stats>div[b-kn9fw5v2uf]{padding:10px}.rph-heading[b-kn9fw5v2uf]{padding:16px}.rph-body[b-kn9fw5v2uf]{padding:13px}.rph-footer[b-kn9fw5v2uf]{padding:12px}.rph-stats strong[b-kn9fw5v2uf]{font-size:15px}}
@media(max-width:420px){.rph-stats[b-kn9fw5v2uf]{grid-template-columns:repeat(2,minmax(0,1fr))}.rph-heading[b-kn9fw5v2uf]{gap:8px}.rph-name[b-kn9fw5v2uf]{font-size:19px}.rph-footer>span[b-kn9fw5v2uf]{max-width:185px}}
/* /Components/Shared/ObligationWorkspace.razor.rz.scp.css */
/* Obligation workspace — V3. Panels, tables, fields and buttons come from the v3- layer in app.css. */
.obw-lifecycle[b-g98ffras7h] { display: inline-flex; gap: 0; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface-muted); }
.obw-lifecycle .v3-btn[b-g98ffras7h] { flex: 1; min-height: 34px; border: 0; border-radius: 0; }
.obw-lifecycle .v3-btn + .v3-btn[b-g98ffras7h] { border-left: 1px solid var(--border); }
.obw-lifecycle .v3-btn:first-child[b-g98ffras7h] { border-radius: 6px 0 0 6px; }
.obw-lifecycle .v3-btn:last-child[b-g98ffras7h] { border-radius: 0 6px 6px 0; }
.obw-lifecycle button[aria-pressed="true"][b-g98ffras7h] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.obw-account-facts[b-g98ffras7h] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; max-width: 720px; margin: 12px 0 16px; }
.obw-account-facts div[b-g98ffras7h] { min-width: 0; }
.obw-account-facts dt[b-g98ffras7h] { color: var(--text-secondary); font-size: 12px; }
.obw-account-facts dd[b-g98ffras7h] { margin: 3px 0 0; color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.obw-register[b-g98ffras7h] { max-width: 900px; }
@media (max-width: 768px) { .obw-account-facts[b-g98ffras7h] { grid-template-columns: minmax(0, 1fr); } }

/* Keep every balance and action visible when the sidebar leaves less room for the register. */
@media (max-width: 1200px) {
    .obw-management-table[b-g98ffras7h], .obw-management-table > tbody[b-g98ffras7h], .obw-management-table > tfoot[b-g98ffras7h] { display: block; width: 100%; }
    .obw-management-table > thead[b-g98ffras7h] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .obw-management-table > tbody > tr:not(.obw-register-row)[b-g98ffras7h] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px 12px; border-bottom: 1px solid var(--border); }
    .obw-management-table > tbody > tr > td[b-g98ffras7h] { min-width: 0; padding: 8px; border: 0; text-align: left; overflow-wrap: anywhere; white-space: normal; }
    .obw-management-table td[data-label][b-g98ffras7h]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500; color: var(--text-secondary); }
    .obw-management-table .obw-actions-cell[b-g98ffras7h] { grid-column: 1 / -1; text-align: left; }
    .obw-management-table .v3-empty[b-g98ffras7h] { grid-column: 1 / -1; }
    .obw-management-table .obw-register-row[b-g98ffras7h], .obw-management-table .obw-register-row > td[b-g98ffras7h] { display: block; width: 100%; box-sizing: border-box; }
    .obw-management-table > tfoot > tr[b-g98ffras7h] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 12px; }
    .obw-management-table > tfoot td[b-g98ffras7h] { padding: 8px; text-align: left; white-space: normal; }
    .obw-management-table > tfoot td:first-child[b-g98ffras7h] { grid-column: 1 / -1; }
    .obw-management-table > tfoot td:last-child[b-g98ffras7h] { display: none; }
}
@media (max-width: 600px) {
    .obw-management-table > tbody > tr:not(.obw-register-row)[b-g98ffras7h] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .obw-management-table > tfoot > tr[b-g98ffras7h] { grid-template-columns: minmax(0, 1fr); }
    .obw-register th[b-g98ffras7h], .obw-register td[b-g98ffras7h] { padding: 8px 6px; font-size: 11px; }
    .obw-register th[b-g98ffras7h] { white-space: normal; letter-spacing: 0; font-size: 10px; overflow-wrap: normal; }
}

.obw-layout[b-g98ffras7h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    align-items: start;
    gap: 20px;
}

.obw-layout:not(:has(aside))[b-g98ffras7h] {
    grid-template-columns: minmax(0, 1fr);
}

.obw-actions[b-g98ffras7h] {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
}
.obw-actions-cell[b-g98ffras7h] { text-align: right; }
.obw-actions .v3-btn[b-g98ffras7h] { border: 0; border-radius: 0; min-height: 34px; padding: 6px 9px; }
.obw-actions .v3-btn + .v3-btn[b-g98ffras7h] { border-left: 1px solid var(--border); }
.obw-actions .v3-btn:first-child[b-g98ffras7h] { border-radius: 6px 0 0 6px; }
.obw-actions .v3-btn:last-child[b-g98ffras7h] { border-radius: 0 6px 6px 0; }
.obw-actions .v3-btn:only-child[b-g98ffras7h] { border-radius: 6px; }
.obw-actions .v3-btn:focus-visible[b-g98ffras7h], .obw-lifecycle .v3-btn:focus-visible[b-g98ffras7h] { position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .obw-actions[b-g98ffras7h] { display: flex; } .obw-actions .v3-btn[b-g98ffras7h] { flex: 1; min-width: 0; min-height: 38px; padding: 6px; white-space: normal; } }
.obw-success[b-g98ffras7h] { margin: 16px 0 0; background: var(--green-bg); color: var(--green); border-color: var(--green); }

.obw-register-row > td[b-g98ffras7h] {
    padding: 4px 20px 16px;
    background: var(--surface-muted);
}

.obw-retry[b-g98ffras7h] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 20px 0;
}

.obw-form[b-g98ffras7h] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
}

.obw-form-actions[b-g98ffras7h] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.obw-note[b-g98ffras7h] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .obw-layout[b-g98ffras7h] {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Toolbar links: the same size and rhythm as the shared Toolbar's own actions, so this row matches TCC. */
.obw-actions-bar[b-g98ffras7h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.obw-actions-bar .btn-outline[b-g98ffras7h],
.obw-actions-bar .btn-primary[b-g98ffras7h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.obw-payor-hint[b-g98ffras7h] {
    margin: -4px 0 0;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

.obw-link[b-g98ffras7h] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .obw-link:hover:not(:disabled)[b-g98ffras7h] {
        text-decoration: underline;
    }

    .obw-link:disabled[b-g98ffras7h] {
        color: var(--text-disabled);
        cursor: not-allowed;
    }

/* Five links and actions share the bar with the search and filters: tight enough for one row at laptop width, wrapping below it. */
.obw-actions-bar[b-g98ffras7h] {
    flex-wrap: wrap;
    gap: 6px;
}

.obw-actions-bar .btn-outline[b-g98ffras7h],
.obw-actions-bar .btn-primary[b-g98ffras7h] {
    padding: 6px 10px;
}

@media (max-width: 1280px) {
    .obw-actions-bar[b-g98ffras7h] {
        flex-wrap: wrap;
    }
}

.obw-selected[b-g98ffras7h] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--civic-panel); border-radius: 8px; background: #eaf1f9; }
.obw-selected-name[b-g98ffras7h] { color: var(--navy); font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.obw-results[b-g98ffras7h] { margin: 0; padding: 0; list-style: none; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.obw-results li + li[b-g98ffras7h] { border-top: 1px solid var(--border); }
.obw-option[b-g98ffras7h] { display: block; width: 100%; min-height: 44px; padding: 8px 14px; border: 0; background: transparent; color: var(--navy); font: inherit; font-size: .9375rem; font-weight: 600; text-align: left; cursor: pointer; }
.obw-option:hover[b-g98ffras7h] { background: var(--surface-muted); }
.obw-option:focus-visible[b-g98ffras7h] { outline: 2px solid var(--civic-panel); outline-offset: -2px; }

.obw-advanced-filters[b-g98ffras7h] { position: relative; flex: 0 0 auto; }
.obw-advanced-filters summary[b-g98ffras7h] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; list-style: none; }
.obw-advanced-filters summary[b-g98ffras7h]::-webkit-details-marker { display: none; }
.obw-advanced-filters summary svg[b-g98ffras7h] { width: 16px; height: 16px; }
.obw-advanced-filters summary:hover[b-g98ffras7h] { background: var(--surface-muted); }
.obw-advanced-filters summary:focus-visible[b-g98ffras7h] { outline: 2px solid var(--civic-panel); outline-offset: 2px; }
.obw-advanced-filters label[b-g98ffras7h] { position: absolute; right: 0; top: 38px; z-index: 30; display: grid; gap: 8px; width: 180px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 4px 16px #102b4c1a; font-size: .8125rem; }
.obw-advanced-filters select[b-g98ffras7h] { width: 100%; min-height: 36px; font: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
@media (max-width: 768px) { .obw-advanced-filters label[b-g98ffras7h] { left: 0; right: auto; } }
/* /Components/Shared/OfficeReportShell.razor.rz.scp.css */
.office-report[b-jl2533qt66] { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 24px; color: var(--text-primary); }
.office-report-body[b-jl2533qt66] { margin-top: 20px; }
.office-signatures[b-jl2533qt66] { margin-top: 28px; break-inside: avoid; }
.office-report[b-jl2533qt66]  table { width: 100%; border-collapse: collapse; font-size: 12px; }
.office-report[b-jl2533qt66]  th { background: #eef3f8; color: var(--navy); font-size: 10px; font-weight: 700; letter-spacing: .03em; text-align: left; }
.office-report[b-jl2533qt66]  th, .office-report[b-jl2533qt66]  td { padding: 9px 10px; border: 1px solid var(--border); vertical-align: top; }
.office-report[b-jl2533qt66]  .office-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.office-report[b-jl2533qt66]  tfoot { font-weight: 700; break-inside: avoid; }
.office-report[b-jl2533qt66]  thead { display: table-header-group; }
@media print {
    .office-report[b-jl2533qt66] { border: 0; border-radius: 0; padding: 0; }
    .office-report[b-jl2533qt66]  tr { break-inside: avoid; }
    .office-report[b-jl2533qt66]  th, .office-report[b-jl2533qt66]  td { border-color: #9ca3af; padding: 6px 8px; }
    .office-report[b-jl2533qt66]  .v3-table-wrap { overflow: visible; }
}
@media (max-width: 700px) { .office-report[b-jl2533qt66] { padding: 16px; } }
/* /Components/Shared/OfficialSignatories.razor.rz.scp.css */
.osg[b-9pjydzhyob] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 72px;
    margin-top: 12px;
}

.osg-slot[b-9pjydzhyob] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.osg-caption[b-9pjydzhyob] {
    align-self: stretch;
    margin: 0;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.osg-signature-space[b-9pjydzhyob] {
    display: block;
    width: 100%;
    height: 42px;
}

.osg-name[b-9pjydzhyob] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
}

.osg-blank[b-9pjydzhyob] {
    min-height: 1.25em;
}

.osg-title[b-9pjydzhyob] {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.osg-setup[b-9pjydzhyob] {
    margin: 12px 0 0;
    font-size: 0.8125rem;
}

.osg-setup a[b-9pjydzhyob] {
    color: var(--accent);
}

@media (max-width: 640px) {
    .osg[b-9pjydzhyob] {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media print {
    .osg[b-9pjydzhyob] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 42mm;
        margin-top: 0;
        padding: 0 3mm;
    }

    .osg-caption[b-9pjydzhyob] {
        font-size: 8.5pt;
        color: var(--text);
    }

    .osg-signature-space[b-9pjydzhyob] {
        height: 11mm;
    }

    .osg-name[b-9pjydzhyob] {
        font-size: 9pt;
    }

    .osg-title[b-9pjydzhyob] {
        margin-top: 0.8mm;
        font-size: 8pt;
        color: var(--text-secondary);
    }
}
/* /Components/Shared/OperationTopbar.razor.rz.scp.css */
.tcc-back-btn[b-jpkja69i9e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .tcc-back-btn:hover[b-jpkja69i9e] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

    .tcc-back-btn:focus-visible[b-jpkja69i9e] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .tcc-back-btn svg[b-jpkja69i9e] {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@media (prefers-reduced-motion: reduce) {
    .tcc-back-btn[b-jpkja69i9e] {
        transition: none;
    }
}

/* Only contextual subpages need a longer operation breadcrumb. Existing operation topbars keep their layout. */
.operation-context .topbar-left[b-jpkja69i9e] { min-width: 0; flex: 1; }
.operation-context .topbar-left > div[b-jpkja69i9e] { min-width: 0; }
.operation-context .topbar-title[b-jpkja69i9e],
.operation-context .topbar-breadcrumb[b-jpkja69i9e] { overflow-wrap: anywhere; white-space: normal; }
.operation-context .topbar-right[b-jpkja69i9e] { flex-shrink: 0; }
@media (max-width: 600px) {
    .operation-context .topbar-breadcrumb[b-jpkja69i9e] { flex-wrap: wrap; gap: 2px 4px; }
    .operation-context .breadcrumb-link[b-jpkja69i9e] { white-space: nowrap; }
}
/* /Components/Shared/PayorPicker.razor.rz.scp.css */
/* ============================================================
   PayorPicker.razor.css  —  the payor chooser on the import screens
   Uses --* tokens from app.css; does NOT redefine them.
   ============================================================ */

.pp[b-qw8bqlwlo1] {
    position: relative;
}

/* ── The closed control ──────────────────────────────────── */
.pp-field[b-qw8bqlwlo1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 168px;
    /* 36px, the same height the import table's inputs use (ImportPaymentHistory.razor.css). A button and an input
       compute their content height differently, so the two agreed on padding and still came out different heights -
       one of them sat above the row it belonged to. Stated as a number in both places rather than left to coincide. */
    height: 36px;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    /* 16px so a phone does not zoom the page when the control is focused. */
    font-size: 16px;
    font-family: inherit;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

@media (min-width: 640px) {
    .pp-field[b-qw8bqlwlo1] {
        font-size: 13px;
    }
}

    .pp-field:hover[b-qw8bqlwlo1] {
        border-color: var(--navy);
    }

    .pp-field:focus-visible[b-qw8bqlwlo1] {
        outline: none;
        border-color: var(--navy);
        box-shadow: 0 0 0 3px rgba(13, 33, 55, .10);
    }

    /* Chosen: stated in the page's own ink rather than the muted placeholder grey. */
    .pp-field-set[b-qw8bqlwlo1] {
        color: var(--navy);
        font-weight: 600;
    }

.pp-field-text[b-qw8bqlwlo1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-caret[b-qw8bqlwlo1] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.pp-open .pp-caret[b-qw8bqlwlo1] {
    transform: rotate(180deg);
}

/* ── The dialog ──────────────────────────────────────────── */
/* Fixed to the viewport, so the table that scrolls sideways cannot clip it. The panel used to hang off the field and
   was cut off by that scroll box, appearing to sit behind the table. */
.pp-scrim[b-qw8bqlwlo1] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(13, 33, 55, .38);
}

.pp-dialog[b-qw8bqlwlo1] {
    position: fixed;
    z-index: 1201;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(13, 33, 55, .28);
    overflow: hidden;
}

.pp-head[b-qw8bqlwlo1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
}

.pp-head-eyebrow[b-qw8bqlwlo1] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pp-head-title[b-qw8bqlwlo1] {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    margin-top: 2px;
}

.pp-close[b-qw8bqlwlo1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
}

    .pp-close:hover[b-qw8bqlwlo1] {
        color: var(--navy);
        border-color: var(--navy);
    }

    .pp-close svg[b-qw8bqlwlo1] {
        width: 15px;
        height: 15px;
    }

.pp-panel[b-qw8bqlwlo1] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pp-search[b-qw8bqlwlo1] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-icon, #f6f8fa);
}

    .pp-search svg[b-qw8bqlwlo1] {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        color: var(--text-muted);
    }

.pp-search-input[b-qw8bqlwlo1],
.pp-manual[b-qw8bqlwlo1] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--navy);
}

@media (min-width: 640px) {
    .pp-search-input[b-qw8bqlwlo1],
    .pp-manual[b-qw8bqlwlo1] {
        font-size: 13px;
    }
}

    .pp-search-input:focus[b-qw8bqlwlo1],
    .pp-manual:focus[b-qw8bqlwlo1] {
        outline: none;
    }

.pp-list[b-qw8bqlwlo1] {
    flex: 1;
    min-height: 0;
    max-height: 320px;
    overflow-y: auto;
}

.pp-opt[b-qw8bqlwlo1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .pp-opt:hover[b-qw8bqlwlo1],
    .pp-opt:focus-visible[b-qw8bqlwlo1] {
        background: var(--bg-icon, #f6f8fa);
        outline: none;
    }

    .pp-opt-on[b-qw8bqlwlo1] {
        background: rgba(13, 33, 55, .05);
    }

.pp-opt-name[b-qw8bqlwlo1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The number, or the plain statement that there is none. */
.pp-opt-no[b-qw8bqlwlo1] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.pp-empty[b-qw8bqlwlo1] {
    padding: 14px 12px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ── The escape hatch ────────────────────────────────────── */
/* An office working from an older sheet may need a number nobody occupies today. */
.pp-foot[b-qw8bqlwlo1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
}

.pp-manual-btn[b-qw8bqlwlo1] {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    flex-shrink: 0;
}

    .pp-manual-btn:hover:not(:disabled)[b-qw8bqlwlo1] {
        border-color: var(--navy);
    }

    .pp-manual-btn:disabled[b-qw8bqlwlo1] {
        color: var(--text-muted);
        cursor: default;
    }
/* /Components/Shared/RegisteredRentalTable.razor.rz.scp.css */
.panel[b-pzkia6if8c] { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.table-wrap[b-pzkia6if8c] { overflow-x: auto; }
.monthly-money[b-pzkia6if8c] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.action-btns[b-pzkia6if8c] { display: inline-flex; gap: 4px; }
.action-btn[b-pzkia6if8c] { display: inline-flex; align-items: center; justify-content: center; width: 30px; min-height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); cursor: pointer; }
.action-btn:hover[b-pzkia6if8c] { background: var(--surface-muted); }
.action-btn:focus-visible[b-pzkia6if8c] { outline: 2px solid var(--accent); outline-offset: 2px; }
small[b-pzkia6if8c] { display: block; color: var(--text-secondary); }
@media (max-width: 720px) {
    table[b-pzkia6if8c], tbody[b-pzkia6if8c] { display: block; width: 100%; }
    thead[b-pzkia6if8c] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    tr[b-pzkia6if8c] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; border-bottom: 1px solid var(--border); }
    td[b-pzkia6if8c] { min-width: 0; border: 0; padding: 8px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    td[data-label][b-pzkia6if8c]::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 11px; }
    .rental-actions-cell[b-pzkia6if8c] { grid-column: 1 / -1; }
    .monthly-money[b-pzkia6if8c] { text-align: left; }
    .action-btn[b-pzkia6if8c] { min-width: 38px; min-height: 38px; }
}
/* /Components/Shared/RentalMonitoringReport.razor.rz.scp.css */
.monitor-controls[b-hw1xje8tv5] { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; gap: 12px; }
.monitor-note[b-hw1xje8tv5] { margin: 12px 0 0; font-size: 11px; color: var(--text-secondary); }
@media print { .no-print[b-hw1xje8tv5] { display: none !important; } }
/* /Components/Shared/RentalRateFields.razor.rz.scp.css */
.avm-rental-card[b-bqryd2smcg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.avm-rental-info[b-bqryd2smcg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The tile is a neutral surface, so the facility's own mark (drawn in navy) reads correctly inside it and the
   two paths — a facility with artwork, and the plain glyph for one without — share the same ink. */
.avm-rental-icon[b-bqryd2smcg] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-icon);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .avm-rental-icon[b-bqryd2smcg]  svg {
        width: 17px;
        height: 17px;
        stroke: var(--navy);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.avm-rental-title[b-bqryd2smcg] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.avm-rental-sub[b-bqryd2smcg] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── ± Spinner ──────────────────────────────────────────────── */
.avm-spinner[b-bqryd2smcg] {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
    background: var(--bg-card);
}

.avm-spin-btn[b-bqryd2smcg] {
    width: 34px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

    .avm-spin-btn:hover[b-bqryd2smcg] {
        background: var(--bg-icon);
        color: var(--navy);
    }

.avm-spin-left[b-bqryd2smcg] {
    border-right: 1px solid var(--border);
}

.avm-spin-right[b-bqryd2smcg] {
    border-left: 1px solid var(--border);
}

.avm-spin-inner[b-bqryd2smcg] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 10px;
    height: 38px;
}

.avm-spin-currency[b-bqryd2smcg] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.avm-spin-input[b-bqryd2smcg] {
    width: 68px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    font-family: monospace;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
}

.avm-spin-freq[b-bqryd2smcg] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── Whole-year hint strip ──────────────────────────────────── */
.avm-yearly-hint[b-bqryd2smcg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: var(--bg);
    border-radius: 8px;
    /* A hairline all round rather than a coloured spine down one side. */
    border: 1px solid var(--border);
    margin-bottom: 12px;
}

.avm-yearly-label[b-bqryd2smcg] {
    font-size: 11px;
    color: var(--text-muted);
}

.avm-yearly-value[b-bqryd2smcg] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-family: monospace;
}
@media (max-width: 480px) { .avm-rental-card[b-bqryd2smcg] { flex-wrap: wrap; } }
/* /Components/Shared/RentalRegistryActionButtons.razor.rz.scp.css */
.rental-registry-actions[b-z9un3dxuww]{display:inline-flex;gap:5px;justify-content:flex-end;align-items:center;white-space:nowrap;flex-wrap:nowrap}
.rental-registry-actions .action-btn[b-z9un3dxuww]{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;width:32px;height:32px;padding:5px;border:1px solid #d7e2ed;border-radius:8px;background:#fff;color:#536f90;cursor:pointer;transition:background .12s ease,border-color .12s ease}
.rental-registry-actions .action-btn svg[b-z9un3dxuww]{width:14px;height:14px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.rental-registry-actions .action-btn:hover:not(:disabled)[b-z9un3dxuww]{background:#ebf3fc;border-color:#acc4df;color:#1e5da9}
.rental-registry-actions .action-btn.action-danger:hover:not(:disabled)[b-z9un3dxuww]{color:#ad3d47;background:#fff1f1;border-color:#eec7ca}
.rental-registry-actions .action-btn:focus-visible[b-z9un3dxuww]{outline:2px solid #2463b6;outline-offset:2px}
.rental-registry-actions .action-btn:disabled[b-z9un3dxuww]{opacity:.38;cursor:not-allowed;background:#f5f7f9}
@media(max-width:700px){.rental-registry-actions .action-btn[b-z9un3dxuww]{min-width:36px;min-height:36px;width:36px;height:36px}}
/* /Components/Shared/RentalRegistryTable.razor.rz.scp.css */
.table-wrap[b-7l5h2h13mv] { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.registry-date[b-7l5h2h13mv] { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.registry-table[b-7l5h2h13mv] { min-width: 1120px; }
.registry-actions[b-7l5h2h13mv] { white-space: nowrap; min-width: 220px; text-align: right; }
.registry-table th:last-child[b-7l5h2h13mv] { min-width: 220px; text-align: right; }
@media (max-width: 1100px) { .registry-table[b-7l5h2h13mv] { min-width: 0; } .registry-actions[b-7l5h2h13mv] { min-width: 0; } }
@media (max-width: 1100px) {
    table[b-7l5h2h13mv], tbody[b-7l5h2h13mv] { display: block; width: 100%; }
    thead[b-7l5h2h13mv] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    tr[b-7l5h2h13mv] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px; border-bottom: 1px solid var(--border); }
    td[b-7l5h2h13mv] { min-width: 0; border: 0; padding: 8px; white-space: normal; overflow-wrap: anywhere; }
    td[data-label][b-7l5h2h13mv]::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 11px; }
    .registry-actions[b-7l5h2h13mv] { grid-column: 1 / -1; }
}
@media (max-width: 600px) { tr[b-7l5h2h13mv] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* /Components/Shared/RentalRegistryToolbar.razor.rz.scp.css */
.vs-toolbar-unified[b-fqexlr6mn6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
}

.facility-selector[b-fqexlr6mn6] {
    position: relative;
    flex-shrink: 0;
}

.fac-trigger[b-fqexlr6mn6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px 9px 14px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
    min-width: 210px;
    transition: border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}

    .fac-trigger:hover[b-fqexlr6mn6] {
        border-color: var(--accent);
    }

    .fac-trigger.open[b-fqexlr6mn6] {
        border-color: var(--navy);
        box-shadow: 0 0 0 3px rgba(13,33,55,0.07);
    }

.fac-trigger-body[b-fqexlr6mn6] {
    flex: 1;
    min-width: 0;
}

.fac-trigger-label[b-fqexlr6mn6] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fac-trigger-sub[b-fqexlr6mn6] {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fac-trigger-badge[b-fqexlr6mn6] {
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.fac-trigger-chevron[b-fqexlr6mn6] {
    width: 15px;
    height: 15px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.fac-trigger.open .fac-trigger-chevron[b-fqexlr6mn6] {
    transform: rotate(180deg);
}

.fac-backdrop[b-fqexlr6mn6] {
    position: fixed;
    inset: 0;
    z-index: 299;
}

.fac-dropdown[b-fqexlr6mn6] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(13,33,55,0.14);
    min-width: 250px;
    z-index: 300;
    overflow: hidden;
    animation: dd-in-b-fqexlr6mn6 0.15s ease;
}

@keyframes dd-in-b-fqexlr6mn6 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fac-dd-header[b-fqexlr6mn6] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 14px 6px;
}

.fac-dd-item[b-fqexlr6mn6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.12s;
}

    .fac-dd-item:hover[b-fqexlr6mn6] {
        background: var(--bg);
    }

    .fac-dd-item.active[b-fqexlr6mn6] {
        background: rgba(13,33,55,0.04);
    }

.fac-dd-body[b-fqexlr6mn6] {
    flex: 1;
    min-width: 0;
}

.fac-dd-name[b-fqexlr6mn6] {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 400;
}

.fac-dd-item.active .fac-dd-name[b-fqexlr6mn6] {
    font-weight: 600;
    color: var(--navy);
}

.fac-dd-badge[b-fqexlr6mn6] {
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.fac-dd-check[b-fqexlr6mn6] {
    width: 14px;
    height: 14px;
    stroke: var(--navy);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.fac-dropdown[b-fqexlr6mn6]::after {
    content: '';
    display: block;
    height: 6px;
}

/* ══════════════════════════════════════════
   STATUS ROW
══════════════════════════════════════════ */
.vs-count-label[b-fqexlr6mn6] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.vs-actions-compact[b-fqexlr6mn6] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.filter-tabs-inline[b-fqexlr6mn6] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.filter-tab[b-fqexlr6mn6] {
    padding: 6px 12px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.15s;
    white-space: nowrap;
}

    .filter-tab:hover[b-fqexlr6mn6] {
        background: var(--bg-icon);
        color: var(--text-subtle);
    }

    .filter-tab.active[b-fqexlr6mn6] {
        background: var(--accent);
        color: #fff;
        font-weight: 600;
    }

.search-box[b-fqexlr6mn6] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
    flex: 1;
    min-width: 180px;
    transition: border-color 0.15s;
}

    .search-box:focus-within[b-fqexlr6mn6] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(200,168,75,0.08);
    }

    .search-box svg[b-fqexlr6mn6] {
        width: 14px;
        height: 14px;
        stroke: var(--text-muted);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .search-box input[b-fqexlr6mn6] {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 12px;
        color: var(--text);
        outline: none;
        min-width: 0;
    }

        .search-box input[b-fqexlr6mn6]::placeholder {
            color: var(--text-muted);
        }

.search-clear[b-fqexlr6mn6] {
    font-size: 16px;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
    user-select: none;
}

    .search-clear:hover[b-fqexlr6mn6] {
        color: var(--text);
    }

.vs-toolbar-unified[b-fqexlr6mn6] {
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
}

.vs-toolbar-unified .fac-trigger[b-fqexlr6mn6] {
    min-width: 200px;
    padding: 7px 12px;
    border-width: 1px;
    border-radius: 8px;
}

.vs-toolbar-unified .filter-tabs-inline[b-fqexlr6mn6] {
    gap: 0;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
}

.vs-toolbar-unified .filter-tab[b-fqexlr6mn6] {
    padding: 5px 12px;
    border-radius: 6px;
}

.vs-toolbar-unified .search-box[b-fqexlr6mn6] {
    flex: 1 1 200px;
    min-width: 160px;
    max-width: none;
}

.vs-toolbar-unified .vs-actions-compact[b-fqexlr6mn6] {
    gap: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

.vs-toolbar-unified .vs-count-label[b-fqexlr6mn6] {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* Below a wide desktop the registry toolbar wraps instead of pushing the page wider than the window. */
@media (max-width: 1200px) {
    .vs-toolbar-unified[b-fqexlr6mn6] { flex-wrap: wrap; }
}


button[b-fqexlr6mn6] { font:inherit; text-align:left; } .fac-dd-item[b-fqexlr6mn6] { width:100%; border:0; background:var(--bg-card); } .search-clear[b-fqexlr6mn6] { border:0; background:transparent; padding:0; } button:focus-visible[b-fqexlr6mn6] { outline:2px solid var(--accent); outline-offset:2px; } .fac-dropdown[b-fqexlr6mn6] { max-width:calc(100vw - 64px); max-height:360px; overflow-y:auto; }
[b-fqexlr6mn6] .vs-actions-compact .btn-primary svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; flex-shrink:0; }
@media(max-width:768px) { .facility-selector[b-fqexlr6mn6],.search-box[b-fqexlr6mn6],.filter-tabs-inline[b-fqexlr6mn6] { width:100%; } .fac-trigger[b-fqexlr6mn6] { width:100%; min-width:0; } .filter-tabs-inline[b-fqexlr6mn6] { overflow-x:auto; } .vs-actions-compact[b-fqexlr6mn6] { flex-wrap:wrap; } }
/* /Components/Shared/RentalSummaryStrip.razor.rz.scp.css */
.rental-summary[b-jwv1282xob] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.rental-summary-title[b-jwv1282xob] { font-size: 14px; font-weight: 600; }
.rental-summary-description[b-jwv1282xob] { margin-top: 5px; color: var(--text-secondary); font-size: 12px; }
.rental-summary-metrics[b-jwv1282xob] { display: flex; gap: 26px; }
.rental-summary-metrics > div[b-jwv1282xob] { text-align: center; font-variant-numeric: tabular-nums; }
.rental-summary-metrics strong[b-jwv1282xob] { display: block; font-size: 18px; }
.rental-summary-metrics span[b-jwv1282xob] { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 11px; }
@media (max-width: 720px) { .rental-summary[b-jwv1282xob] { flex-wrap: wrap; } .rental-summary-metrics[b-jwv1282xob] { width: 100%; justify-content: space-between; gap: 12px; } }
/* /Components/Shared/RentalWorkspaceNavigation.razor.rz.scp.css */
.rental-navigation[b-curymia5k3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rental-navigation > a[b-curymia5k3] {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

.rental-navigation > a:focus-visible[b-curymia5k3] {
    outline: 2px solid var(--civic-blue, #2563eb);
    outline-offset: 2px;
}
/* /Components/Shared/ReportAdjustmentDrawer.razor.rz.scp.css */
.rad-figures[b-3nnperstqh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 12px;
}

.rad-figures dt[b-3nnperstqh] {
    font-size: 0.75rem;
    color: var(--text-subtle);
}

.rad-figures dd[b-3nnperstqh] {
    margin: 2px 0 0;
    font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.rad-diff[b-3nnperstqh] {
    color: var(--accent);
}

.rad-history[b-3nnperstqh] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rad-history li[b-3nnperstqh] {
    display: grid;
    gap: 2px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
}

.rad-history li:last-child[b-3nnperstqh] {
    border-bottom: 1px solid var(--border);
}

.rad-meta[b-3nnperstqh] {
    color: var(--text-subtle);
}
/* /Components/Shared/ReportLetterhead.razor.rz.scp.css */
.lh[b-gyg8zjsu0e] {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--navy);
    text-align: center;
}

.lh-seal[b-gyg8zjsu0e] {
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border-radius: 50%;
    object-fit: contain;
}

.lh-republic[b-gyg8zjsu0e],
.lh-place[b-gyg8zjsu0e] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.lh-office[b-gyg8zjsu0e] {
    margin: 4px 0 0;
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lh-title[b-gyg8zjsu0e] {
    margin: 10px 0 0;
    color: var(--navy);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.lh-period[b-gyg8zjsu0e] {
    margin: 2px 0 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.lh-meta[b-gyg8zjsu0e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 10px 20px;
    margin: 14px 0 0;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--border);
}

.lh-meta[b-gyg8zjsu0e]  > div,
.lh-meta > div[b-gyg8zjsu0e] {
    display: grid;
    gap: 2px;
}

.lh-meta[b-gyg8zjsu0e]  dt,
.lh-meta dt[b-gyg8zjsu0e] {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lh-meta[b-gyg8zjsu0e]  dd,
.lh-meta dd[b-gyg8zjsu0e] {
    margin: 0;
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 600;
}
/* /Components/Shared/RevenuePolicyPanel.razor.rz.scp.css */
.rpp[b-ytljse9qz2] {
    display: flex;
    flex-direction: column;
}

.rpp-setup[b-ytljse9qz2] {
    border-radius: 4px;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.rpp-setup:hover[b-ytljse9qz2] {
    text-decoration: underline;
}

.rpp-setup:focus-visible[b-ytljse9qz2] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rpp-note[b-ytljse9qz2] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.rpp-retry[b-ytljse9qz2] {
    display: grid;
    justify-items: start;
    gap: 10px;
}
/* /Components/Shared/SideDrawer.razor.rz.scp.css */
.sd-overlay[b-6z1pry9pzf] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(13, 33, 55, 0.4);
}

.sd-drawer[b-6z1pry9pzf] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 520px;
    max-width: 100vw;
    background: var(--surface);
    box-shadow: -4px 0 24px rgba(13, 33, 55, 0.15);
    animation: sd-slide-in-b-6z1pry9pzf 0.22s ease-out;
}

.sd-wide[b-6z1pry9pzf] {
    width: 960px;
}

.sd-header[b-6z1pry9pzf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    background: var(--civic-panel);
    color: #ffffff;
    flex-shrink: 0;
}

.sd-header-main[b-6z1pry9pzf] { display: flex; align-items: center; gap: 14px; min-width: 0; }

.sd-icon[b-6z1pry9pzf] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
}

    .sd-icon[b-6z1pry9pzf]  svg { width: 20px; height: 20px; fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sd-title[b-6z1pry9pzf] {
    margin: 0;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
}

.sd-sub[b-6z1pry9pzf] {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8125rem;
}

.sd-close[b-6z1pry9pzf] {
    min-width: 36px;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
}

    .sd-close:hover[b-6z1pry9pzf] {
        background: rgba(255, 255, 255, 0.2);
    }

    .sd-close:focus-visible[b-6z1pry9pzf] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

.sd-body[b-6z1pry9pzf] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.sd-footer[b-6z1pry9pzf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

@keyframes sd-slide-in-b-6z1pry9pzf {
    from {
        transform: translateX(24px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .sd-drawer[b-6z1pry9pzf],
    .sd-wide[b-6z1pry9pzf] {
        width: 100vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-drawer[b-6z1pry9pzf] {
        animation: none;
    }
}

@media print {
    .sd-overlay[b-6z1pry9pzf],
    .sd-drawer[b-6z1pry9pzf] {
        display: none;
    }
}
/* /Components/Shared/SignatureStrip.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   SignatureStrip — the signatory lines at the foot of an official sheet.
   One look on every document; the editing affordances never print.
   ══════════════════════════════════════════════════════════════════════ */
/* The strip does not impose a layout of its own: `display: contents` hands its slots to whatever footer hosts
   it, so the roster's flex row and the status report's three-column grid each lay the lines out as they always
   did. That is why the status-report footer no longer squeezes three lines into one column. */
.sig-strip[b-ry7hxyne22] {
    display: contents;
}

.sig-slot[b-ry7hxyne22] {
    flex: 1 1 130px;
    min-width: 110px;
    text-align: center;
}

/* A caption is two or three words and must never stack into a column — which is what the narrower status-report
   footer did to it. */
.sig-caption[b-ry7hxyne22] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.sig-name[b-ry7hxyne22] {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
    overflow-wrap: break-word;
}

/* Quiet pencil: visible enough to find, faint enough not to decorate the sheet. It is also the way back —
   adding a line and restoring the office's defaults live inside the dialog it opens. */
.sig-edit[b-ry7hxyne22] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s, color .15s, background .15s;
}

    .sig-edit:hover[b-ry7hxyne22] {
        opacity: 1;
        color: var(--navy);
        background: rgba(15, 35, 55, .06);
    }

    .sig-edit svg[b-ry7hxyne22] {
        width: 12px;
        height: 12px;
    }

/* ── Editor ─────────────────────────────────────────────────────────────────────────────────────────── */
.sig-dialog-backdrop[b-ry7hxyne22] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(10, 22, 35, .45);
}

.sig-dialog[b-ry7hxyne22] {
    position: fixed;
    z-index: 1201;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(360px, calc(100vw - 32px));
    padding: 20px;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 35, 55, .22);
}

.sig-dialog-title[b-ry7hxyne22] {
    font-size: 14px;
    font-weight: 800;
    color: var(--navy);
}

.sig-field[b-ry7hxyne22] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .sig-field span[b-ry7hxyne22] {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .sig-field input[b-ry7hxyne22] {
        height: 36px;
        padding: 0 11px;
        font: inherit;
        font-size: 13px;
        color: var(--navy);
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 9px;
        outline: none;
    }

        .sig-field input:focus[b-ry7hxyne22] {
            border-color: var(--gold);
        }

.sig-dialog-error[b-ry7hxyne22] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--red);
}

.sig-dialog-actions[b-ry7hxyne22] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sig-dialog-spacer[b-ry7hxyne22] {
    flex: 1;
}

.sig-cancel[b-ry7hxyne22],
.sig-save[b-ry7hxyne22],
.sig-remove[b-ry7hxyne22] {
    height: 32px;
    padding: 0 13px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    border-radius: 8px;
    cursor: pointer;
}

.sig-cancel[b-ry7hxyne22] {
    color: var(--navy);
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.sig-save[b-ry7hxyne22] {
    color: #fff;
    background: var(--navy);
    border: 1px solid var(--navy);
}

.sig-remove[b-ry7hxyne22] {
    color: var(--red);
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
}

/* Secondary paths: add a line back, or restore the office's standard trio. */
.sig-dialog-more[b-ry7hxyne22] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.sig-link[b-ry7hxyne22] {
    padding: 0;
    font: inherit;
    font-size: 11.5px;
    color: var(--text-muted);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
}

    .sig-link:hover[b-ry7hxyne22] {
        color: var(--navy);
    }

.sig-cancel:disabled[b-ry7hxyne22],
.sig-save:disabled[b-ry7hxyne22],
.sig-remove:disabled[b-ry7hxyne22],
.sig-link:disabled[b-ry7hxyne22] {
    opacity: .6;
    cursor: default;
}

@media print {
    /* Paper carries the lines only. */
    .sig-edit[b-ry7hxyne22],
    .sig-dialog[b-ry7hxyne22],
    .sig-dialog-backdrop[b-ry7hxyne22] {
        display: none !important;
    }
}


/* ══════════════════════════════════════════
   CENTRED STRIP
══════════════════════════════════════════ */
/* By default .sig-strip is `display: contents`, so the host footer lays the slots out and every sheet keeps the
   footer it has always had. Centring is the one case where the strip has to take that over: `display: contents`
   removes the box, so there is nothing to centre until it has one.

   SPANNING THE WHOLE FOOTER IS THE POINT. The hosts are `grid-template-columns: repeat(3, 1fr)`, so the moment the
   strip has a box it becomes ONE grid item in ONE of three columns - and centring inside a third of the sheet reads as
   "not centred at all", which is exactly what it did. `1 / -1` spans every column, `flex-basis: 100%` does the same for
   the flex hosts, so the strip is as wide as the sheet before anything is centred within it.

   The border and padding reset matter for the same reason: the hosts style `.print-report-signatures div`, which a
   box-less strip never picked up. With a box it would draw a rule across the whole footer. */
.sig-strip--center[b-ry7hxyne22] {
    grid-column: 1 / -1;
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 42px;
    flex-wrap: wrap;
    width: 100%;
    border-top: 0;
    padding-top: 0;
}

/* The slots stop stretching so they group in the middle instead of spreading across the sheet. */
.sig-strip--center .sig-slot[b-ry7hxyne22] {
    flex: 0 1 auto;
    min-width: 150px;
}

/* ══════════════════════════════════════════
   THE WAY BACK (screen only, empty strip only)
══════════════════════════════════════════ */
/* One button, and it appears only when the strip has no lines left. Everything else a Head does to the footer lives in
   the modal, so a finished document carries nothing but its per-line pencils.
   Spans the full row in either kind of host: `1 / -1` for the grid footers, `100%` for the flex ones. It is .no-print
   in the markup - on paper the strip stands alone. */
.sig-tools[b-ry7hxyne22] {
    grid-column: 1 / -1;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.sig-tool[b-ry7hxyne22] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 10px;
    border: 1px dashed var(--border, #cfd6de);
    border-radius: 7px;
    background: transparent;
    color: var(--text-subtle, #6a8aa0);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.sig-tool:hover:not(:disabled)[b-ry7hxyne22] {
    background: rgba(255, 255, 255, .7);
    border-color: var(--navy, #0d2137);
    color: var(--navy, #0d2137);
}

.sig-tool:focus-visible[b-ry7hxyne22] {
    outline: 2px solid color-mix(in srgb, var(--navy, #0d2137) 55%, transparent);
    outline-offset: 2px;
}

.sig-tool:disabled[b-ry7hxyne22] {
    cursor: not-allowed;
    opacity: .55;
}

.sig-tool svg[b-ry7hxyne22] {
    width: 12px;
    height: 12px;
}

/* The pencil and the plus read as one affordance: "edit the lines, and add one". */
.sig-tool-plus[b-ry7hxyne22] {
    font-size: 13px;
    line-height: 1;
    margin-left: -2px;
}

.sig-tool-error[b-ry7hxyne22] {
    font-size: 11px;
    font-weight: 700;
    color: var(--red, #8b3a3a);
}

.sig-title[b-ry7hxyne22] {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
}
/* /Components/Shared/Skeleton.razor.rz.scp.css */
.skeleton[b-90kih8wr2y] {
    display: block;
    width: 100%;
    height: 1rem;
    border-radius: 8px;
    background-color: #e3e8ef;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -150% 0;
    animation: skeleton-shimmer-b-90kih8wr2y 1.25s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-90kih8wr2y {
    100% {
        background-position: 150% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton[b-90kih8wr2y] {
        animation: none;
    }
}
/* /Components/Shared/SpaceHolderImport.razor.rz.scp.css */
/* The space / lot import's own bits: everything else is the shared Import* components. */
.shi[b-nwwc5wt76w] { display: flex; flex-direction: column; gap: 16px; }

.shi-status[b-nwwc5wt76w] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.shi-chip-status[b-nwwc5wt76w] { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-muted); color: var(--text-secondary); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.shi-chip-status.shi-ready[b-nwwc5wt76w] { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); background: var(--green-bg); color: var(--green); }
.shi-chip-status.shi-invalid[b-nwwc5wt76w] { border-color: color-mix(in srgb, var(--red) 30%, var(--border)); background: var(--red-bg); color: var(--red); }
.shi-why[b-nwwc5wt76w] { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.shi-payor-line[b-nwwc5wt76w] { color: var(--navy); font-size: 12px; font-weight: 600; }
.shi-payor-act[b-nwwc5wt76w] { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.shi-payor-act:hover:not(:disabled)[b-nwwc5wt76w] { text-decoration: underline; }
.shi-payor-act:disabled[b-nwwc5wt76w] { color: var(--text-muted); cursor: not-allowed; }
.shi-payor-act:focus-visible[b-nwwc5wt76w] { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.shi-message[b-nwwc5wt76w] { margin: 0; color: var(--text-secondary); font-size: .8125rem; }
.shi-foot-note[b-nwwc5wt76w] { margin-right: auto; color: var(--text-muted); font-size: 12.5px; }
/* /Components/Shared/SpaceHolderRoster.razor.rz.scp.css */
.space-roster[b-per5qxjsen] { min-width: 0; }
.space-roster .v3-toolbar[b-per5qxjsen] { flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.space-roster-table-wrap[b-per5qxjsen] { overflow-x: auto; }
.space-roster-table[b-per5qxjsen] { width: 100%; min-width: 880px; table-layout: fixed; }
.space-roster-table th[b-per5qxjsen], .space-roster-table td[b-per5qxjsen] { overflow-wrap: anywhere; vertical-align: top; }
.space-roster-table thead th[b-per5qxjsen] { white-space: normal; }
.space-roster-table .v3-num[b-per5qxjsen] { white-space: normal; font-variant-numeric: tabular-nums; }
.roster-number[b-per5qxjsen] { width: 4%; }
.roster-occupant[b-per5qxjsen] { width: 20%; }
.roster-space[b-per5qxjsen] { width: 8%; }
.roster-basis[b-per5qxjsen] { width: 16%; }
.roster-reference[b-per5qxjsen] { width: 15%; }
.roster-date[b-per5qxjsen] { width: 11%; }
.roster-amount[b-per5qxjsen] { width: 14%; }
.roster-status[b-per5qxjsen] { width: 12%; }
@media print {
    .space-roster[b-per5qxjsen] { padding: 0 !important; margin: 0 !important; }
    .space-roster-sheet[b-per5qxjsen] { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0; box-shadow: none; break-inside: auto; }
    .space-roster-table-wrap[b-per5qxjsen] { overflow: visible; }
    .space-roster-table[b-per5qxjsen] { min-width: 0; font-size: 9pt; }
    .space-roster-table thead[b-per5qxjsen] { display: table-header-group; }
    .space-roster-table tr[b-per5qxjsen] { break-inside: avoid; page-break-inside: avoid; }
    .space-roster-table th[b-per5qxjsen], .space-roster-table td[b-per5qxjsen] { padding: 5px 7px; }
    .space-roster-table thead th[b-per5qxjsen] { padding-top: 5mm; }
    .v3-report-note[b-per5qxjsen] { font-size: 8pt; break-inside: avoid; }
}
/* /Components/Shared/SummaryStrip.razor.rz.scp.css */
.ss[b-k4xp3o3gc1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--elevation-1);
}

.ss-item[b-k4xp3o3gc1] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px;
    border-left: 1px solid var(--border);
}

.ss-item:first-child[b-k4xp3o3gc1] {
    border-left: 0;
}

.ss-item dt[b-k4xp3o3gc1] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
}

.ss-item dd[b-k4xp3o3gc1] {
    margin: 0;
    color: var(--navy);
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ss-emphasis dd[b-k4xp3o3gc1] {
    font-weight: 700;
}

@media (max-width: 560px) {
    .ss[b-k4xp3o3gc1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ss-item[b-k4xp3o3gc1] {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .ss-item:nth-child(even)[b-k4xp3o3gc1] {
        border-left: 1px solid var(--border);
    }

    .ss-item:nth-child(-n + 2)[b-k4xp3o3gc1] {
        border-top: 0;
    }
}
/* /Components/Shared/TenantUsagePanel.razor.rz.scp.css */
/* Tenant storage panel — self-contained set-card styling (component-scoped CSS does not inherit the
   Settings page's scoped .set-card rules, so the look is replicated here using the shared tokens). */

.set-card[b-pkprkplj7s] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.15rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(13, 33, 55, 0.04);
}

.set-card-head[b-pkprkplj7s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.set-card-icon[b-pkprkplj7s] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-icon);
    color: var(--navy);
    display: grid;
    place-items: center;
}

.set-card-icon svg[b-pkprkplj7s] { width: 20px; height: 20px; }

.set-card-titles[b-pkprkplj7s] { display: flex; flex-direction: column; min-width: 0; }

.set-card-title[b-pkprkplj7s] {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.set-card-sub[b-pkprkplj7s] { font-size: 0.78rem; color: var(--text-subtle); margin-top: 0.1rem; }

/* Export button */
.tu-export-btn[b-pkprkplj7s] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--navy);
    background: var(--bg-icon);
    border: 1px solid var(--border);
    padding: 0.4rem 0.7rem;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tu-export-btn:hover:not(:disabled)[b-pkprkplj7s] { background: #e7edf3; border-color: #c7d4df; }
.tu-export-btn:disabled[b-pkprkplj7s] { opacity: 0.6; cursor: default; }
.tu-export-btn svg[b-pkprkplj7s] { width: 15px; height: 15px; }

.tu-export-spin[b-pkprkplj7s] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(13, 33, 55, 0.25);
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: tu-spin-b-pkprkplj7s 0.7s linear infinite;
}

@keyframes tu-spin-b-pkprkplj7s { to { transform: rotate(360deg); } }

.tu-export-err[b-pkprkplj7s] {
    font-size: 0.78rem;
    color: var(--red);
    background: var(--red-bg);
    padding: 0.5rem 0.7rem;
    border-radius: 9px;
    margin-bottom: 0.6rem;
}

/* Headline stats */
.tu-summary[b-pkprkplj7s] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.tu-stat[b-pkprkplj7s] {
    flex: 1 1 0;
    background: var(--bg-icon);
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    text-align: center;
}

.tu-stat-num[b-pkprkplj7s] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.02em;
}

.tu-stat-label[b-pkprkplj7s] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
}

.mono[b-pkprkplj7s] {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Rows */
.set-rows[b-pkprkplj7s] { display: flex; flex-direction: column; }

.set-row[b-pkprkplj7s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}

.set-row:last-child[b-pkprkplj7s] { border-bottom: none; }

.set-key[b-pkprkplj7s] { color: var(--text-subtle); font-weight: 500; }

.set-val[b-pkprkplj7s] {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
}

.tu-row-size[b-pkprkplj7s] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-subtle);
    min-width: 62px;
    text-align: right;
}

.tu-rows[b-pkprkplj7s] {
    margin-top: 0.35rem;
    max-height: 276px;      /* ~6 rows, then scroll — keeps the card a professional height */
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #cdd8e2 transparent;
}
.tu-rows[b-pkprkplj7s]::-webkit-scrollbar { width: 4px; }
.tu-rows[b-pkprkplj7s]::-webkit-scrollbar-thumb { background: #cdd8e2; border-radius: 3px; }
.tu-rows[b-pkprkplj7s]::-webkit-scrollbar-track { background: transparent; }

.tu-note[b-pkprkplj7s] {
    margin-top: 0.85rem;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--text-subtle);
}

/* Empty / error */
.tu-empty[b-pkprkplj7s] { padding: 1.25rem 0.5rem; text-align: center; }
.tu-empty-title[b-pkprkplj7s] { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.tu-empty-text[b-pkprkplj7s] { font-size: 0.82rem; color: var(--text-subtle); margin-top: 0.3rem; }

/* Skeleton */
.sk[b-pkprkplj7s] {
    display: inline-block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--bg-icon) 25%, #f4f7fa 37%, var(--bg-icon) 63%);
    background-size: 400% 100%;
    animation: tu-shimmer-b-pkprkplj7s 1.4s ease infinite;
}

.tu-sk-key[b-pkprkplj7s] { width: 38%; height: 12px; }
.tu-sk-val[b-pkprkplj7s] { width: 22%; height: 12px; }

@keyframes tu-shimmer-b-pkprkplj7s {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}


/* Restore this municipality (scoped, guarded) */
.tu-restore[b-pkprkplj7s] { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.85rem; }
.tu-restore-toggle[b-pkprkplj7s] {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; background: transparent; cursor: pointer; padding: 0;
    font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--navy);
}
.tu-restore-toggle svg[b-pkprkplj7s] { width: 15px; height: 15px; }
.tu-restore-toggle:hover[b-pkprkplj7s] { text-decoration: underline; }

.tu-restore-body[b-pkprkplj7s] {
    margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
    border-radius: 10px; padding: 0.9rem; background: var(--red-bg);
}
.tu-restore-warn[b-pkprkplj7s] { font-size: 0.78rem; line-height: 1.5; color: var(--red); }
.tu-restore-getpoint[b-pkprkplj7s] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-subtle); }
.tu-restore-dl[b-pkprkplj7s] {
    border: 1px solid var(--navy); background: var(--bg-card); color: var(--navy);
    border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 700;
}
.tu-restore-dl:hover:not(:disabled)[b-pkprkplj7s] { background: #f4f8fb; }
.tu-restore-dl:disabled[b-pkprkplj7s] { opacity: .55; cursor: default; }
.tu-restore-field[b-pkprkplj7s] { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.76rem; color: var(--text-subtle); }
.tu-restore-field span strong[b-pkprkplj7s] { color: var(--text); }
.tu-restore-field input[b-pkprkplj7s] {
    height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-card); font: inherit; font-size: 0.85rem; color: var(--text);
}
.tu-restore-field input:focus[b-pkprkplj7s] { outline: none; border-color: var(--accent); }
.tu-restore-file[b-pkprkplj7s] { font-size: 0.76rem; color: var(--text-subtle); }
.tu-restore-err[b-pkprkplj7s] { font-size: 0.78rem; color: var(--red); font-weight: 600; }
.tu-restore-ok[b-pkprkplj7s] { font-size: 0.78rem; color: var(--green); font-weight: 700; }
.tu-restore-go[b-pkprkplj7s] {
    align-self: flex-start; margin-top: 0.15rem;
    border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer;
    background: var(--red); color: #fff; font: inherit; font-size: 0.82rem; font-weight: 700;
}
.tu-restore-go:hover:not(:disabled)[b-pkprkplj7s] { background: color-mix(in srgb, var(--red) 88%, black); }
.tu-restore-go:disabled[b-pkprkplj7s] { opacity: .5; cursor: default; }

/* V3 consistency: one quiet civic-blue icon tile for every settings card (status colour stays on the status itself). */
.set-card-icon[b-pkprkplj7s] {
    background: var(--accent-soft);
    color: var(--civic-panel);
}
/* /Components/Shared/TerminalOverviewCard.razor.rz.scp.css */
/* Income From Terminal (IFT): the facility-card family on the Dashboard — pale civic-blue surface, white figure tiles, civic-blue
   action — with the Terminal's own two figures. Tokens match Menu.razor.css's facility card so the two read as one set. */
.terminal-card[b-muywb2j1he] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border-blue-subtle);
    border-radius: 10px;
    background: var(--surface-blue-subtle);
}
.terminal-card:hover[b-muywb2j1he] { border-color: var(--accent); box-shadow: var(--elevation-1); }

header[b-muywb2j1he] { display: flex; align-items: center; gap: 12px; }
.tc-meta[b-muywb2j1he] { min-width: 0; }
.tc-icon[b-muywb2j1he] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-blue-subtle);
    border-radius: 10px;
    background: var(--surface);
}
.tc-meta small[b-muywb2j1he], .tc-meta strong[b-muywb2j1he], .tc-meta span[b-muywb2j1he] { display: block; }
.tc-meta small[b-muywb2j1he] { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.tc-meta strong[b-muywb2j1he] { color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.2; }
.tc-meta span[b-muywb2j1he] { margin-top: 4px; color: var(--text-secondary); font-size: 12px; }

dl[b-muywb2j1he] { display: flex; gap: 6px; margin: 0; }
dl > div[b-muywb2j1he] { flex: 1 1 0; min-width: 0; padding: 10px 8px; border: 1px solid var(--border-blue-subtle); border-radius: 8px; background: var(--surface); text-align: center; }
dd[b-muywb2j1he] { margin: 0; color: var(--navy); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
dt[b-muywb2j1he] { margin-top: 2px; color: var(--text-tertiary); font-size: 11px; font-weight: 500; }

a[b-muywb2j1he] {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px;
    border: 1px solid var(--border-blue-subtle);
    border-radius: 8px;
    background: var(--surface);
    color: var(--accent-hover);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
a:hover[b-muywb2j1he] { border-color: var(--accent); background: var(--accent-soft); }
a:focus-visible[b-muywb2j1he] { outline: 2px solid var(--accent); outline-offset: 2px; }
a svg[b-muywb2j1he] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

p[b-muywb2j1he] { margin: 0; font-size: 12px; }

@media (prefers-reduced-motion: reduce) { a[b-muywb2j1he] { transition: none; } }
/* /Components/Shared/TpmReportCharts.razor.rz.scp.css */
.tpmrc-section-label[b-7tccbejbze] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1.5rem 0 0.875rem;
}

.tpmrc-section-label[b-7tccbejbze]::before,
.tpmrc-section-label[b-7tccbejbze]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.tpmrc-row[b-7tccbejbze] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) {
    .tpmrc-row[b-7tccbejbze] {
        grid-template-columns: 1fr;
    }
}

.tpmrc-card[b-7tccbejbze] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tpmrc-card-header[b-7tccbejbze] {
    padding: 0.875rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.tpmrc-tag[b-7tccbejbze] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--accent);
    background: rgba(200, 168, 75, 0.1);
    border: 1px solid rgba(200, 168, 75, 0.22);
    border-radius: 5px;
    padding: 2px 7px;
    margin-bottom: 5px;
}

.tpmrc-card-title[b-7tccbejbze] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.tpmrc-empty[b-7tccbejbze] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: 13px;
}

.tpmrc-empty svg[b-7tccbejbze] {
    width: 28px;
    height: 28px;
    stroke: var(--border);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.6;
}

.tpmrc-chart-area[b-7tccbejbze] {
    display: flex;
    flex: 1;
    gap: 0;
    padding: 1rem 1.1rem 0.5rem;
    min-height: 180px;
}

.tpmrc-y-axis[b-7tccbejbze] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 42px;
    width: 28px;
    flex-shrink: 0;
}

.tpmrc-y-label[b-7tccbejbze] {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    line-height: 1;
}

.tpmrc-chart-inner[b-7tccbejbze] {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.tpmrc-grid-line[b-7tccbejbze] {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
    opacity: 0.6;
    transform: translateY(50%);
    pointer-events: none;
}

.tpmrc-bars[b-7tccbejbze] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex: 1;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
}

.tpmrc-bar-col[b-7tccbejbze] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    max-width: 64px;
}

.tpmrc-bar-top-label[b-7tccbejbze] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1;
    margin-bottom: 2px;
}

.tpmrc-bar-top-best[b-7tccbejbze] {
    color: var(--accent);
}

.tpmrc-bar-wrap[b-7tccbejbze] {
    width: 100%;
    max-width: 44px;
    height: 100px;
    display: flex;
    align-items: flex-end;
}

.tpmrc-bar-fill[b-7tccbejbze] {
    width: 100%;
    background: rgba(200, 168, 75, 0.55);
    border-radius: 5px 5px 3px 3px;
    transition: height 0.35s ease;
    min-height: 3px;
}

.tpmrc-bar-best[b-7tccbejbze] {
    background: var(--gold);
}

.tpmrc-bar-x-label[b-7tccbejbze] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--navy);
    margin-top: 5px;
    white-space: nowrap;
}

.tpmrc-bar-sub-label[b-7tccbejbze] {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.tpmrc-chart-footer[b-7tccbejbze] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
    gap: 0;
    flex-wrap: wrap;
}

.tpmrc-foot-stat[b-7tccbejbze] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    padding: 0.2rem 0;
}

.tpmrc-foot-val[b-7tccbejbze] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.tpmrc-foot-key[b-7tccbejbze] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.tpmrc-foot-divider[b-7tccbejbze] {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
}

.tpmrc-table-wrap[b-7tccbejbze] {
    flex: 1;
    overflow-x: auto;
}

.tpmrc-table[b-7tccbejbze] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tpmrc-table thead th[b-7tccbejbze] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.6rem 1.1rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--bg);
    text-align: left;
}

.tpmrc-th-right[b-7tccbejbze] {
    text-align: right !important;
}

.tpmrc-table tbody tr[b-7tccbejbze] {
    border-bottom: 1px solid var(--border);
    transition: background 0.13s;
}

.tpmrc-table tbody tr:last-child[b-7tccbejbze] {
    border-bottom: none;
}

.tpmrc-table tbody tr:hover[b-7tccbejbze] {
    background: var(--bg);
}

.tpmrc-row-high[b-7tccbejbze] {
    background: rgba(200, 168, 75, 0.05);
}

.tpmrc-row-low[b-7tccbejbze] {
    background: rgba(139, 58, 58, 0.04);
}

.tpmrc-table td[b-7tccbejbze] {
    padding: 0.6rem 1.1rem;
    color: var(--navy);
    vertical-align: middle;
}

.tpmrc-date-main[b-7tccbejbze] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--navy);
}

.tpmrc-row-badge[b-7tccbejbze] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tpmrc-badge-high[b-7tccbejbze] {
    background: rgba(200, 168, 75, 0.18);
    color: var(--accent);
    border: 1px solid rgba(200, 168, 75, 0.3);
}

.tpmrc-badge-low[b-7tccbejbze] {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid rgba(139, 58, 58, 0.2);
}

.tpmrc-td-right[b-7tccbejbze] {
    text-align: right;
}

.tpmrc-td-bold[b-7tccbejbze] {
    font-weight: 600;
}

.tpmrc-vs-pos[b-7tccbejbze] {
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
}

.tpmrc-vs-neg[b-7tccbejbze] {
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
}

.tpmrc-vs-neutral[b-7tccbejbze] {
    color: var(--text-muted);
}

.tpmrc-table-footer[b-7tccbejbze] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.1rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
    gap: 0.5rem;
}

.tpmrc-table-foot-label[b-7tccbejbze] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    flex: 1;
}

.tpmrc-table-foot-val[b-7tccbejbze] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
}

.tpmrc-gold[b-7tccbejbze] {
    color: var(--accent) !important;
}
/* /Components/Shared/UtilityStatements.razor.rz.scp.css */
/* Utility statements — V3. Panels, tables, fields and buttons come from the v3- layer in app.css. */

.us-check[b-v68g4zxu1y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 0.8125rem;
}

.us-check input[b-v68g4zxu1y] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.us-action[b-v68g4zxu1y] {
    text-align: right;
}

.us-screen[b-v68g4zxu1y] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* The statement sheets exist for paper only. */
.us-sheets[b-v68g4zxu1y] {
    display: none;
}

.us-sheet[b-v68g4zxu1y] {
    padding: 0 0 8mm;
    break-after: page;
}

.us-sheet:last-child[b-v68g4zxu1y] {
    break-after: auto;
}

.us-table[b-v68g4zxu1y] {
    width: 100%;
    margin-top: 6mm;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.us-table th[b-v68g4zxu1y],
.us-table td[b-v68g4zxu1y] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.us-table thead th[b-v68g4zxu1y] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.us-table tfoot th[b-v68g4zxu1y],
.us-table tfoot td[b-v68g4zxu1y] {
    border-top: 2px solid var(--navy);
    border-bottom: 0;
    font-weight: 600;
}

.us-table .us-num[b-v68g4zxu1y] {
    text-align: right;
}

.us-note[b-v68g4zxu1y] {
    margin: 6mm 0 10mm;
    font-size: 0.8125rem;
}

@media print {
    .us-sheets[b-v68g4zxu1y] {
        display: block;
    }
}
/* /Components/Shared/V3Hero.razor.rz.scp.css */
/* V3 hero: one solid civic-blue band (--civic-panel). White text on it meets AA; separators and the icon tile are
   translucent white. Balanced horizontally on desktop; identity and figures stack on narrow widths. */
.v3h[b-kbpr38qcd4] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    margin-bottom: 20px;
    padding: 18px 24px;
    border-radius: 10px;
    background: var(--civic-panel);
    color: #ffffff;
    overflow: hidden;
}

.v3h-compact[b-kbpr38qcd4] {
    padding: 14px 20px;
    margin-bottom: 16px;
}

.v3h-identity[b-kbpr38qcd4] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 260px;
    min-width: 0;
}

.v3h-icon[b-kbpr38qcd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.v3h-compact .v3h-icon[b-kbpr38qcd4] {
    width: 40px;
    height: 40px;
}

    .v3h-icon[b-kbpr38qcd4]  svg {
        width: 22px;
        height: 22px;
        stroke: #ffffff;
        fill: none;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .v3h-icon[b-kbpr38qcd4]  img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: contain;
        background: #ffffff;
    }

.v3h-text[b-kbpr38qcd4] {
    min-width: 0;
}

.v3h-eyebrow[b-kbpr38qcd4] {
    margin-bottom: 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.v3h-title[b-kbpr38qcd4] {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

/* FocusOnNavigate moves focus to the page h1 (tabindex -1) for screen readers; it is not an interactive control, so it
   shows no focus ring. */
.v3h-title:focus[b-kbpr38qcd4] {
    outline: none;
}

.v3h-compact .v3h-title[b-kbpr38qcd4] {
    font-size: 1.1875rem;
}

.v3h-sub[b-kbpr38qcd4] {
    margin-top: 3px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
}

.v3h-figures[b-kbpr38qcd4] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
}

    .v3h-figures[b-kbpr38qcd4]  .v3h-figure {
        padding: 0 22px;
        border-left: 1px solid rgba(255, 255, 255, 0.22);
    }

        .v3h-figures[b-kbpr38qcd4]  .v3h-figure:first-child {
            padding-left: 0;
            border-left: 0;
        }

.v3h-actions[b-kbpr38qcd4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .v3h-actions[b-kbpr38qcd4]  a,
    .v3h-actions[b-kbpr38qcd4]  button {
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        font: inherit;
        font-size: 0.8125rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }

        .v3h-actions[b-kbpr38qcd4]  a:hover,
        .v3h-actions[b-kbpr38qcd4]  button:hover {
            background: rgba(255, 255, 255, 0.18);
        }

        .v3h-actions[b-kbpr38qcd4]  a:focus-visible,
        .v3h-actions[b-kbpr38qcd4]  button:focus-visible {
            outline: 2px solid #ffffff;
            outline-offset: 2px;
        }

.v3h-progress[b-kbpr38qcd4] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
}

.v3h-progress-fill[b-kbpr38qcd4] {
    height: 100%;
    background: #ffffff;
}

@media (max-width: 1100px) {
    .v3h-figures[b-kbpr38qcd4]  .v3h-figure {
        padding: 0 14px;
    }
}

@media (max-width: 700px) {
    .v3h[b-kbpr38qcd4] {
        padding: 16px;
        gap: 14px;
    }

    .v3h-figures[b-kbpr38qcd4] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

        .v3h-figures[b-kbpr38qcd4]  .v3h-figure,
        .v3h-figures[b-kbpr38qcd4]  .v3h-figure:first-child {
            padding: 0;
            border-left: 0;
        }

    .v3h-title[b-kbpr38qcd4] {
        font-size: 1.125rem;
    }
}

@media print {
    .v3h[b-kbpr38qcd4] {
        background: none;
        color: var(--navy);
        border: 1px solid var(--border);
    }

    .v3h-title[b-kbpr38qcd4],
    .v3h-eyebrow[b-kbpr38qcd4],
    .v3h-sub[b-kbpr38qcd4] {
        color: var(--navy);
    }

    .v3h-actions[b-kbpr38qcd4],
    .v3h-progress[b-kbpr38qcd4] {
        display: none;
    }
}
/* /Components/Shared/V3HeroFigure.razor.rz.scp.css */
/* A figure on the civic-blue hero band: value first in weight, label and note quieter. */
.v3h-figure[b-gyo1pjemvl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.v3h-key[b-gyo1pjemvl] {
    order: 2;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}

.v3h-val[b-gyo1pjemvl] {
    order: 1;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.v3h-note[b-gyo1pjemvl] {
    order: 3;
    margin: 2px 0 0;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 1100px) {
    .v3h-val[b-gyo1pjemvl] {
        font-size: 1.125rem;
    }
}

@media print {
    .v3h-key[b-gyo1pjemvl],
    .v3h-val[b-gyo1pjemvl],
    .v3h-note[b-gyo1pjemvl] {
        color: var(--navy);
    }
}
/* /Components/Shared/VehicleClassRates.razor.rz.scp.css */
/* Vehicle class rates — V3. Panels, tables, fields and buttons come from the v3- layer in app.css. */

.vcr-notice[b-94qlguh5ba] { margin: 12px 20px 0; }
.vcr-code[b-94qlguh5ba] { color: var(--text-secondary); font-size: .75rem; font-weight: 500; letter-spacing: .02em; }

.vcr-badge[b-94qlguh5ba] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-muted); color: var(--text-secondary); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.vcr-badge[b-94qlguh5ba]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vcr-active[b-94qlguh5ba] { border-color: #b8cde3; background: #eaf1f9; color: var(--civic-panel); }

.vcr-actions-cell[b-94qlguh5ba] { text-align: right; white-space: nowrap; }
.vcr-actions-cell .v3-btn + .v3-btn[b-94qlguh5ba] { margin-left: 6px; }

.vcr-note[b-94qlguh5ba] { margin: 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.45; }
/* /Components/Shared/VendorDrawerShell.razor.rz.scp.css */
/* The stallholder drawer's shell and form classes (overlay, panel, civic header, body, footer, sections, labels, inputs, choice cards), moved verbatim
   out of AddVendorModal so every Add New uses the same implementation. Reached from any content in the shell through ::deep. */

.vds[b-wjj2bplzh5]  .avm-input[type=number],
.vds[b-wjj2bplzh5]  .avm-spin-input {
    -moz-appearance: textfield;
}

/* ── Form section block ─────────────────────────────────────── */
.vds[b-wjj2bplzh5]  .avm-section {
    padding-bottom: 16px;
    margin-bottom: 2px;
}

.vds[b-wjj2bplzh5]  .avm-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.vds[b-wjj2bplzh5]  .avm-sublabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* ── Two-column row ─────────────────────────────────────────── */
.vds[b-wjj2bplzh5]  .avm-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* ── Form group ─────────────────────────────────────────────── */
.vds[b-wjj2bplzh5]  .avm-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vds[b-wjj2bplzh5]  .avm-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-subtle);
    letter-spacing: 0.3px;
}

.vds[b-wjj2bplzh5]  .avm-req {
    color: var(--red);
}

/* ── Text / select / date input ─────────────────────────────── */
.vds[b-wjj2bplzh5]  .avm-input {
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--text);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

    .vds[b-wjj2bplzh5]  .avm-input:focus {
        border-color: var(--navy);
    }

    .vds[b-wjj2bplzh5]  .avm-input.form-input-error {
        border-color: var(--red);
        background: var(--red-bg);
    }

/* Locked facility display (read-only pill) */
.vds[b-wjj2bplzh5]  .avm-input-locked {
    background: var(--bg);
    font-weight: 600;
    color: var(--navy);
    cursor: default;
    user-select: none;
    border-style: dashed;
}

/* ── Field error message ────────────────────────────────────── */
.vds[b-wjj2bplzh5]  .form-error {
    font-size: 11px;
    color: var(--red);
    margin-top: 4px;
    display: block;
}

/* ── Inline hints ───────────────────────────────────────────── */
.vds[b-wjj2bplzh5]  .avm-hint-ok {
    font-size: 11px;
    color: var(--text-success);
    margin-top: 3px;
}

.vds[b-wjj2bplzh5]  .avm-hint-muted {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ── Helper note (no section selected) ─────────────────────── */
.vds[b-wjj2bplzh5]  .avm-section-note {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 4px;
}

/* ── Validation error banner ────────────────────────────────── */
.vds[b-wjj2bplzh5]  .avm-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--red-bg);
    border: 1px solid var(--red);
    color: var(--red);
    font-size: 12.5px;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 6px;
}

    .vds[b-wjj2bplzh5]  .avm-error svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }


/* ══════════════════════════════════════════════════════════════════════
   RIGHT-SIDE DRAWER STYLES
══════════════════════════════════════════════════════════════════════ */

.vds[b-wjj2bplzh5]  .eemo-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 33, 55, 0.4);
    z-index: 999;
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-overlay.show {
    opacity: 1;
    visibility: visible;
}

.vds[b-wjj2bplzh5]  .eemo-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 600px;
    max-width: 90vw;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    /* A closed drawer that stays mounted (so it can slide) casts no shadow into the page and takes no focus. */
    box-shadow: none;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, visibility 0s linear 0.3s;
    z-index: 1001;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-right {
    right: 0;
}

.vds[b-wjj2bplzh5]  .eemo-drawer.show {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(13, 33, 55, 0.15);
    visibility: visible;
    transition-delay: 0s;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

.vds[b-wjj2bplzh5]  .add-new-footer-leading { margin-right: auto; }
.vds[b-wjj2bplzh5]  .eemo-drawer-footer:has(.add-new-footer-leading),
.vds[b-wjj2bplzh5]  .eemo-drawer-footer:has(.avm-import-group) { flex-wrap: wrap; }
.vds[b-wjj2bplzh5]  .avm-import-group { flex-wrap: wrap; }
.vds[b-wjj2bplzh5]  .add-new-footer-leading .btn-ghost { min-height: 36px; }

/* Override modal body to allow scrolling in drawer */
.vds[b-wjj2bplzh5]  .eemo-drawer .eemo-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

/* Override modal header for drawer */
.vds[b-wjj2bplzh5]  .eemo-drawer .eemo-modal-header {
    flex-shrink: 0;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 768px) {
    .vds[b-wjj2bplzh5]  .eemo-drawer {
        width: 100vw;
        max-width: 100vw;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   DRAWER HEADER STYLES (Navy Gradient - matches SLH)
══════════════════════════════════════════════════════════════════════ */

.vds[b-wjj2bplzh5]  .eemo-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
    border-bottom: 1px solid rgba(200, 168, 75, 0.2);
    flex-shrink: 0;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(200, 168, 75, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-close:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-close svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Override modal header for drawer */
.vds[b-wjj2bplzh5]  .eemo-drawer .eemo-modal-header {
    display: none;
}


/* ── Basis of occupancy ────────────────────────────────────────────────────────────────────────────────
   A government form states its options plainly and shows which one is in force. Three bordered choices,
   navy when selected, no colour beyond the document's own. */
.vds[b-wjj2bplzh5]  .avm-choice {
    display: grid;
    /* The column count follows the number of bases actually offered, which is not fixed: an extension is offered only
       while editing a record that already carries one. Hard-coded at three, dropping an option left an empty cell and a
       band of whitespace beside the choices. */
    grid-template-columns: repeat(var(--avm-choice-count, 3), minmax(0, 1fr));
    gap: 10px;
    /* Clear of the fields below: the choices are their own question, not a heading for the next one. */
    margin-bottom: 18px;
}

.vds[b-wjj2bplzh5]  .avm-choice-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border, #d6dde5);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.vds[b-wjj2bplzh5]  .avm-choice-item:hover {
    border-color: var(--navy, #0b2239);
}

.vds[b-wjj2bplzh5]  .avm-choice-item.is-selected {
    background: color-mix(in srgb, var(--navy, #0b2239) 6%, #fff);
    border-color: var(--navy, #0b2239);
    box-shadow: inset 0 0 0 1px var(--navy, #0b2239);
}

.vds[b-wjj2bplzh5]  .avm-choice-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-strong, #0b2239);
    line-height: 1.3;
}

.vds[b-wjj2bplzh5]  .avm-choice-note {
    font-size: 11px;
    color: var(--text-muted, #5b6b7c);
    line-height: 1.35;
}

/* A statement about what the record will say, not advice — the same muted voice as the rest of the form. */
.vds[b-wjj2bplzh5]  .avm-hint {
    font-size: 11px;
    color: var(--text-muted, #5b6b7c);
    line-height: 1.4;
}

/* The identifier given to a space the office does not number. Stated rather than typed: the clerk is not asked for a
   stall number, because the office issues none for such a space and taking one from the facility's numbering left the
   real stall of that number unregisterable. Shown, not hidden, so the record is not silent about what it carries. */
.vds[b-wjj2bplzh5]  .avm-readonly {
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text-muted);
    background: var(--bg-subtle, #f4f6f8);
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}


/* ══════════════════════════════════════════════════════════════
   V3 ALIGNMENT (docs/interface/STALLTRACK_UI_V3_DIRECTION.md) — presentation only.
   ══════════════════════════════════════════════════════════════ */
.vds[b-wjj2bplzh5]  .eemo-drawer {
    --text-muted: var(--text-tertiary);
    --gold: var(--accent);
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-icon {
    background: var(--accent-soft);
    color: var(--navy);
}

    .vds[b-wjj2bplzh5]  .eemo-drawer-header-icon svg {
        stroke: var(--navy);
    }

.vds[b-wjj2bplzh5]  .eemo-drawer-header-title {
    color: var(--navy);
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-sub {
    color: var(--text-tertiary);
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-close {
    border-color: transparent;
    background: transparent;
}

    .vds[b-wjj2bplzh5]  .eemo-drawer-header-close:hover {
        border-color: transparent;
        background: var(--surface-hover);
    }

    .vds[b-wjj2bplzh5]  .eemo-drawer-header-close svg {
        stroke: var(--text-secondary);
    }

    .vds[b-wjj2bplzh5]  .eemo-drawer-header-close:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* The title and note set their own dark colours, which beat the tile's white — lift both on the blue fill. */
.vds[b-wjj2bplzh5]  .avm-choice-item.is-selected .avm-choice-title {
    color: #fff;
}

.vds[b-wjj2bplzh5]  .avm-choice-item.is-selected .avm-choice-note {
    color: rgba(255, 255, 255, .82);
}

/* ── V3 (2026-10-02): the drawer's identity band in the Dashboard's civic blue. Only the header is blue; the form
      below stays on white. White text on --civic-panel meets AA. ── */
.vds[b-wjj2bplzh5]  .eemo-drawer-header {
    background: var(--civic-panel);
    border-bottom-color: var(--civic-panel-deep);
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-icon {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
}

    .vds[b-wjj2bplzh5]  .eemo-drawer-header-icon svg {
        stroke: #ffffff;
    }

.vds[b-wjj2bplzh5]  .eemo-drawer-header-title {
    color: #ffffff;
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-sub {
    color: rgba(255, 255, 255, 0.82);
}

.vds[b-wjj2bplzh5]  .eemo-drawer-header-close {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

    .vds[b-wjj2bplzh5]  .eemo-drawer-header-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .vds[b-wjj2bplzh5]  .eemo-drawer-header-close svg {
        stroke: #ffffff;
    }

    .vds[b-wjj2bplzh5]  .eemo-drawer-header-close:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }
@media (max-width: 640px) { .avm-row-2[b-wjj2bplzh5] { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .vds[b-wjj2bplzh5]  .avm-choice { grid-template-columns: 1fr; } }

/* The selected basis / event card is filled with the civic accent (the white title and note above are lifted for it). */
.vds[b-wjj2bplzh5]  .avm-choice-item.is-selected {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--surface);
}
/* /Components/Shared/VendorRegistrationDrawer.razor.rz.scp.css */
.vendor-registration-form[b-s9ye9lq56w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
/* /Components/Shared/WorkspaceHeader.razor.rz.scp.css */
.wh[b-c0mlu1n6oa] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wh-crumbs[b-c0mlu1n6oa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.wh-crumbs a[b-c0mlu1n6oa] {
    border-radius: 4px;
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
}

.wh-crumbs a:hover[b-c0mlu1n6oa] {
    color: var(--accent);
}

.wh-crumbs a:focus-visible[b-c0mlu1n6oa] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.wh-crumbs [aria-current][b-c0mlu1n6oa] {
    color: var(--text-tertiary);
}

.wh-row[b-c0mlu1n6oa] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}

.wh-identity[b-c0mlu1n6oa] {
    min-width: 0;
}

.wh-title[b-c0mlu1n6oa] {
    margin: 0;
    color: var(--navy);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.wh-code[b-c0mlu1n6oa] {
    margin-left: 8px;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.wh-meta[b-c0mlu1n6oa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.wh-actions[b-c0mlu1n6oa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (max-width: 560px) {
    .wh-title[b-c0mlu1n6oa] {
        font-size: 1.25rem;
    }

    .wh-actions[b-c0mlu1n6oa] {
        width: 100%;
    }
}