/* ============================================================================
 * container.css — Fase 1 · F1.1 (Fundações)
 *
 * Layout de página (casca): fundo, grade sidebar/conteúdo, scroll da área
 * principal. Reescrito sobre design-tokens.css — nenhuma cor hardcoded;
 * tudo vem de --bg/--sf/--bd/--tx/--mu*.
 *
 * O antigo painel de alertas fixo do topbar (`.alert-card`/`.alerts`/
 * `.alert`) nunca chegou a ser renderizado (não havia elemento #alertCard
 * em nenhum template — código morto). Substituído pelo novo dropdown do
 * sino no header (ver navbar.css `.alert-card` nova definição).
 * ==========================================================================*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--tx);
  background: var(--bg);
  min-height: 100vh;
  transition: background .35s ease, color .35s ease;
}

.layout-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* ===== Coluna da sidebar ===== */
.esquerda {
  width: 236px;
  min-width: 236px;
  max-width: 236px;
  flex: 0 0 236px;
  height: 100vh;
  transition: width .2s ease;
}

/* ===== Coluna de conteúdo ===== */
.direita {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  padding: 0 28px 32px;
}

.main-scrollable {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
}

/* ===== Foco visível (acessibilidade — regra 4 do PRD) ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="switch"]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

/* ============================================================================
 * Colapso da sidebar < 1024px (F1.3)
 *
 * Abaixo de 1024px a coluna da sidebar encolhe para uma trilha de ícones
 * (~64px, ver navbar.css para o que fica visível/oculto dentro dela). O
 * hambúrguer do header (#sidebar-toggle-btn, ver base.html/sidebar-toggle.js)
 * expande a sidebar completa (236px) como um overlay flutuante por cima do
 * conteúdo — a coluna `.direita` NÃO reflui quando isso acontece.
 * ==========================================================================*/
@media (max-width: 1023px) {
  .esquerda {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    flex-basis: 64px;
  }

  /* Overlay: a sidebar volta à largura completa, mas flutuando por cima do
     conteúdo (position:fixed) em vez de empurrar `.direita`. */
  .esquerda.is-sidebar-expanded {
    position: fixed;
    inset: 0 auto 0 0;
    width: 236px;
    min-width: 236px;
    max-width: 236px;
    z-index: 300;
    box-shadow: 0 20px 50px var(--sh);
  }

  .direita {
    padding: 0 14px 24px;
  }
}

/* Backdrop por trás da sidebar expandida — escurece o resto da página e
   fecha a sidebar ao ser clicado (sidebar-toggle.js). Escondido por padrão
   e em telas >=1024px (a sidebar nunca vira overlay lá). */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 24, .5);
  z-index: 290;
}

.sidebar-backdrop[hidden] {
  display: none;
}