/* POS-DFR-001 — POS "Reports" tab (data-category=reports).
   Dark base first (pos.css palette), then the html.rs-light overrides in the
   same shape pos-builder.css/shell.css use. The sidebar itself stays dark
   navy in BOTH themes (matches .rs-rail chrome — no html.rs-light override),
   only .pos-reports-main content re-themes. */

.pos-reports-panel {
    display: none; /* flex when active — see pos.js selectCategory */
    grid-column: 1 / -1;
    min-height: 0;
    overflow: hidden;
}

.pos-reports-sidebar {
    flex: 0 0 200px;
    background: #13203b;
    border-right: 1px solid #0f3460;
    padding: 18px 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.pos-reports-sidebar-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: #7f93b3;
    padding: 0 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #0f3460;
}
.pos-reports-nav { display: flex; flex-direction: column; gap: 2px; }
.pos-reports-nav-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 8px; border: none; background: transparent;
    color: #cbd5e1; font-family: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer; min-height: 40px;
}
.pos-reports-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.pos-reports-nav-item.active { background: var(--primary, #2196F3); color: #fff; font-weight: 600; }

.pos-reports-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 20px 24px;
    background: #0d1526;
    color: #fff;
}

html.rs-light .pos-reports-main { background: #f5f7fa; color: #0f172a; }

/* ── Date-range bar ────────────────────────────────────────────────── */
.pr-datebar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.pr-datebar-title { font-size: 22px; font-weight: 700; margin-right: auto; }
.pr-datebar-nav {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid #0f3460; border-radius: 8px; overflow: hidden;
}
.pr-datebar-nav button {
    border: none; background: #1a1a2e; color: #fff; padding: 8px 10px;
    font-family: inherit; font-size: 14px; cursor: pointer; min-height: 36px;
}
.pr-datebar-nav button:hover { background: #24243e; }
.pr-datebar-nav .pr-date-label { padding: 8px 12px; font-weight: 600; white-space: nowrap; }
.pr-preset-btn {
    padding: 8px 14px; border-radius: 8px; border: 1px solid #0f3460;
    background: #1a1a2e; color: #cbd5e1; font-family: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer; min-height: 36px;
}
.pr-preset-btn:hover { background: #24243e; color: #fff; }
.pr-preset-btn.active { background: var(--primary, #2196F3); border-color: var(--primary, #2196F3); color: #fff; }
.pr-export-bar { display: flex; gap: 8px; margin-left: 8px; }
.pr-export-bar button {
    padding: 8px 14px; border-radius: 8px; border: 1px solid #0f3460;
    background: #1a1a2e; color: #cbd5e1; font-family: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer; min-height: 36px;
}
.pr-export-bar button.primary { background: #0f172a; border-color: #0f172a; color: #fff; }

html.rs-light .pr-datebar-nav { border-color: #e2e8f0; }
html.rs-light .pr-datebar-nav button { background: #fff; color: #0f172a; }
html.rs-light .pr-datebar-nav button:hover { background: #f1f5f9; }
html.rs-light .pr-preset-btn { background: #fff; border-color: #e2e8f0; color: #334155; }
html.rs-light .pr-preset-btn:hover { background: #f1f5f9; color: #0f172a; }
html.rs-light .pr-export-bar button { background: #fff; border-color: #e2e8f0; color: #334155; }
html.rs-light .pr-export-bar button.primary { background: #0f172a; border-color: #0f172a; color: #fff; }

/* ── Loading / empty / error / permission-denied states ──────────────── */
.pr-state { padding: 60px 20px; text-align: center; color: #94a3b8; font-size: 15px; }
.pr-state.pr-state-error { color: #fca5a5; }
html.rs-light .pr-state { color: #64748b; }
html.rs-light .pr-state.pr-state-error { color: #b91c1c; }

/* ── KPI cards ─────────────────────────────────────────────────────── */
.pr-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.pr-kpi-card {
    background: #1a1a2e; border: 1px solid #0f3460; border-radius: 10px;
    padding: 14px 16px;
}
.pr-kpi-label { font-size: 12px; color: #94a3b8; font-weight: 600; margin-bottom: 6px; }
.pr-kpi-value { font-size: 22px; font-weight: 700; }
.pr-kpi-value.pr-negative { color: #fca5a5; }
.pr-kpi-value.pr-positive { color: #4ade80; }
html.rs-light .pr-kpi-card { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
html.rs-light .pr-kpi-label { color: #64748b; }
html.rs-light .pr-kpi-value.pr-negative { color: #dc2626; }
html.rs-light .pr-kpi-value.pr-positive { color: #16a34a; }

.pr-balanced-badge {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-radius: 10px; background: rgba(74, 222, 128, 0.12); border: 1px solid #16a34a;
}
.pr-balanced-badge.pr-out-of-balance { background: rgba(252, 165, 165, 0.12); border-color: #dc2626; }
.pr-balanced-badge .pr-badge-title { font-weight: 700; }
.pr-balanced-badge .pr-badge-sub { font-size: 12px; color: #94a3b8; }
html.rs-light .pr-balanced-badge .pr-badge-sub { color: #64748b; }

/* ── Section cards (Revenue by Dept / Payment Methods / reconciliation) ── */
.pr-section-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px; margin-bottom: 18px;
}
.pr-card {
    background: #1a1a2e; border: 1px solid #0f3460; border-radius: 10px; padding: 16px;
}
.pr-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
html.rs-light .pr-card { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

.pr-legend { display: flex; flex-direction: column; gap: 8px; }
.pr-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pr-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.pr-legend-label { flex: 1; }
.pr-legend-value { font-weight: 700; }
.pr-legend-pct { color: #94a3b8; font-size: 12px; width: 38px; text-align: right; }
html.rs-light .pr-legend-pct { color: #64748b; }

.pr-donut { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 14px; position: relative; }
.pr-donut-hole {
    position: absolute; inset: 18px; border-radius: 50%; background: #1a1a2e;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pr-donut-hole .pr-donut-total { font-size: 16px; font-weight: 700; }
.pr-donut-hole .pr-donut-caption { font-size: 10px; color: #94a3b8; text-align: center; }
html.rs-light .pr-donut-hole { background: #fff; }
html.rs-light .pr-donut-hole .pr-donut-caption { color: #64748b; }

.pr-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.pr-bar-label { flex: 0 0 70px; }
.pr-bar-track { flex: 1; height: 10px; border-radius: 6px; background: #0f172a; overflow: hidden; }
.pr-bar-fill { height: 100%; border-radius: 6px; background: var(--primary, #2196F3); }
.pr-bar-value { flex: 0 0 70px; text-align: right; font-weight: 700; }
html.rs-light .pr-bar-track { background: #e2e8f0; }

.pr-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #0f3460; font-size: 13px; }
.pr-detail-row:last-child { border-bottom: none; }
.pr-detail-row .pr-detail-label { color: #94a3b8; }
.pr-detail-row .pr-detail-value { font-weight: 700; }
.pr-detail-row a { color: var(--primary, #2196F3); text-decoration: none; font-size: 12px; }
html.rs-light .pr-detail-row { border-bottom-color: #e2e8f0; }
html.rs-light .pr-detail-row .pr-detail-label { color: #64748b; }

/* ── Generic transaction-detail table (12 "generated report" pages) ──── */
.pr-table-wrap { overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pr-table th, .pr-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #0f3460; white-space: nowrap; }
.pr-table th { color: #94a3b8; font-weight: 600; cursor: pointer; user-select: none; }
.pr-table th:hover { color: #fff; }
.pr-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
html.rs-light .pr-table th, html.rs-light .pr-table td { border-bottom-color: #e2e8f0; }
html.rs-light .pr-table th { color: #64748b; }
html.rs-light .pr-table th:hover { color: #0f172a; }
html.rs-light .pr-table tbody tr:hover { background: #f8fafc; }

.pr-top-list { list-style: none; margin: 0; padding: 0; counter-reset: pr-rank; }
.pr-top-list li {
    counter-increment: pr-rank;
    display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px;
    border-bottom: 1px solid #0f3460;
}
.pr-top-list li:last-child { border-bottom: none; }
.pr-top-list li::before {
    content: counter(pr-rank) ".";
    color: #94a3b8; font-weight: 700; flex: 0 0 18px;
}
.pr-top-list .pr-top-name { flex: 1; }
.pr-top-list .pr-top-qty { color: #94a3b8; font-size: 12px; }
.pr-top-list .pr-top-revenue { font-weight: 700; }
html.rs-light .pr-top-list li { border-bottom-color: #e2e8f0; }
html.rs-light .pr-top-list .pr-top-qty { color: #64748b; }

@media (max-width: 920px) {
    .pos-reports-panel { flex-direction: column; }
    .pos-reports-sidebar { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; }
    .pos-reports-nav { flex-direction: row; flex-wrap: wrap; }
}

/* Issues-PosReportRange-001: From / To range on the reports date bar */
.pr-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-range label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #94a3b8; }
.pr-range input[type="date"] { padding: 7px 8px; border-radius: 8px; border: 1px solid #0f3460; background: #1a1a2e; color: #fff; font: inherit; font-size: 13px; min-height: 36px; box-sizing: border-box; color-scheme: dark; }
html.rs-light .pr-range label { color: #475569; }
html.rs-light .pr-range input[type="date"] { background: #fff; border-color: #e2e8f0; color: #0f172a; color-scheme: light; }

/* Issues-ReportSessionInsights-001 (2026-10-12): session insight cards on the Daily Financial Report */
.pr-sub-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #64748b; margin: 12px 0 4px; }
.pr-note { font-size: 12px; color: #64748b; margin-top: 8px; line-height: 1.4; }
.pr-other { margin-top: 10px; }
.pr-other > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #2563eb; }
.pr-other .pr-table-wrap { margin-top: 8px; }