/* ============================================================ DASHBOARD MASTER — Tema DARK profissional Tokens isolados via [data-dash-theme] no . Aplicado em: dashboard_master, rankings, relatorio_mensal ============================================================ */ [data-dash-theme]{ /* Fundos 5 niveis */ --d-bg:#0a0f1c; --d-surface:#111827; --d-card:#1a2332; --d-card-hover:#232f42; --d-overlay:#2a3850; /* Texto 3 niveis */ --d-text:#f1f5f9; --d-text-sec:#cbd5e1; --d-text-muted:#94a3b8; /* Borders 4 niveis */ --d-border:#334155; --d-border-soft:#1f2937; --d-border-hard:#475569; --d-border-focus:#60a5fa; /* Semanticas (WCAG AA em fundo dark) */ --d-primary:#3b82f6; --d-primary-bg:rgba(59,130,246,.12); /* Fundo CHEIO com texto branco: #3b82f6 da 3,68:1 com branco (reprova AA em texto de 12-13px); #2563eb da 5,17:1. O --d-primary segue para borda/texto sobre fundo escuro, onde passa. */ --d-primary-strong:#2563eb; --d-primary-hover:#1d4ed8; --d-on-primary:#ffffff; --d-success:#22c55e; --d-success-bg:rgba(34,197,94,.12); --d-danger:#f87171; --d-danger-bg:rgba(248,113,113,.12); --d-warning:#fbbf24; --d-warning-bg:rgba(251,191,36,.12); --d-info:#38bdf8; --d-info-bg:rgba(56,189,248,.12); --d-purple:#a78bfa; --d-purple-bg:rgba(167,139,250,.12); --d-orange:#fb923c; --d-orange-bg:rgba(251,146,60,.12); /* Sombras (rgba opacas pq dark precisa) */ --d-shadow-sm:0 1px 2px rgba(0,0,0,.4); --d-shadow-md:0 4px 12px rgba(0,0,0,.5); --d-shadow-lg:0 12px 32px rgba(0,0,0,.6); --d-shadow-glow:0 0 0 4px rgba(59,130,246,.15); /* Radii */ --d-r-sm:6px; --d-r-md:10px; --d-r-lg:14px; --d-r-xl:20px; } /* ---------------------------------------------------------------- BODY override quando data-dash-theme esta presente ---------------------------------------------------------------- */ body[data-dash-theme]{ background:var(--d-bg) !important; color:var(--d-text) !important; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:'cv01','cv02','tnum'; min-height:100vh; min-height:100dvh; } /* ⚠️ E2 (24/09) — TODO `:hover` desta folha mora num `@media (hover:hover) and (pointer:fine)` marcado `E2-HOVER`, e NO LUGAR em que a regra ja estava (mover para o fim trocaria a cascata: `.dash-btn-group .dash-btn:hover` passaria a vencer o `.is-active` de mesma especificidade). No toque o `:hover` GRUDA: o cartao tocado "subia e ficava", e o tooltip do termometro abria no toque e ficava depois de fechar o modal. O retorno do toque e o `:active` (o `touchstart` passivo do dashboard_comum.js o liga no iOS). A cerca `[P21]` reprova `:hover` fora de um `@media` com `hover:hover`; o matador do hover solto (tools/qa_dashboard_front.py) desembrulha. */ /* ---------------------------------------------------------------- SHELL — container principal ---------------------------------------------------------------- */ .dash-shell{ max-width:1400px; margin:0 auto; padding:24px 28px; } /* ---------------------------------------------------------------- HEADER ---------------------------------------------------------------- */ .dash-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:24px; } .dash-header__title{ display:flex; flex-direction:column; gap:4px; min-width:0; } .dash-header__title h1{ font-size:24px; font-weight:700; color:var(--d-text); line-height:1.15; letter-spacing:-0.02em; margin:0; } .dash-header__subtitle{ font-size:13px; font-weight:500; color:var(--d-text-muted); } .dash-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } /* ---------------------------------------------------------------- BOTOES ---------------------------------------------------------------- */ .dash-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border-radius:var(--d-r-md); border:1px solid var(--d-border); background:transparent; color:var(--d-text-sec); font-family:inherit; font-size:13px; font-weight:600; line-height:1; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } /* E2-HOVER */ @media (hover:hover) and (pointer:fine){ .dash-btn:hover{ border-color:var(--d-border-hard); background:var(--d-card); color:var(--d-text); } } .dash-btn:focus-visible{ outline:none; border-color:var(--d-border-focus); box-shadow:var(--d-shadow-glow); } .dash-btn:disabled{opacity:.5;cursor:not-allowed} .dash-btn--sm{padding:6px 11px;font-size:12px} .dash-btn--lg{padding:11px 18px;font-size:14px} .dash-btn--primary{ background:var(--d-primary-strong); border-color:var(--d-primary-strong); color:var(--d-on-primary); } /* E2-HOVER */ @media (hover:hover) and (pointer:fine){ .dash-btn--primary:hover{ background:var(--d-primary-hover); border-color:var(--d-primary-hover); color:var(--d-on-primary); } } .dash-btn--outline{ background:transparent; border-color:var(--d-border); color:var(--d-text-sec); } /* E2-HOVER */ @media (hover:hover) and (pointer:fine){ .dash-btn--outline:hover{ background:var(--d-card); border-color:var(--d-border-hard); color:var(--d-text); } } .dash-btn--danger{ background:transparent; border-color:rgba(248,113,113,.4); color:var(--d-danger); } /* E2-HOVER */ @media (hover:hover) and (pointer:fine){ .dash-btn--danger:hover{ background:var(--d-danger-bg); border-color:var(--d-danger); color:var(--d-danger); } } .dash-btn--ghost{ border-color:transparent; background:transparent; color:var(--d-text-muted); } /* E2-HOVER */ @media (hover:hover) and (pointer:fine){ .dash-btn--ghost:hover{ color:var(--d-text); background:var(--d-card); } } /* Estados que faltavam (padrao .act-btn): PRESSIONADO, e TRAVADO que nao "acende" no hover — o "Desativar loja" travado nao pode parecer clicavel. */ .dash-btn:active:not(:disabled){transform:translateY(.5px)} /* E2-HOVER */ @media (hover:hover) and (pointer:fine){ .dash-btn--primary:disabled:hover{background:var(--d-primary-strong);border-color:var(--d-primary-strong)} .dash-btn--outline:disabled:hover{background:transparent;border-color:var(--d-border);color:var(--d-text-sec)} .dash-btn--danger:disabled:hover{background:transparent;border-color:rgba(248,113,113,.4)} } /* Segmented button group */ .dash-btn-group{ display:inline-flex; background:var(--d-card); border:1px solid var(--d-border); border-radius:var(--d-r-md); padding:3px; gap:0; flex-wrap:wrap; } .dash-btn-group .dash-btn{ border:1px solid transparent; background:transparent; border-radius:calc(var(--d-r-md) - 3px); padding:7px 14px; font-size:12.5px; color:var(--d-text-muted); } /* E2-HOVER */ @media (hover:hover) and (pointer:fine){ .dash-btn-group .dash-btn:hover{ background:var(--d-card-hover); color:var(--d-text); } } .dash-btn-group .dash-btn.is-active{ background:var(--d-primary-strong); color:var(--d-on-primary); border-color:var(--d-primary-strong); box-shadow:var(--d-shadow-sm); } /* ---------------------------------------------------------------- FILTRO PERIODO ---------------------------------------------------------------- */ .dash-filter{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; } .dash-filter-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .dash-filter-label{ font-size:11px; font-weight:600; color:var(--d-text-muted); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; } .dash-period-bar{ display:none; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 14px; background:var(--d-card); border:1px solid var(--d-border); border-radius:var(--d-r-md); } .dash-period-bar.is-open{display:flex} /* `width:auto`: o `style.css` do ERP poe `width:100%` em todo input, e dentro da linha flex das datas cada campo ocupava a linha INTEIRA — as 2 datas e o "Aplicar" saiam um embaixo do outro no computador (medido a 1366: 385 px cada, em 3 linhas). No celular (<= 600 px) a grade `.dash-period-datas` volta a 100% — a regra de la vem DEPOIS, com a mesma especificidade, e vence. Vale para a tela inicial e para a lista de clientes. */ .dash-period-bar input[type=date]{ width:auto; padding:7px 10px; background:var(--d-bg); border:1px solid var(--d-border); border-radius:var(--d-r-sm); color:var(--d-text); font-size:13px; font-family:inherit; color-scheme:dark; } .dash-period-bar input[type=date]:focus{ outline:none; border-color:var(--d-border-focus); box-shadow:var(--d-shadow-glow); } .dash-period-bar .dash-period-sep{ font-size:12px; color:var(--d-text-muted); } /* Datas + "Aplicar" (confirma) separados dos atalhos (aplicam na hora). */ .dash-period-datas, .dash-period-atalhos{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .dash-period-atalhos{margin-left:auto} /* ---------------------------------------------------------------- TABS ---------------------------------------------------------------- */ .dash-tabs{ display:flex; gap:0; margin-bottom:24px; border-bottom:1px solid var(--d-border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .dash-tab{ padding:11px 18px; border:none; background:transparent; color:var(--d-text-muted); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s ease, border-color .15s ease; } /* E2-HOVER */ @media (hover:hover) and (pointer:fine){ .dash-tab:hover{color:var(--d-text)} } .dash-tab.is-active{ color:var(--d-text); border-bottom-color:var(--d-primary); } .dash-tab--total.is-active{ color:var(--d-success); border-bottom-color:var(--d-success); } .dash-tab-content{display:none} .dash-tab-content.is-active{display:block;animation:dashFade .25s ease} @keyframes dashFade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } /* Variante "pillbox" para rankings (tabs em card) */ .dash-tabs--pills{ border-bottom:none; background:var(--d-card); border:1px solid var(--d-border); border-radius:var(--d-r-md); padding:4px; gap:0; margin-bottom:20px; } .dash-tabs--pills .dash-tab{ border-bottom:none; border-radius:var(--d-r-sm); margin-bottom:0; padding:9px 16px; } .dash-tabs--pills .dash-tab.is-active{ background:var(--d-primary-strong); color:var(--d-on-primary); } /* ---------------------------------------------------------------- SECTION TITLE ---------------------------------------------------------------- */ .dash-section-title{ display:flex; align-items:center; gap:12px; margin:24px 0 14px; font-size:11px; font-weight:700; color:var(--d-text-muted); text-transform:uppercase; letter-spacing:.15em; } .dash-section-title::after{ content:""; flex:1; height:1px; background:var(--d-border); } /* ---------------------------------------------------------------- CARD BASE ---------------------------------------------------------------- */ .dash-card{ background:var(--d-card); border:1px solid var(--d-border); border-radius:var(--d-r-lg); padding:18px 20px; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .dash-card--clickable{cursor:pointer} /* E2-HOVER */ @media (hover:hover) and (pointer:fine){ .dash-card--clickable:hover{ border-color:var(--d-border-hard); transform:translateY(-1px); box-shadow:var(--d-shadow-md); } } /* ---------------------------------------------------------------- STAT CARD (KPI compacto) ---------------------------------------------------------------- */ .dash-stat-card{ background:var(--d-card); border:1px solid var(--d-border); border-radius:var(--d-r-lg); padding:18px 20px; border-left:3px solid var(--d-border-hard); transition:border-color .15s ease, transform .15s ease; } .dash-stat-card .label{ font-size:11px; font-weight:600; color:var(--d-text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; } .dash-stat-card .value{ font-size:28px; font-weight:800; color:var(--d-text); line-height:1.15; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; white-space:nowrap; /* 6.11: UM valor; o do servidor tem espaco comum apos "R$" */ } .dash-stat-card .delta, .dash-stat-card .sub{ font-size:12px; font-weight:500; color:var(--d-text-muted); margin-top:6px; } .dash-stat-card--accent{border-left-color:var(--d-primary)} .dash-stat-card--accent .value{color:var(--d-primary)} .dash-stat-card--success{border-left-color:var(--d-success)} .dash-stat-card--success .value{color:var(--d-success)} .dash-stat-card--danger{border-left-color:var(--d-danger)} .dash-stat-card--danger .value{color:var(--d-danger)} .dash-stat-card--warning{border-left-color:var(--d-warning)} .dash-stat-card--warning .value{color:var(--d-warning)} .dash-stat-card--info{border-left-color:var(--d-info)} .dash-stat-card--info .value{color:var(--d-info)} /* Variante MES (KPI menor, mais discreto) */ .dash-stat-card--sm .value{font-size:22px} .dash-stat-card--sm{padding:14px 16px} /* Custo perdido (informativo, abaixo dos KPIs do dia) */ .dash-custo-perdido{margin-bottom:24px} /* ---------------------------------------------------------------- HERO CARD (Lucro Real do dia) ---------------------------------------------------------------- */ .dash-hero-card{ background:var(--d-card); border:1px solid var(--d-border); border-left:6px solid var(--d-success); border-radius:var(--d-r-lg); padding:28px 24px; text-align:center; margin-bottom:24px; } .dash-hero-card .label{ font-size:11px; font-weight:600; color:var(--d-text-muted); text-transform:uppercase; letter-spacing:.15em; margin-bottom:10px; } .dash-hero-card .value{ font-size:48px; font-weight:900; color:var(--d-success); line-height:1.05; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; } .dash-hero-card .sub{ font-size:12px; font-weight:500; color:var(--d-text-muted); margin-top:8px; } .dash-hero-card.is-negative{border-left-color:var(--d-danger)} .dash-hero-card.is-negative .value{color:var(--d-danger)} /* ---------------------------------------------------------------- GRIDS ---------------------------------------------------------------- */ .dash-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; } .dash-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; } .dash-grid-auto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:20px; } .dash-grid-pag{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:20px; } /* ---------------------------------------------------------------- PAGAMENTO CARD (clicavel) ---------------------------------------------------------------- */ /* ⚠️ A cor da forma e DADO (cadastro do lojista): texto nessa cor nunca tem contraste garantido (PIX #7c3aed dava 2,53:1). Ela fica so na borda e no ponto, via --forma-cor; o texto e sempre token. E um