/* ============================================================================
   TABLET — 768px a 1199.98px (iPad em pé e deitado, notebook pequeno)

   POR QUE UMA FOLHA PRÓPRIA. Nesta faixa o sistema caía no pior dos dois mundos:
   a barra lateral fixa de 280px deixava ~530px de conteúdo no iPad em pé, e cada
   fatura virava um cartão de 310px de altura; deitado, a tabela de computador
   voltava com 10 colunas em ~900px — 330px de rolagem horizontal nas Unidades
   Consumidoras, nomes quebrando em quatro linhas e Status/Ações fora da tela.
   Medido nas telas reais, em 768, 820, 1024 e 1180px.

   AS DUAS DECISÕES:
   1. A barra lateral vira TRILHO de navegação (ícone + rótulo curto): devolve
      ~190px ao conteúdo sem esconder a navegação atrás de um botão.
   2. As listagens viram GRADE DE CARTÕES — o mesmo cartão do celular, que já é
      desenhado e conferido para ~320–360px, posto lado a lado: dois no iPad em
      pé, três deitado. Uma tabela de 10 colunas não cabe em 900px sem esconder
      dado; o cartão mostra tudo e lê em menos altura que a linha da tabela
      espremida (~118px por linha, contra três cartões por fileira).

   O modo cartão em si (.table-app no app-shell.css, .table-responsive-stack no
   site.css) passou a valer até 1199.98px. Aqui fica só o que é de tablet: o
   trilho e a grade.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199.98px) {

    /* ── 1. Trilho de navegação ─────────────────────────────────────────────── */

    /* A largura da barra é a variável que o site.css já usa para posição e
       margem do conteúdo — trocá-la aqui move tudo junto, inclusive o recolher
       pelo botão de menu (que continua escondendo a barra inteira). */
    /* 6rem: a menor largura em que "Consumidoras" e "Configurações" cabem sem corte
       no rótulo de duas linhas. Com 5.5rem os dois saíam truncados. */
    :root {
        --sidebar-width: 6rem;
    }

    /* O nome do app sai da vista, o raio fica. font-size 0 e não display:none:
       o texto continua no documento para quem usa leitor de tela. */
    #sidebar-wrapper .sidebar-heading {
        justify-content: center !important;
        padding: 0;
        font-size: 0;
    }

    #sidebar-wrapper .sidebar-heading i {
        margin: 0 !important;
        font-size: 1.5rem;
    }

    /* Título de seção vira um fio separador. Mesmo motivo do font-size 0: o
       nome da seção segue legível para o leitor de tela. */
    #sidebar-wrapper .sidebar-section {
        height: 1px;
        margin: 0.5rem 1rem !important;
        padding: 0 !important;
        overflow: hidden;
        font-size: 0 !important;
        background: var(--solar-border-light);
    }

    #sidebar-wrapper .list-group {
        padding: 0.5rem 0;
    }

    /* Ícone em cima, rótulo embaixo — o rótulo não sai: só ícone obriga a
       adivinhar, e no toque não existe passar o mouse para ver o nome. */
    #sidebar-wrapper .list-group-item {
        flex-direction: column;
        justify-content: center;
        gap: 0.3rem;
        min-height: 3.5rem;
        margin: 0.125rem 0.25rem;
        padding: 0.55rem 0.25rem;
        font-size: 0.64rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        hyphens: manual;
    }

    #sidebar-wrapper .list-group-item i {
        width: auto;
        margin: 0;
        font-size: 1.15rem;
    }

    /* O degradê horizontal do item ativo foi desenhado para uma barra larga;
       no trilho estreito ele vira uma mancha. Fundo chapado, mesma cor. */
    #sidebar-wrapper .list-group-item.active {
        background: rgba(245, 158, 11, 0.16) !important;
    }

    /* Suporte (só para quem não é Admin): botão de ícone. O texto sai da vista
       e continua sendo o nome do link para o leitor de tela. */
    #sidebar-wrapper .sidebar-footer {
        padding: 0.75rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom));
    }

    #sidebar-wrapper .sidebar-footer .btn-support-whatsapp {
        justify-content: center;
        margin: 0;
        padding: 0.7rem 0;
    }

    #sidebar-wrapper .sidebar-footer .btn-support-whatsapp i {
        margin: 0 !important;
    }

    #sidebar-wrapper .sidebar-footer .btn-support-whatsapp > div {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* ── 2. Margens da página ───────────────────────────────────────────────── */

    /* Toda tela tem um .container-fluid dentro do .app-content do layout, que
       também é .container-fluid — e os dois somavam 24px de cada lado. No iPad
       mini em pé isso tirava 48px que faltavam para os cartões irem lado a lado.
       O de fora fica com a margem; o de dentro deixa de somar. !important porque
       o bloco de tablet do site.css declara o padding assim. */
    .app-content .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Cabeçalho da página: título e ações dividiam uma linha só, as ações
       encolhiam e cada botão quebrava em três ("Upload / PDF" sob o ícone) — 89px
       de altura. Agora o texto do botão não quebra, e quando título e ações não
       cabem lado a lado as ações descem para a linha de baixo. Cobre os dois
       jeitos que as telas montam o cabeçalho (o próprio header é o flex, ou um
       .d-flex dentro dele). */
    .premium-page-header.d-flex,
    .premium-page-header > .d-flex,
    .premium-page-header .page-actions {
        flex-wrap: wrap;
    }

    .premium-page-header .page-actions .btn {
        white-space: nowrap;
    }

    /* Filtros: seis campos de col-md-2 numa linha davam ~95px a cada um — "Todo",
       "Toda" e o número do cliente cortados. Três por linha em pé, quatro deitado
       (abaixo). Só os col-md-2 do painel de filtros: campo que a tela já fez mais
       largo continua como está. */
    .card-filter .row > .col-md-2 {
        flex: 0 0 auto;
        width: 33.3333%;
    }

    /* ── 3. Listagens em grade de cartões ───────────────────────────────────── */

    /* A tabela deixa de ser caixa de tabela para o corpo poder ser grade. As
       linhas continuam <tr> e as células <td> — ver o aviso no app-shell.css
       sobre o que quebra em silêncio se virarem <div>. Os seletores daqui são de
       filho direto (> tbody > tr): a grade é da LISTA, e uma tabela aninhada numa
       linha de detalhe não pode virar grade junto. */
    .table-app,
    .table-responsive-stack {
        display: block;
    }

    .table-app > tbody,
    .table-responsive-stack > tbody {
        display: grid;
        /* 18rem: o cartão de celular é conferido até 288px (iPhone SE), e com isso
           cabem dois no iPad mini em pé (768px) e três no iPad deitado (1180px).
           min(100%, …) evita transbordar numa coluna estreita (modal, painel). */
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
        gap: 0.875rem;
    }

    /* O painel que SÓ embrulha a lista perde a moldura: em grade, cartões dentro
       de um cartão viram moldura dupla e roubam ~50px de largura em espaçamento.
       Os cartões passam a ficar direto sobre o fundo da página. Painel com
       cabeçalho (as "Faturas recentes" do Dashboard) é uma seção com título e
       fica como está — sem a moldura, o cabeçalho virava uma faixa solta.
       !important porque o .card-premium declara a borda assim, e o :hover dele
       traria a sombra de volta ao passar o dedo/mouse. */
    .card:not(:has(> .card-header)):has(> .card-body > .table-responsive > .table-app),
    .card:not(:has(> .card-header)):has(> .card-body > .table-responsive > .table-app):hover {
        border: 0 !important;
        background: transparent;
        box-shadow: none !important;
    }

    .card:not(:has(> .card-header)):has(> .card-body > .table-responsive > .table-app) > .card-body {
        padding: 0 !important;
    }

    /* No celular a lista é UM grupo com fios entre as linhas. Em grade, cada
       linha é um cartão por si: o contêiner perde a moldura e cada cartão
       ganha a sua. */
    .table-app {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .table-app > tbody > tr,
    .table-app > tbody > tr:last-child {
        border: 1px solid var(--solar-border);
        border-radius: 1rem;
        box-shadow: var(--shadow-sm);
    }

    .table-responsive-stack > tbody > tr {
        margin-bottom: 0;
    }

    /* Carregando, vazio e erro (colspan) ocupam a fileira inteira, centrados. */
    .table-app > tbody > tr:has(> td[colspan]),
    .table-responsive-stack > tbody > tr:has(> td[colspan]) {
        grid-column: 1 / -1;
    }

    /* A folga de 120px sob a lista existe para o menu de ações da última linha
       de uma TABELA não nascer cortado. Em grade não há "última linha" colada no
       fim, e o menu é posicionado com strategy 'fixed' — sobrava um vão morto. */
    .table-responsive:has(.table-app) {
        padding-bottom: 0;
    }

    /* ── 4. Linha de detalhe ────────────────────────────────────────────────── */

    /* Algumas tabelas põem, depois da linha de dados, uma linha de DETALHE
       (td[colspan] com um .collapse dentro — as compras de cada unidade na tela
       de Energia). Fechada, ela ganhava moldura de cartão e virava uma barra
       vazia na grade. Some enquanto fechada; aparece ao abrir. */
    .table-app > tbody > tr:has(> td[colspan] > .collapse:not(.show):not(.collapsing)),
    .table-responsive-stack > tbody > tr:has(> td[colspan] > .collapse:not(.show):not(.collapsing)) {
        display: none;
    }

    /* E a tabela que tem linha de detalhe fica em UMA coluna: em grade, o detalhe
       aberto ocuparia a fileira inteira abaixo de dois ou três cartões, e não
       daria para saber de qual deles é. Linha de estado (carregando, vazio) é a
       única do corpo, e por isso não conta. */
    .table-app:has(> tbody > tr:not(:only-child) > td[colspan]) > tbody,
    .table-responsive-stack:has(> tbody > tr:not(:only-child) > td[colspan]) > tbody {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── 5. Tabela que continua tabela no iPad deitado ─────────────────────────────
   .tabela-no-tablet-deitado, para a tabela de números curtos que cabe inteira
   em ~1000px e lê melhor em colunas — a de "onde sobra e onde falta" da Energia,
   oito colunas de kWh e percentual. Em cartão de uma coluna ela ficava com o
   rótulo numa ponta e o valor na outra, a 900px de distância; e antes deste
   ajuste ela já era tabela a partir de 992px. Desfaz o modo cartão como o bloco
   de impressão do site.css faz — mesmos !important, pelo mesmo motivo. */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .tabela-no-tablet-deitado {
        display: table !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Descendentes, e não filhos: a tabela aninhada na linha de detalhe também é
       alcançada pelas regras de cartão do site.css (.table-responsive-stack td) e
       precisa voltar a ser tabela junto. */
    .tabela-no-tablet-deitado thead {
        display: table-header-group !important;
    }

    .tabela-no-tablet-deitado tbody {
        display: table-row-group !important;
    }

    .tabela-no-tablet-deitado tr {
        display: table-row !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .tabela-no-tablet-deitado td {
        display: table-cell !important;
        font-size: inherit !important;
    }

    /* Só desfaz o alinhamento à direita herdado do cartão: .text-end continua valendo. */
    .tabela-no-tablet-deitado td:not(.text-end):not(.text-center) {
        text-align: left !important;
    }

    .tabela-no-tablet-deitado td::before {
        content: none !important;
    }

    .tabela-no-tablet-deitado > tbody > tr > td {
        padding: 0.75rem !important;
        border-bottom: 1px solid var(--solar-border) !important;
    }

    /* A tabela do detalhe é table-sm: espaçamento curto, como no computador. */
    .tabela-no-tablet-deitado td td {
        padding: 0.3rem 0.5rem !important;
    }

    /* A linha de detalhe volta a ser uma linha de tabela comum: sem espaçamento
       quando fechada — o .collapse dentro dela cuida de aparecer e sumir. */
    .tabela-no-tablet-deitado > tbody > tr > td[colspan] {
        padding: 0 !important;
        border-bottom: 0 !important;
    }
}

/* iPad deitado: quatro filtros por linha cabem com folga. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .card-filter .row > .col-md-2 {
        width: 25%;
    }
}