/* ============================================================
   reports.css — Reports admin page
   Depends on: main.css + dashboard.css
   ============================================================ */

.rpt-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rpt-header__title { font-family: var(--gx-font-heading); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--gx-dark); }
.rpt-header__sub { font-size: 0.875rem; color: var(--gx-gray-mid); }
.rpt-header__actions { display: flex; align-items: center; gap: 0.5rem; }

.rpt-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: var(--gx-r-full); font-size: 0.85rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all var(--gx-t); white-space: nowrap; }
.rpt-btn--outline { background: transparent; border-color: var(--gx-gray-light); color: var(--gx-g300); }
.rpt-btn--outline:hover { background: var(--gx-off-white); border-color: var(--gx-gray); }
.rpt-btn--primary { background: var(--gx-dark); border-color: var(--gx-dark); color: var(--gx-lime); }
.rpt-btn--primary:hover { background: var(--gx-gray-dark); }

/* Period selector */
.rpt-period-tabs { display: flex; gap: 0.25rem; background: var(--gx-off-white); border: 1px solid var(--gx-gray-light); border-radius: var(--gx-r-full); padding: 0.25rem; }
.rpt-period-tab { padding: 0.35rem 0.85rem; border-radius: var(--gx-r-full); font-size: 0.8rem; font-weight: 500; color: var(--gx-gray-mid); cursor: pointer; transition: all var(--gx-t); background: none; border: none; }
.rpt-period-tab.is-active { background: var(--gx-white); color: var(--gx-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Content grid */
.rpt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rpt-grid--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* Chart panel */
.rpt-chart { padding: 1.5rem; }
.rpt-chart__title { font-family: var(--gx-font-heading); font-size: 0.925rem; font-weight: 600; color: var(--gx-dark); margin-bottom: 0.2rem; }
.rpt-chart__sub { font-size: 0.75rem; color: var(--gx-gray-mid); margin-bottom: 1.5rem; }

/* Bar chart */
.rpt-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 10rem;
}

.rpt-bar-col { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex: 1; height: 100%; justify-content: flex-end; }
.rpt-bar { width: 100%; border-radius: 4px 4px 0 0; transition: opacity var(--gx-t); min-height: 4px; }
.rpt-bar:hover { opacity: 0.8; }
.rpt-bar--lime { background: var(--gx-lime); }
.rpt-bar--dim { background: var(--gx-gray-light); }
.rpt-bar__label { font-family: var(--gx-font-mono); font-size: 0.58rem; color: var(--gx-gray-mid); text-align: center; white-space: nowrap; }
.rpt-bar__val { font-family: var(--gx-font-mono); font-size: 0.6rem; color: var(--gx-dark); font-weight: 600; }

/* Line chart */
.rpt-line-chart {
  position: relative;
  height: 10rem;
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.rpt-line-chart svg { width: 100%; height: 100%; overflow: visible; }

/* Metric rows */
.rpt-metric-list { display: flex; flex-direction: column; gap: 0; }
.rpt-metric-item { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--gx-gray-light); }
.rpt-metric-item:last-child { border-bottom: none; }
.rpt-metric-item__rank { font-family: var(--gx-font-mono); font-size: 0.65rem; color: var(--gx-gray-mid); width: 1.25rem; flex-shrink: 0; }
.rpt-metric-item__name { font-size: 0.875rem; font-weight: 500; color: var(--gx-dark); flex: 1; }
.rpt-metric-item__sub { font-size: 0.72rem; color: var(--gx-gray-mid); }
.rpt-metric-item__bar { flex: 2; height: 6px; background: var(--gx-gray-light); border-radius: 3px; overflow: hidden; }
.rpt-metric-item__fill { height: 100%; border-radius: 3px; background: var(--gx-lime); }
.rpt-metric-item__val { font-family: var(--gx-font-heading); font-size: 0.9rem; font-weight: 700; color: var(--gx-dark); white-space: nowrap; text-align: right; min-width: 4rem; }

/* KPI summary */
.rpt-kpi-card { padding: 1.5rem; }
.rpt-kpi-card__label { font-family: var(--gx-font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gx-gray-mid); margin-bottom: 0.5rem; }
.rpt-kpi-card__value { font-family: var(--gx-font-heading); font-size: 2.25rem; font-weight: 800; letter-spacing: -0.04em; color: var(--gx-dark); line-height: 1; margin-bottom: 0.5rem; }
.rpt-kpi-card__delta { font-size: 0.78rem; display: flex; align-items: center; gap: 0.3rem; color: var(--gx-gray-mid); }
.rpt-kpi-card__delta--up { color: #15803d; }
.rpt-kpi-card__delta--down { color: #dc2626; }
.rpt-kpi-card__sparkline { height: 3rem; margin-top: 1rem; opacity: 0.6; }
.rpt-kpi-card__sparkline svg { width: 100%; height: 100%; }

/* Donut chart placeholder */
.rpt-donut-wrap { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; }
.rpt-donut { width: 7rem; height: 7rem; border-radius: 50%; flex-shrink: 0; position: relative; }
.rpt-donut__ring { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--gx-lime) 0% 48%, #6366f1 48% 73%, #f97316 73% 87%, var(--gx-gray-light) 87% 100%); }
.rpt-donut__hole { position: absolute; inset: 20%; border-radius: 50%; background: var(--gx-white); display: flex; align-items: center; justify-content: center; font-family: var(--gx-font-heading); font-size: 0.9rem; font-weight: 800; color: var(--gx-dark); }
.rpt-donut-legend { display: flex; flex-direction: column; gap: 0.6rem; }
.rpt-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--gx-g300); }
.rpt-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rpt-legend-pct { margin-left: auto; font-weight: 600; color: var(--gx-dark); }

/* ============================================================
   Dark theme
   ============================================================ */
[data-theme="dark"] .rpt-header__title { color: #dde4f2; }
[data-theme="dark"] .rpt-header__sub { color: #5c6880; }
[data-theme="dark"] .rpt-btn--outline { background: transparent; border-color: rgba(255,255,255,0.1); color: #8090b0; }
[data-theme="dark"] .rpt-btn--outline:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .rpt-period-tabs { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .rpt-period-tab { color: #5c6880; }
[data-theme="dark"] .rpt-period-tab.is-active { background: #0f1420; color: #dde4f2; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
[data-theme="dark"] .rpt-chart__title { color: #dde4f2; }
[data-theme="dark"] .rpt-chart__sub { color: #5c6880; }
[data-theme="dark"] .rpt-bar--dim { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .rpt-bar__label { color: #5c6880; }
[data-theme="dark"] .rpt-bar__val { color: #dde4f2; }
[data-theme="dark"] .rpt-metric-item { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .rpt-metric-item__name { color: #dde4f2; }
[data-theme="dark"] .rpt-metric-item__sub { color: #5c6880; }
[data-theme="dark"] .rpt-metric-item__bar { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .rpt-metric-item__val { color: #dde4f2; }
[data-theme="dark"] .rpt-kpi-card__label { color: #4a5568; }
[data-theme="dark"] .rpt-kpi-card__value { color: #dde4f2; }
[data-theme="dark"] .rpt-kpi-card__delta { color: #5c6880; }
[data-theme="dark"] .rpt-donut__hole { background: #0f1420; color: #dde4f2; }
[data-theme="dark"] .rpt-donut__ring { background: conic-gradient(var(--gx-lime) 0% 48%, #818cf8 48% 73%, #fb923c 73% 87%, rgba(255,255,255,0.08) 87% 100%); }
[data-theme="dark"] .rpt-legend-item { color: #b0bed4; }
[data-theme="dark"] .rpt-legend-pct { color: #dde4f2; }

@media (max-width: 1200px) { .rpt-grid { grid-template-columns: 1fr; } .rpt-grid--3 { grid-template-columns: 1fr; } }