/* ============================================================================ css/estatisticas.css ---------------------------------------------------------------------------- Estilos da view de Estatísticas — KPIs, gráficos, tabelas de ranking. ⚠️ DÍVIDA TÉCNICA: 4 patches de polish para a mesma view (lightweight → blue-air → smart-color-depth → google-apple). Na Etapa 10.6, consolidar apenas o resultado visual final e remover os patches intermediários. EXTRAÍDO DE: index.html em 21/05/2026 — Etapa 8 / Commit 5. ============================================================================ */ /* ── PATCH 2026-05-15: Últimas Vendas ── */ #statsView .st-uv-head{ display:grid; grid-template-columns:90px 1fr 100px 110px 80px; gap:6px; padding:6px 10px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); } #statsView .st-uv-list{ display:flex; flex-direction:column; } #statsView .st-uv-row{ display:grid; grid-template-columns:90px 1fr 100px 110px 80px; gap:6px; padding:7px 10px; border-bottom:1px solid var(--border); font-size:12px; align-items:center; transition:background .15s; } #statsView .st-uv-row:last-child{ border-bottom:none; } #statsView .st-uv-row:hover{ background:var(--surface2,#f5f5f7); } #statsView .st-uv-num{ font-family:monospace; font-size:11px; color:var(--muted); } #statsView .st-uv-cli{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #statsView .st-uv-prod{ color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #statsView .st-uv-time{ display:flex; flex-direction:column; gap:1px; } #statsView .st-uv-date{ font-size:11px; } #statsView .st-uv-hora{ font-size:11px; font-weight:700; color:var(--accent,#1a73e8); } #statsView .st-uv-hora-nd{ font-weight:400; color:var(--muted); font-style:italic; } #statsView .st-uv-val{ text-align:right; font-weight:700; } body:not([data-theme="light"]) #statsView .st-uv-row:hover{ background:rgba(255,255,255,.04); } /* ── PATCH 2026-05-15: Botão copiar título no histórico ── */ .hp-copy-title-btn{ display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:10px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap; user-select:none; flex-shrink:0; } .hp-copy-title-btn:hover{ background:var(--accent-dim,#e8f0fe); border-color:var(--accent-border,#c5d8fc); color:var(--accent,#1a73e8); } .hp-copy-title-btn.copied{ background:#e6f4ea; border-color:#a8d5b5; color:#137333; } /* ── PATCH 2026-05-15: Número do pedido editável no histórico ── */ .hp-card-num-wrap{ display:inline-flex; align-items:center; gap:4px; position:relative; } .hp-num-input{ font-size:10px; font-weight:800; color:var(--faint); font-family:'Inter',monospace; letter-spacing:.06em; background:var(--surface3); border:1px solid var(--border); border-radius:var(--r-sm); padding:3px 7px; white-space:nowrap; width:auto; min-width:80px; max-width:130px; text-align:center; cursor:text; outline:none; transition:border-color .15s, box-shadow .15s; } .hp-num-input:focus{ border-color:var(--accent,#1a73e8); box-shadow:0 0 0 2px var(--accent-glow,rgba(26,115,232,.15)); color:var(--fg); background:var(--surface); } .hp-num-input.saving{ border-color:#fbbc04; color:#ea8600; } .hp-num-input.saved{ border-color:#34a853; color:#137333; background:#e6f4ea; } .hp-num-input.error{ border-color:#ea4335; color:#c5221f; } /* Estatísticas — refinamento visual: menos peso, mais respiro e leitura mais SaaS */ #statsView.stats-view{ padding:18px 20px 26px !important; background: radial-gradient(circle at 8% 0%, rgba(26,115,232,.055), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #fff), var(--bg)) !important; } #statsView .stats-wrap{ max-width:1320px !important; gap:14px !important; } /* Header mais compacto */ #statsView .stats-hero{ min-height:unset !important; padding:16px 18px !important; border-radius:20px !important; box-shadow:0 1px 2px rgba(60,64,67,.045), 0 8px 22px rgba(60,64,67,.045) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--surface)) !important; } #statsView .stats-title{ font-size:20px !important; letter-spacing:-.045em !important; } #statsView .stats-sub{ font-size:12px !important; margin-top:4px !important; line-height:1.45 !important; max-width:68ch !important; } #statsView .stats-sync-chip{ min-height:30px !important; padding:6px 10px !important; font-size:11px !important; } /* Filtros mais discretos */ #statsView .stats-filters{ padding:11px 12px !important; border-radius:18px !important; gap:9px !important; box-shadow:0 1px 2px rgba(60,64,67,.035) !important; } #statsView .st-filter-row{ gap:7px !important; } #statsView .st-filter-label{ font-size:9px !important; min-width:52px !important; } #statsView .st-pill, #statsView .st-select, #statsView .st-date{ min-height:30px !important; padding:6px 11px !important; font-size:11px !important; border-radius:999px !important; box-shadow:none !important; } #statsView .st-pill:hover{ transform:none !important; } /* KPIs mais baixos e menos pesados */ #statsView .stats-kpis{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:10px !important; } #statsView .st-kpi{ min-height:86px !important; padding:12px 13px 11px !important; border-radius:17px !important; gap:5px !important; box-shadow:0 1px 2px rgba(60,64,67,.04), 0 6px 18px rgba(60,64,67,.04) !important; } #statsView .st-kpi:before{ height:3px !important; opacity:.72 !important; } #statsView .st-kpi-label{ font-size:9px !important; letter-spacing:.095em !important; } #statsView .st-kpi-value{ font-size:21px !important; letter-spacing:-.05em !important; } #statsView .st-kpi-sub{ font-size:10.5px !important; line-height:1.25 !important; } /* Cards e gráficos com menos volume */ #statsView .stats-grid{ gap:12px !important; } #statsView .st-card{ border-radius:18px !important; box-shadow:0 1px 2px rgba(60,64,67,.035), 0 8px 22px rgba(60,64,67,.04) !important; } #statsView .st-card-head{ padding:12px 14px !important; min-height:56px !important; background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--accent) 3%), var(--surface)) !important; } #statsView .st-card-title{ font-size:12.5px !important; } #statsView .st-card-sub{ font-size:10.5px !important; line-height:1.35 !important; } #statsView .st-card-badge{ padding:3px 8px !important; font-size:9px !important; } #statsView .st-card-body{ padding:11px 13px !important; } /* primeira linha: deixa gráficos mais horizontais e leves */ #statsView .st-card.span-6{ grid-column:span 6; } #statsView .st-chart-bars{ gap:8px !important; } #statsView .st-bar-row{ grid-template-columns:92px minmax(0,1fr) 82px !important; gap:8px !important; } #statsView .st-bar-label, #statsView .st-bar-val{ font-size:10.5px !important; } #statsView .st-bar-track, #statsView .st-progress{ height:7px !important; } /* Tabelas mais densas, sem cara pesada */ #statsView .st-table th{ padding:8px 10px !important; font-size:9px !important; background:color-mix(in srgb, var(--surface) 96%, var(--bg) 4%) !important; } #statsView .st-table td{ padding:8px 10px !important; font-size:11.5px !important; } #statsView .st-name-main{ font-size:11.5px !important; } #statsView .st-name-sub{ font-size:9.5px !important; } #statsView .st-table tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 4%, transparent); } /* Mini cards e blocos complementares */ #statsView .st-wind-grid{ gap:8px !important; } #statsView .st-mini{ padding:10px 11px !important; border-radius:14px !important; } #statsView .st-mini-label{ font-size:9px !important; } #statsView .st-mini-value{ font-size:16px !important; } #statsView .st-abc-row{ padding:9px 10px !important; border-radius:14px !important; } #statsView .st-abc-class{ width:34px !important; height:34px !important; border-radius:12px !important; font-size:15px !important; } #statsView .st-empty{ padding:18px !important; font-size:12px !important; } #statsView .st-note{ font-size:10.5px !important; padding:9px 10px !important; } /* Reposicionamento: Produtos ocupa bem, blocos auxiliares não parecem "paredes" */ #statsView .st-card.span-12 .st-card-body{ padding-top:8px !important; } #statsView .st-card.span-12{ border-radius:20px !important; } /* Light mode com contraste suave */ body[data-theme="light"] #statsView.stats-view{ background: radial-gradient(circle at 10% 0%, rgba(26,115,232,.06), transparent 30%), #f6f8fc !important; } body[data-theme="light"] #statsView .stats-hero, body[data-theme="light"] #statsView .stats-filters, body[data-theme="light"] #statsView .st-kpi, body[data-theme="light"] #statsView .st-card{ border-color:#e7ecf4 !important; } body[data-theme="light"] #statsView .st-mini, body[data-theme="light"] #statsView .st-abc-row{ background:#f7f9fd !important; border-color:#e9eef6 !important; } /* Responsivo desktop menor */ @media(max-width:1320px){ #statsView .stats-kpis{grid-template-columns:repeat(3,minmax(0,1fr)) !important} } @media(max-width:980px){ #statsView .stats-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important} #statsView .st-card.span-4, #statsView .st-card.span-5, #statsView .st-card.span-6, #statsView .st-card.span-7, #statsView .st-card.span-8{grid-column:1/-1 !important} } /* Estatísticas — redesign visual mais leve, alinhado ao tom da aba Pedido/Formal */ #statsView.stats-view{ --st-blue:#1a73e8; --st-blue-2:#2b7de9; --st-soft-blue:rgba(26,115,232,.075); --st-soft-blue-2:rgba(26,115,232,.045); --st-ink:var(--text); --st-muted:var(--muted); --st-line:color-mix(in srgb,var(--border) 84%,transparent); background: radial-gradient(circle at 18% -8%, rgba(26,115,232,.08), transparent 34%), linear-gradient(180deg,#f6f9fe 0%,#f8fafc 42%,var(--bg) 100%) !important; padding:20px 22px 32px !important; } #statsView .stats-wrap{ max-width:1280px !important; gap:15px !important; } /* HERO com identidade azul, mas discreto */ #statsView .stats-hero{ position:relative; overflow:hidden; padding:18px 20px !important; border-radius:24px !important; border:1px solid rgba(26,115,232,.16) !important; background: linear-gradient(135deg,rgba(26,115,232,.10),rgba(255,255,255,.92) 34%,rgba(255,255,255,.96)) !important; box-shadow:0 1px 2px rgba(60,64,67,.04),0 14px 32px rgba(26,115,232,.06) !important; } #statsView .stats-hero::before{ content:""; position:absolute; left:20px; right:20px; top:0; height:4px; border-radius:0 0 999px 999px; background:linear-gradient(90deg,#1a73e8,#4285f4,#7baaf7); } #statsView .stats-title{ font-size:21px !important; line-height:1.08 !important; color:#202124 !important; letter-spacing:-.055em !important; font-weight:850 !important; } #statsView .stats-sub{ font-size:12px !important; max-width:70ch !important; line-height:1.5 !important; color:#5f6368 !important; } #statsView .stats-sync-chip{ background:rgba(26,115,232,.08) !important; border-color:rgba(26,115,232,.18) !important; color:#1a73e8 !important; box-shadow:none !important; } /* Filtros em uma faixa limpa */ #statsView .stats-filters{ padding:10px 12px !important; border-radius:20px !important; border:1px solid rgba(26,115,232,.10) !important; background:rgba(255,255,255,.82) !important; backdrop-filter:blur(10px); box-shadow:0 1px 2px rgba(60,64,67,.035),0 10px 26px rgba(60,64,67,.035) !important; } #statsView .st-filter-label{ color:#80868b !important; } #statsView .st-pill, #statsView .st-select, #statsView .st-date{ color:#3c4043 !important; background:#fff !important; border-color:#dfe5ef !important; min-height:30px !important; font-weight:750 !important; transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease !important; } #statsView .st-pill:hover, #statsView .st-select:hover, #statsView .st-date:hover{ border-color:rgba(26,115,232,.22) !important; background:#f8fbff !important; } #statsView .st-pill.active{ background:#e8f0fe !important; border-color:rgba(26,115,232,.28) !important; color:#1a73e8 !important; box-shadow:inset 0 0 0 1px rgba(26,115,232,.04) !important; } /* KPIs: todos no mesmo sistema azul/neutro; sem verde/vermelho dominando */ #statsView .stats-kpis{ gap:10px !important; } #statsView .st-kpi{ min-height:92px !important; padding:13px 14px 12px !important; border-radius:20px !important; border:1px solid #e3e8f1 !important; background: linear-gradient(180deg,#fff,#fbfdff) !important; box-shadow:0 1px 2px rgba(60,64,67,.035),0 8px 24px rgba(60,64,67,.04) !important; transform:translateY(0); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease !important; } #statsView .st-kpi:hover{ transform:translateY(-2px); border-color:rgba(26,115,232,.20) !important; box-shadow:0 2px 5px rgba(60,64,67,.055),0 16px 34px rgba(26,115,232,.075) !important; } #statsView .st-kpi::before{ height:3px !important; background:linear-gradient(90deg,#1a73e8,#5e97f6) !important; opacity:.9 !important; } #statsView .st-kpi-label{ font-size:9.5px !important; color:#8a94a3 !important; } #statsView .st-kpi-value{ font-size:21px !important; color:#1a73e8 !important; font-weight:900 !important; } #statsView .st-kpi.st-color-neutral .st-kpi-value, #statsView .st-color-neutral .st-kpi-value{ color:#202124 !important; } #statsView .st-kpi-sub{ font-size:10.5px !important; color:#6f7782 !important; } /* Remove a leitura de "semáforo" nos cards principais */ #statsView .st-color-green, #statsView .st-color-red, #statsView .st-color-orange, #statsView .st-color-blue{ --st-color:#1a73e8 !important; } #statsView .st-kpi.st-color-red .st-kpi-value, #statsView .st-kpi.st-color-green .st-kpi-value, #statsView .st-kpi.st-color-orange .st-kpi-value{ color:#1a73e8 !important; } /* Cards: mais ar, menos borda pesada */ #statsView .stats-grid{ gap:12px !important; } #statsView .st-card{ border-radius:22px !important; border:1px solid #e3e8f1 !important; background:#fff !important; box-shadow:0 1px 2px rgba(60,64,67,.035),0 10px 28px rgba(60,64,67,.04) !important; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important; } #statsView .st-card:hover{ transform:translateY(-1px); border-color:rgba(26,115,232,.16) !important; box-shadow:0 2px 5px rgba(60,64,67,.05),0 14px 34px rgba(60,64,67,.055) !important; } #statsView .st-card-head{ padding:13px 16px !important; border-bottom:1px solid #edf1f7 !important; background:linear-gradient(180deg,#fff,#fbfdff) !important; } #statsView .st-card-title{ font-size:13px !important; font-weight:850 !important; color:#202124 !important; } #statsView .st-card-sub{ font-size:10.8px !important; color:#6f7782 !important; } #statsView .st-card-badge{ color:#1a73e8 !important; background:#e8f0fe !important; border-color:rgba(26,115,232,.16) !important; font-size:9px !important; padding:3px 8px !important; } #statsView .st-card-body{ padding:12px 15px !important; } /* Gráficos em tom único; barras mais elegantes */ #statsView .st-bar-track, #statsView .st-progress{ height:7px !important; border:none !important; background:#eef3f9 !important; } #statsView .st-bar-fill, #statsView .st-progress span{ background:linear-gradient(90deg,#1a73e8,#6ea8fe) !important; box-shadow:0 0 0 1px rgba(255,255,255,.35) inset; } #statsView .st-bar-label{ color:#3c4043 !important; font-weight:780 !important; } #statsView .st-bar-val{ color:#1a73e8 !important; } /* Tabelas: números com cor só no faturamento/lucro; custo menos agressivo */ #statsView .st-table th{ background:#fbfdff !important; color:#8a94a3 !important; border-bottom:1px solid #edf1f7 !important; padding:8px 10px !important; } #statsView .st-table td{ border-bottom:1px solid #eef2f7 !important; padding:8.5px 10px !important; color:#202124 !important; } #statsView .st-table .blue{ color:#1a73e8 !important; } #statsView .st-table .green{ color:#188038 !important; } #statsView .st-table .red{ color:#5f6368 !important; } #statsView .st-table tbody tr{ transition:background .14s ease; } #statsView .st-table tbody tr:hover td{ background:#f8fbff !important; } #statsView .st-name-main{ color:#202124 !important; font-weight:850 !important; } #statsView .st-name-sub{ color:#6f7782 !important; } /* Auxiliares */ #statsView .st-mini, #statsView .st-abc-row{ background:#f8fbff !important; border-color:#e6edf7 !important; border-radius:16px !important; } #statsView .st-mini-value, #statsView .st-mini-value.green, #statsView .st-mini-value.red{ color:#1a73e8 !important; } #statsView .st-mini-label{ color:#8a94a3 !important; } #statsView .st-abc-class{ background:linear-gradient(135deg,#1a73e8,#5e97f6) !important; } #statsView .st-abc-row:nth-child(2) .st-abc-class, #statsView .st-abc-row:nth-child(3) .st-abc-class{ background:linear-gradient(135deg,#1a73e8,#5e97f6) !important; } #statsView .st-note{ background:#f8fbff !important; border-color:#e6edf7 !important; } /* Animação sutil em cascata ao abrir */ #statsView.active .stats-hero, #statsView.active .stats-filters, #statsView.active .st-kpi, #statsView.active .st-card{ animation:statsSoftRise .34s cubic-bezier(.2,.8,.2,1) both; } #statsView.active .stats-filters{animation-delay:.03s} #statsView.active .st-kpi:nth-child(1){animation-delay:.04s} #statsView.active .st-kpi:nth-child(2){animation-delay:.06s} #statsView.active .st-kpi:nth-child(3){animation-delay:.08s} #statsView.active .st-kpi:nth-child(4){animation-delay:.10s} #statsView.active .st-kpi:nth-child(5){animation-delay:.12s} #statsView.active .st-kpi:nth-child(6){animation-delay:.14s} #statsView.active .st-card{animation-delay:.12s} @keyframes statsSoftRise{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } /* Alguns cards podem ficar mais proporcionais em telas largas */ @media(min-width:1180px){ #statsView .st-card.span-6{ min-height:176px; } } /* Dark mode não recebe branco forçado */ body:not([data-theme="light"]) #statsView.stats-view{ background: radial-gradient(circle at 18% -8%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 34%), var(--bg) !important; } body:not([data-theme="light"]) #statsView .stats-hero, body:not([data-theme="light"]) #statsView .stats-filters, body:not([data-theme="light"]) #statsView .st-kpi, body:not([data-theme="light"]) #statsView .st-card{ background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 4%),var(--surface)) !important; border-color:var(--border) !important; } body:not([data-theme="light"]) #statsView .stats-title, body:not([data-theme="light"]) #statsView .st-card-title, body:not([data-theme="light"]) #statsView .st-table td, body:not([data-theme="light"]) #statsView .st-name-main{ color:var(--text) !important; } /* Estatísticas — versão com cores inteligentes, profundidade e hierarquia visual */ #statsView.stats-view{ --ag-blue:#1a73e8; --ag-blue-soft:#e8f0fe; --ag-cyan:#00acc1; --ag-green:#188038; --ag-green-soft:#e6f4ea; --ag-amber:#f29900; --ag-amber-soft:#fff4dc; --ag-red:#d93025; --ag-red-soft:#fce8e6; --ag-purple:#7c3aed; --ag-purple-soft:#f1e9ff; --ag-ink:#202124; --ag-muted:#5f6368; --ag-line:#e4eaf3; background: radial-gradient(circle at 12% -8%, rgba(26,115,232,.10), transparent 30%), radial-gradient(circle at 86% 4%, rgba(124,58,237,.07), transparent 26%), linear-gradient(180deg,#f5f8fe 0%,#f8fafc 50%,#f6f8fb 100%) !important; } /* Header com destaque, mas sem virar bloco pesado */ #statsView .stats-hero{ isolation:isolate; border-color:rgba(26,115,232,.18) !important; background: linear-gradient(135deg,rgba(26,115,232,.12),rgba(255,255,255,.90) 42%,rgba(255,255,255,.96)), radial-gradient(circle at 88% 18%,rgba(124,58,237,.12),transparent 32%) !important; box-shadow: 0 1px 2px rgba(60,64,67,.04), 0 20px 46px rgba(26,115,232,.075) !important; } #statsView .stats-hero::after{ content:""; position:absolute; width:210px; height:210px; right:-70px; top:-95px; background:radial-gradient(circle,rgba(66,133,244,.20),transparent 62%); filter:blur(2px); z-index:-1; } /* Filtros com aparência de toolbelt */ #statsView .stats-filters{ background:rgba(255,255,255,.72) !important; backdrop-filter:blur(16px) saturate(1.25); border-color:rgba(26,115,232,.14) !important; } #statsView .st-pill.active{ background:linear-gradient(180deg,#e8f0fe,#f5f9ff) !important; color:var(--ag-blue) !important; border-color:rgba(26,115,232,.30) !important; } /* KPIs: paleta por função, sem vermelho/verde gritante */ #statsView .st-kpi{ position:relative; overflow:hidden; } #statsView .st-kpi::before{ height:0 !important; } #statsView .st-kpi::after{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--kpi-accent,var(--ag-blue)); opacity:.92; } #statsView .st-kpi .st-kpi-label, #statsView .st-kpi .st-kpi-sub{ position:relative; z-index:1; } #statsView .st-kpi .st-kpi-value{ position:relative; z-index:1; color:var(--kpi-accent,var(--ag-blue)) !important; } #statsView .st-kpi:nth-child(1){ --kpi-accent:var(--ag-blue); background:linear-gradient(135deg,#fff,rgba(232,240,254,.72)) !important; } #statsView .st-kpi:nth-child(2){ --kpi-accent:var(--ag-green); background:linear-gradient(135deg,#fff,rgba(230,244,234,.72)) !important; } #statsView .st-kpi:nth-child(3){ --kpi-accent:var(--ag-amber); background:linear-gradient(135deg,#fff,rgba(255,244,220,.78)) !important; } #statsView .st-kpi:nth-child(4){ --kpi-accent:#3c4043; background:linear-gradient(135deg,#fff,#f5f7fb) !important; } #statsView .st-kpi:nth-child(5){ --kpi-accent:var(--ag-purple); background:linear-gradient(135deg,#fff,rgba(241,233,255,.70)) !important; } #statsView .st-kpi:nth-child(6){ --kpi-accent:var(--ag-cyan); background:linear-gradient(135deg,#fff,rgba(224,247,250,.72)) !important; } #statsView .st-kpi:hover{ transform:translateY(-3px) scale(1.008); } /* Destaque de tamanho: primeiro KPI ligeiramente mais nobre em telas largas */ @media(min-width:1180px){ #statsView .stats-kpis{ grid-template-columns:1.14fr 1fr 1fr .94fr 1fr 1fr !important; } #statsView .st-kpi:nth-child(1) .st-kpi-value{ font-size:23px !important; } } /* Cards com hierarquia: gráficos principais mais destacados */ #statsView .stats-grid > .st-card:nth-child(1), #statsView .stats-grid > .st-card:nth-child(2){ border-color:rgba(26,115,232,.14) !important; box-shadow: 0 1px 2px rgba(60,64,67,.035), 0 18px 42px rgba(60,64,67,.055) !important; } #statsView .stats-grid > .st-card:nth-child(1) .st-card-head{ background: linear-gradient(180deg,rgba(232,240,254,.55),#fff) !important; } #statsView .stats-grid > .st-card:nth-child(2) .st-card-head{ background: linear-gradient(180deg,rgba(241,233,255,.45),#fff) !important; } /* Gráficos: cores por linha, suaves e legíveis */ #statsView .st-chart-bars .st-bar-row:nth-child(1) .st-bar-fill{ background:linear-gradient(90deg,#1a73e8,#6ea8fe) !important; } #statsView .st-chart-bars .st-bar-row:nth-child(2) .st-bar-fill{ background:linear-gradient(90deg,#188038,#58b368) !important; } #statsView .st-chart-bars .st-bar-row:nth-child(3) .st-bar-fill{ background:linear-gradient(90deg,#7c3aed,#a78bfa) !important; } #statsView .st-chart-bars .st-bar-row:nth-child(4) .st-bar-fill{ background:linear-gradient(90deg,#f29900,#fbbc04) !important; } #statsView .st-chart-bars .st-bar-row:nth-child(n+5) .st-bar-fill{ background:linear-gradient(90deg,#00acc1,#67d7e2) !important; } #statsView .st-chart-bars .st-bar-row:nth-child(1) .st-bar-val{color:#1a73e8 !important} #statsView .st-chart-bars .st-bar-row:nth-child(2) .st-bar-val{color:#188038 !important} #statsView .st-chart-bars .st-bar-row:nth-child(3) .st-bar-val{color:#7c3aed !important} #statsView .st-chart-bars .st-bar-row:nth-child(4) .st-bar-val{color:#b06000 !important} #statsView .st-chart-bars .st-bar-row:nth-child(n+5) .st-bar-val{color:#00838f !important} #statsView .st-bar-track, #statsView .st-progress{ background:#edf2f8 !important; overflow:hidden; } #statsView .st-bar-fill{ position:relative; } #statsView .st-bar-fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); transform:translateX(-100%); animation:statsBarSheen 2.8s ease-in-out infinite; } @keyframes statsBarSheen{ 0%,45%{transform:translateX(-100%)} 75%,100%{transform:translateX(100%)} } /* Tabela: cor com inteligência, menos semáforo nos custos */ #statsView .st-table .blue{color:#1a73e8 !important} #statsView .st-table .green{color:#188038 !important} #statsView .st-table .red{ color:#8a5a00 !important; background:rgba(255,244,220,.46); border-radius:8px; } #statsView .st-table td.red{ font-weight:850; } /* Produtos: destaque tipo dashboard, com primeira coluna mais editorial */ #statsView .st-card.span-12{ background: linear-gradient(180deg,#fff,#fbfdff) !important; } #statsView .st-card.span-12 .st-card-head{ background: linear-gradient(90deg,rgba(232,240,254,.58),#fff 52%) !important; } #statsView .st-card.span-12 .st-table tbody tr:first-child td{ background:linear-gradient(90deg,rgba(232,240,254,.48),transparent 70%) !important; } #statsView .st-card.span-12 .st-table tbody tr:first-child .st-name-main{ color:#1a73e8 !important; } /* Mini cards abaixo: paleta diferenciada por cards */ #statsView .st-mini:nth-child(1){ background:linear-gradient(135deg,#fff,var(--ag-blue-soft)) !important; } #statsView .st-mini:nth-child(2){ background:linear-gradient(135deg,#fff,var(--ag-green-soft)) !important; } #statsView .st-mini:nth-child(3){ background:linear-gradient(135deg,#fff,var(--ag-amber-soft)) !important; } #statsView .st-mini:nth-child(4){ background:linear-gradient(135deg,#fff,var(--ag-purple-soft)) !important; } #statsView .st-mini:nth-child(1) .st-mini-value{color:#1a73e8 !important} #statsView .st-mini:nth-child(2) .st-mini-value{color:#188038 !important} #statsView .st-mini:nth-child(3) .st-mini-value{color:#b06000 !important} #statsView .st-mini:nth-child(4) .st-mini-value{color:#7c3aed !important} /* Badges diferentes por contexto, sem poluir */ #statsView .st-card:nth-child(1) .st-card-badge{background:#e8f0fe !important;color:#1a73e8 !important} #statsView .st-card:nth-child(2) .st-card-badge{background:#f1e9ff !important;color:#7c3aed !important;border-color:rgba(124,58,237,.18) !important} #statsView .st-card:nth-child(3) .st-card-badge{background:#e6f4ea !important;color:#188038 !important;border-color:rgba(24,128,56,.18) !important} #statsView .st-card:nth-child(4) .st-card-badge{background:#fff4dc !important;color:#b06000 !important;border-color:rgba(242,153,0,.20) !important} /* Blur/glow de fundo nos cards principais */ #statsView .st-card{ position:relative; } #statsView .st-card::before{ content:""; position:absolute; inset:auto -40px -70px auto; width:150px; height:150px; border-radius:999px; background:rgba(26,115,232,.045); filter:blur(18px); pointer-events:none; } #statsView .stats-grid > .st-card:nth-child(2)::before{ background:rgba(124,58,237,.055); } #statsView .stats-grid > .st-card:nth-child(3)::before{ background:rgba(24,128,56,.045); } /* Animação em tabela e cards ao entrar */ #statsView.active .st-table tbody tr{ animation:statsRowFade .32s ease both; } #statsView.active .st-table tbody tr:nth-child(1){animation-delay:.04s} #statsView.active .st-table tbody tr:nth-child(2){animation-delay:.07s} #statsView.active .st-table tbody tr:nth-child(3){animation-delay:.10s} #statsView.active .st-table tbody tr:nth-child(4){animation-delay:.13s} @keyframes statsRowFade{ from{opacity:0;transform:translateX(-5px)} to{opacity:1;transform:translateX(0)} } /* Escala geral: deixa a tela menos blocada */ #statsView .st-card-body{ min-height:0; } #statsView .st-card.span-6 .st-card-body{ padding-top:13px !important; padding-bottom:16px !important; } /* Dark mode com a mesma lógica, sem brancos */ body:not([data-theme="light"]) #statsView .st-kpi:nth-child(n), body:not([data-theme="light"]) #statsView .st-card:nth-child(n), body:not([data-theme="light"]) #statsView .stats-hero, body:not([data-theme="light"]) #statsView .stats-filters{ background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,var(--accent) 6%),var(--surface)) !important; } body:not([data-theme="light"]) #statsView .st-table .red{ background:rgba(242,153,0,.10); } /* Estatísticas — gráfico de linha para sazonalidade anual */ #statsView .st-line-card{ border-color:rgba(26,115,232,.18) !important; background: linear-gradient(180deg,#fff,#fbfdff), radial-gradient(circle at 12% 8%,rgba(26,115,232,.08),transparent 34%) !important; } #statsView .st-line-card .st-card-head{ background: linear-gradient(90deg,rgba(232,240,254,.70),#fff 62%) !important; } #statsView .st-line-wrap{ display:grid; gap:12px; } #statsView .st-line-top{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; } #statsView .st-line-summary{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } #statsView .st-line-chip{ display:grid; gap:1px; min-width:94px; padding:8px 10px; border-radius:14px; border:1px solid #e5ebf4; background:rgba(255,255,255,.72); box-shadow:0 1px 2px rgba(60,64,67,.035); } #statsView .st-line-chip span{ font-size:8.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#8a94a3; } #statsView .st-line-chip strong{ font-size:13px; font-weight:950; color:#1a73e8; font-variant-numeric:tabular-nums; white-space:nowrap; } #statsView .st-line-chip.lucro strong{color:#188038} #statsView .st-line-chip.media strong{color:#7c3aed} #statsView .st-line-svgbox{ position:relative; min-height:242px; border:1px solid #e7edf6; border-radius:20px; background: radial-gradient(circle at 18% 20%,rgba(26,115,232,.08),transparent 30%), linear-gradient(180deg,#fff,#f8fbff); overflow:hidden; padding:4px; } #statsView .st-line-svg{ width:100%; height:242px; display:block; overflow:visible; } #statsView .st-line-grid{ stroke:#e7edf6; stroke-width:1; } #statsView .st-line-axis-label{ fill:#7a8594; font-size:10px; font-weight:800; } #statsView .st-line-month{ fill:#6f7782; font-size:10px; font-weight:800; } #statsView .st-line-area{ fill:url(#stRevenueAreaGradient); opacity:.95; } #statsView .st-line-path{ fill:none; stroke:#1a73e8; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 5px 8px rgba(26,115,232,.20)); stroke-dasharray:900; stroke-dashoffset:900; animation:statsLineDraw .95s cubic-bezier(.2,.8,.2,1) forwards; } #statsView .st-line-profit{ fill:none; stroke:#188038; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:5 6; opacity:.78; } #statsView .st-line-point{ fill:#fff; stroke:#1a73e8; stroke-width:3; filter:drop-shadow(0 3px 6px rgba(26,115,232,.18)); transition:r .16s ease,stroke-width .16s ease; } #statsView .st-line-point:hover{ r:6; stroke-width:4; } #statsView .st-line-profit-point{ fill:#fff; stroke:#188038; stroke-width:2.4; opacity:.9; } #statsView .st-line-legend{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:0 2px; color:#6f7782; font-size:10.5px; font-weight:800; } #statsView .st-line-legend i{ width:18px; height:4px; border-radius:999px; display:inline-block; margin-right:5px; vertical-align:middle; } #statsView .st-line-legend .fat i{background:linear-gradient(90deg,#1a73e8,#6ea8fe)} #statsView .st-line-legend .luc i{background:linear-gradient(90deg,#188038,#58b368)} #statsView .st-line-empty{ min-height:220px; display:grid; place-items:center; color:#6f7782; font-size:12px; font-weight:800; text-align:center; } @keyframes statsLineDraw{ to{stroke-dashoffset:0} } #statsView.active .st-line-area{ animation:statsAreaFade .55s ease .25s both; } @keyframes statsAreaFade{ from{opacity:0} to{opacity:.95} } @media(max-width:1100px){ #statsView .st-line-top{grid-template-columns:1fr} #statsView .st-line-summary{justify-content:flex-start} #statsView .st-line-card, #statsView .stats-grid > .st-card.span-4{grid-column:1/-1 !important} } body:not([data-theme="light"]) #statsView .st-line-svgbox, body:not([data-theme="light"]) #statsView .st-line-chip{ background:color-mix(in srgb,var(--surface) 94%,var(--accent) 6%) !important; border-color:var(--border) !important; } /* ═══════════════════════════════════════════════ ESTATÍSTICAS — Painel gerencial conectado ao histórico Patch isolado: prefixo st- para evitar conflitos. ═══════════════════════════════════════════════ */ .stats-view{display:none;flex:1;overflow:auto;background:var(--bg);padding:22px;min-width:0;min-height:0} .stats-view.active{display:block;animation:_viewFadeIn .23s cubic-bezier(.4,0,.2,1) both} .stats-wrap{max-width:1440px;margin:0 auto;display:grid;gap:18px;width:100%} .stats-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px;border:1px solid var(--border);border-radius:24px;background:radial-gradient(circle at top left,color-mix(in srgb,var(--accent) 12%,transparent),transparent 34%),linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 94%,var(--bg)));box-shadow:var(--shadow-sm)} .stats-title{font-size:23px;font-weight:900;letter-spacing:-.055em;color:var(--text);line-height:1.12}.stats-sub{font-size:13px;color:var(--muted);margin-top:6px;max-width:78ch;line-height:1.6}.stats-sync-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:var(--green-dim);border:1px solid var(--green-border);color:var(--green);font-size:12px;font-weight:800;white-space:nowrap} .stats-filters{display:grid;gap:12px;padding:16px;border-radius:22px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.st-filter-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.st-filter-label{font-size:10px;font-weight:900;color:var(--faint);text-transform:uppercase;letter-spacing:.12em;margin-right:2px}.st-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.01em;transition:.15s}.st-pill:hover{border-color:var(--border2);color:var(--text);transform:translateY(-1px)}.st-pill.active{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}.st-select,.st-date{min-height:34px;padding:7px 12px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);font-size:12px;font-weight:800;color:var(--text);width:auto}.st-date-range{display:none;gap:8px;align-items:center}.st-date-range.show{display:flex}.stats-kpis{display:grid;grid-template-columns:repeat(6,minmax(135px,1fr));gap:12px}.st-kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px 16px 15px;box-shadow:var(--shadow-sm);display:grid;gap:8px;min-height:116px}.st-kpi:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--st-color,var(--accent));opacity:.85}.st-kpi-label{font-size:10px;font-weight:900;color:var(--faint);text-transform:uppercase;letter-spacing:.105em}.st-kpi-value{font-size:24px;font-weight:950;letter-spacing:-.06em;line-height:1.05;color:var(--st-color,var(--accent));font-variant-numeric:tabular-nums}.st-kpi-sub{font-size:12px;color:var(--muted);font-weight:650;line-height:1.35}.st-color-blue{--st-color:var(--accent)}.st-color-green{--st-color:var(--green)}.st-color-red{--st-color:var(--red)}.st-color-orange{--st-color:#ea8600}.st-color-neutral{--st-color:var(--text)} .stats-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}.st-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-sm);overflow:hidden;min-width:0}.st-card.span-4{grid-column:span 4}.st-card.span-5{grid-column:span 5}.st-card.span-6{grid-column:span 6}.st-card.span-7{grid-column:span 7}.st-card.span-8{grid-column:span 8}.st-card.span-12{grid-column:1/-1}.st-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 95%,var(--accent) 5%),var(--surface))}.st-card-title{font-size:13px;font-weight:900;letter-spacing:-.02em;color:var(--text)}.st-card-sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45}.st-card-badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.st-card-body{padding:14px 16px}.st-table-wrap{overflow:auto}.st-table{width:100%;border-collapse:separate;border-spacing:0}.st-table th{position:sticky;top:0;z-index:1;text-align:left;font-size:10px;font-weight:950;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;background:var(--surface);border-bottom:1px solid var(--border);padding:10px 12px;white-space:nowrap}.st-table td{font-size:12px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);padding:10px 12px;vertical-align:middle}.st-table tr:last-child td{border-bottom:0}.st-table th.num,.st-table td.num{text-align:right;font-variant-numeric:tabular-nums}.st-table td.muted{color:var(--muted);font-weight:650}.st-table .blue{color:var(--accent)}.st-table .green{color:var(--green)}.st-table .red{color:var(--red)}.st-name{display:grid;gap:2px}.st-name-main{font-size:12px;font-weight:900}.st-name-sub{font-size:10px;color:var(--muted);font-weight:650}.st-progress{height:9px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);overflow:hidden}.st-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#34a853));width:0}.st-chart-bars{display:grid;gap:10px}.st-bar-row{display:grid;grid-template-columns:96px minmax(0,1fr) 92px;gap:10px;align-items:center}.st-bar-label{font-size:11px;font-weight:850;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.st-bar-track{height:10px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);overflow:hidden}.st-bar-fill{height:100%;width:0;border-radius:999px;background:var(--accent)}.st-bar-val{text-align:right;font-size:11px;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}.st-wind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.st-mini{padding:13px;border-radius:16px;background:var(--surface2);border:1px solid var(--border);display:grid;gap:4px}.st-mini-label{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}.st-mini-value{font-size:18px;font-weight:950;letter-spacing:-.04em;color:var(--text)}.st-mini-value.blue{color:var(--accent)}.st-mini-value.green{color:var(--green)}.st-mini-value.red{color:var(--red)}.st-abc{display:grid;gap:10px}.st-abc-row{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--surface2);border:1px solid var(--border)}.st-abc-class{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:18px;font-weight:950;color:#fff;background:var(--accent)}.st-abc-row:nth-child(2) .st-abc-class{background:#7c3aed}.st-abc-row:nth-child(3) .st-abc-class{background:#ea8600}.st-empty{padding:26px;text-align:center;color:var(--muted);font-size:13px;font-weight:750}.st-note{font-size:11px;color:var(--muted);line-height:1.55;padding:10px 12px;border-radius:14px;background:var(--surface2);border:1px solid var(--border)} body[data-theme="light"] .stats-view{background:#f8fafd}body[data-theme="light"] .st-card,body[data-theme="light"] .st-kpi,body[data-theme="light"] .stats-filters,body[data-theme="light"] .stats-hero{border-color:#e5eaf2;box-shadow:0 1px 2px rgba(60,64,67,.05),0 10px 26px rgba(60,64,67,.055)}body[data-theme="light"] .st-mini,body[data-theme="light"] .st-abc-row{background:#f4f7fb;border-color:#e8edf5} .app:has(#statsView.active){grid-template-columns:var(--sidebar-w) minmax(0,1fr) 0px !important}.app:has(#statsView.active) .panel{display:none!important}.app:has(#statsView.active) .main{grid-column:2/3!important}.app:has(#statsView.active) .topbar-right .totals-inline{display:none!important}.app:has(#statsView.active) #activeProfileChip{margin-left:auto} @media(max-width:1300px){.stats-kpis{grid-template-columns:repeat(3,1fr)}.st-card.span-4,.st-card.span-5,.st-card.span-6,.st-card.span-7,.st-card.span-8{grid-column:span 6}.st-wind-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:900px){.stats-kpis{grid-template-columns:repeat(2,1fr)}.st-card.span-4,.st-card.span-5,.st-card.span-6,.st-card.span-7,.st-card.span-8{grid-column:1/-1}.stats-hero{display:grid}.st-bar-row{grid-template-columns:80px 1fr}.st-bar-val{grid-column:2}.st-wind-grid{grid-template-columns:1fr}} /* Modo Atendimento: Estatísticas é uma área gerencial e não deve aparecer para o cliente. */ body[data-privacy="client"] #sidebarStatsBtn, body[data-privacy="client"] #statsView, body[data-privacy="client"] .stats-view{ display:none !important; } /* ── Select de mês específico ───────────────────────────────────── */ .st-mes-select{ font-weight:900;font-size:12px; border-color:var(--accent,#6366f1) !important; color:var(--accent,#6366f1) !important; } /* ── Sazonalidade expansível ────────────────────────────────────── */ #statsView .st-season-list{display:grid;gap:4px} #statsView .st-seas-row{border-radius:14px;overflow:hidden;border:1px solid var(--border,#e2e8f0)} #statsView .st-seas-toggle{ width:100%;display:flex !important;align-items:center;justify-content:space-between;gap:12px; padding:13px 16px;background:var(--surface2,#f8fafc);border:none !important;cursor:pointer !important; text-align:left;transition:background .12s;box-shadow:none !important; font-family:inherit;border-radius:0 !important } #statsView .st-seas-toggle:hover{background:var(--surface2,#f1f5f9);filter:brightness(.97)} #statsView .st-seas-main{display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex:1;min-width:0} #statsView .st-seas-label{font-size:13px;font-weight:900;color:var(--text,#1e293b);min-width:90px} #statsView .st-seas-fat{font-size:13px;font-weight:900;font-variant-numeric:tabular-nums} #statsView .st-seas-luc{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums} #statsView .st-seas-ped{font-size:11px;font-weight:800;color:var(--muted,#94a3b8)} #statsView .st-seas-prod{font-size:11px;color:var(--muted,#94a3b8);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #statsView .st-seas-chevron{font-size:16px;color:var(--muted,#94a3b8);transition:transform .2s;flex-shrink:0;display:inline-block} #statsView .st-seas-chevron.rotated{transform:rotate(-180deg)} #statsView .st-seas-details{ display:none !important;padding:16px;background:var(--surface,#fff); border-top:1px solid var(--border,#e2e8f0) } #statsView .st-seas-details.open{display:block !important} #statsView .st-seas-det-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} #statsView .st-seas-det-section{display:grid;gap:6px} #statsView .st-seas-det-title{font-size:10px;font-weight:900;color:var(--muted,#94a3b8);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px} #statsView .st-seas-det-head{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;font-size:10px;font-weight:900;color:var(--muted,#94a3b8);text-transform:uppercase;letter-spacing:.07em;padding:0 4px 6px;border-bottom:1px solid var(--border,#e2e8f0)} #statsView .st-seas-det-section:nth-child(2) .st-seas-det-head{grid-template-columns:1fr auto auto} #statsView .st-seas-det-row{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--border,#e2e8f0);font-size:12px} #statsView .st-seas-det-section:nth-child(2) .st-seas-det-row{grid-template-columns:1fr auto auto} #statsView .st-seas-det-row:last-child{border-bottom:none} #statsView .st-seas-det-name{font-weight:800;color:var(--text,#1e293b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #statsView .st-seas-det-val{font-weight:900;font-variant-numeric:tabular-nums;text-align:right} #statsView .st-seas-det-muted{font-weight:700;color:var(--muted,#94a3b8);text-align:right} #statsView .st-seas-wind{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--surface2,#f8fafc);border:1px solid var(--border,#e2e8f0);font-size:12px;font-weight:800;color:var(--text,#1e293b)} @media(max-width:700px){ #statsView .st-seas-det-grid{grid-template-columns:1fr} #statsView .st-seas-main{gap:8px} } #statsView .st-seas-loading{padding:16px;color:var(--muted,#94a3b8);font-size:12px;font-weight:700}