/* ============================================================
   Mirza reports / analytics — classic, sectioned layout.
   Relies on the .mz-dash token scope from style.css.
   ============================================================ */

/* ---- report header band ---- */
.mz-rep-head {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: 18px; margin-bottom: 18px;
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--mz-primary) 16%, transparent), transparent 60%),
    var(--mz-surface);
  border: 1px solid var(--mz-border); box-shadow: var(--mz-shadow);
}
.mz-rep-head::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(var(--mz-primary), var(--mz-accent)); }
.mz-rep-head .ttl { font-size: 1.32rem; font-weight: 800; color: var(--mz-text); letter-spacing: -.3px; }
.mz-rep-head .desc { color: var(--mz-muted); font-size: .85rem; margin-top: 5px; }

/* ---- range toolbar ---- */
.mz-range { display: inline-flex; background: color-mix(in srgb, var(--mz-text) 5%, transparent); border: 1px solid var(--mz-border); border-radius: 12px; padding: 4px; gap: 2px; }
.mz-range button { font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--mz-muted); cursor: pointer; background: transparent; border: 0; padding: 8px 16px; border-radius: 9px; transition: all .15s ease; }
.mz-range button.active { background: var(--mz-primary); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--mz-primary) 60%, transparent); }

/* ---- KPI cards ---- */
.mz-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 6px; }
.mz-kpi { position: relative; overflow: hidden; background: var(--mz-surface); border: 1px solid var(--mz-border); border-radius: 16px; box-shadow: var(--mz-shadow); padding: 15px 16px; }
.mz-kpi::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--mz-primary) 9%, transparent); transform: translate(35%, -35%); }
.mz-kpi .lbl { font-size: .76rem; color: var(--mz-muted); }
.mz-kpi .val { font-size: 1.4rem; font-weight: 800; margin-top: 6px; letter-spacing: -.5px; color: var(--mz-text); font-variant-numeric: tabular-nums; }
.mz-kpi .val .suf { font-size: .74rem; font-weight: 600; color: var(--mz-muted); }
.mz-kpi .delta { font-size: .73rem; font-weight: 600; margin-top: 4px; color: var(--mz-muted); }
.mz-kpi .delta.up { color: #22c55e; } .mz-kpi .delta.down { color: #ef4444; }

/* ---- highlights / insight strip ---- */
.mz-insights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.mz-insight { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--mz-surface); border: 1px solid var(--mz-border); border-radius: 16px; box-shadow: var(--mz-shadow); }
.mz-insight .ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--mz-primary) 12%, transparent); color: var(--mz-primary); }
.mz-insight .ic svg { width: 22px; height: 22px; }
.mz-insight .lbl { font-size: .72rem; color: var(--mz-muted); }
.mz-insight .val { font-size: 1rem; font-weight: 700; color: var(--mz-text); margin-top: 2px; }
.mz-insight .val small { font-weight: 500; color: var(--mz-muted); font-size: .74rem; }

/* ---- section dividers ---- */
.mz-section { display: flex; align-items: center; gap: 14px; margin: 30px 2px 16px; }
.mz-section h2 { font-size: 1.04rem; font-weight: 800; margin: 0; color: var(--mz-text); white-space: nowrap; }
.mz-section .badge { font-size: .7rem; font-weight: 600; color: var(--mz-primary); background: color-mix(in srgb, var(--mz-primary) 12%, transparent); padding: 3px 10px; border-radius: 999px; }
.mz-section::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to var(--mz-dir, left), var(--mz-border), transparent); }

/* ---- chart cards ---- */
.mz-card .ch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.mz-card .ch-head h3 { font-size: .98rem; font-weight: 700; margin: 0; color: var(--mz-text); }
.mz-card .ch-head .sub { font-size: .72rem; color: var(--mz-muted); }
.mz-chart { position: relative; width: 100%; }
.mz-chart.h-sm { height: 230px; }
.mz-chart.h-md { height: 270px; }
.mz-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }

/* ---- classic table ---- */
.mz-table-wrap { overflow-x: auto; }
.mz-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.mz-table th { text-align: right; color: var(--mz-muted); font-weight: 600; font-size: .76rem; padding: 11px 14px; border-bottom: 1px solid var(--mz-border); white-space: nowrap; }
.mz-table td { padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--mz-border) 55%, transparent); color: var(--mz-text); }
.mz-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--mz-primary) 4%, transparent); }
.mz-table tbody tr:hover { background: color-mix(in srgb, var(--mz-primary) 8%, transparent); }
.mz-table .rank { width: 30px; color: var(--mz-muted); font-weight: 800; }
.mz-table .num { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mz-table .share { width: 150px; }
.mz-table .share .bar { height: 7px; border-radius: 5px; background: color-mix(in srgb, var(--mz-primary) 14%, transparent); position: relative; overflow: hidden; }
.mz-table .share .bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 5px; background: linear-gradient(90deg, var(--mz-accent), var(--mz-primary)); }
.mz-table .share span { font-size: .72rem; color: var(--mz-muted); }

/* ---- loading / empty state ---- */
.mz-chart .ch-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--mz-muted); font-size: .82rem; }
.mz-chart .ch-state .spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--mz-primary) 22%, transparent); border-top-color: var(--mz-primary); animation: mzChartSpin .8s linear infinite; }
@keyframes mzChartSpin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) { .mz-grid3 { grid-template-columns: 1fr; } .mz-kpis, .mz-insights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mz-kpis, .mz-insights { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mz-chart .ch-state .spin { animation: none; } }