/* ═══════════════════════════════════════════════════════════════════════════
   EletroVaga · Liquid Glass (efeito fosco por OPACIDADE — sem backdrop-filter)
   Decisão 21/09/2026: backdrop-filter removido por performance em GPUs fracas/
   PCs antigos (blur força repaint de tudo que está atrás do painel).
   O "vidro" aqui é translucidez em camadas + reflexo superior + bordas claras.
   Regras:
   - input.css  → SÓ Tailwind (nunca editar aqui)
   - output.css → gerado via: npx @tailwindcss/cli -i "./GEMCorp Next.EletroVaga/wwwroot/css/input.css" -o "./GEMCorp Next.EletroVaga/wwwroot/css/output.css"
   - Este arquivo é servido direto pelo browser: apenas CSS válido, sem @apply.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root,
html.light {
    --ev-bg: #edf0f4;
    --ev-bg-2: #e3e8ef;

    /* Alphas altos de propósito: sem blur, a cobertura precisa ser maior
       para manter legibilidade sobre o conteúdo de trás */
    --ev-glass: rgba(255, 255, 255, 0.88);
    --ev-glass-soft: rgba(255, 255, 255, 0.78);
    --ev-glass-strong: rgba(255, 255, 255, 0.95);
    --ev-glass-border: rgba(255, 255, 255, 0.6);
    --ev-glass-border-outer: rgba(15, 23, 42, 0.09);
    --ev-glass-hi: rgba(255, 255, 255, 0.35); /* reflexo topo */

    --ev-text: #1c2530;
    --ev-text-subtle: rgba(28, 37, 48, 0.66);
    --ev-text-faint: rgba(28, 37, 48, 0.45);

    --ev-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.07);
    --ev-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 32px rgba(15, 23, 42, 0.11);
    --ev-shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.06), 0 24px 64px rgba(15, 23, 42, 0.18);

    --ev-radius-sm: 10px;
    --ev-radius: 16px;
    --ev-radius-lg: 22px;

    --ev-focus: rgba(25, 118, 210, 0.45);
    --ev-wash-1: rgba(148, 163, 184, 0.16);
    --ev-wash-2: rgba(125, 135, 175, 0.12);
}

html.dark {
    --ev-bg: #0c1118;
    --ev-bg-2: #111927;

    --ev-glass: rgba(19, 27, 40, 0.86);
    --ev-glass-soft: rgba(19, 27, 40, 0.76);
    --ev-glass-strong: rgba(23, 32, 48, 0.94);
    --ev-glass-border: rgba(255, 255, 255, 0.13);
    --ev-glass-border-outer: rgba(0, 0, 0, 0.45);
    --ev-glass-hi: rgba(255, 255, 255, 0.07);

    --ev-text: #e8edf3;
    --ev-text-subtle: rgba(232, 237, 243, 0.7);
    --ev-text-faint: rgba(232, 237, 243, 0.45);

    --ev-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
    --ev-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 32px rgba(0, 0, 0, 0.42);
    --ev-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.55);

    --ev-focus: rgba(144, 202, 249, 0.5);
    --ev-wash-1: rgba(100, 130, 180, 0.13);
    --ev-wash-2: rgba(80, 100, 160, 0.1);
}

/* Fallback: respeita o SO quando o JS ainda não definiu html.light/.dark */
@media (prefers-color-scheme: dark) {
    html:not(.light):not(.dark) {
        --ev-bg: #0c1118;
        --ev-bg-2: #111927;
        --ev-glass: rgba(19, 27, 40, 0.86);
        --ev-glass-soft: rgba(19, 27, 40, 0.76);
        --ev-glass-strong: rgba(23, 32, 48, 0.94);
        --ev-glass-border: rgba(255, 255, 255, 0.13);
        --ev-glass-border-outer: rgba(0, 0, 0, 0.45);
        --ev-glass-hi: rgba(255, 255, 255, 0.07);
        --ev-text: #e8edf3;
        --ev-text-subtle: rgba(232, 237, 243, 0.7);
        --ev-text-faint: rgba(232, 237, 243, 0.45);
        --ev-focus: rgba(144, 202, 249, 0.5);
        --ev-wash-1: rgba(100, 130, 180, 0.13);
        --ev-wash-2: rgba(80, 100, 160, 0.1);
    }
}

/* ── 2. Fundo da página (neutro, contido) ─────────────────────────────────── */
body {
    background: linear-gradient(160deg, var(--ev-bg) 0%, var(--ev-bg-2) 100%);
    background-attachment: fixed;
    color: var(--ev-text);
    min-height: 100vh;
}

/* Duas manchas suaves fixas — profundidade sem cor forte */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(560px 380px at 12% -6%, var(--ev-wash-1), transparent 65%),
        radial-gradient(640px 440px at 108% 112%, var(--ev-wash-2), transparent 65%);
}

::selection {
    background: rgba(25, 118, 210, 0.22);
}

/* ── 3. Primitivos glass (opacidade — zero backdrop-filter) ───────────────── */
.glass-panel,
.glass-panel-sm,
.glass-panel-lg,
.glass-card {
    position: relative;
    background: var(--ev-glass);
    border: 1px solid var(--ev-glass-border-outer);
    outline: 1px solid var(--ev-glass-border);
    outline-offset: -1px;
    box-shadow: var(--ev-shadow);
    color: var(--ev-text);
}

/* Reflexo superior sutil — assinatura do liquid glass (gradiente barato, sem filtro) */
.glass-panel::before,
.glass-panel-sm::before,
.glass-panel-lg::before,
.glass-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 46%;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, var(--ev-glass-hi), transparent 100%);
    opacity: 0.5;
}

.glass-panel { border-radius: var(--ev-radius); }
.glass-panel-sm {
    border-radius: var(--ev-radius-sm);
    background: var(--ev-glass-soft);
    box-shadow: var(--ev-shadow-sm);
}
.glass-panel-lg {
    border-radius: var(--ev-radius-lg);
    background: var(--ev-glass-strong);
    box-shadow: var(--ev-shadow-lg);
}
.glass-card {
    border-radius: var(--ev-radius);
    padding: 0.9rem;
    overflow: hidden;
}

/* Elevação no hover — só em dispositivo com hover real */
@media (hover: hover) {
    .glass-lift { transition: transform 0.22s ease, box-shadow 0.22s ease; }
    .glass-lift:hover {
        transform: translateY(-2px);
        box-shadow: var(--ev-shadow-lg);
    }
}

/* Botão contido sobre o vidro */
.glass-btn {
    background: var(--ev-glass-soft);
    border: 1px solid var(--ev-glass-border-outer);
    border-radius: 10px;
    color: var(--ev-text);
    transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
@media (hover: hover) {
    .glass-btn:hover { background: var(--ev-glass-strong); box-shadow: var(--ev-shadow-sm); }
}

/* Campo de busca / filtro sobre o vidro */
.glass-input {
    background: var(--ev-glass-soft);
    border: 1px solid var(--ev-glass-border-outer);
    border-radius: 10px;
    color: var(--ev-text);
}

/* Textos */
.text-glass { color: var(--ev-text); }
.text-glass-subtle { color: var(--ev-text-subtle); }
.text-glass-faint { color: var(--ev-text-faint); }

/* Compat: classes usadas pelas telas (versões nativas EletroVaga) */
.bg-panel-header {
    background: var(--ev-glass-soft);
    border: 1px solid var(--ev-glass-border-outer);
    border-radius: 12px;
}
.text-theme { color: var(--ev-text); }
.text-theme-muted { color: var(--ev-text-subtle); }

/* Foco acessível sempre visível */
.ev-scope :focus-visible,
.glass-btn:focus-visible,
.glass-input:focus-visible {
    outline: 2px solid var(--ev-focus);
    outline-offset: 2px;
}

/* ── 4. Entrada animada (só opacity: sem transform para não ancorar fixed) ─── */
@keyframes ev-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}
.glass-enter { animation: ev-enter 0.34s cubic-bezier(0.22, 0.9, 0.28, 1) backwards; }
@keyframes ev-enter-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.glass-enter-fade { animation: ev-enter-fade 0.22s ease-out both; }
.ev-d1 { animation-delay: 0.04s; }
.ev-d2 { animation-delay: 0.08s; }
.ev-d3 { animation-delay: 0.12s; }
.ev-d4 { animation-delay: 0.16s; }
.ev-d5 { animation-delay: 0.2s; }

/* ── 5. Layout da app ────────────────────────────────────────────────────── */
.ev-shell { position: relative; z-index: 1; min-height: 100vh; }
.ev-watermark {
    position: fixed;
    inset: auto -70px -70px auto;
    width: min(46vw, 420px);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
    filter: grayscale(1);
}
html.dark .ev-watermark { opacity: 0.1; filter: grayscale(1) invert(1); }

/* Toolbar de páginas (busca + ação) — empilha no mobile */
.ev-toolbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 5px 10px;
}
@media (min-width: 640px) {
    .ev-toolbar { flex-direction: row; align-items: center; }
    .ev-toolbar .ev-grow { flex: 1 1 auto; }
    .ev-toolbar .ev-action { flex: 0 0 auto; }
}

/* Grade do menu principal */
.ev-menu-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
}
@media (min-width: 640px) { .ev-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ev-menu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ev-menu-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.ev-menu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 118px;
    padding: 0.8rem 0.5rem;
    text-align: center;
    cursor: pointer;
}
.ev-menu-card span {
    font-size: 0.8rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ev-menu-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ev-menu-icon svg,
.ev-menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (min-width: 640px) {
    .ev-menu-icon { width: 50px; height: 50px; }
}

.AEMEDashboard-modal {
    display: flex;
    flex-direction: column;
    width: min(760px, 94vw);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior: contain;
}

/* Modal glass — quase tela cheia no mobile */
.ev-modal {
    display: flex;
    flex-direction: column;
    width: min(760px, 94vw);
    height: min(620px, 88dvh);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior: contain;
}
.ev-modal-h-xs { height: min(340px, 88dvh); }
.ev-modal-h-sm { height: min(480px, 88dvh); }
.ev-modal-h-lg { height: min(700px, 88dvh); }
.ev-modal .mud-tabs { flex: 1 1 auto; min-height: 0; }
.ev-modal .mud-tabs-panels { min-height: 0; overflow-y: auto; }
.ev-scope .ev-modal { padding: clamp(1rem, 1rem + 1vw, 1.5rem); }
.ev-dash { overflow: auto; max-width: 100%; }
@media (max-width: 639px) {
    .ev-modal { width: 94vw; border-radius: 18px; }
}
.ev-modal-foot {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--ev-glass-border-outer);
}
@media (min-width: 640px) {
    .ev-modal-foot { flex-direction: row; justify-content: flex-end; }
    .ev-modal-foot .mud-button { width: auto; }
}
@media (max-width: 639px) {
    .ev-modal-foot .mud-button { width: 100%; }
}

/* ── 6. Overrides MudBlazor (escopados em .ev-scope) ─────────────────────── */
/* AppBar e Drawer viram vidro; o resto do Mud mantém o tema (cores intactas) */
.ev-scope .mud-appbar {
    background: var(--ev-glass) !important;
    border-bottom: 1px solid var(--ev-glass-border-outer);
    box-shadow: var(--ev-shadow-sm) !important;
    color: var(--ev-text) !important;
}
.ev-scope .mud-appbar .mud-icon-button,
.ev-scope .mud-appbar .mud-text { color: var(--ev-text) !important; }

.ev-scope .mud-drawer .mud-drawer-content,
.ev-scope .mud-drawer.mud-drawer-temporary .mud-paper,
.ev-scope .mud-drawer.mud-drawer-responsive .mud-paper {
    background: var(--ev-glass-strong) !important;
    border-right: 1px solid var(--ev-glass-border-outer);
    color: var(--ev-text) !important;
}

.ev-scope .ev-row { cursor: pointer; }

/* DataGrid transparente para o vidro aparecer através das linhas */
.ev-scope .mud-table,
.ev-scope .mud-data-grid .mud-table {
    background: transparent !important;
}
.ev-scope .mud-table-head .mud-table-cell {
    background: var(--ev-glass-soft) !important;
    color: var(--ev-text-subtle) !important;
    font-weight: 600;
}
.ev-scope .mud-table-body .mud-table-row:hover {
    background: var(--ev-glass-soft) !important;
}

/* Task 5.x — variantes glass dos customizados via CSS (sem tocar no projeto
   compartilhado Components, usado também pela Aurora) */
.ev-scope .mud-dialog,
.ev-scope .mud-popover {
    border-radius: var(--ev-radius) !important;
}
.ev-scope .mud-dialog .mud-dialog-content {
    background: var(--ev-glass);
}
.ev-scope .mud-snackbar {
    border: 1px solid var(--ev-glass-border-outer);
    border-radius: 12px;
}

/* ── 7. Scrollbar discreta ───────────────────────────────────────────────── */
.ev-scope ::-webkit-scrollbar { width: 10px; height: 10px; }
.ev-scope ::-webkit-scrollbar-thumb {
    background: rgba(120, 135, 155, 0.35);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.ev-scope ::-webkit-scrollbar-track { background: transparent; }

/* ── 8. Blazor / menu / legados (mantidos, corrigidos) ───────────────────── */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 3.5rem;
    top: 0.5rem;
}
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.watermark-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.12;
}

.menu-filter-bar { min-height: 48px; }

.menu-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* SqlEditor (CodeMirror) — fix defensivo de fonte/espaçamento */
.CodeMirror,
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
    font-family: monospace !important;
    letter-spacing: normal !important;
}

/* ── 9. Movimento reduzido ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .glass-enter { animation: none; }
    .glass-enter-fade { animation: none; }
    .glass-lift,
    .glass-btn,
    .glass-input { transition: none; }
    .glass-lift:hover { transform: none; }
    .menu-scroll { scroll-behavior: auto; }
    body::before { display: none; }
}

/* ── 10. Mobile-only (§5 mobile) — SÓ-ADITIVO, desktop nem percebe ──────────
   Regra de ouro: tudo aqui vive em @media(max-width:639px). Nenhuma regra
   1-66 (tokens/cores) tocada. Classes Tailwind sm: / MudBlazor Breakpoint
   são no-op no desktop. Padrão documentado no plan.md da expansão.
   - .ev-main-layout: afrouxa !h-screen + overflow-hidden SÓ no mobile
   - .ev-table-scroll: scroll-x no WRAPPER (nunca esconder coluna desktop)
   - .ev-stack-mobile: empilha filtros (column+stretch, filhos 100%)
   - .ev-page-foot: botões full-width (herda padrão ev-modal-foot)
   - anti-zoom iOS: inputs >=16px SÓ no mobile
   - charts/tiles: alturas mobile sem trocar componente desktop */
@media (max-width: 639px) {
    /* Shell rola no iOS/Android; desktop mantém !h-screen + overflow-hidden */
    body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
    .ev-scope .ev-main-layout { height: auto !important; min-height: 100dvh; overflow: visible !important; }
    .ev-scope .ev-main-content { padding-top: 4rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .ev-scope .ev-shell { min-height: 100dvh; overflow-x: clip; }

    /* Tabelas largas: rola no wrapper, corpo nunca com scroll-x */
    .ev-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; overscroll-behavior-x: contain; }
    .ev-table-scroll .mud-table { white-space: nowrap; }
    .ev-table-scroll .mud-table-container { overflow: visible !important; }

    /* Filtros empilhados */
    .ev-stack-mobile { flex-direction: column !important; align-items: stretch !important; }
    .ev-stack-mobile > * { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; }

    /* Rodapés de página: botões full-width (mesmo padrão ev-modal-foot) */
    .ev-page-foot .mud-button { width: 100%; }
    .ev-page-foot { flex-direction: column !important; align-items: stretch !important; }

    /* Anti-zoom iOS: font >=16px nos inputs SÓ no mobile */
    .ev-scope input,
    .ev-scope textarea,
    .ev-scope select,
    .ev-scope .mud-input-slot,
    .ev-scope .mud-input input { font-size: 16px !important; }

    /* Fila: h4 vira h5 visual SÓ no mobile (desktop intacto) */
    .ev-fila .mud-typography-h4 { font-size: 1.25rem !important; line-height: 1.4 !important; overflow-wrap: anywhere; }

    /* Dashboard: charts 140px mobile (sem trocar componente) */
    .ev-dash .ev-chart-donut,
    .ev-dash .ev-chart-line { height: 140px !important; }
    .ev-dash .ev-chart-donut .mud-chart,
    .ev-dash .ev-chart-line .mud-chart { height: 140px !important; max-height: 140px !important; }

    /* Task 5 pontual Snarf 23/09/2026 — Donut "Status dos carregadores" sem invasão no telefone.
       Só-mobile, desktop intacto, zero cor/estilo. Override aditivo do 140/180px fixos:
       item inline height:180px + regra acima. Seletores MudBlazor: .mud-chart (flex row Right)
       + .mud-chart-legend (filha do chart). Posterior na cascata = vence mesma especificidade. */
    .ev-dash .ev-chart-donut { height: auto !important; min-height: 200px !important; justify-content: center !important; }
    .ev-chart-donut { justify-content: center !important; }
    .ev-dash .ev-chart-donut .mud-chart,
    .ev-chart-donut .mud-chart { height: auto !important; max-height: none !important; flex-direction: column !important; align-items: center !important; }
    .ev-chart-donut .mud-chart svg { max-width: 100% !important; height: auto !important; }
    .ev-chart-donut .mud-chart-legend { margin: 8px 0 0 !important; max-width: 100% !important; }
    .ev-dash .glass-panel-sm > .mud-typography-body2 { margin-bottom: 4px !important; }

    /* Dashboard: tiles com minmax para 320px */
    .ev-tiles { justify-content: flex-start; }
    .ev-tiles > * { min-width: 0; }

    /* Login: garante respiro com teclado aberto */
    .ev-login { max-height: 100dvh; overflow-y: auto; }

    /* Fix pontual 23/09/2026 (Snarf, sem commit) — toolbar das 6 listas (AEChargePoint,
       AEChargePointPlug, AEFirmware, CEFCadastro, CTROperador, CTREmpresas) sendo
       empurrada no telefone: MudDataGrid FixedHeader com Height=AlturaContainer
       (JS só no firstRender) fica grande demais no mobile. Só-mobile, desktop
       intacto, zero cor/estilo. Não mexer no JS nem no FixedHeader.
       - .ev-toolbar não comprime (flex-shrink:0) + .ev-grow pode encolher (min-width:0)
       - .ev-grid-scroll capa o scroll interno em 55dvh p/ toolbar respirar
         (Task 3 vai embrulhar os DataGrids; .ev-table-scroll da Fila intacto —
         Fila é MudTable Height 200px próprio e já funciona). */
    .ev-toolbar { flex-shrink: 0 !important; }
    .ev-toolbar .ev-grow { min-width: 0 !important; }
    .ev-grid-scroll .mud-table-container { max-height: 55dvh !important; }
}