/*
  Kayru by Eikon — Layout
  ------------------------------------------------------------------
  Shell da aplicação: sidebar fixa em largura no desktop (a fixação
  vem da estrutura flex/grid do shell, não de position:fixed
  sobrepondo conteúdo), gaveta no mobile, cabeçalho de página e
  grade de conteúdo. Testado mentalmente para 390px (mobile),
  tablet retrato (768px) e desktop (>=1024px). Depende de
  tokens.css.

  Breakpoints:
    - mobile:  até 767px  -> sidebar vira gaveta (drawer)
    - tablet:  768px a 1023px -> sidebar vira gaveta, conteúdo em 1 coluna larga
    - desktop: a partir de 1024px -> sidebar fixa de 240px
*/

/* ===================================================================
   Shell — grid de duas colunas (sidebar + conteúdo) no desktop,
   uma coluna no mobile/tablet.
   =================================================================== */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'topbar'
    'main';
  background-color: var(--color-canvas);
}

@media (min-width: 1024px) {
  .app-shell {
    grid-template-columns: var(--layout-sidebar-width) 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'sidebar main';
  }
}

/* ===================================================================
   Sidebar
   No desktop ocupa a área "sidebar" do grid e usa flex interno em
   coluna para manter o rodapé (perfil/logout) no fim sem
   position:fixed — quem sobrepõe é o próprio fluxo do grid pai.
   No mobile/tablet vira uma gaveta deslizante controlada por uma
   classe de estado (is-open) no elemento .app-shell.
   =================================================================== */
.sidebar {
  display: flex;
  flex-direction: column;
  width: var(--layout-sidebar-width);
  max-width: 85vw;
  height: 100vh;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-4);
  gap: var(--space-5);

  /* Estado padrão mobile/tablet: gaveta fora da tela */
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  z-index: var(--z-drawer);
  overflow-y: auto;
}

.app-shell.is-sidebar-open .sidebar {
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
}

.sidebar__scrim {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(23, 38, 59, 0.45);
  z-index: calc(var(--z-drawer) - 1);
}

.app-shell.is-sidebar-open .sidebar__scrim {
  display: block;
}

@media (min-width: 1024px) {
  .sidebar {
    grid-area: sidebar;
    position: static;
    transform: none;
    max-width: none;
    height: 100vh;
    position: sticky;
    top: 0;
  }

  .sidebar__scrim {
    display: none !important;
  }
}

.sidebar__brand {
  display: flex;
  align-items: center;
  min-height: var(--layout-touch-target-min);
}

.sidebar__brand img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--layout-touch-target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.sidebar__link:hover {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-primary);
}

/* Item selecionado — fundo safira sólido + texto branco, nunca só
   um traço de cor: o próprio rótulo textual do item já diferencia. */
.sidebar__link[aria-current='page'] {
  background-color: var(--color-action-primary);
  color: var(--color-text-on-safira);
}

/* Rodapé da sidebar — fica preso ao fim por causa do flex-direction:
   column + flex:1 no nav acima, nunca por position:fixed. */
.sidebar__footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ===================================================================
   Topbar mobile/tablet — carrega o botão de abrir a gaveta.
   No desktop some, pois a sidebar já está sempre visível.
   =================================================================== */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--layout-touch-target-min);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
}

.topbar__menu-btn {
  width: var(--layout-touch-target-min);
  height: var(--layout-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
}

.topbar__menu-btn:hover {
  background-color: var(--color-surface-sunken);
}

@media (min-width: 1024px) {
  .topbar {
    display: none;
  }
}

/* ===================================================================
   Área principal
   =================================================================== */
.main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ===================================================================
   Cabeçalho de página — título à esquerda, ação principal à
   direita; empilha no mobile para não espremer o botão.
   =================================================================== */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.page-header__title {
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.page-header__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.page-header__actions {
  display: flex;
  gap: var(--space-2);
  width: 100%;
}

@media (min-width: 768px) {
  .page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
  }

  .page-header__actions {
    width: auto;
  }
}

/* ===================================================================
   Grade de conteúdo
   =================================================================== */
.content {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--layout-content-max-width);
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .content {
    padding: var(--space-6);
  }
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .content-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .content-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .content-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}