/* ════════════════════════════════════════
   GOOGLE FONTS — Inter
════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ════════════════════════════════════════
   DESIGN TOKENS — ZEUS × UNI
════════════════════════════════════════ */
:root {
    /* Brand */
    --zeus-amber:   #F5A623;
    --zeus-amber2:  #FFB84D;
    --uni-orange:   #E84C20;
    --uni-red:      #C73A14;

    /* Dark surfaces */
    --bg:           #0d0e14;
    --bg-2:         #12141e;
    /* Opaca de propósito: usada por cabeçalho fixo de tabela, onde fundo
       translúcido deixa a linha de baixo aparecer através. */
    --surface-solid: #191b26;
    /* O par da de cima, para as linhas pares: a primeira coluna é fixa e precisa
       de fundo opaco, mas com um só tom ela ignorava o zebrado e virava uma
       faixa uniforme ao lado de linhas alternadas. Equivale a --surface-solid
       com o mesmo 2% de branco que `tbody tr:nth-child(even)` aplica. */
    --surface-solid-2: #1d1f29;
    --surface:      rgba(255,255,255,0.04);
    --surface-2:    rgba(255,255,255,0.07);
    --surface-hover:rgba(255,255,255,0.10);
    --glass-border: rgba(255,255,255,0.09);
    --glass-border2:rgba(255,255,255,0.15);

    /* Text */
    --text:         #f0f2f7;
    --text-2:       #a8b2c8;
    --text-3:       #5a6480;
    --muted:        #8893ae;

    /* Accents (status) */
    --green:    #22c97a;
    --red:      #ff4d6a;
    --yellow:   #f5c518;
    --orange:   #ff8c42;
    --purple:   #9d6ef5;
    --blue:     #4da6ff;
    --teal:     #2ec4b6;
    --gray:     #6b7a99;

    /* Glow */
    --glow-amber:  0 0 24px rgba(245,166,35,0.25);
    --glow-orange: 0 0 20px rgba(232,76,32,0.20);
    --glow-green:  0 0 16px rgba(34,201,122,0.20);

    /* Topbar */
    --topbar-h: 64px;
    --sidebar-w: 264px;
    --sidebar-collapsed-w: 82px;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    /* Avisa o navegador que a interface é escura. Sem isto, os controles
       nativos (lista do select, calendário do input date, barra de rolagem)
       são desenhados em branco pelo sistema e o texto claro some no fundo. */
    color-scheme: dark;
}

/* ════════════════════════════════════════
   APP SIDEBAR
════════════════════════════════════════ */
.app-body {
    padding-left: var(--sidebar-w);
    /* Sem transição aqui de propósito: animar o padding do body move a página
       inteira a cada redimensionamento e, se o navegador não estiver desenhando
       quadros, o valor fica preso no meio do caminho. A sidebar continua
       animando sozinha (width/transform), que é o que se vê de fato. */
}
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 10% 0, rgba(245,166,35,.11), transparent 35%),
        linear-gradient(180deg, #11131c 0%, #090a10 100%);
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 16px 0 40px rgba(0,0,0,.24);
    transition: width .25s ease, transform .25s ease;
}
.sidebar-brand {
    min-height: 76px;
    /* Não encolhe: o espaço que faltar sai da nav, que rola. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-brand-logos { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-brand-logos span { width: 1px; height: 28px; background: rgba(255,255,255,.14); }
.sidebar-zeus { width: 84px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(245,166,35,.35)); }
.sidebar-uni { width: 64px; height: 28px; object-fit: contain; }
.sidebar-collapse {
    width: 30px; height: 30px; padding: 0; flex: 0 0 30px;
    display: grid; place-items: center;
    color: var(--text-2); background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
    box-shadow: none;
}
.sidebar-collapse:hover { background: rgba(255,255,255,.09); box-shadow: none; transform: none; }
.sidebar-collapse svg, .sidebar-icon svg, .sidebar-logout svg {
    width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.sidebar-context { padding: 22px 20px 14px; display: flex; flex-direction: column; flex: 0 0 auto; }
.sidebar-eyebrow, .sidebar-section-label {
    color: var(--zeus-amber); font-size: 9px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
}
.sidebar-context strong { margin-top: 6px; font-size: 17px; letter-spacing: -.3px; }
.sidebar-context small { margin-top: 3px; font-size: 11px; color: var(--muted); }
/* A nav é quem rola quando a tela não comporta todos os módulos — a marca, o
   contexto e o rodapé com o usuário ficam parados.
   `min-height: 0` não é detalhe: dentro de um flex column, o item tem
   `min-height: auto` e se recusa a encolher abaixo do próprio conteúdo, então o
   `overflow-y: auto` nunca entrava em ação. A lista simplesmente crescia além da
   tela e os últimos módulos ficavam inalcançáveis, sem barra de rolagem. */
.sidebar-nav {
    padding: 8px 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
/* Telas baixas (notebook com a barra do sistema, janela reduzida): a marca, o
   bloco de contexto e o rodapé somam ~250px fixos e sobrava uma fresta para os
   módulos — rolava, mas mostrando um item por vez. Aqui o contexto sai e o
   resto comprime, devolvendo a altura para a lista. */
@media (max-height: 760px) {
    .sidebar-context { display: none; }
    .sidebar-brand { min-height: 62px; }
    .sidebar-zeus { width: 70px; height: 32px; }
    .sidebar-uni { width: 54px; height: 24px; }
    .sidebar-nav { padding-top: 14px; }
    .sidebar-footer { padding: 10px 12px 12px; }
}
@media (max-height: 560px) {
    .sidebar-brand { min-height: 52px; }
    .sidebar-section-label { display: none; }
    .client-group-toggle { min-height: 42px; }
}
.sidebar-section-label { padding: 0 9px 8px; color: var(--text-3); }
.client-group { border: 1px solid transparent; border-radius: 13px; overflow: hidden; transition: background .18s, border-color .18s; }
.client-group.open { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.065); }
.client-group-toggle {
    width: 100%; min-height: 50px; padding: 7px 9px;
    display: flex; align-items: center; gap: 10px;
    color: var(--text-2); text-align: left; border: 0; border-radius: 11px;
    background: transparent; box-shadow: none;
}
.client-group-toggle:hover { color: var(--text); background: rgba(255,255,255,.045); transform: none; box-shadow: none; }
.client-group-toggle.active { color: var(--text); }
.client-monogram {
    width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center;
    border-radius: 9px; color: var(--text-2); font-size: 12px; font-weight: 900;
    background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.08);
}
.client-group-toggle.active .client-monogram {
    color: #161008; background: linear-gradient(135deg, var(--zeus-amber), var(--uni-orange));
    border-color: transparent; box-shadow: 0 5px 15px rgba(245,166,35,.2);
}
.client-group-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.client-group-copy strong { font-size: 12px; white-space: nowrap; }
.client-group-copy small { color: var(--text-3); font-size: 9px; white-space: nowrap; }
.client-chevron {
    width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; transition: transform .2s;
}
.client-group.open .client-chevron { transform: rotate(90deg); }
.client-group-content { display: none; padding: 2px 5px 6px 13px; }
.client-group.open .client-group-content { display: flex; flex-direction: column; gap: 4px; }
.client-empty {
    margin: 2px 0 5px 36px; padding: 8px 10px; color: var(--text-3);
    font-size: 9px; border-left: 1px dashed rgba(255,255,255,.14);
}
.sidebar-link {
    position: relative; min-height: 50px; padding: 7px 9px;
    display: flex; align-items: center; gap: 12px;
    color: var(--text-2); border: 1px solid transparent; border-radius: 12px;
    transition: color .18s, background .18s, border-color .18s;
}
.sidebar-link:hover { color: var(--text); background: rgba(255,255,255,.055); }
.sidebar-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(245,166,35,.18), rgba(232,76,32,.09));
    border-color: rgba(245,166,35,.22);
    box-shadow: inset 3px 0 0 var(--zeus-amber), 0 8px 24px rgba(0,0,0,.12);
}
.sidebar-icon {
    width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
    border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.05);
}
.sidebar-link.active .sidebar-icon { color: var(--zeus-amber); background: rgba(245,166,35,.12); }
.sidebar-link-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar-link-copy strong { font-size: 12px; white-space: nowrap; }
.sidebar-link-copy small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.sidebar-footer {
    margin-top: auto; padding: 14px 12px 18px; border-top: 1px solid rgba(255,255,255,.07);
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
}
.sidebar-user { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px; }
.sidebar-avatar {
    width: 35px; height: 35px; flex: 0 0 35px; border-radius: 10px;
    display: grid; place-items: center; color: #111; font-weight: 900;
    background: linear-gradient(135deg, var(--zeus-amber), var(--uni-orange));
}
.sidebar-user-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-user-copy strong { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.sidebar-user-copy small { color: var(--muted); font-size: 9px; }
.sidebar-logout {
    width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center;
    color: var(--text-3); border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
}
.sidebar-logout:hover { color: var(--red); border-color: rgba(255,77,106,.25); background: rgba(255,77,106,.08); }
.sidebar-logout span { display: none; }
.sidebar-mobile-toggle, .sidebar-overlay { display: none; }

.sidebar-collapsed.app-body { padding-left: var(--sidebar-collapsed-w); }
.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed-w); }
.sidebar-collapsed .sidebar-brand-logos .sidebar-uni,
.sidebar-collapsed .sidebar-brand-logos span,
.sidebar-collapsed .sidebar-context,
.sidebar-collapsed .sidebar-section-label,
.sidebar-collapsed .client-group-copy,
.sidebar-collapsed .client-chevron,
.sidebar-collapsed .sidebar-link-copy,
.sidebar-collapsed .sidebar-user-copy { display: none; }
/* Recolhida, a marca vira coluna: logo em cima, botão de expandir embaixo.
   Antes o botão ficava com `right: -15px`, metade dele para fora da barra de
   82px — e aparecia cortado. */
.sidebar-collapsed .sidebar-brand {
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 12px 0;
}
.sidebar-collapsed .sidebar-zeus { width: 42px; height: 32px; }
.sidebar-collapsed .sidebar-collapse {
    position: static;
    transform: rotate(180deg);
}
.sidebar-collapsed .sidebar-nav { padding-top: 24px; }
.sidebar-collapsed .client-group { overflow: visible; }
.sidebar-collapsed .client-group-toggle { justify-content: center; padding: 7px; }
.sidebar-collapsed .client-group-content { display: none; }
.sidebar-collapsed .sidebar-link { justify-content: center; padding: 9px; }
.sidebar-collapsed .sidebar-footer { justify-content: center; flex-direction: column; }
.sidebar-collapsed .sidebar-user { flex: none; padding: 0; }

@media (max-width: 900px) {
    .app-body, .sidebar-collapsed.app-body { padding-left: 0; }
    .app-sidebar, .sidebar-collapsed .app-sidebar { width: min(290px, 86vw); transform: translateX(-105%); }
    .sidebar-mobile-open .app-sidebar { transform: translateX(0); }
    .sidebar-mobile-toggle {
        position: fixed; top: 14px; left: 12px; z-index: 1100;
        width: 38px; height: 38px; padding: 9px; display: flex; flex-direction: column;
        justify-content: center; gap: 4px; background: rgba(17,19,28,.94);
        border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.3);
    }
    .sidebar-mobile-toggle span { display: block; width: 100%; height: 2px; background: var(--zeus-amber); border-radius: 2px; }
    .sidebar-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); }
    .sidebar-mobile-open .sidebar-overlay { display: block; }
    .sidebar-collapse { display: none; }
    .sidebar-collapsed .sidebar-brand-logos .sidebar-uni,
    .sidebar-collapsed .sidebar-brand-logos span,
    .sidebar-collapsed .sidebar-context,
    .sidebar-collapsed .sidebar-section-label,
    .sidebar-collapsed .client-group-copy,
    .sidebar-collapsed .client-chevron,
    .sidebar-collapsed .sidebar-link-copy,
    .sidebar-collapsed .sidebar-user-copy { display: flex; }
    .sidebar-collapsed .sidebar-brand { justify-content: space-between; padding: 0 16px 0 18px; }
    .sidebar-collapsed .sidebar-zeus { width: 84px; }
    .sidebar-collapsed .sidebar-nav { padding-top: 8px; }
    .sidebar-collapsed .client-group { overflow: hidden; }
    .sidebar-collapsed .client-group-toggle { justify-content: flex-start; padding: 7px 9px; }
    .sidebar-collapsed .client-group.open .client-group-content { display: flex; }
    .sidebar-collapsed .sidebar-link { justify-content: flex-start; padding: 9px 11px; }
    .topbar { padding-left: 60px; }
}

/* ════════════════════════════════════════
   RESET / BASE
════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    /* min-height, não height: a página cresce com o conteúdo e rola.
       Com height:100vh + overflow:hidden, tudo que passasse da altura da tela
       era simplesmente cortado — e o conteúdo cresceu (13 status, 939 OS). */
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ════════════════════════════════════════
   PAGE SHELL
════════════════════════════════════════ */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 70% 50% at 15% 0%,  rgba(245,166,35,.07)  0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(232,76,32,.06)   0%, transparent 60%),
        var(--bg);
}

/* ════════════════════════════════════════
   TOPBAR
════════════════════════════════════════ */
.topbar {
    flex-shrink: 0;
    height: var(--topbar-h);
    background: rgba(10,11,18,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    color: var(--text);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 14px;
    position: relative;
    z-index: 100;
}

/* Subtle top accent line */
.topbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--zeus-amber) 0%, var(--uni-orange) 50%, transparent 100%);
}

/* Os logos vivem apenas na barra lateral (_sidebar.php) — a topbar começa no título. */

/* ── Title ── */
.topbar-title { flex: 0 0 auto; }
.topbar-title h1 {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 1.1;
    color: var(--text);
}
.topbar-title p {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
    letter-spacing: .4px;
}

/* ── Spacer ── */
.topbar-spacer { flex: 1 1 0; }

/* ── Última atualização (data da coleta do robô) ── */
.topbar-extraction {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    padding: 6px 14px;
}

/* Bolinha de saúde da coleta: verde recente, âmbar 1–2 dias, vermelha parada. */
.topbar-extraction .ext-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--muted);
}
.topbar-extraction.ext-ok .ext-dot {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,.7);
}
.topbar-extraction.ext-atencao {
    border-color: rgba(245,166,35,.45);
}
.topbar-extraction.ext-atencao .ext-dot {
    background: var(--zeus-amber);
    box-shadow: 0 0 8px rgba(245,166,35,.7);
}
.topbar-extraction.ext-alerta {
    border-color: rgba(239,68,68,.5);
    background: rgba(239,68,68,.08);
}
.topbar-extraction.ext-alerta .ext-dot {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239,68,68,.7);
    animation: ext-pulse 1.8s ease-in-out infinite;
}
@keyframes ext-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.topbar-extraction .ext-value small {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-left: 4px;
}
.topbar-extraction.ext-alerta .ext-value small {
    color: #f87171;
}

.topbar-extraction .ext-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .5px;
}
.topbar-extraction .ext-value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-top: 1px;
}

/* ── Total OS badge ── */
.topbar-total {
    background: linear-gradient(135deg, rgba(245,166,35,.15) 0%, rgba(245,166,35,.08) 100%);
    border: 1px solid rgba(245,166,35,.3);
    border-radius: var(--r-md);
    padding: 6px 18px;
    text-align: center;
    flex-shrink: 0;
}
.topbar-total .tot-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    color: var(--zeus-amber);
    font-weight: 700;
    letter-spacing: .5px;
    opacity: .85;
}
.topbar-total .tot-value {
    display: block;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.05;
    color: var(--zeus-amber);
    text-shadow: var(--glow-amber);
}

/* ── Action buttons ── */
.logout {
    background: var(--surface);
    border: 1px solid var(--glass-border2);
    color: var(--text-2);
    border-radius: var(--r-sm);
    padding: 6px 14px;
    font-weight: 600;
    font-size: 11px;
    flex-shrink: 0;
    margin-left: 6px;
    transition: all .2s;
    cursor: pointer;
}
.logout:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--glass-border2);
    transform: translateY(-1px);
}

/* ════════════════════════════════════════
   MAIN — scrollable area
════════════════════════════════════════ */
/* O recuo lateral tem de ser o mesmo da topbar e da barra de filtro (18px):
   com 10px aqui, tudo abaixo da linha do filtro ficava 8px à esquerda do
   título — desalinhamento visível em todas as telas. */
.main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 18px 18px;
}


/* ════════════════════════════════════════
   KPI STRIP
════════════════════════════════════════ */
.kpi-strip {
    display: grid;
    /* 7 frações para 6 cartões: o primeiro (valor total em reais) ocupa duas.
       É o único com texto longo — "R$ 2.988.693,96" não cabe na mesma largura
       de um cartão que mostra "49". */
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 8px;
    flex-shrink: 0;
}
.kpi-strip .kpi-card:first-child { grid-column: span 2; }

/* Variante de 4 cartões (Análise por Filial). Sem isto, quatro cartões caíam no
   grid de sete frações com o primeiro ocupando duas: sobravam duas colunas
   vazias à direita em tela larga, e o quarto cartão descia sozinho em 1300px. */
.kpi-strip.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.kpi-strip.cols-4 .kpi-card:first-child { grid-column: auto; }

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    padding: 11px 12px 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    min-width: 0;
    transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
    animation: fadeSlideUp .4s ease both;
    cursor: default;
}
.kpi-card:nth-child(1) { animation-delay: .05s; }
.kpi-card:nth-child(2) { animation-delay: .10s; }
.kpi-card:nth-child(3) { animation-delay: .15s; }
.kpi-card:nth-child(4) { animation-delay: .20s; }
.kpi-card:nth-child(5) { animation-delay: .25s; }
.kpi-card:nth-child(6) { animation-delay: .30s; }

.kpi-card:hover {
    transform: translateY(-2px);
    background: var(--surface-2);
    border-color: var(--glass-border2);
}
.kpi-card:hover .kpi-icon.blue   { box-shadow: 0 0 18px rgba(77,166,255,.45); }
.kpi-card:hover .kpi-icon.green  { box-shadow: 0 0 18px rgba(34,201,122,.45); }
.kpi-card:hover .kpi-icon.orange { box-shadow: 0 0 18px rgba(245,166,35,.45); }
.kpi-card:hover .kpi-icon.gear   { box-shadow: 0 0 18px rgba(107,122,153,.35); }
.kpi-card:hover .kpi-icon.purple { box-shadow: 0 0 18px rgba(157,110,245,.45); }
.kpi-card:hover .kpi-icon.red    { box-shadow: 0 0 18px rgba(255,77,106,.45); }

.kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
    color: #fff;
    transition: box-shadow .3s;
}
.kpi-icon.blue   { background: linear-gradient(135deg,#1a6fc4,#4da6ff); }
.kpi-icon.green  { background: linear-gradient(135deg,#15a05c,#22c97a); }
.kpi-icon.orange { background: linear-gradient(135deg,#c77a00,#F5A623); }
.kpi-icon.gear   { background: linear-gradient(135deg,#3a4460,#6b7a99); }
.kpi-icon.purple { background: linear-gradient(135deg,#6a3ecf,#9d6ef5); }
.kpi-icon.red    { background: linear-gradient(135deg,#cc1f3a,#ff4d6a); }

.kpi-body { min-width: 0; }
.kpi-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.2;
    margin-bottom: 3px;
    letter-spacing: .4px;
}
.kpi-value {
    font-size: clamp(13px, 1.3vw, 19px);
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    white-space: nowrap;
}
.kpi-sub {
    font-size: 9px;
    color: var(--text-3);
    margin-top: 3px;
    line-height: 1.2;
}
/* Separa valor de percentual: sem ele a linha lia "R$ 2.245.990,91 75,1%", como
   se fosse um número só. */
.kpi-sep { margin: 0 3px; opacity: .5; }

/* ════════════════════════════════════════
   MID ROW — 2 donut panels
════════════════════════════════════════ */
.mid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex-shrink: 0;
}

.donut-panel {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    padding: 11px 16px;
    display: grid;
    /* Teto na coluna do texto: com `auto` ela tomava 317px dos 558 do painel e
       espremia a rosca e a legenda no que sobrava. */
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    min-height: 0;
    transition: border-color .2s, background .2s;
}
.donut-panel:hover {
    background: var(--surface-2);
    border-color: var(--glass-border2);
}

.donut-info { min-width: 0; }
.donut-info h2 {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-2);
    letter-spacing: .5px;
}
.donut-info .sub-label {
    font-size: 9px;
    color: var(--text-3);
    margin-top: 3px;
    line-height: 1.4;
}
.donut-pct {
    font-size: clamp(28px, 3.2vw, 48px);
    font-weight: 900;
    line-height: 1;
    display: block;
    margin-top: 5px;
}
.donut-pct.green {
    color: var(--green);
    text-shadow: var(--glow-green);
}
.donut-pct.navy {
    color: var(--zeus-amber);
    text-shadow: var(--glow-amber);
}
.donut-count {
    font-size: 10px;
    color: var(--text-3);
    display: block;
    margin-top: 4px;
}
/* Rosca + legenda. A legenda é HTML (ver montarLegenda no dashboard.js): assim
   ela quebra, encolhe e muda de lado por CSS, sem depender de evento de resize
   chegar ao JavaScript. */
/* A rosca cresce um pouco com o painel e a legenda deixa de esticar: com
   `flex: 1 1 auto` ela ocupava 450px num painel largo e o valor, empurrado por
   `margin-left:auto`, ficava a 350px do nome — "Resolvidos ......... 262". */
.donut-chart-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    min-width: 0;
}
.donut-chart-wrap {
    position: relative;
    /* Cresce com a tela, mas sem tomar a largura de que a legenda precisa para
       ficar ao lado: acima de 150px ela era empurrada para baixo da rosca. */
    height: clamp(110px, 8vw, 140px);
    width: clamp(110px, 8vw, 140px);
    flex: 0 0 auto;
}
.donut-legend {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Cresce até 220px e não além: o bastante para o nome mais longo, e impede
       que o valor, empurrado para a direita por margin-left:auto, termine a
       350px do rótulo — era o que acontecia com `flex: 1 1 auto` num painel
       largo. Abaixo de 120px a legenda desce para a linha de baixo (flex-wrap
       no pai). */
    flex: 1 1 120px;
    min-width: 0;
    max-width: 220px;
}
.donut-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    color: var(--text-2);
    min-width: 0;
}
.legenda-cor {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
}
.legenda-nome {
    /* Encolhe com reticências em vez de vazar; o nome inteiro fica no title. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.legenda-valor {
    margin-left: auto;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.donut-chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* ════════════════════════════════════════
   BOTTOM ROW — table | bar+reading
════════════════════════════════════════ */
.bot-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
    gap: 8px;
    /* `start`, não `stretch`: esticar o cartão da tabela até a altura da coluna
       vizinha abria um vazio DENTRO dele — 109px na Visão Geral e 339px na
       Análise por Filial, onde a tabela tem só seis linhas. Cada cartão agora
       tem a altura do próprio conteúdo; a diferença sobra como fundo da página,
       que não parece defeito. */
    align-items: start;
}

/* Status table card */
.status-card {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

.card-head {
    background: linear-gradient(135deg, rgba(245,166,35,.15) 0%, rgba(232,76,32,.10) 100%);
    border-bottom: 1px solid var(--glass-border);
    color: var(--text);
    padding: 8px 14px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}
.card-head::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--zeus-amber), var(--uni-orange));
    border-radius: 2px;
    flex-shrink: 0;
}

.table-wrap {
    /* Teto para a tabela não empurrar a página inteira quando houver muitos
       status; passando disso, rola aqui dentro com o cabeçalho fixo. */
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
}

/* Scrollbar */
.table-wrap::-webkit-scrollbar { width: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}
th, td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
th {
    /* Opaco: o cabeçalho é sticky e as linhas rolam por baixo dele. */
    background: var(--surface-solid);
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
tbody tr:hover {
    background: rgba(245,166,35,.06);
    transition: background .15s;
}
td { color: var(--text-2); }
/* Primeira coluna (nome da filial / status) fica presa à esquerda: quando a
   tabela rola na horizontal, os números continuam identificáveis em vez de
   deslizarem para longe do nome. O texto pode quebrar em duas linhas — só ele,
   os números seguem em linha única. */
.table-wrap th:first-child,
.table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface-solid);
    white-space: normal;
    min-width: 118px;
}
/* A coluna fixa precisa de fundo opaco, mas tem de acompanhar o zebrado das
   linhas — com um tom só, ela virava uma faixa lisa ao lado de linhas listradas. */
.table-wrap tbody tr:nth-child(even) td:first-child { background: var(--surface-solid-2); }
.table-wrap tbody tr:hover td:first-child { background: #221f27; }
.table-wrap thead th:first-child { z-index: 3; }
/* O rodapé precisa do mesmo tratamento do cabeçalho. Sem z-index próprio, a
   célula "Total" empata com as demais tfoot th (z-index 2) e o desempate é a
   ordem do DOM: o total da coluna seguinte passava por cima do rótulo, com o
   gradiente laranja invadindo o nome. */
.table-wrap tfoot th:first-child { z-index: 3; }
/* Quando a tabela rola para o lado, as colunas seguintes desaparecem por baixo
   da primeira sem aviso — e um "42,7%" cortado ao meio vira "2,7%", que se lê
   como número errado. A sombra à direita avisa que há conteúdo atrás.
   As linhas de separação do cabeçalho e do rodapé vão junto, porque box-shadow
   não acumula entre regras. */
.table-wrap td:first-child {
    box-shadow: 6px 0 8px -6px rgba(0,0,0,.55);
}
.table-wrap thead th:first-child {
    box-shadow: 0 1px 0 rgba(255,255,255,.07), 6px 0 8px -6px rgba(0,0,0,.55);
}
.table-wrap tfoot th:first-child {
    box-shadow: 0 -1px 0 rgba(255,255,255,.07), 6px 0 8px -6px rgba(0,0,0,.55);
}

tfoot th {
    /* Cor sólida por baixo do gradiente: o total fica fixo no rodapé e as
       linhas passam por trás. */
    background: var(--surface-solid) linear-gradient(135deg, rgba(245,166,35,.2), rgba(232,76,32,.15));
    color: var(--zeus-amber);
    position: sticky;
    top: auto;
    bottom: 0;
    font-size: 10px;
    border-bottom: none;
    box-shadow: 0 -1px 0 rgba(255,255,255,.07);
}

/* Pílula de percentual da coluna "% Resolvido".
   O rodapé escrevia o total como texto solto enquanto as linhas usavam uma
   pílula com padding lateral: os 8px de padding deslocavam o texto das linhas e
   o total ficava desalinhado da coluna inteira. Mesma marcação para os dois, com
   largura mínima para os percentuais se alinharem entre si. */
.pct-pill {
    display: inline-block;
    min-width: 52px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    background: rgba(245,166,35,.15);
    color: var(--zeus-amber-light, #f5c518);
}
.pct-pill.is-ok {
    background: rgba(34,199,122,.15);
    color: #22c97a;
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    /* --c é a cor do status (ver as classes .s-*). Antes era `currentColor`, que
       aqui é a cor do TEXTO da célula: todo mundo brilhava do mesmo cinza,
       inclusive a bolinha vermelha e a verde. */
    box-shadow: 0 0 6px var(--c, transparent);
}

/* Right column */
.right-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bar-card {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    /* Altura vem do conteúdo: o gráfico define a sua (uma faixa por status,
       calculada no dashboard.js) e o cartão acompanha. Com `flex: 1 1 0` o
       cartão colapsava e o gráfico ficava para fora dele. */
    flex: 0 0 auto;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.bar-card .chart-body {
    flex: 0 0 auto;
    padding: 8px 12px;
    position: relative;
}
.bar-card .chart-body canvas { width: 100% !important; height: 100% !important; }

/* Reading card */
.reading-card {
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(245,166,35,.08) 0%, rgba(232,76,32,.06) 100%);
    border: 1px solid rgba(245,166,35,.2);
    border-radius: var(--r-md);
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.reading-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--zeus-amber), var(--uni-orange));
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(245,166,35,.4);
}
.reading-body h3 {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--zeus-amber);
    margin-bottom: 4px;
    letter-spacing: .4px;
}
.reading-body p {
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.55;
}
.reading-body strong { color: var(--zeus-amber2); font-weight: 700; }

/* ════════════════════════════════════════
   PRIORITY BAR
════════════════════════════════════════ */
.priority-bar {
    flex-shrink: 0;
    background: rgba(8,9,16,0.85);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    position: relative;
    overflow: hidden;
}
.priority-bar::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--zeus-amber) 0%, var(--uni-orange) 40%, transparent 100%);
}

.priority-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 120px;
}
.priority-label .label-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, rgba(245,166,35,.2), rgba(232,76,32,.15));
    border: 1px solid rgba(245,166,35,.3);
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 16px;
}
.priority-label .label-text {
    color: var(--text);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: .4px;
}

.priority-divider {
    width: 1px;
    height: 36px;
    background: var(--glass-border);
    flex-shrink: 0;
}

.priority-items {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
    min-width: 0;
}
.prio-item {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: background .2s, border-color .2s;
}
.prio-item:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
}
.prio-num {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    margin-top: 1px;
}
.prio-num.n1 { background: linear-gradient(135deg,#c77a00,#F5A623); box-shadow: 0 0 10px rgba(245,166,35,.4); }
.prio-num.n2 { background: linear-gradient(135deg,#6a3ecf,#9d6ef5); box-shadow: 0 0 10px rgba(157,110,245,.4); }
.prio-num.n3 { background: linear-gradient(135deg,#1a6fc4,#4da6ff); box-shadow: 0 0 10px rgba(77,166,255,.4); }
.prio-num.n4 { background: linear-gradient(135deg,#15a05c,#22c97a); box-shadow: 0 0 10px rgba(34,201,122,.4); }

.prio-body { min-width: 0; }
.prio-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.prio-detail {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
}
.prio-note {
    font-size: 9px;
    color: var(--text-3);
    margin-top: 2px;
    font-style: italic;
}

/* ════════════════════════════════════════
   STATUS COLORS
════════════════════════════════════════ */
/* Cada classe declara a cor em --c e a usa como fundo: assim a bolinha pode
   reaproveitar o mesmo valor no brilho, e a pílula, no fundo. */
.s-green  { --c: var(--green);  background: var(--c); }
.s-red    { --c: var(--red);    background: var(--c); }
.s-orange { --c: var(--orange); background: var(--c); }
.s-yellow { --c: var(--yellow); background: var(--c); }
.s-purple { --c: var(--purple); background: var(--c); }
.s-blue   { --c: var(--blue);   background: var(--c); }
.s-teal   { --c: var(--teal);   background: var(--c); }
.s-gray   { --c: var(--gray);   background: var(--c); }

.pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}
.pill.s-yellow { color: #1a1a1a; }

/* ════════════════════════════════════════
   LOGIN PAGE
════════════════════════════════════════ */
.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse 70% 60% at 20% 10%, rgba(245,166,35,.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 90%, rgba(232,76,32,.10) 0%, transparent 55%),
        #0a0b10;
    overflow: auto;
    font-family: 'Inter', Arial, sans-serif;
    position: relative;
}

/* Animated grid lines */
.login-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(245,166,35,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,166,35,.04) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 400px;
    max-width: calc(100vw - 28px);
    background: rgba(20,22,34,0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 36px;
    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        0 0 0 1px rgba(245,166,35,.08),
        inset 0 1px 0 rgba(255,255,255,.07);
}

/* Top accent on login card */
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 20px; right: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--zeus-amber), var(--uni-orange), transparent);
    border-radius: 0 0 2px 2px;
}

.login-card h1 {
    text-align: center;
    text-transform: uppercase;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 5px;
    letter-spacing: 1px;
}
.login-card > p {
    text-align: center;
    color: var(--muted);
    margin-bottom: 28px;
    font-size: 12px;
    font-weight: 500;
}

label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
input, select, textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-sm);
    padding: 10px 13px;
    font-size: 13px;
    background: rgba(255,255,255,.06);
    color: var(--text);
    outline: none;
    font-family: 'Inter', Arial, sans-serif;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus {
    border-color: rgba(245,166,35,.5);
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 3px rgba(245,166,35,.12);
}

/* A lista aberta do select é desenhada pelo sistema operacional, fora do
   controle do CSS do campo. Sem cor explícita aqui, o texto herda o branco
   do input e cai num fundo branco — invisível. */
select option,
select optgroup {
    background-color: #171923;
    color: #e8eaf2;
}
select option:checked,
select option:hover {
    background-color: #26293a;
}

/* O ícone do calendário vem preto por padrão e some no fundo escuro. */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .65;
    cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

button {
    border: 0;
    border-radius: var(--r-sm);
    padding: 11px 14px;
    background: linear-gradient(135deg, var(--zeus-amber) 0%, var(--uni-orange) 100%);
    color: #0a0a0a;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Inter', Arial, sans-serif;
    letter-spacing: .3px;
    transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(245,166,35,.35);
}
button:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(245,166,35,.45);
}
button:active { transform: translateY(0); }

.login-card input { margin-bottom: 14px; }
.login-card button { width: 100%; margin-top: 8px; }

.alert {
    background: rgba(255,77,106,.12);
    border: 1px solid rgba(255,77,106,.3);
    color: #ff9aaa;
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 500;
}

/* Dashboard Filter Bar */
.dashboard-filter-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--glass-border);
    padding: 10px 18px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-shrink: 0;
}
.dashboard-filter-bar .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dashboard-filter-bar .filter-group label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
/* Campos da barra de filtro: mesmo visual para select, texto e data.
   Largura confortável no desktop, mas encolhem em vez de estourar a linha. */
.dashboard-filter-bar .filter-group select,
.dashboard-filter-bar .filter-group input {
    border: 1px solid var(--glass-border2);
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 12px;
    background: var(--surface-2);
    color: var(--text);
    outline: none;
    width: 180px;
    max-width: 100%;
    font-family: 'Inter', Arial, sans-serif;
    transition: border-color .15s, box-shadow .15s;
}
.dashboard-filter-bar .filter-group input[type="date"] {
    width: 150px;
    padding: 5px 12px;
}
.dashboard-filter-bar .filter-group select:focus,
.dashboard-filter-bar .filter-group input:focus {
    border-color: rgba(245,166,35,.5);
    box-shadow: 0 0 0 3px rgba(245,166,35,.12);
}
.dashboard-filter-bar .filter-actions {
    display: flex;
    gap: 8px;
}
.dashboard-filter-bar .btn-filter {
    background: linear-gradient(135deg, var(--zeus-amber), var(--uni-orange));
    color: #0a0a0a;
    border: none;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .18s, transform .15s;
    box-shadow: 0 4px 12px rgba(245,166,35,.2);
}
.dashboard-filter-bar .btn-filter:hover {
    opacity: .9;
    transform: translateY(-1px);
}
.dashboard-filter-bar .btn-clear {
    background: rgba(255,255,255,0.06);
    color: var(--text-2);
    border: 1px solid var(--glass-border2);
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background .18s;
}
.dashboard-filter-bar .btn-clear:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text);
}

/* ════════════════════════════════════════
   LOGIN V2 — PREMIUM SPLIT LAYOUT
════════════════════════════════════════ */
.login-body {
    min-height: 100vh;
    padding: 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #08090d;
}
.login-body::before {
    opacity: .55;
    background-size: 64px 64px;
    mask-image: linear-gradient(to right, #000, transparent 85%);
}
.login-orb {
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}
.login-orb-one {
    width: 520px; height: 520px; left: -220px; top: -260px;
    background: radial-gradient(circle, rgba(245,166,35,.18), transparent 68%);
}
.login-orb-two {
    width: 560px; height: 560px; right: -260px; bottom: -300px;
    background: radial-gradient(circle, rgba(232,76,32,.13), transparent 68%);
}
.login-shell {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    min-height: min(690px, calc(100vh - 56px));
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 28px;
    background: rgba(15,17,25,.88);
    box-shadow: 0 40px 120px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05);
}
.login-showcase {
    position: relative;
    padding: 42px 50px 38px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(245,166,35,.08), transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(232,76,32,.15), transparent 38%),
        #0c0e15;
    border-right: 1px solid rgba(255,255,255,.08);
}
.login-showcase::before {
    content: '';
    position: absolute;
    width: 430px; height: 430px;
    right: -160px; top: 130px;
    border: 1px solid rgba(245,166,35,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(245,166,35,.025), 0 0 0 140px rgba(245,166,35,.018);
}
.login-showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 47%, rgba(245,166,35,.035) 47.2%, transparent 47.5%);
    pointer-events: none;
}
.showcase-logos {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}
.showcase-logos img:first-child { width: 112px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(245,166,35,.32)); }
.showcase-logos img:last-child { width: 88px; height: 38px; object-fit: contain; }
.showcase-logos > span { width: 1px; height: 34px; background: rgba(255,255,255,.16); }
.showcase-copy {
    position: relative;
    z-index: 1;
    max-width: 500px;
    margin: auto 0 30px;
}
.showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--zeus-amber);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}
.showcase-kicker i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--zeus-amber);
    box-shadow: 0 0 12px rgba(245,166,35,.85);
}
.showcase-copy h1 {
    max-width: 480px;
    color: #f7f8fb;
    font-size: clamp(34px, 3.3vw, 50px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -2px;
}
.showcase-copy p {
    max-width: 470px;
    margin-top: 22px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.75;
}
.showcase-features {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.showcase-features > div {
    min-width: 0;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}
.feature-icon {
    width: 36px; height: 36px; flex: 0 0 36px;
    display: grid; place-items: center;
    color: var(--zeus-amber);
    border-radius: 10px;
    background: rgba(245,166,35,.1);
}
.feature-icon svg, .showcase-features svg, .login-form svg, .alert svg, .login-security svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.showcase-features > div > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.showcase-features strong { color: var(--text); font-size: 10px; white-space: nowrap; }
.showcase-features small { color: var(--text-3); font-size: 8px; white-space: nowrap; }
.showcase-bottom {
    position: relative;
    z-index: 1;
    margin-top: 25px;
    color: var(--text-3);
    font-size: 9px;
    letter-spacing: .4px;
}
.showcase-bottom span { margin: 0 7px; color: var(--zeus-amber); }
.login-panel {
    padding: 50px;
    display: grid;
    place-items: center;
    background: rgba(17,19,28,.82);
}
.login-panel .login-card {
    width: 100%;
    max-width: 390px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
.login-panel .login-card::before { display: none; }
.login-mobile-logos { display: none; }
.login-heading { margin-bottom: 30px; }
.login-badge {
    display: inline-flex;
    margin-bottom: 15px;
    padding: 6px 10px;
    color: var(--zeus-amber);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    border: 1px solid rgba(245,166,35,.18);
    border-radius: 999px;
    background: rgba(245,166,35,.07);
}
.login-heading h2 {
    color: var(--text);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.8px;
}
.login-heading p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}
.login-panel .alert {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
}
.login-panel .alert svg { flex: 0 0 18px; }
.login-form { display: flex; flex-direction: column; gap: 18px; }
.login-field label {
    margin-bottom: 8px;
    color: var(--text-2);
    font-size: 10px;
}
.input-shell {
    position: relative;
    display: flex;
    align-items: center;
}
.input-shell > svg {
    position: absolute;
    z-index: 1;
    left: 14px;
    color: var(--text-3);
    pointer-events: none;
}
.login-panel .input-shell input {
    height: 50px;
    margin: 0;
    padding: 0 48px 0 44px;
    color: var(--text);
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    background: rgba(255,255,255,.045);
}
.login-panel .input-shell input:focus {
    border-color: rgba(245,166,35,.48);
    background: rgba(255,255,255,.065);
    box-shadow: 0 0 0 3px rgba(245,166,35,.09);
}
.input-shell:focus-within > svg { color: var(--zeus-amber); }
.password-toggle {
    position: absolute;
    right: 7px;
    width: 38px !important; height: 38px;
    margin: 0 !important; padding: 0;
    display: grid; place-items: center;
    color: var(--text-3);
    background: transparent;
    box-shadow: none;
}
.password-toggle:hover { color: var(--text); background: rgba(255,255,255,.05); box-shadow: none; transform: none; }
.password-toggle .eye-closed { display: none; }
.password-toggle.showing .eye-open { display: none; }
.password-toggle.showing .eye-closed { display: block; }
.login-submit {
    width: 100%;
    height: 51px;
    margin-top: 5px !important;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border-radius: 11px;
    box-shadow: 0 12px 28px rgba(245,166,35,.22);
}
.login-submit svg { width: 19px; height: 19px; transition: transform .18s; }
.login-submit:hover svg { transform: translateX(3px); }
.login-security {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--text-3);
    font-size: 9px;
}
.login-security svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
    .login-body { padding: 16px; overflow: auto; }
    .login-shell { min-height: calc(100vh - 32px); grid-template-columns: 1fr; }
    .login-showcase { display: none; }
    .login-panel { padding: 40px 28px; }
    .login-mobile-logos {
        margin-bottom: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 13px;
    }
    .login-mobile-logos img:first-child { width: 100px; height: 45px; object-fit: contain; }
    .login-mobile-logos img:last-child { width: 76px; height: 34px; object-fit: contain; }
    .login-mobile-logos span { width: 1px; height: 30px; background: rgba(255,255,255,.14); }
}

@media (max-width: 480px) {
    .login-body { padding: 0; }
    .login-shell { min-height: 100vh; border: 0; border-radius: 0; }
    .login-panel { padding: 32px 22px; }
    .login-mobile-logos { margin-bottom: 36px; }
    .login-heading h2 { font-size: 25px; }
}

/* ════════════════════════════════════════
   RESPONSIVO — precisa ficar no FIM do arquivo
   Media query não aumenta especificidade: se vier antes da regra que quer
   sobrescrever, perde por ordem. Três degraus: notebook (1300), tablet (900)
   e celular (600). A página pode rolar na vertical, nunca na horizontal.
════════════════════════════════════════ */
@media (max-width: 1300px) {
    /* Com menos colunas cada cartão já fica largo: o valor total volta a
       ocupar uma só, senão sobra espaço vazio nele. */
    .kpi-strip { grid-template-columns: repeat(3,1fr); }
    .kpi-strip .kpi-card:first-child { grid-column: auto; }
    /* Quatro cartões em três colunas deixavam o último sozinho na linha de
       baixo; em duas, fecham 2×2. */
    .kpi-strip.cols-4 { grid-template-columns: repeat(2,1fr); }
    .mid-row   { grid-template-columns: 1fr; }
    .bot-row   { grid-template-columns: 1fr; }
    .priority-items { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
    /* A topbar deixa de ser uma linha só e passa a quebrar. O recuo à esquerda
       abre espaço para o botão de menu, que é fixo naquele canto. */
    .topbar {
        height: auto;
        flex-wrap: wrap;
        padding: 12px 14px 12px 62px;
        gap: 10px;
        row-gap: 12px;
    }
    .topbar-spacer { flex-basis: 100%; height: 0; }
    .topbar-title h1 { font-size: 14px; }

    .kpi-strip { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .priority-items { grid-template-columns: 1fr; }

    /* Rosca embaixo do texto; a legenda continua ao lado da rosca, mas com a
       largura toda do painel para trabalhar. */
    .donut-panel { grid-template-columns: 1fr; gap: 10px; }

    .dashboard-filter-bar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .dashboard-filter-bar .filter-group { flex: 1 1 180px; }
    .dashboard-filter-bar .filter-group select,
    .dashboard-filter-bar .filter-group input,
    .dashboard-filter-bar .filter-group input[type="date"] { width: 100%; }
    .dashboard-filter-bar .filter-actions { flex: 1 1 100%; }

    /* Tabela larga rola dentro da própria caixa, não empurra a página. */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 600px) {
    .kpi-strip { grid-template-columns: 1fr; }

    .topbar { padding-left: 58px; }
    .topbar-total, .topbar-extraction { flex: 1 1 100%; justify-content: flex-start; }

    .main { padding: 12px; }
    .status-card, .bar-card, .kpi-card { padding: 14px; }

    /* Números grandes encolhem para não vazar do cartão. */
    .kpi-value { font-size: 22px; }
    .tot-value { font-size: 16px; }
}

/* Nenhuma tela deve rolar para o lado. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }

/* ════════════════════════════════════════
   GESTÃO DE COLETAS (coletas.php)

   Primeira tela do painel que escreve no banco — e a primeira que precisa de
   interruptor, aviso de sucesso e formulário fora do login. Tudo aqui é
   acréscimo: nenhuma regra existente foi alterada.
════════════════════════════════════════ */

/* O .alert nasceu só na variante vermelha (é o erro do login). Verde para
   quando a operação deu certo — num painel escuro, cor é o que se lê antes
   do texto. */
.alert { display: flex; align-items: center; gap: 8px; }
.alert > svg {
    width: 16px; height: 16px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.alert-ok {
    background: rgba(34,201,122,.12);
    border-color: rgba(34,201,122,.3);
    color: #7fe0ac;
}

/* Explicação de como a tela funciona: precisa ser lida uma vez, não gritar. */
.info-note {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--zeus-amber);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    margin-bottom: 14px;
}
.info-note > svg {
    width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
    color: var(--zeus-amber);
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.info-note p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-2); }
.info-note strong { color: var(--text); font-weight: 600; }

.card-head .head-note {
    margin-left: 10px;
    font-size: 11px; font-weight: 500;
    color: var(--yellow);
}

/* ── Tabela ────────────────────────────── */
.tabela-coletas td { vertical-align: top; }
.tabela-coletas .col-filial strong { color: var(--text); font-weight: 700; }
.tabela-coletas .col-filial small,
.tabela-coletas .senha-meta {
    display: block; margin-top: 3px;
    font-size: 10.5px; color: var(--text-3); line-height: 1.4;
}
.tabela-coletas .vazio { color: var(--text-3); }

/* ── Interruptor ───────────────────────── */
.form-toggle { display: flex; align-items: center; gap: 8px; }
.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.14);
    border-radius: 21px;
    transition: background .18s ease;
    pointer-events: none;
}
.switch .slider::before {
    content: ''; position: absolute;
    width: 15px; height: 15px; left: 3px; top: 3px;
    background: var(--text-2);
    border-radius: 50%;
    transition: transform .18s ease, background .18s ease;
}
.switch input:checked + .slider { background: rgba(245,166,35,.55); }
.switch input:checked + .slider::before { transform: translateX(17px); background: var(--zeus-amber); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(245,166,35,.22); }
/* Desabilitado é o estado de quem está com a senha recusada: religar dali só
   gastaria tentativa no portal. O title da label explica o porquê. */
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .slider { opacity: .4; }
.switch-texto { font-size: 11px; color: var(--text-2); }
.btn-mini { padding: 3px 9px !important; font-size: 10.5px !important; }

/* ── Selos ─────────────────────────────── */
.badge-senha {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10.5px; font-weight: 600;
    white-space: nowrap;
}
.badge-senha-validada { background: rgba(34,201,122,.14); color: var(--green); }
.badge-senha-pendente { background: rgba(245,197,24,.14); color: var(--yellow); }
.badge-senha-recusada { background: rgba(255,77,106,.14); color: var(--red); }
.badge-senha-ausente  { background: rgba(107,122,153,.16); color: var(--gray); }

.tentativa { font-size: 11.5px; font-weight: 600; }
.tentativa-ok       { color: var(--green); }
.tentativa-falha    { color: var(--red); }
.tentativa-ignorada { color: var(--text-3); }

/* ── Gaveta da troca de senha ──────────── */
.senha-drawer > summary {
    cursor: pointer;
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid var(--glass-border2);
    border-radius: var(--r-sm);
    font-size: 11px; font-weight: 600;
    color: var(--text-2);
    list-style: none;
    user-select: none;
    transition: border-color .15s ease, color .15s ease;
}
.senha-drawer > summary::-webkit-details-marker { display: none; }
.senha-drawer > summary:hover { color: var(--text); border-color: var(--zeus-amber); }
.senha-drawer[open] > summary {
    color: var(--zeus-amber);
    border-color: rgba(245,166,35,.45);
    margin-bottom: 10px;
}

/* ── Formulário fora do login ──────────── */
/* As medidas do campo só existiam sob `.login-panel .input-shell input`, então
   qualquer campo de senha fora do login nascia sem estilo nenhum. Mesmos
   valores, num escopo que a tela nova alcança. */
.form-shell { min-width: 232px; max-width: 300px; }
.form-shell label {
    display: block;
    margin: 0 0 5px;
    font-size: 10.5px; font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase; letter-spacing: .4px;
}
.form-shell .input-shell { margin-bottom: 11px; }
.form-shell .input-shell input {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 44px 0 40px;
    color: var(--text);
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: rgba(255,255,255,.045);
}
.form-shell .input-shell input:focus {
    border-color: rgba(245,166,35,.48);
    background: rgba(255,255,255,.065);
    box-shadow: 0 0 0 3px rgba(245,166,35,.09);
}
.form-shell .input-shell > svg { width: 15px; height: 15px; }

.check-linha {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 12px;
    font-size: 11px; font-weight: 500;
    color: var(--text-2);
    text-transform: none; letter-spacing: 0;
    cursor: pointer;
}
.check-linha input { width: 14px; height: 14px; margin: 0; accent-color: var(--zeus-amber); cursor: pointer; }

.form-aviso {
    margin: 9px 0 0;
    font-size: 10.5px; line-height: 1.5;
    color: var(--text-3);
}

@media (max-width: 900px) {
    .form-shell { min-width: 0; max-width: none; }
}