:root { --report-ink: #102442; --report-muted: #6f809b; --report-line: #dce4ef; --report-surface: #ffffff; --report-bg: #f4f7fb; --report-purple: #6b45b8; --report-teal: #0e9f8b; }
* { box-sizing: border-box; }
body { background: var(--report-bg); color: var(--report-ink); }
.reports-shell .workspace { min-width: 0; }
.reports-page { width: min(100% - 48px, 1760px); margin: 0 auto; padding: 30px 0 52px; }
.reports-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.reports-hero h2 { margin: 3px 0 7px; font-size: clamp(25px, 2.2vw, 34px); }
.reports-hero p { max-width: 670px; margin: 0; color: var(--report-muted); line-height: 1.8; }
.reports-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.reports-kpis article { display: flex; gap: 14px; min-width: 0; padding: 19px; border: 1px solid var(--report-line); border-radius: 8px; background: var(--report-surface); box-shadow: 0 7px 20px rgba(19, 40, 69, .035); }
.kpi-icon { width: 45px; height: 45px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; }
.kpi-icon svg { width: 22px; }.kpi-icon.teal { color: #087c6c; background: #e1f5f0; }.kpi-icon.amber { color: #a96806; background: #fff1d4; }.kpi-icon.red { color: #be3550; background: #fde9ed; }.kpi-icon.purple { color: var(--report-purple); background: #eee8fa; }
.reports-kpis small, .reports-kpis p { color: var(--report-muted); }.reports-kpis small { font-size: 13px; }.reports-kpis strong { display: block; margin-top: 4px; font-size: clamp(22px, 1.8vw, 29px); line-height: 1.1; direction: ltr; text-align: start; }.reports-kpis p { margin: 6px 0 0; font-size: 12px; }
.report-filters, .report-browser { overflow: hidden; margin-bottom: 18px; border: 1px solid var(--report-line); border-radius: 8px; background: var(--report-surface); }
.report-filters[hidden] { display: none; }.filter-heading, .report-browser-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--report-line); }.filter-heading h3, .report-browser-head h3 { margin: 0; font-size: 18px; }.filter-heading p, .report-browser-head p { margin: 4px 0 0; color: var(--report-muted); font-size: 13px; }
.filter-grid { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 12px; padding: 18px 20px; }.filter-grid label { display: grid; gap: 7px; color: var(--report-ink); font-size: 13px; font-weight: 800; }.filter-grid input, .filter-grid select { min-width: 0; height: 45px; padding: 0 12px; border: 1px solid var(--report-line); border-radius: 7px; color: var(--report-ink); background: #fff; font: inherit; font-size: 13px; }
.report-count { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; color: var(--report-purple); background: #f1edfb; font-size: 12px; font-weight: 800; }
.report-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 13px 20px; border-bottom: 1px solid var(--report-line); scrollbar-width: thin; }.report-tabs button { min-height: 40px; flex: 0 0 auto; padding: 0 14px; border: 1px solid var(--report-line); border-radius: 999px; color: var(--report-muted); background: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: .18s ease; }.report-tabs button:hover, .report-tabs button:focus-visible { border-color: #b9a7e4; color: var(--report-purple); }.report-tabs button.active { border-color: var(--report-purple); color: #fff; background: var(--report-purple); }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 20px; }.report-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; min-height: 198px; padding: 18px; border: 1px solid var(--report-line); border-radius: 8px; background: #fff; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }.report-card:hover { border-color: #baa9e0; box-shadow: 0 12px 25px rgba(43, 27, 83, .09); transform: translateY(-2px); }.report-card-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; color: var(--report-purple); background: #f0ebfa; }.report-card-icon svg { width: 21px; }.report-card h3 { margin: 1px 0 5px; font-size: 16px; }.report-card p { margin: 0; color: var(--report-muted); font-size: 13px; line-height: 1.7; }.report-card footer { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; }.report-tags { display: flex; flex-wrap: wrap; gap: 6px; }.report-tag { display: inline-flex; align-items: center; min-height: 25px; padding: 0 8px; border-radius: 999px; color: #53647e; background: #f4f7fb; font-size: 11px; font-weight: 800; }.report-tag.orientation { color: #5d3b9c; background: #f0eafa; }.report-card .text-btn { min-height: 36px; padding: 0 3px; white-space: nowrap; }
.report-modal[hidden], .report-toast[hidden] { display: none; }.report-modal { position: fixed; z-index: 600; inset: 0; display: grid; place-items: center; padding: 18px; }.report-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 25, 48, .67); }.report-dialog { position: relative; display: flex; flex-direction: column; width: min(1260px, 100%); max-height: min(880px, calc(100dvh - 36px)); overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 26px 75px rgba(8, 22, 43, .35); }.report-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 24px 28px 18px; border-bottom: 1px solid var(--report-line); }.report-dialog-head h2 { margin: 3px 0 4px; font-size: clamp(21px, 2vw, 28px); }.report-dialog-head p { margin: 0; color: var(--report-muted); line-height: 1.7; }.preview-meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 28px; border-bottom: 1px solid var(--report-line); background: #fbfcff; }.preview-meta span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--report-line); border-radius: 999px; color: #5d6e88; background: #fff; font-size: 12px; font-weight: 700; }.preview-meta span:first-child { color: #5d3b9c; background: #f3effb; border-color: #d9cffa; }
.preview-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px 28px; }.preview-kpis article { min-width: 0; padding: 13px; border: 1px solid var(--report-line); border-radius: 8px; background: #fff; }.preview-kpis small { display: block; overflow: hidden; color: var(--report-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.preview-kpis strong { display: block; margin-top: 4px; color: var(--report-ink); font-size: 21px; }.preview-table-section { min-height: 0; display: flex; flex: 1; flex-direction: column; padding: 0 28px 18px; overflow: hidden; }.preview-table-section > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0 10px; }.preview-table-section h3 { margin: 0; font-size: 16px; }.preview-table-section p { margin: 3px 0 0; color: var(--report-muted); font-size: 12px; }.preview-badge { padding: 6px 9px; border-radius: 999px; color: #087c6c; background: #e4f7f1; font-size: 11px; font-weight: 800; }.preview-table-wrap { flex: 1; overflow: auto; border: 1px solid var(--report-line); border-radius: 8px; scrollbar-color: #9facbf #eff3f8; scrollbar-width: auto; }.preview-table { width: 100%; min-width: 870px; border-collapse: collapse; }.preview-table th, .preview-table td { padding: 13px 14px; border-bottom: 1px solid var(--report-line); text-align: right; white-space: nowrap; font-size: 13px; }.preview-table th { position: sticky; z-index: 1; top: 0; color: #687995; background: #f6f8fc; font-weight: 800; }.preview-table tbody tr:hover { background: #fbf9ff; }.report-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 28px; border-top: 1px solid var(--report-line); background: #fff; }.report-export-note { display: flex; align-items: center; gap: 8px; max-width: 570px; color: var(--report-muted); font-size: 12px; line-height: 1.6; }.report-export-note svg { width: 18px; flex: 0 0 auto; color: var(--report-purple); }.report-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }.report-toast { position: fixed; z-index: 700; inset-inline-start: 22px; bottom: 22px; width: min(390px, calc(100vw - 44px)); padding: 13px 15px; border: 1px solid #a7e2d1; border-radius: 8px; color: #075c4c; background: #ecfbf6; box-shadow: 0 15px 36px rgba(7, 52, 46, .17); font-size: 13px; font-weight: 800; }
@media (max-width: 1279px) { .reports-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .reports-page { width: min(100% - 32px, 1760px); }.report-dialog { max-height: calc(100dvh - 24px); }.report-modal { padding: 12px; }.preview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.report-dialog-head, .preview-meta, .preview-kpis, .preview-table-section, .report-dialog-footer { padding-inline: 18px; } }
@media (max-width: 640px) { .reports-page { width: min(100% - 24px, 1760px); padding-top: 20px; }.reports-hero, .filter-heading, .report-browser-head, .report-dialog-footer { align-items: stretch; flex-direction: column; }.reports-hero .btn { width: 100%; }.reports-kpis, .report-grid, .filter-grid, .preview-kpis { grid-template-columns: 1fr; }.reports-kpis article { padding: 16px; }.report-grid { padding: 12px; }.report-card { min-height: 172px; }.report-tabs { padding-inline: 12px; }.report-dialog-head { padding-top: 20px; }.report-dialog-head .icon-btn { position: absolute; inset-inline-end: 15px; top: 15px; }.report-dialog-head > div { padding-inline-end: 44px; }.preview-table-section { padding-bottom: 12px; }.report-dialog-actions { display: grid; grid-template-columns: 1fr; }.report-dialog-actions .btn { width: 100%; }.report-export-note { max-width: none; }.filter-grid input, .filter-grid select { width: 100%; }.preview-table { min-width: 760px; } }
@media print { body { background: #fff; } .app-shell, .report-modal-backdrop, .report-dialog-head .icon-btn, .report-dialog-footer, .preview-meta, .report-toast { display: none !important; } .report-modal { position: static; display: block !important; padding: 0; } .report-dialog { display: block; width: 100%; max-height: none; overflow: visible; border: 0; box-shadow: none; } .report-dialog-head { display: block !important; padding: 0 0 12px; }.preview-kpis, .preview-table-section { padding-inline: 0; }.preview-table-section { overflow: visible; }.preview-table-wrap { overflow: visible; border: 0; }.preview-table { min-width: 0; }.preview-table th { position: static; } }