.erp-report {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.erp-panel {
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.dark .erp-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: #111827;
    box-shadow: none;
}

.erp-panel-pad {
    padding: 1rem;
}

/*
 * Section title. Tailwind's preflight zeroes h1-h6 margins/size, so this class
 * (used for in-panel card titles, e.g. the Collections Cockpit mode cards) must
 * restore weight and size or the title mushes into the body text below it.
 */
.erp-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.dark .erp-section-title {
    color: #f3f4f6;
}

/*
 * Mode cards (title + description + CTA). Lay out as a flex column with real
 * spacing — without this the title, description, and button run together
 * (the description's .erp-help negative top margin pulls it up into the title).
 * The description grows so the CTA sits at the bottom, baseline-aligning the
 * buttons across cards of differing description length.
 */
.erp-mode-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    height: 100%;
}

.erp-mode-card .erp-help {
    margin: 0;
    flex: 1 1 auto;
}

.erp-mode-card .erp-actions-right {
    margin-top: 0.25rem;
}

/* Mobile-first: filter form stacks; columns/spans expand at lg via the media query at end of file. */
.erp-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: end;
}

.erp-col-1,
.erp-col-2,
.erp-col-3,
.erp-col-4,
.erp-col-5,
.erp-col-6,
.erp-col-8,
.erp-col-12 {
    grid-column: span 1;
}

.erp-actions-right {
    display: flex;
    justify-content: flex-start;
}

.erp-field label {
    display: block;
    margin-bottom: 0.35rem;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dark .erp-field label {
    color: #9ca3af;
}

.erp-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #111827;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 0.625rem;
}

.erp-input:focus {
    border-color: #f59e0b;
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.dark .erp-input {
    border-color: rgba(255, 255, 255, 0.2);
    background: #0f172a;
    color: #f3f4f6;
}

.erp-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: #d97706;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
}

.erp-submit:hover {
    background: #b45309;
}

.erp-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    position: relative;
}

/*
 * Right-edge fade hint so phone/tablet users can see at a glance that
 * the dense report tables (AR aging, inventory on-hand, etc.) scroll
 * horizontally instead of being silently clipped. Removed at lg+ where
 * the wider report panels usually fit every column.
 */
.erp-table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.75rem;
    pointer-events: none;
    background: linear-gradient(to left, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0));
}

.dark .erp-table-wrap::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

@media (min-width: 64rem) {
    .erp-table-wrap::after {
        display: none;
    }
}

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

.erp-table thead th {
    background: #f8fafc;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid #e5e7eb;
}

.erp-table tbody td {
    padding: 0.7rem 0.8rem;
    color: #111827;
    border-bottom: 1px solid #eef2f7;
}

.erp-table tbody tr:hover td {
    background: #fafafa;
}

.erp-table tfoot td {
    background: #f8fafc;
    font-weight: 700;
    padding: 0.7rem 0.8rem;
    border-top: 1px solid #e5e7eb;
    color: #111827;
}

.dark .erp-table thead th {
    background: rgba(255, 255, 255, 0.03);
    color: #d1d5db;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .erp-table tbody td {
    color: #e5e7eb;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .erp-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.dark .erp-table tfoot td {
    background: rgba(255, 255, 255, 0.03);
    color: #f3f4f6;
    border-top-color: rgba(255, 255, 255, 0.08);
}

.erp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.erp-emph {
    font-weight: 700;
}

.erp-link-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(217, 119, 6, 0.2);
    background: #fff7ed;
    color: #b45309;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    text-decoration: none;
    padding: 0.25rem 0.6rem;
}

.erp-link-chip:hover {
    background: #ffedd5;
}

.dark .erp-link-chip {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

.erp-empty {
    color: #6b7280;
    text-align: center;
    padding: 1.5rem 1rem;
}

.erp-help {
    margin: -0.5rem 0 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.erp-kpis + .erp-help {
    margin-top: 0.75rem;
    line-height: 1.4;
}

.erp-panel-pad > .erp-help:only-child {
    margin: 0;
}

.dark .erp-empty {
    color: #9ca3af;
}

.dark .erp-help {
    color: #9ca3af;
}

/* Mobile-first grids: start at 1 column, scale up via min-width media queries below. */
.erp-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.erp-grid {
    display: grid;
    gap: 1rem;
}

.erp-grid > * {
    min-width: 0;
}

.erp-grid-2,
.erp-grid-3 {
    grid-template-columns: 1fr;
}

.erp-kpis,
.erp-kpis.erp-kpis-2,
.erp-kpis.erp-kpis-3,
.erp-kpis.erp-kpis-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.erp-section-heading {
    margin: 0;
    padding: 1rem 1rem 0.25rem;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dark .erp-section-heading {
    color: #d1d5db;
}

.erp-muted-text {
    color: #6b7280;
    font-size: 0.75rem;
}

.dark .erp-muted-text {
    color: #9ca3af;
}

.erp-kpi {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 0.9rem;
}

.erp-kpi-label {
    display: block;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.erp-kpi strong {
    display: block;
    margin-top: 0.35rem;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.erp-muted {
    margin-top: 0.75rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.erp-metric {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 0.9rem;
}

.dark .erp-metric {
    border-color: rgba(255, 255, 255, 0.12);
    background: #111827;
}

.dark .erp-kpi {
    border-color: rgba(255, 255, 255, 0.12);
    background: #111827;
}

.dark .erp-kpi-label,
.dark .erp-muted {
    color: #9ca3af;
}

.dark .erp-kpi strong {
    color: #f3f4f6;
}

.erp-metric-title {
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dark .erp-metric-title {
    color: #9ca3af;
}

.erp-metric-value {
    margin-top: 0.35rem;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dark .erp-metric-value {
    color: #f3f4f6;
}

/* sm: 640px+ — pair up cards. */
@media (min-width: 40rem) {
    .erp-grid-2,
    .erp-grid-3,
    .erp-kpis,
    .erp-kpis.erp-kpis-2,
    .erp-kpis.erp-kpis-3,
    .erp-kpis.erp-kpis-4,
    .erp-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* md: 768px+ — three across for metrics + 3-grids; kpi-3 reaches its target. */
@media (min-width: 48rem) {
    .erp-metrics,
    .erp-grid-3,
    .erp-kpis.erp-kpis-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .erp-kpis.erp-kpis-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* lg: 1024px+ — restore the full 12-col filter grid and bring KPI grids to their max. */
@media (min-width: 64rem) {
    .erp-filters {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .erp-col-1 { grid-column: span 1; }
    .erp-col-2 { grid-column: span 2; }
    .erp-col-3 { grid-column: span 3; }
    .erp-col-4 { grid-column: span 4; }
    .erp-col-5 { grid-column: span 5; }
    .erp-col-6 { grid-column: span 6; }
    .erp-col-8 { grid-column: span 8; }
    .erp-col-12 { grid-column: span 12; }

    .erp-actions-right {
        justify-content: flex-end;
    }

    .erp-kpis {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ----------------------------------------------------------------------
   Print-friendly report layout
   ----------------------------------------------------------------------
   When the operator triggers Print (header action on Income Statement
   / Balance Sheet / Trial Balance / GL pages), strip the Filament shell
   chrome — sidebar, topbar, header actions, filter panels — and let the
   `.erp-report` block flow at full width on the paper. Activated by the
   `body.erp-print-mode` class that the `printReport()` JS hook sets
   immediately before invoking `window.print()`.
---------------------------------------------------------------------- */
@media print {
    .fi-sidebar,
    .fi-topbar,
    .fi-breadcrumbs,
    .fi-page-header-actions,
    .fi-header-actions,
    .fi-modal,
    .erp-filters,
    .erp-print-hide {
        display: none !important;
    }

    .fi-main,
    .fi-layout,
    .fi-page,
    .fi-section,
    .fi-section-content {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }

    .erp-report,
    .erp-panel,
    .erp-panel-pad,
    .erp-table-wrap {
        border: none !important;
        box-shadow: none !important;
        background: white !important;
    }

    .erp-table {
        font-size: 11px;
    }

    .erp-table th,
    .erp-table td {
        padding: 4px 6px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* Page-break helpers: report panels stay together where possible. */
    .erp-panel {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    @page {
        margin: 16mm 12mm;
    }
}