/* ============================================================
   MOBILE.CSS — Regras para telas pequenas (dashboard + drawer)
   As regras do site público ficam no final do site.css.
   ============================================================ */

/* ---------- DRAWER (painel lateral do dashboard) ---------- */
@media (max-width: 1280px) { .drawer-panel { width: 400px; } }
@media (max-width: 1024px) { .drawer-panel { width: 360px; } }
@media (max-width: 768px) { .drawer-panel { width: calc(100% - 32px); } }
@media (max-width: 480px) {
    .drawer-panel {
        width: 100%;
        top: 0; right: 0; bottom: 0;
        border-radius: 0;
        height: 100vh;
        transform: translateX(100%);
    }
    .drawer-overlay.open .drawer-panel { transform: translateX(0); }
}

/* ---------- SIDEBAR do dashboard ---------- */
/* 1023px, não 1024px: toggleSidebarCollapse() em tabelasfuncoes.js testa
   "window.innerWidth < 1024" pra decidir se usa a classe "open" (mobile,
   aqui) ou "collapsed" (desktop, dashboard.css). Com max-width:1024px
   (inclusive) e o JS exclusive, numa tela de exatamente 1024px o JS toma o
   ramo desktop (mexe em "collapsed") mas esse CSS ainda escondia a sidebar
   esperando "open" — hambúrguer virava morto nesse 1px exato. */
@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
        /* Sem transição de propósito — pedido explícito do usuário pra
           logo/hambúrguer do cabeçalho da sidebar não "andarem" quando a
           gaveta abre. Mesmo raciocínio do .wcr-sidebar-sobre-splash em
           global.css: abre/fecha na hora, sem deslizar. */
        transition: none;
        width: 280px;
    }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    /* A gaveta fica fora da tela (translateX(-100%)), mas a sombra dela
       (box-shadow 40px) vazava pra dentro e escurecia a borda esquerda. */
    .sidebar:not(.open) { box-shadow: none; }
}

/* ---------- TOPO DAS SEÇÕES (título + filtros/botões) no celular ----------
   A linha "título à esquerda, filtros à direita" não quebrava: os selects e o
   botão (w-32/w-36 fixos) estouravam a tela e espremiam o título em uma
   coluna estreita (Analytics, Calendário de OS). Agora quebra em duas linhas
   e os filtros se dividem a largura disponível. */
@media (max-width: 640px) {
    .content-section > .flex.items-center.justify-between:first-child { flex-wrap: wrap; gap: 12px; }
    .content-section > .flex.items-center.justify-between:first-child > .flex.items-center.gap-2 { flex-wrap: wrap; width: 100%; }
    .content-section > .flex.items-center.justify-between:first-child > .flex.items-center.gap-2 > select { width: auto; flex: 1 1 110px; min-width: 0; }
    #section-analytics .grid.grid-cols-3 { grid-template-columns: 1fr; }
}

/* ---------- USINAS (painel do dashboard) ---------- */
@media (max-width: 900px) {
    .usina-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usina-bottom-grid { grid-template-columns: 1fr; }
}

/* ---------- INFO-BADGE ---------- */
@media (max-width: 640px) {
    .info-badge { padding: 4px 10px; font-size: 0.6rem; }
    .info-badge i[data-lucide] { width: 14px; height: 14px; }
    .info-badge .pulse-dot { width: 5px; height: 5px; }
}

/* ---------- BUSCA GLOBAL (dashboard) ---------- */
@media (max-width: 640px) {
    #globalSearch { font-size: 0.8rem; padding: 8px 30px 8px 36px; }
    .search-shortcut { display: none; }
    #searchResults { max-height: 60vh; }
}

/* ---------- CABEÇALHO DO PAINEL/PORTAL: some espremendo o hambúrguer ----------
   .wcr-header-slim tem 3 grupos flex (hambúrguer+logo+título / busca / ícones).
   Em telas estreitas o conteúdo total não cabe: como o grupo da esquerda tinha
   min-w-0, o flexbox zerava a largura DELE pra abrir espaço pros outros, e o
   botão/logo (que continuavam sendo desenhados no tamanho normal, só que fora
   da própria caixa) ficavam por baixo da barra de busca — clique no hambúrguer
   não abria o menu porque o clique caía na busca por cima. Corrigido trocando
   min-w-0 por shrink-0 nesse grupo (ver dashboard.html/client-dashboard.html),
   e aqui tiramos a busca e o nome do perfil do caminho pra sobrar espaço de
   verdade pros ícones continuarem clicáveis. */
@media (max-width: 768px) {
    #dashHeaderSearchWrap { display: none; }
}
@media (max-width: 640px) {
    .wcr-header-perfil-nome { display: none; }
}
/* O grupo da esquerda (hambúrguer + logo + título) era shrink-0, então o
   texto da usina/título (que não quebra) empurrava o grupo de ícones da
   direita pra FORA da tela — no portal do cliente ele ficava inteiro
   invisível (462–849px numa tela de 390px) e no painel da equipe o último
   ícone e o perfil ficavam cortados. Agora o grupo pode encolher (o título
   ganha "…"), o hambúrguer nunca encolhe e o grupo da direita nunca é
   espremido. */
@media (max-width: 768px) {
    .wcr-header-slim > :first-child { flex: 1 1 0; min-width: 0; }
    .wcr-header-slim #sidebarToggle { flex-shrink: 0; }
    .wcr-header-slim > :last-child { flex-shrink: 0; }
}
/* Celular: ícones um pouco menores, logo do cabeçalho some (a do menu lateral
   basta), o seletor de tema some do cabeçalho (o mesmo controle existe em
   Configurações, ícone de engrenagem ao lado) e o selo "Operando/Parada" do
   portal vira uma bolinha colorida — sem isso nada disso cabe em 390px. */
@media (max-width: 480px) {
    .wcr-header-slim { padding: 0 10px; gap: 8px; }
    .wcr-header-slim > :first-child { gap: 8px; }
    .wcr-header-slim .wcr-logo { display: none; }
    .wcr-header-slim .wcr-rotor-topbar-icone { width: 36px; height: 36px; }
    .wcr-header-slim .wcr-rotor-topbar-icone-wrap:has(.wcr-tema-dropdown) { display: none; }
    .wcr-header-slim .wcr-rotor-topbar-perfil { padding: 4px; margin-left: 0; }
    .wcr-header-slim .wcr-rotor-topbar-perfil > :last-child { display: none; }
    .wcr-header-slim > :last-child { gap: 0; }
    .wcr-header-slim #clientStatus {
        font-size: 0; padding: 0; width: 12px; height: 12px;
        margin-right: 4px; background: currentColor; border: none; flex-shrink: 0;
    }
}

/* ---------- TABELAS: rolagem horizontal ---------- */
@media (max-width: 640px) {
    .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { font-size: 0.7rem; }
    table th, table td { padding: 6px 8px; white-space: nowrap; }
}

/* .tabela-simples (página Para Clientes, páginas de usina) não fica dentro de
   um .overflow-x-auto — é texto corrido em parágrafo, não dado tabular curto
   — então a regra genérica acima (white-space:nowrap sem scroll) estourava a
   página inteira pro lado no celular. Aqui força as colunas a respeitarem a
   largura do card e o texto a quebrar linha normalmente, em vez de rolar. */
@media (max-width: 640px) {
    .tabela-simples { table-layout: fixed; font-size: 12.5px; }
    .tabela-simples th, .tabela-simples td { white-space: normal; padding: 10px 8px; }
}

/* ---------- CARDS DA LANDING (views antigas) ---------- */
@media (max-width: 640px) {
    .grid.md\:grid-cols-3 { grid-template-columns: 1fr; }
    .premium-card { padding: 16px; min-height: auto; }
    .premium-card h3 { font-size: 1.1rem; }
    .premium-card p { font-size: 0.85rem; }
}

/* ---------- ÁREA DE TOQUE ---------- */
@media (max-width: 640px) {
    button:not(.galeria-dot),
    .submenu-item,
    .usina-tab-btn { min-height: 44px; min-width: 44px; }
    .login-btn { padding: 8px 14px; font-size: 0.85rem; }
}

/* ---------- DRAWER compacto ---------- */
@media (max-width: 480px) {
    .drawer-panel .p-5 { padding: 16px; }
    .drawer-panel h2 { font-size: 1.2rem; }
    .drawer-panel .grid.grid-cols-2 { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- TABS DE USINAS (dashboard) ---------- */
@media (max-width: 640px) {
    #usinaTabButtons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .usina-tab-btn { font-size: 0.65rem; padding: 8px 4px; min-height: 40px; }
    .usina-panel-card { padding: 16px; }
    .usina-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .usina-metric-card { padding: 10px; }
    .usina-metric-card strong { font-size: 0.85rem; }
}

/* ---------- MODAIS ---------- */
@media (max-width: 640px) {
    .modal-box { max-width: 95%; }
    .modal-box .flex.gap-3 { flex-direction: column; }
    .modal-box .flex.gap-3 button { width: 100%; }
}

/* ---------- BOTÕES DE FILTRO ---------- */
@media (max-width: 640px) {
    .tab-btn { padding: 6px 12px; font-size: 0.65rem; }
    .flex-wrap.gap-2 { gap: 4px; }
}

/* ---------- SCROLL DO CONTEÚDO ---------- */
@media (max-width: 768px) {
    .main-content {
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .content-section {
        overflow-y: auto;
        padding-bottom: 80px;
    }
}