/* ────────────────────────────────────────────────────────────────
   Camada responsiva (desktop) — só este arquivo lida com o breakpoint
   de tela larga; css/style.css continua mobile-first sem @media.

   Estratégia: manter cada tela como é (coluna de conteúdo mobile-first,
   igual a apps como Linear/Notion/Slack em telas grandes) e trocar só o
   "chrome" — uma sidebar de navegação persistente ao lado do cartão do
   app, substituindo o drawer/hambúrguer (que só existiam na Home).
   ──────────────────────────────────────────────────────────────── */

/* Wrapper transparente abaixo do breakpoint — sem isso, `.app{width:100%}`
   fica sem referência de largura definida (o pai vira item de flex do
   body sem tamanho próprio) e o app inteiro desaparece no mobile. */
#app-shell{width:100%}
.sidebar-desktop{display:none}

@media (min-width: 900px) {
  body{background:var(--md-sys-color-surface-container-low)}

  #app-shell{display:flex;justify-content:flex-start;align-items:stretch;height:100dvh;padding-left:72px}

  /* Telas de autenticação (sem sidebar) — o fundo (.app) continua 100%
     da tela (sem o padding-left:72px reservado da sidebar nem o teto de
     900px, que são pensados pro app "logado"); só o conteúdo do form
     (.center-col) fica compacto e centralizado dentro desse fundo cheio,
     como um form de login moderno. */
  body:has(
    #screen-splash.active, #screen-welcome.active, #screen-login.active,
    #screen-register.active, #screen-forgot.active, #screen-reset.active
  ) #app-shell{
    padding-left:0;
  }
  body:has(
    #screen-splash.active, #screen-welcome.active, #screen-login.active,
    #screen-register.active, #screen-forgot.active, #screen-reset.active
  ) .app{
    max-width:none;
    flex:1 1 auto;
  }
  body:has(
    #screen-splash.active, #screen-welcome.active, #screen-login.active,
    #screen-register.active, #screen-forgot.active, #screen-reset.active
  ) .center-col{
    max-width:420px;
    width:100%;
    margin:0 auto;
  }

  /* Sidebar fixa (fora do fluxo do flex) — reserva 72px permanentes via
     #app-shell{padding-left} pro .app nunca se mexer; ao expandir no
     hover, ela cresce por cima do conteúdo (z-index), em primeiro
     plano, em vez de empurrar o resto da tela.
     Só aparece nas telas "logadas" — nunca durante o fluxo de
     autenticação (splash/boas-vindas/login/cadastro/senha), que continua
     com o visual de cartão único centralizado em qualquer largura. */
  body:not(:has(
    #screen-splash.active,
    #screen-welcome.active,
    #screen-login.active,
    #screen-register.active,
    #screen-forgot.active,
    #screen-reset.active
  )) .sidebar-desktop{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    /* Abaixo do .fab-scrim (200, css/style.css) — com o menu do botão
       Novo aberto, o scrim deve escurecer a tela toda, sidebar incluída,
       em vez da sidebar ficar por cima brilhando sobre o fundo escurecido. */
    z-index:150;
    width:72px;
    overflow:hidden;
    background:var(--md-sys-color-surface-container-low);
    border-right:1px solid var(--md-sys-color-outline-variant);
    padding:8px 0 16px;
    transition:width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  }
  /* expande e revela os rótulos ao passar o mouse — colapsada, só o
     ícone fica visível (o resto do item é cortado pelo overflow:hidden).
     Sem box-shadow no hover: como a sidebar sobrepõe o conteúdo (z-index),
     uma sombra ali lia como um resíduo "grudado" na tela em vez de dar
     profundidade — a borda já basta pra separar do conteúdo.
     Usa a classe .expanded (alternada via JS em main.js, por posição do
     mouse) em vez de :hover puro — com o .fab-scrim cobrindo a tela
     inteira (pointer-events:all quando o menu do botão Novo abre), ele
     fica por cima da sidebar e :hover nunca dispararia nela. */
  body:not(:has(
    #screen-splash.active, #screen-welcome.active, #screen-login.active,
    #screen-register.active, #screen-forgot.active, #screen-reset.active
  )) .sidebar-desktop.expanded{
    width:260px;
    /* expandida, fica acima de tudo (inclusive o menu aberto do botão
       Novo e o .fab-scrim, 200/210) */
    z-index:1000;
  }

  .sidebar-desktop .drawer-header{border-bottom:none;padding:12px 0 12px 22px;text-align:left}
  .sidebar-desktop .drawer-item{white-space:nowrap;padding-right:20px;padding-left:12px}
  .sidebar-desktop .drawer-item:first-of-type{margin-top:4px}
  .sidebar-desktop .drawer-item-label{opacity:0;transition:opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
  .sidebar-desktop.expanded .drawer-item-label{opacity:1}

  /* redundante com a sidebar — o hambúrguer só existia pra abrir o
     drawer com os mesmos atalhos que a sidebar já deixa sempre visíveis */
  #hamburger-btn{display:none!important}
  /* sem o hambúrguer e com o título fora do fluxo (position:absolute,
     abaixo), nada mais empurra sino/avatar pra direita — sem isso eles
     colapsam pro início do flex row */
  #home-header{justify-content:flex-end}
  /* idem pro "AB" d'água do header — a sidebar já tem o logo */
  .app-header-watermark{display:none}
  /* no lugar do d'água, o nome da tela centralizado no header — position:
     absolute (o header já é position:relative) em vez de confiar no
     flex-grow-1, porque sino/avatar à direita sem contrapeso à esquerda
     (hamburguer escondido) deixavam o centro do flex deslocado do centro
     real do header */
  #home-header-title{visibility:visible!important;position:absolute;left:0;right:0;top:calc(50% - 8px);transform:translateY(-50%);pointer-events:none}
  /* #drawer (menu mobile) fica escondido só por transform:translateX(-100%),
     então continua no DOM e pintando seu próprio box-shadow — como sua
     borda direita "escondida" cai bem em cima do início do .app (x=72px,
     mesmo x do fim da sidebar colapsada), a sombra aparecia colada ali,
     sem acompanhar a sidebar ao expandir (é de um elemento parado, não
     dela). Inacessível no desktop de qualquer forma (hambúrguer escondido). */
  #drawer, #drawer-overlay{display:none!important}

  /* No breakpoint desktop, o cartão cresce além do teto fluido de 560px
     (css/style.css) — é o espaço que as grades abaixo (Listagem,
     Categorias, Home) precisam pra realmente mostrar mais de 1 coluna */
  .app{box-shadow:none;flex:0 1 auto;max-width:900px}

  /* Home — os dois gráficos (Anual/Mensal) ficam visíveis ao mesmo tempo,
     lado a lado, com o card de saldo abaixo ocupando a largura toda
     (renderHome(), js/home.js, sempre monta os 2 cards + o de saldo,
     escondendo um deles via display inline só no mobile). As abas
     Anual/Mensal viram redundantes (os dois já aparecem sempre) */
  #home-tabs{display:none}
  /* #home-tabs fica escondido no desktop (logo abaixo) — o próximo
     elemento visível depois do toggle passa a ser o grid dos gráficos
     (#home-summary), não as tabs; espaço maior só aqui, sem afetar o
     mobile (onde as tabs Anual/Mensal realmente aparecem) */
  #home-value-toggle-slot{margin-top:0;margin-bottom:20px}
  /* minmax(0,1fr) — sem o minmax, o conteúdo do year/month-strip (vários
     botões de mês, largura mínima grande) força aquela coluna do grid a
     crescer além da metade, desalinhando as duas colunas (mesma causa já
     vista nos cards da Listagem) */
  #home-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
  #home-summary > *{margin:0!important}
  #home-card-saldo{grid-column:1/-1}
  #home-card-saldo{display:block!important}
  /* year-strip/month-strip ficam fora do card (irmãos, acima) — o bloco
     vira flex column pra esticar o card até a altura da linha do grid
     (align-items:stretch acima) mesmo sobrando o espaço da tira acima dele */
  #home-block-anual,#home-block-mensal{display:flex!important;flex-direction:column}
  .home-chart-card{flex:1}
  /* sem lançamento nenhum no período, o título (ano/mês) some no
     desktop — a mensagem "Nenhum lançamento..." dentro do card já dá
     esse contexto, o título junto fica redundante */
  .home-periodo-empty{display:none}

  /* Listagem — cards ocupam a largura toda (100%) e as colunas (título,
     sub-categoria, recorrência, status, valor, data) ficam padronizadas
     como numa tabela: mesma largura/alinhamento em todas as linhas.
     .cat-row-info-left/-right viram "display:contents" (somem da caixa,
     mas continuam no DOM) pra cada campo virar item direto do grid do
     card, em vez de dois grupos flex agrupados. O cabeçalho
     (#listing-table-header) usa a mesma --cat-row-grid, pra alinhar
     exatamente com as colunas dos cards abaixo. */
  #listing-entries, #listing-table-header{
    --cat-row-grid:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1fr);
  }
  #listing-entries .cat-row-card.swipe-card-front{
    /* !important pra vencer a classe Bootstrap ".d-flex" (que também
       usa !important) que ainda está no HTML do card */
    display:grid!important;
    /* minmax(0,Nfr) — sem o minmax, "fr" vira minmax(auto,fr) por
       padrão: um título longo numa linha empurra a coluna além da
       proporção só *naquela* linha, já que cada card é um grid
       independente (não uma tabela real), desalinhando as colunas
       entre os cards. Travando o mínimo em 0, a largura fica sempre
       a mesma fração do card, igual em todas as linhas. */
    grid-template-columns:var(--cat-row-grid);
    column-gap:12px;
    align-items:center!important;
  }
  .cat-row-info-left,.cat-row-info-right{display:contents}
  .cat-row-col-title,.cat-row-col-sub,.cat-row-col-repeat,
  .cat-row-col-badge,.cat-row-col-amount,.cat-row-col-date{margin:0!important}
  .cat-row-col-title,.cat-row-col-sub,.cat-row-col-repeat,.cat-row-col-date{
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  }
  .cat-row-col-badge{justify-self:start}
  /* .cat-row-info-right herda o .text-end (Bootstrap, !important) do
     HTML mesmo virando display:contents — precisa de !important pra
     vencer e ficar alinhado à esquerda como o resto das colunas */
  .cat-row-col-amount,.cat-row-col-date{text-align:left!important}

  #listing-table-header{
    display:grid!important;
    grid-template-columns:var(--cat-row-grid);
    column-gap:12px;
    padding:0 16px;
    margin-top:16px;
    margin-bottom:20px;
    font-size:.7rem;
    font-weight:600;
    color:var(--md-sys-color-outline);
    text-transform:uppercase;
    letter-spacing:.02em;
  }

  /* Banner de doação — mais respiro vertical no desktop; o botão "Doar
     agora" continua igual ao mobile (mesmo style inline, sem sobrescrever) */
  #banner-doar{padding-top:16px!important;padding-bottom:16px!important}
  #banner-doar-title{font-size:1rem!important}
  #banner-doar-desc{font-size:.85rem!important;margin-top:0!important}
  /* Título e descrição numa linha só (lado a lado) no desktop, em vez
     de empilhados como no mobile */
  #banner-doar-text{display:flex;align-items:baseline;gap:8px}

  /* Dados da conta — o CARD continua 100% (como as demais telas); só o
     conteúdo dentro dele (linhas Nome/E-mail/...) e o botão "Desconectar
     do Google" + aviso (que ficam fora do card) é que ficam compactos,
     alinhados à esquerda, em vez de esticar até a largura do .app (900px) */
  #account-data-card .card-body{max-width:400px}
  #ad-google-section{max-width:480px;margin-left:0;margin-right:auto}

  /* Personalização — o CARD "Tema" continua 100%; só o grupo de botões
     Claro/Escuro dentro dele fica compacto */
  #personalizacao-tema-card .d-flex.gap-2{max-width:320px}

  /* Formulário (Novo lançamento) — grid 2 colunas; `order` reorganiza só
     a visualização em desktop, sem tocar DOM/tab-order/mobile */
  #form-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-content:start}
  .form-row-full{grid-column:1/-1}
  #fieldset-categoria{order:1}
  #subcategoria-wrap{order:2}
  #fieldset-valor-data{order:3}
  #fieldset-repetir{order:4}
  #fieldset-status{order:5}
  #fieldset-obs{order:6}
  #remove-row{order:7}
  #form-actions-row{order:8}
  /* Cancelar/Salvar usam .flex-fill (Bootstrap, flex:1 1 auto!important)
     esticando pela largura toda do container (~900px no form, ~560px em
     Alterar senha) — precisa de !important pra vencer e virar um
     tamanho fixo, centralizado, no desktop */
  #form-actions-row,#change-password-actions{justify-content:center}
  #form-actions-row button,#change-password-actions button{flex:0 0 auto!important;width:200px!important}

  /* Modais (sheet-card) — no mobile ocupam quase a largura toda do .app
     (left/right:16px); no desktop, com o .app chegando a 900px, isso
     ficava enorme/esticado. Fica com largura fixa, centralizado, em vez
     de acompanhar a largura do .app. translateX(-50%) entra também no
     .open pra não conflitar com a animação de abertura (scale/translateY). */
  .sheet-card{left:50%;right:auto;width:420px;max-width:calc(100% - 32px);transform:translateX(-50%) scale(.93) translateY(-6px)}
  .sheet-card.open{transform:translateX(-50%) scale(1) translateY(0)}
}