/* pages/estatisticas.css - estilos exclusivos da pagina "estatisticas".
 * Use SOMENTE tokens de app.css (var(--bg2), var(--sp-4), var(--r-md), var(--fs-sm)...).
 * Escopo: #page-stats e prefixo proprio "st-". Nao edite app.css para estilos de pagina.
 * Mobile-first: base = 360px; ganhos em >=640px e >=960px. */

#page-stats { padding: var(--sp-4) var(--sp-4) var(--sp-10); }
#page-stats .st-root { max-width: 1180px; width: 100%; margin: 0 auto; min-width: 0; }
#page-stats [hidden], #page-stats .hidden { display: none !important; }

/* ── Cabeçalho + abas ── */
.st-head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.st-title { font: 800 var(--fs-xl)/var(--lh-tight) var(--font-d); color: var(--text); margin: 0 0 var(--sp-1); letter-spacing: -.02em; }
.st-sub { font-size: var(--fs-sm); color: var(--text2); margin: 0; }
.st-tabs { display: flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--bg3); border-radius: var(--r-md); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab { flex: 1 0 auto; min-height: var(--tap); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text2); font: 600 var(--fs-sm)/1 var(--font-b); cursor: pointer; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-2); }
.st-tab:hover { color: var(--text); }
.st-tab[aria-selected="true"] { background: var(--bg2); color: var(--text); box-shadow: var(--shadow-1); }
.st-panel { min-width: 0; }
.st-panel:focus { outline: none; }
.st-panel.is-entering { animation: st-rise var(--dur-3) var(--ease-out) both; }

/* ── Cards ── */
.st-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: var(--sp-4); margin-bottom: var(--sp-4); min-width: 0; }
.st-card__hd { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.st-card__kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin: 0 0 2px; }
.st-card__title { display: flex; align-items: center; gap: var(--sp-2); font: 800 var(--fs-md)/1.3 var(--font-d); color: var(--text); margin: 0; }
.st-card__title svg { flex: none; color: var(--blue-text); }
.st-card__note { font-size: var(--fs-xs); color: var(--text3); margin: var(--sp-1) 0 var(--sp-3); }

/* ── KPIs ── */
.st-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.st-kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: var(--sp-3); min-width: 0; }
.st-kpi__hd { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); min-width: 0; }
.st-kpi__ico { flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--blue-dim); color: var(--blue-text); }
.st-kpi__ico--green { background: var(--green-dim); color: var(--green-text); }
.st-kpi__ico--amber { background: var(--amber-dim); color: var(--amber-text); }
.st-kpi__ico--purple { background: var(--purple-dim); color: var(--purple-text); }
.st-kpi__ico--red { background: var(--red-dim); color: var(--red-text); }
.st-kpi__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text2); line-height: 1.25; overflow-wrap: anywhere; }
.st-kpi__val { font: 800 var(--fs-lg)/1.1 var(--font-d); color: var(--text); font-variant-numeric: tabular-nums; }
.st-kpi__sub { font-size: var(--fs-xs); color: var(--text3); margin-top: 2px; overflow-wrap: anywhere; }
.st-kpi.is-loading .st-kpi__val { color: transparent; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%); background-size: 200% 100%; animation: pa-skel-shimmer 1.4s ease-in-out infinite; width: 60%; }

/* ── Pílulas (seletor de período) ── */
.st-pills { display: flex; gap: var(--sp-2); overflow-x: auto; max-width: 100%; padding: 2px 0 var(--sp-1); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.st-pills::-webkit-scrollbar { display: none; }
.st-pills--wrap { flex-wrap: wrap; overflow: visible; }
.st-pill { flex: none; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-4); border: 1px solid var(--border2); border-radius: var(--r-pill); background: transparent; color: var(--text2); font: 600 var(--fs-sm)/1 var(--font-b); cursor: pointer; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-out); }
.st-pill:hover { color: var(--text); background: var(--bg3); }
.st-pill:active { transform: scale(.97); }
.st-pill[aria-pressed="true"] { background: var(--blue-strong); border-color: var(--blue-strong); color: var(--text-on-brand); }

/* ── Gráficos ── */
.st-chart { position: relative; height: 220px; width: 100%; }
.st-chart--tall { height: 260px; }
.st-chart canvas { display: block; width: 100% !important; height: 100% !important; }
.st-chart__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-4); text-align: center; color: var(--text3); font-size: var(--fs-sm); background: color-mix(in srgb, var(--bg2) 88%, transparent); border-radius: var(--r-sm); }
.st-chart.is-loading canvas { opacity: .25; }
.st-chart:not(.is-loading) canvas { animation: st-fade var(--dur-3) var(--ease-out) both; }
.st-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text2); }
.st-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.st-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st-dot, var(--blue)); flex: none; }
.st-legend__dot--green { --st-dot: var(--green); }
.st-legend__dot--red { --st-dot: var(--red); }
.st-legend__dot--blue { --st-dot: var(--blue); }
.st-legend__dot--cyan { --st-dot: var(--cyan); }

/* ── Estados: erro / vazio / carregando ── */
.st-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-3); text-align: center; color: var(--text2); font-size: var(--fs-sm); }
.st-state--error { color: var(--red-text); }
.st-state__msg { max-width: 44ch; }
.st-state .btn { width: auto; }
.st-muted { color: var(--text3); font-size: var(--fs-sm); padding: var(--sp-3) 0; }
.st-skels { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-2) 0; }
.st-skels .skel--line { margin: 0; height: 14px; }
.st-skels .skel--line:last-child { width: 60%; }

/* ── Linha do tempo ── */
.st-tl { list-style: none; margin: 0; padding: 0; }
.st-tl__item { display: flex; gap: var(--sp-3); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.st-tl__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.st-tl__dot { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }
.st-tl__body { flex: 1; min-width: 0; }
.st-tl__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--sp-3); margin-bottom: 4px; }
.st-tl__date { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.st-tl__acc { font-size: var(--fs-xs); font-weight: 700; }
.st-tl__meta { font-size: var(--fs-xs); color: var(--text2); }
.st-tone-green { color: var(--green-text); }
.st-tone-amber { color: var(--amber-text); }
.st-tone-red { color: var(--red-text); }
.st-tone-muted { color: var(--text3); }

/* ── Barras (tempo por matéria e evolução) ── */
.st-bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.st-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name time" "track track"; gap: 6px var(--sp-3); align-items: center; }
.st-bar-row__name { grid-area: name; font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-bar-row__time { grid-area: time; text-align: right; font-size: var(--fs-sm); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.st-bar-row__time small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text3); }
.st-track { grid-area: track; height: 10px; background: var(--bg3); border-radius: var(--r-pill); overflow: hidden; }
.st-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--c, var(--blue)); border-radius: var(--r-pill); transform-origin: left center; animation: st-grow var(--dur-4) var(--ease-out) both; }

/* ── Matérias ── */
.st-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.st-subj { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); transition: border-color var(--dur-2); }
@media (hover: hover) { .st-subj:hover { border-color: var(--border2); } }
.st-subj__hd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.st-subj__name { font-size: var(--fs-sm); font-weight: 700; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.st-subj__pct { font: 800 var(--fs-base)/1 var(--font-d); font-variant-numeric: tabular-nums; flex: none; }
.st-subj .st-track { height: 8px; background: var(--bg4); margin-bottom: var(--sp-2); }
.st-subj__ft { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); color: var(--text2); }
.st-chipnum { padding: 2px 8px; border-radius: var(--r-pill); font-weight: 600; background: var(--st-chip, var(--bg4)); }
.st-chipnum.st-tone-green { --st-chip: var(--green-dim); }
.st-chipnum.st-tone-amber { --st-chip: var(--amber-dim); }
.st-chipnum.st-tone-red { --st-chip: var(--red-dim); }
.st-scroll { max-height: 540px; overflow-y: auto; padding-right: var(--sp-2); }
.st-group { margin-bottom: var(--sp-4); background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-3); }
.st-group__title { font-size: var(--fs-xs); font-weight: 700; color: var(--blue-text); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--sp-2); padding-bottom: 6px; border-bottom: 1px solid var(--border2); overflow-wrap: anywhere; }
.st-topic { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.st-topic:last-child { border-bottom: 0; }
.st-topic__hd { display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: 5px; font-size: var(--fs-xs); }
.st-topic__name { color: var(--text2); font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.st-topic__pct { font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.st-topic__row { display: flex; align-items: center; gap: var(--sp-2); }
.st-topic__row .st-track { flex: 1; height: 5px; }
.st-topic__q { font-size: var(--fs-xs); color: var(--text3); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Relatórios: filtros ── */
.st-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: end; }
.st-filters .field { margin-bottom: 0; min-width: 0; }
.st-filters__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.st-filters__actions .btn { width: auto; flex: 1 1 auto; margin-top: 0; }
.st-active-label { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--blue-text); font-weight: 600; }
#page-stats .select, #page-stats .input { min-height: var(--tap); font-size: 16px; }
.st-cmp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.st-cmp__col { min-width: 0; }
.st-cmp__col .field { margin-bottom: var(--sp-3); }
.st-cmp__hd { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin: 0 0 var(--sp-2); }
.st-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--sp-4); }
.st-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 420px; }
.st-table th { text-align: center; padding: var(--sp-3) var(--sp-2); color: var(--text2); font-weight: 600; border-bottom: 2px solid var(--border2); }
.st-table th:first-child, .st-table td:first-child { text-align: left; }
.st-table td { text-align: center; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--border); color: var(--text); font-variant-numeric: tabular-nums; }
.st-table tfoot td { border-top: 2px solid var(--border2); font-weight: 600; }
.st-table .st-a { color: var(--blue-text); }
.st-table .st-b { color: var(--text2); }

/* ── Relatórios: alertas, IA, métricas, ranking ── */
.st-alerts { display: flex; flex-direction: column; gap: var(--sp-3); }
.st-alert { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--st-al-b, var(--border2)); background: var(--st-al-bg, var(--blue-dim)); }
.st-alert--info { --st-al-bg: var(--blue-dim); --st-al-b: var(--border2); --st-al-fg: var(--blue-text); }
.st-alert--warn { --st-al-bg: var(--amber-dim); --st-al-b: var(--amber); --st-al-fg: var(--amber-text); }
.st-alert--success { --st-al-bg: var(--green-dim); --st-al-b: var(--green); --st-al-fg: var(--green-text); }
.st-alert__ico { flex: none; margin-top: 1px; color: var(--st-al-fg, var(--blue-text)); }
.st-alert__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--st-al-fg, var(--blue-text)); margin-bottom: 2px; }
.st-alert__msg { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.st-ai { padding: var(--sp-3) var(--sp-4); background: var(--blue-dim); border: 1px solid var(--border2); border-radius: var(--r-sm); line-height: 1.6; color: var(--text); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.st-ai p { margin: 0; }
.st-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.st-metric { background: var(--bg3); border-radius: var(--r-sm); padding: var(--sp-3); border: 1px solid var(--border); }
.st-metric__label { font-size: var(--fs-xs); color: var(--text3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.st-metric__val { font: 800 var(--fs-lg)/1.1 var(--font-d); color: var(--text); font-variant-numeric: tabular-nums; }
.st-stack { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.st-rank { list-style: none; margin: 0; padding: 0; }
.st-rank__item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.st-rank__l { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.st-rank__n { flex: none; width: 28px; font-weight: 600; color: var(--text2); font-variant-numeric: tabular-nums; }
.st-rank__s { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.st-rank__r { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.st-rank__p { font-weight: 700; font-variant-numeric: tabular-nums; }
.st-rank__t { font-size: var(--fs-xs); }
.st-evo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pct" "track track"; gap: 6px var(--sp-3); margin-bottom: var(--sp-3); align-items: center; }
.st-evo .st-bar-row__name { font-weight: 500; }
.st-evo__pct { grid-area: pct; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.st-evo .st-track { height: 8px; }

/* ── Histórico semanal ── */
.st-wr { padding: var(--sp-3) var(--sp-4); background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: var(--sp-3); }
.st-wr__row { display: flex; align-items: center; gap: var(--sp-3); }
.st-wr__main { flex: 1; min-width: 0; }
.st-wr__week { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 2px; }
.st-wr__date { font-size: var(--fs-xs); color: var(--text2); }
.st-wr__acc { text-align: right; font: 700 var(--fs-md)/1.2 var(--font-d); color: var(--text); font-variant-numeric: tabular-nums; }
.st-wr__delta { display: block; font-size: var(--fs-xs); font-family: var(--font-b); font-weight: 600; }
.st-wr__sum { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text2); line-height: 1.5; overflow-wrap: anywhere; }
.st-new { color: var(--blue-text); font-weight: 700; }

/* ── Cronômetro: mantém o card legado sem estourar no mobile ── */
#page-stats #stats-pomodoro-widget { min-width: 0; }
#page-stats #stats-pomodoro-display { font-variant-numeric: tabular-nums; }

/* ── Animações (transform/opacity) ── */
@keyframes st-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.st-stagger > * { animation: st-rise var(--dur-3) var(--ease-out) both; }
.st-stagger > *:nth-child(2) { animation-delay: 45ms; }
.st-stagger > *:nth-child(3) { animation-delay: 90ms; }
.st-stagger > *:nth-child(4) { animation-delay: 135ms; }
.st-stagger > *:nth-child(5) { animation-delay: 180ms; }
.st-stagger > *:nth-child(6) { animation-delay: 225ms; }

@media (prefers-reduced-motion: reduce) {
  .st-panel.is-entering, .st-stagger > *, .st-fill, .st-chart:not(.is-loading) canvas, .st-kpi.is-loading .st-kpi__val { animation: none !important; }
  .st-pill, .st-tab { transition: none; }
}

/* ── >= 640px ── */
@media (min-width: 640px) {
  #page-stats { padding: var(--sp-6) var(--sp-6) var(--sp-10); }
  .st-head { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .st-tabs { flex: 0 1 auto; }
  .st-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .st-kpi { padding: var(--sp-4); }
  .st-kpi__val { font-size: var(--fs-xl); }
  .st-card { padding: var(--sp-5); }
  .st-chart { height: 260px; }
  .st-chart--tall { height: 280px; }
  .st-filters { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .st-filters__actions .btn { flex: 0 0 auto; }
  .st-cmp { grid-template-columns: 1fr 1fr; }
  .st-bar-row { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; grid-template-areas: "name track time"; }
  .st-bar-row__time small { display: inline; margin-left: var(--sp-2); }
  .st-evo { grid-template-columns: minmax(100px, 160px) minmax(0, 1fr) 48px; grid-template-areas: "name track pct"; }
  .st-evo__pct { text-align: right; }
}

/* ── >= 960px ── */
@media (min-width: 960px) {
  .st-grid-2 { grid-template-columns: 1fr 1fr; }
  .st-grid-2--ai { grid-template-columns: 1fr 1.5fr; }
}