/* Отчёты и финансы */

.reports-page { padding: 20px 20px 60px; }
.rep-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rep-tabs { display: inline-flex; background: #f1f5f9; border-radius: 12px; padding: 4px; }
.rep-tab { border: 0; background: none; padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; }
.rep-tab.active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.rep-period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period-toggle { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; }
.period-toggle-btn { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; }
.period-toggle-btn.active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.rep-period select { border: 1px solid #e2e8f0; border-radius: 10px; padding: 7px 10px; font-size: 13px; background: #fff; }
.rep-btn { border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: #334155; }
.rep-btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.rep-range { font-size: 12px; color: #94a3b8; margin-bottom: 12px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi-grid.three { grid-template-columns: repeat(3, 1fr); }
.kpi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; transition: all .2s; }
.kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
.kpi-top { display: flex; align-items: center; gap: 8px; }
.kpi-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.kpi-label { font-size: 12px; color: #64748b; font-weight: 600; }
.kpi-value { font-size: 24px; font-weight: 800; color: #0f172a; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.kpi-foot { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.kpi-delta.up { color: #059669; font-weight: 700; }
.kpi-delta.down { color: #dc2626; font-weight: 700; }
.kpi-delta.muted { color: #cbd5e1; }
.kpi-prev { color: #94a3b8; }

.rep-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.rep-card-title { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.rep-svg { width: 100%; height: 200px; display: block; }
.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut-svg { width: 160px; height: 160px; flex-shrink: 0; }
.donut-legend { flex: 1; min-width: 160px; }
.donut-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; padding: 3px 0; }
.donut-row b { margin-left: auto; color: #0f172a; }
.donut-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rep-muted { color: #94a3b8; font-size: 13px; }

.rep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rep-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; }
.rep-table td { padding: 10px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.rep-table tr:last-child td { border-bottom: 0; }
.rep-table .neg { color: #dc2626; }
.rep-table .pos { color: #059669; font-weight: 600; }
.src-badge { display: inline-flex; width: 20px; height: 20px; border-radius: 6px; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; margin-right: 6px; }
.op-type { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.op-type.income { background: #dcfce7; color: #166534; }
.op-type.expense { background: #fee2e2; color: #991b1b; }
.op-type.commission { background: #fef3c7; color: #92400e; }
.rep-table .amt.income { color: #059669; font-weight: 700; }
.rep-table .amt.expense, .rep-table .amt.commission { color: #dc2626; font-weight: 700; }
.op-del { border: 0; background: none; color: #cbd5e1; cursor: pointer; font-size: 12px; }
.op-del:hover { color: #ef4444; }

.top-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.top-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.top-card.first { background: #eff6ff; border-color: #bfdbfe; }
.top-rank { font-size: 11px; color: #94a3b8; font-weight: 700; }
.top-name { font-size: 13px; font-weight: 600; color: #0f172a; margin: 2px 0 4px; }
.top-revenue { font-size: 16px; font-weight: 800; color: #0f172a; }
.top-meta { font-size: 11px; color: #64748b; margin: 4px 0 6px; }
.progress { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: #10b981; }

.cascade { display: flex; flex-direction: column; gap: 6px; }
.cascade-row { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.cascade-row.income { background: #ecfdf5; color: #166534; }
.cascade-row.commission { background: #fef3c7; color: #92400e; }
.cascade-row.expense { background: #fef2f2; color: #991b1b; }
.cascade-row.total { background: #eff6ff; border: 2px solid #3b82f6; font-weight: 800; color: #1e40af; }

.exp-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.exp-row:last-child { border-bottom: 0; }
.exp-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.exp-body { flex: 1; min-width: 0; }
.exp-title { font-size: 13px; color: #0f172a; font-weight: 600; display: flex; justify-content: space-between; margin-bottom: 4px; }
.exp-title span { color: #94a3b8; font-weight: 600; }
.exp-amount { font-size: 13px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }

/* Drawer операции */
.op-type-toggle { display: flex; gap: 6px; margin-bottom: 14px; }
.op-type-toggle button { flex: 1; padding: 10px; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; color: #475569; }
.op-type-toggle button.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.op-field { margin-bottom: 12px; }
.op-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 700; margin-bottom: 5px; }
.op-field input, .op-field select, .op-field textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.op-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .chart-grid { grid-template-columns: 1fr; }
    .top-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .reports-page { padding: 12px 12px 40px; }
    .rep-header { gap: 8px; margin-bottom: 10px; }
    .rep-tabs { width: 100%; }
    .rep-tab { flex: 1; padding: 8px 10px; text-align: center; }
    .kpi-grid, .kpi-grid.three { grid-template-columns: 1fr 1fr; gap: 8px; }
    .kpi-card { padding: 10px 12px; border-radius: 12px; }
    .kpi-top { gap: 6px; }
    .kpi-icon { width: 24px; height: 24px; border-radius: 7px; }
    .kpi-label { font-size: 11px; }
    .kpi-value { font-size: 19px; margin: 6px 0 2px; }
    .kpi-foot { font-size: 10px; }

    /* Период и экспорт — по два контрола в ряд */
    .rep-period > * { flex: 1 1 45%; min-width: 0; }
    .rep-period .period-toggle { flex: 1 1 100%; }
    .rep-period select { width: 100%; }
    .rep-btn { padding: 8px 10px; }
    .rep-card { padding: 12px; border-radius: 12px; }
    .rep-svg { height: 160px; }
    .donut-svg { width: 120px; height: 120px; }
    .top-grid { grid-template-columns: 1fr; }
    .rep-period { width: 100%; }
    .rep-period select { flex: 1; }
    .rep-table thead { display: none; }
    .rep-table td { display: flex; justify-content: space-between; border-bottom: 0; padding: 4px 0; }
    .rep-table tr { display: block; border-bottom: 1px solid #f1f5f9; padding: 8px 0; }
    .op-row { grid-template-columns: 1fr; }
}

/* Dashboard: ten owner metrics */
.kpi-grid.ten { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rep-kpi {
    appearance: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    color: inherit;
}
.rep-kpi.active { border-color: #356a8a; box-shadow: 0 0 0 2px rgba(53, 106, 138, .12), 0 8px 18px rgba(23, 38, 43, .06); }
.rep-kpi-sub { margin: 0 0 7px; min-height: 27px; color: #64748b; font-size: 11px; line-height: 1.35; }
.rep-kpi:focus-visible { outline: 3px solid #7fb2c8; outline-offset: 2px; }

.rep-insights { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #dbe6e9; border-radius: 12px; background: #f7fafb; }
.rep-insights-title { color: #40565d; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.rep-insight { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; font-size: 11px; line-height: 1.4; }
.rep-insight span { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.rep-insight.warn { background: #fff7ed; color: #9a3412; }
.rep-insight.warn span { background: #f59e0b; }
.rep-insight.good { background: #ecfdf5; color: #166534; }
.rep-insight.good span { background: #10b981; }

.rep-kpi-detail { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: -2px 0 16px; padding: 10px 12px; border-left: 3px solid #356a8a; background: #f2f5f6; border-radius: 0 8px 8px 0; }
.rep-kpi-detail-title { display: flex; align-items: baseline; gap: 10px; width: 100%; }
.rep-kpi-detail-title span { color: #40565d; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.rep-kpi-detail-title b { font-size: 18px; color: #17262b; }
.rep-kpi-detail p { margin: 0; color: #40565d; font-size: 12px; line-height: 1.45; }
.rep-kpi-detail-meta { margin-left: auto; color: #356a8a; font-size: 11px; font-weight: 700; }

.rep-chart-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 14px; margin-bottom: 14px; }
.rep-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rep-subtitle { margin: 3px 0 0; color: #94a3b8; font-size: 11px; }
.rep-chart-switch { display: inline-flex; padding: 3px; border-radius: 8px; background: #f1f5f9; }
.rep-chart-switch button { border: 0; border-radius: 6px; padding: 5px 8px; background: transparent; color: #64748b; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.rep-chart-switch button.active { color: #17262b; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.rep-main-chart { height: 280px; margin-top: 12px; overflow: visible; }
.rep-chart-point { cursor: pointer; outline: none; }
.rep-chart-point:focus .rep-chart-bar { stroke: #17262b; stroke-width: 2; }
.rep-chart-bar { transition: fill .16s ease, opacity .16s ease; }
.rep-chart-point:hover .rep-chart-bar { fill: #7fb0c4; }
.rep-chart-readout { min-height: 28px; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: #f7fafb; color: #64748b; font-size: 11px; }
.rep-chart-readout b { color: #17262b; }
.rep-chart-readout span { color: #356a8a; }

.rep-channel-card { min-width: 0; }
.rep-pill { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #ecfdf5; color: #166534; font-size: 10px; font-weight: 700; white-space: nowrap; }
.rep-channel-wrap { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.rep-donut { position: relative; width: 156px; height: 156px; flex: 0 0 auto; }
.rep-donut .donut-svg { width: 156px; height: 156px; }
.rep-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.rep-donut-center b { color: #17262b; font-size: 18px; line-height: 1; }
.rep-donut-center span { margin-top: 3px; color: #94a3b8; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.rep-channel-legend { min-width: 0; flex: 1; }
.rep-channel-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #f1f5f9; font-size: 11px; color: #40565d; }
.rep-channel-row:last-child { border-bottom: 0; }
.rep-channel-row b { color: #17262b; }
.rep-channel-row small { grid-column: 2 / 4; margin-top: -3px; color: #94a3b8; font-size: 9px; }
.rep-channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rep-quality-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; margin-bottom: 14px; }
.rep-card-total { color: #17262b; font-size: 15px; }
.rep-structure-bar { display: flex; gap: 3px; height: 12px; margin: 16px 0 14px; overflow: hidden; border-radius: 999px; background: #f1f5f9; }
.rep-structure-bar span { display: block; height: 100%; min-width: 3px; }
.rep-structure-legend { display: flex; flex-direction: column; gap: 8px; }
.rep-legend-row { display: flex; align-items: center; gap: 7px; color: #40565d; font-size: 12px; }
.rep-legend-row b { margin-left: auto; color: #17262b; }
.rep-legend-row small { width: 36px; text-align: right; color: #94a3b8; }
.rep-quality-grid .rep-card { margin-bottom: 0; }
.rep-quality-grid { margin-bottom: 14px; }
.rep-quality-grid .rep-quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rep-quality-item { min-width: 0; padding: 10px; border-radius: 9px; background: #f7fafb; }
.rep-quality-item b { display: block; color: #17262b; font-size: 22px; line-height: 1.1; }
.rep-quality-item span { display: block; margin: 2px 0 9px; color: #64748b; font-size: 10px; line-height: 1.3; }
.rep-quality-item small { display: block; margin-top: 6px; color: #94a3b8; font-size: 9px; line-height: 1.3; }
.rep-meter { height: 5px; overflow: hidden; border-radius: 999px; background: #e8eef0; }
.rep-meter i { display: block; height: 100%; border-radius: inherit; }
.rep-source-share { width: 64px; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: #eef2f4; }
.rep-source-share span { display: block; height: 100%; border-radius: inherit; }

@media (max-width: 1240px) {
    .kpi-grid.ten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .rep-chart-grid { grid-template-columns: 1fr; }
    .rep-quality-grid { grid-template-columns: 1fr; }
    .rep-quality-grid .rep-quality-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .kpi-grid.ten { grid-template-columns: 1fr 1fr; }
    .rep-insights { align-items: flex-start; }
    .rep-kpi-detail-meta { margin-left: 0; }
    .rep-chart-switch { flex-wrap: wrap; }
    .rep-chart-grid { gap: 10px; }
    .rep-channel-wrap { flex-direction: column; align-items: flex-start; }
    .rep-donut { align-self: center; }
    .rep-channel-legend { width: 100%; }
    .rep-quality-grid .rep-quality-grid { grid-template-columns: 1fr; }
    .rep-main-chart { height: 210px; }
    .rep-card-head { gap: 8px; }
}
/* Dark theme: reports dashboard */
html[data-theme="dark"] .reports-page { color: #eaf1f2; }
html[data-theme="dark"] .rep-tabs,
html[data-theme="dark"] .period-toggle { background: #17282d; }
html[data-theme="dark"] .rep-tab,
html[data-theme="dark"] .period-toggle-btn { color: #afc3c7; }
html[data-theme="dark"] .rep-tab.active,
html[data-theme="dark"] .period-toggle-btn.active { background: #1e3137; color: #eaf1f2; box-shadow: none; }
html[data-theme="dark"] .rep-period select,
html[data-theme="dark"] .rep-btn { background: #17282d; border-color: #2a4148; color: #eaf1f2; }
html[data-theme="dark"] .rep-btn.primary { background: #7fb0c4; border-color: #7fb0c4; color: #0f1d21; }
html[data-theme="dark"] .rep-range { color: #8fa7ad; }

html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .rep-card { background: #17282d; border-color: #2a4148; color: #eaf1f2; }
html[data-theme="dark"] .kpi-label,
html[data-theme="dark"] .rep-card-title { color: #eaf1f2; }
html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .rep-card-total { color: #eaf1f2; }
html[data-theme="dark"] .rep-kpi-sub,
html[data-theme="dark"] .rep-prev,
html[data-theme="dark"] .kpi-prev,
html[data-theme="dark"] .rep-subtitle,
html[data-theme="dark"] .rep-muted { color: #8fa7ad; }
html[data-theme="dark"] .rep-kpi.active { border-color: #7fb0c4; box-shadow: 0 0 0 2px rgba(127, 176, 196, .18); }
html[data-theme="dark"] .kpi-delta.up { color: #6ee7b7; }
html[data-theme="dark"] .kpi-delta.down { color: #fca5a5; }

html[data-theme="dark"] .rep-insights { background: #17282d; border-color: #2a4148; }
html[data-theme="dark"] .rep-insights-title { color: #afc3c7; }
html[data-theme="dark"] .rep-insight.warn { background: #3a2a18; color: #fcd9a4; }
html[data-theme="dark"] .rep-insight.good { background: #153a33; color: #a7f3d0; }

html[data-theme="dark"] .rep-kpi-detail { background: #17282d; border-color: #2a4148; border-left-color: #7fb0c4; }
html[data-theme="dark"] .rep-kpi-detail-title span { color: #afc3c7; }
html[data-theme="dark"] .rep-kpi-detail-title b { color: #eaf1f2; }
html[data-theme="dark"] .rep-kpi-detail p,
html[data-theme="dark"] .rep-kpi-detail-meta { color: #afc3c7; }
html[data-theme="dark"] .rep-kpi-detail-meta { color: #7fb0c4; }

html[data-theme="dark"] .rep-chart-switch { background: #0f1d21; }
html[data-theme="dark"] .rep-chart-switch button { color: #afc3c7; }
html[data-theme="dark"] .rep-chart-switch button.active { background: #1e3137; color: #eaf1f2; box-shadow: none; }
html[data-theme="dark"] .rep-chart-readout { background: #1e3137; color: #afc3c7; }
html[data-theme="dark"] .rep-chart-readout b { color: #eaf1f2; }
html[data-theme="dark"] .rep-chart-readout span { color: #7fb0c4; }
html[data-theme="dark"] .rep-main-chart line { stroke: #2a4148 !important; }
html[data-theme="dark"] .rep-main-chart text { fill: #8fa7ad !important; }
html[data-theme="dark"] .rep-chart-bar { fill: #2a4148 !important; }
html[data-theme="dark"] .rep-chart-bar.active { fill: #7fb0c4 !important; }
html[data-theme="dark"] .rep-chart-point:hover .rep-chart-bar { fill: #7fb0c4 !important; }

html[data-theme="dark"] .rep-pill { background: #153a33; color: #a7f3d0; }
html[data-theme="dark"] .rep-channel-row { border-bottom-color: #2a4148; color: #afc3c7; }
html[data-theme="dark"] .rep-channel-row b,
html[data-theme="dark"] .rep-donut-center b { color: #eaf1f2; }
html[data-theme="dark"] .rep-channel-row small,
html[data-theme="dark"] .rep-donut-center span { color: #8fa7ad; }

html[data-theme="dark"] .rep-quality-item { background: #1e3137; }
html[data-theme="dark"] .rep-quality-item b { color: #eaf1f2; }
html[data-theme="dark"] .rep-quality-item span,
html[data-theme="dark"] .rep-quality-item small { color: #8fa7ad; }
html[data-theme="dark"] .rep-meter,
html[data-theme="dark"] .rep-structure-bar,
html[data-theme="dark"] .progress { background: #2a4148; }
html[data-theme="dark"] .rep-legend-row { color: #afc3c7; }
html[data-theme="dark"] .rep-legend-row b { color: #eaf1f2; }
html[data-theme="dark"] .rep-legend-row small { color: #8fa7ad; }

html[data-theme="dark"] .rep-table th { color: #8fa7ad; border-bottom-color: #2a4148; }
html[data-theme="dark"] .rep-table td { color: #dbe6e9; border-bottom-color: #243a40; }
html[data-theme="dark"] .rep-source-share { background: #2a4148; }
html[data-theme="dark"] .top-card { background: #17282d; border-color: #2a4148; }
html[data-theme="dark"] .top-card.first { background: #1e3137; border-color: #3d5f6b; }
html[data-theme="dark"] .top-rank,
html[data-theme="dark"] .top-meta { color: #8fa7ad; }
html[data-theme="dark"] .top-name,
html[data-theme="dark"] .top-revenue { color: #eaf1f2; }

@media (max-width: 640px) {
    html[data-theme="dark"] .rep-tab.active { background: #1e3137; }
}
.top-expense { margin-top: 3px; color: #64748b; font-size: 10px; }
html[data-theme="dark"] .top-expense { color: #8fa7ad; }
.rep-expense-card { margin-bottom: 14px; }
.rep-expense-total { color: #17262b; font-size: 20px; font-weight: 800; }
.rep-expense-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 12px; color: #64748b; font-size: 11px; }
.rep-expense-meta b { color: #17262b; }
.rep-expense-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rep-expense-cat > span { display: block; color: #40565d; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-expense-cat > b { display: block; margin: 2px 0 5px; color: #17262b; font-size: 12px; }
.rep-expense-cat > div { height: 4px; overflow: hidden; border-radius: 99px; background: #eef3f4; }
.rep-expense-cat i { display: block; height: 100%; border-radius: inherit; background: #356a8a; }
html[data-theme="dark"] .rep-expense-total,
html[data-theme="dark"] .rep-expense-meta b,
html[data-theme="dark"] .rep-expense-cat > b { color: #eaf1f2; }
html[data-theme="dark"] .rep-expense-meta,
html[data-theme="dark"] .rep-expense-cat > span { color: #8fa7ad; }
html[data-theme="dark"] .rep-expense-cat > div { background: #2a4148; }
html[data-theme="dark"] .rep-expense-cat i { background: #7fb0c4; }
@media (max-width: 900px) { .rep-expense-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rep-pnl-card { margin-bottom: 14px; }
.rep-pnl-table { overflow-x: auto; margin-top: 8px; }
.rep-pnl-table td small { display: block; color: #94a3b8; font-size: 9px; }
.rep-pnl-table td:not(:first-child) { text-align: right; }
.rep-pnl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef3f4; }
.rep-pnl-subtitle { margin-bottom: 6px; color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.rep-pnl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 5px 0; border-bottom: 1px solid #f1f5f9; font-size: 11px; color: #40565d; }
.rep-pnl-row b { color: #17262b; }
.rep-pnl-row small { grid-column: 1 / 3; color: #94a3b8; font-size: 9px; }
html[data-theme="dark"] .rep-pnl-cols { border-top-color: #243a40; }
html[data-theme="dark"] .rep-pnl-subtitle { color: #8fa7ad; }
html[data-theme="dark"] .rep-pnl-row { color: #afc3c7; border-bottom-color: #243a40; }
html[data-theme="dark"] .rep-pnl-row b { color: #eaf1f2; }
html[data-theme="dark"] .rep-pnl-row small { color: #8fa7ad; }
@media (max-width: 700px) { .rep-pnl-cols { grid-template-columns: 1fr; } }
/* P&L table: stable columns on desktop, data cards on mobile */
.rep-pnl-table .rep-table { table-layout: fixed; }
.rep-pnl-table .rep-table th:nth-child(1),
.rep-pnl-table .rep-table td:nth-child(1) { width: 36%; }
.rep-pnl-table .rep-table th:nth-child(2),
.rep-pnl-table .rep-table td:nth-child(2) { width: 15%; }
.rep-pnl-table .rep-table th:nth-child(3),
.rep-pnl-table .rep-table td:nth-child(3) { width: 15%; }
.rep-pnl-table .rep-table th:nth-child(4),
.rep-pnl-table .rep-table td:nth-child(4) { width: 19%; }
.rep-pnl-table .rep-table th:nth-child(5),
.rep-pnl-table .rep-table td:nth-child(5) { width: 12%; }
.rep-pnl-table .rep-table th,
.rep-pnl-table .rep-table td { padding: 8px 10px; }
.rep-pnl-table .rep-table td:not(:first-child) { text-align: right; }

@media (max-width: 640px) {
    .rep-pnl-table { overflow: visible; }
    .rep-pnl-table .rep-table,
    .rep-pnl-table .rep-table tbody { display: block; width: 100%; }
    .rep-pnl-table .rep-table thead { display: none; }
    .rep-pnl-table .rep-table tr { display: block; margin-bottom: 8px; padding: 10px; border: 1px solid #e8eef0; border-radius: 8px; }
    .rep-pnl-table .rep-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: auto !important; padding: 3px 0; border: 0; text-align: right; }
    .rep-pnl-table .rep-table td::before { content: attr(data-label); color: #94a3b8; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-align: left; }
    .rep-pnl-table .rep-table td:first-child { display: block; padding-bottom: 6px; text-align: left; }
    .rep-pnl-table .rep-table td:first-child::before { display: none; }
    .rep-pnl-table .rep-table td:first-child small { display: block; margin-top: 2px; }
    .rep-pnl-table .rep-table td:first-child { font-weight: 700; color: #17262b; }
    html[data-theme="dark"] .rep-pnl-table .rep-table tr { border-color: #2a4148; }
    html[data-theme="dark"] .rep-pnl-table .rep-table td:first-child { color: #eaf1f2; }
    html[data-theme="dark"] .rep-pnl-table .rep-table td::before { color: #8fa7ad; }
}
/* P&L: header cells follow the same alignment as numeric values */
.rep-pnl-table .rep-table th:not(:first-child) { text-align: right; }
.rep-pnl-table .rep-table th:first-child { text-align: left; }
/* Revenue by source: aligned desktop columns and labeled mobile cards */
.rep-sources-table th:not(:first-child),
.rep-sources-table td:not(:first-child) { text-align: right; }
.rep-sources-table th:first-child,
.rep-sources-table td:first-child { text-align: left; }

@media (max-width: 640px) {
    .rep-sources-table,
    .rep-sources-table tbody { display: block; width: 100%; }
    .rep-sources-table thead { display: none; }
    .rep-sources-table tr { display: block; margin-bottom: 8px; padding: 10px; border: 1px solid #e8eef0; border-radius: 8px; }
    .rep-sources-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; border: 0; text-align: right; }
    .rep-sources-table td::before { content: attr(data-label); color: #94a3b8; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-align: left; }
    .rep-sources-table td:first-child { display: block; padding-bottom: 5px; font-weight: 700; color: #17262b; text-align: left; }
    .rep-sources-table td:first-child::before { display: none; }
    html[data-theme="dark"] .rep-sources-table tr { border-color: #2a4148; }
    html[data-theme="dark"] .rep-sources-table td:first-child { color: #eaf1f2; }
    html[data-theme="dark"] .rep-sources-table td::before { color: #8fa7ad; }
}