/* assets/css/layouts.css
 * ============================================================
 *  GSHIELD — LAYOUTS
 * ============================================================
 *
 *  Dois arranjos, e a diferença é ESTRUTURAL — não é a mesma tela
 *  com outro espaçamento.
 *
 *  CARTÕES  grade de cards com ícone grande e cor; o detalhe abre
 *           em modal por cima. Bom para reconhecer o cliente pela
 *           cor e navegar com o olho.
 *
 *  PAINEL   lista compacta numa coluna estreita e o card SEMPRE
 *           aberto ao lado. Cabe umas três vezes mais itens na tela,
 *           e você anda pela lista com as setas sem abrir e fechar
 *           nada. É o arranjo de cliente de e-mail.
 *
 *  O layout é escolha separada do tema: você combina Painel com
 *  Noite, Cartões com Papel, o que quiser. São eixos diferentes —
 *  um é densidade, o outro é temperatura.
 *
 * ─────────────────────────────────────────────────────────────
 *  NO CELULAR OS DOIS CONVERGEM
 * ─────────────────────────────────────────────────────────────
 *
 *  Master-detail não cabe em 390px de largura. Abaixo de 1100px o
 *  Painel mantém a lista compacta (que é a parte útil dele) e o
 *  detalhe volta a abrir como bottom sheet.
 *
 *  Isso é degradação consciente, não desistência: a densidade
 *  continua valendo no celular, só a coluna fixa some.
 * ============================================================ */

@layer componentes {

  /* ============================================================
     VISÃO DE TAREFAS — ocupa a largura toda
     ============================================================

     O quadro estava sendo desenhado dentro da coluna do meio do layout
     Painel, que tem 300–380px. Quatro colunas ali viram quatro tiras
     de 70px com o texto quebrando letra por letra.

     A causa é que o layout Painel foi feito para o COFRE — lista
     estreita + detalhe ao lado. O quadro de tarefas quer o oposto:
     largura. Então quando a visão é tarefas, a grade volta a ser
     `lateral | conteúdo`, com o detalhe ocupando a coluna da direita
     só quando há tarefa aberta. */

  /* ATENÇÃO À MEDIA QUERY.
   *
   * Sem ela, esta regra valia TAMBÉM no celular: a grade virava
   * `264px | resto` numa tela de 430px, sobrando 166px para o
   * conteúdo — e o texto quebrava letra por letra.
   *
   * Pior: esta grade não declara a área `barra`, então a barra
   * inferior deixava de ter lugar e o navegador a posicionava
   * sozinho, embaralhando os rótulos.
   *
   * No celular a grade continua sendo a de uma coluna do base.css,
   * com a lateral dentro do drawer e a barra embaixo. */
  @media (min-width: 768px) {
    [data-vista="tarefas"] .app {
      grid-template-areas:
        "lateral topo"
        "lateral conteudo";
      grid-template-columns: 264px minmax(0, 1fr);
    }

    [data-vista="tarefas"] .app__conteudo {
      border-right: none;
      padding-left: var(--esp-5);
      padding-right: var(--esp-5);
    }

    [data-vista="tarefas"] .app__conteudo > * { max-width: none; }
  }

  /* O detalhe da tarefa entra como terceira coluna, e só quando há uma
     aberta. Reservar a coluna sempre roubaria 400px do quadro para
     mostrar "escolha uma tarefa". */
  @media (min-width: 1100px) {
    [data-vista="tarefas"][data-detalhe="aberto"] .app {
      grid-template-areas:
        "lateral topo      topo"
        "lateral conteudo  detalhe";
      grid-template-columns: 264px minmax(0, 1fr) minmax(320px, 420px);
    }

    [data-vista="tarefas"][data-detalhe="aberto"] .detalhe-fixo {
      grid-area: detalhe;
      display: block;

      position: sticky;
      top: 0;
      height: 100dvh;
      overflow-y: auto;
      overscroll-behavior: contain;

      background: var(--sup-1);
      border-left: 1px solid var(--borda);
      padding: var(--esp-5);
    }
  }

  /* ============================================================
     LAYOUT: PAINEL
     ============================================================ */

  /* ── Lista compacta ── */

  [data-layout="painel"] .lista-cards {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  [data-layout="painel"] .linha-card {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    width: 100%;

    min-height: var(--alvo);
    padding: var(--esp-2) var(--esp-3);

    text-align: left;

    border-radius: var(--raio-sm);
    border: 1px solid transparent;

    transition: background-color var(--dur-rapida) var(--ease-saida);
  }

  @media (hover: hover) {
    [data-layout="painel"] .linha-card:hover { background: var(--sup-2); }
  }

  /* O item aberto precisa ser óbvio: sem isso, numa lista de 40 linhas
     você perde de vista qual está lendo no painel ao lado. */
  [data-layout="painel"] .linha-card[aria-current="true"] {
    background: var(--tinta-azul-bg);
    border-color: var(--tinta-azul-fg);
  }

  [data-layout="painel"] .linha-card__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 28px;
    height: 28px;
    font-size: 0.9375rem;

    border-radius: 8px;
  }

  /* display:flex column é obrigatório aqui.
   *
   * `.linha-card__texto` é um <span>, e span é inline por padrão — os
   * dois filhos (título e meta) ficavam na MESMA linha, colados:
   * "FacebookImagem". `flex: 1` funcionava (ele é item flex do pai),
   * mas não muda o fluxo interno. */
  [data-layout="painel"] .linha-card__texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
  }

  [data-layout="painel"] .linha-card__titulo {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-layout="painel"] .linha-card__meta {
    font-size: var(--texto-xs);
    color: var(--texto-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Em coluna estreita a meta sai: o título é o que identifica. */
  @media (max-width: 1240px) {
    [data-layout="painel"] .linha-card__meta { display: none; }
  }

  /* ── Coluna de detalhe (só em tela larga) ── */

  .detalhe-fixo { display: none; }

  @media (min-width: 1100px) {
    /* `:not([data-vista="tarefas"])` é o que impede o quadro de
       herdar a grade estreita do cofre. */
    [data-layout="painel"]:not([data-vista="tarefas"]) .app {
      grid-template-areas:
        "lateral topo    topo"
        "lateral conteudo detalhe";
      grid-template-columns: 264px minmax(300px, 380px) minmax(0, 1fr);
    }

    [data-layout="painel"]:not([data-vista="tarefas"]) .detalhe-fixo {
      grid-area: detalhe;
      display: block;

      position: sticky;
      top: 0;
      height: 100dvh;
      overflow-y: auto;
      overscroll-behavior: contain;

      background: var(--sup-1);
      border-left: 1px solid var(--borda);

      padding: var(--esp-5)
               max(var(--esp-5), env(safe-area-inset-right))
               var(--esp-5) var(--esp-5);
    }

    /* No painel a coluna do meio é só a lista: teto de largura ali
       comprimiria a lista sem motivo. */
    [data-layout="painel"]:not([data-vista="tarefas"]) .app__conteudo > * { max-width: none; }

    [data-layout="painel"]:not([data-vista="tarefas"]) .app__conteudo {
      border-right: 1px solid var(--borda);
      padding-left: var(--esp-4);
      padding-right: var(--esp-4);
    }

    /* NÃO esconda o sheet do card por CSS aqui.
     *
     * Esta regra existia como "rede de segurança" contra o modal
     * aparecer junto da coluna fixa. Ela virou armadilha: quando a
     * coluna de detalhe não é criada por algum motivo, o JS cai para o
     * sheet — e o CSS escondia justamente esse sheet. Resultado: o
     * clique não fazia NADA, sem erro no console e sem nada na tela.
     *
     * Quem decide onde o card aparece é o card.js, que checa
     * `offsetParent` para saber se a coluna está mesmo visível. Uma
     * segunda regra em CSS só cria um caminho para os dois discordarem.
     */
  }

  /* Estado vazio do painel de detalhe */
  .detalhe-fixo__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100%;
    text-align: center;
    color: var(--texto-3);
  }

  .detalhe-fixo__vazio i { font-size: 2rem; margin-bottom: var(--esp-3); }

  /* ============================================================
     LAYOUT: CARTÕES — ajustes finos
     ============================================================ */

  /* Cards um pouco mais generosos: neste layout o card É a interface,
     e apertá-lo tira o motivo de escolhê-lo. */
  [data-layout="cartoes"] .lista-cards {
    grid-template-columns: 1fr;
    gap: var(--esp-3);
  }

  @media (min-width: 640px) {
    [data-layout="cartoes"] .lista-cards {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
  }

  @media (min-width: 1400px) {
    [data-layout="cartoes"] .lista-cards {
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
  }

  /* ============================================================
     SELETOR DE LAYOUT
     ============================================================ */

  .layout-opcao {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    width: 100%;

    padding: var(--esp-3);
    text-align: left;

    background: var(--sup-1);
    border: 2px solid var(--borda);
    border-radius: var(--raio-md);
  }

  .layout-opcao[aria-pressed="true"] { border-color: var(--tinta-azul-fg); }

  /* Miniatura do arranjo, desenhada em CSS. Mostrar a FORMA importa
     mais que o nome: "Painel" não diz nada até você ver as colunas. */
  .esquema {
    display: flex;
    flex-shrink: 0;
    gap: 2px;

    width: 62px;
    height: 44px;
    padding: 3px;

    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
  }

  .esquema__col {
    background: var(--sup-2);
    border-radius: 2px;
  }

  .esquema__lat { width: 9px; }
  .esquema__cheio { flex: 1; }

  .esquema__grade {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }

  .esquema__bloco { background: var(--sup-2); border-radius: 2px; }

  .esquema__linhas {
    flex: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .esquema__linha {
    flex: 1;
    background: var(--sup-2);
    border-radius: 1px;
  }
}