/* layout.css — sistema de layout (posicionamento) mobile-first */

/* =========================================================
   0) Safe-area + medidas estruturais
   ========================================================= */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* z-index scale */
  --z-header: 100;
  --z-dock: 110;
  --z-toast: 120;
  --z-modal: 130;
}

/* Helpers safe-area */
.safe-x{
  padding-left: calc(var(--page-pad) + var(--safe-left));
  padding-right: calc(var(--page-pad) + var(--safe-right));
}
.safe-top{ padding-top: calc(var(--page-pad) + var(--safe-top)); }
.safe-bottom{ padding-bottom: calc(var(--page-pad) + var(--safe-bottom)); }

/* =========================================================
   1) Containers
   ========================================================= */
.page{
  padding-left: calc(var(--page-pad) + var(--safe-left));
  padding-right: calc(var(--page-pad) + var(--safe-right));
}

/* Containers removidos — mobile-only project */
.container{ display: contents; }
.container-sm{ display: contents; }
.container-lg{ display: contents; }

/* =========================================================
   2) Reserva de espaço para estruturas fixas (Topbar/Dock)
   ========================================================= */
.has-topbar{
  padding-top: calc(var(--topbar-h) + var(--safe-top) + var(--sp-12));
}
.has-dock{
  /* Reserva altura real da dock fixa: barra + padding do container + folga visual */
  padding-bottom: calc(var(--dock-h) + (var(--page-pad) * 2) + var(--safe-bottom) + var(--sp-16));
}

/* Stack inicial com padding top para conteúdo */
.page > .stack {
  padding-top: var(--sp-16);
}

/* =========================================================
   3) Stack / Cluster / Center
   ========================================================= */
.stack{ display:flex; flex-direction:column; }
.stack-xs{ gap: var(--sp-4); }
.stack-sm{ gap: var(--sp-8); }
.stack-md{ gap: var(--sp-12); }
.stack-lg{ gap: var(--sp-16); }
.stack-xl{ gap: var(--sp-24); }

/* Dashboard: dobra o espaçamento entre blocos/cards (16px -> 32px) */
.page.dashboard-page > .stack.stack-lg{
  gap: 48px;
}

/* Ajuste óptico: header -> KPIs fica em 32px mantendo os demais gaps em 48px */
.page.dashboard-page > .stack.stack-lg > .kpi-section{
  margin-top: -10px;
}

.cluster{ display:flex; flex-wrap:wrap; align-items:center; }
.cluster-xs{ gap: var(--sp-4); }
.cluster-sm{ gap: var(--sp-8); }
.cluster-md{ gap: var(--sp-12); }
.cluster-lg{ gap: var(--sp-16); }

.center{ display:flex; align-items:center; justify-content:center; }

/* =========================================================
   4) Grids (mobile-first)
   ========================================================= */
.grid{ display:grid; gap: var(--sp-12); }

/* Mobile-first: sempre 1 coluna por padrão */
.grid-1,
.grid-2,
.grid-3,
.grid-4{ grid-template-columns: 1fr; }

/* auto-fit: cards fluidos sem esmagar */
.grid-autofit{
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* =========================================================
   5) Page Header (Título + Subtítulo das páginas)
   ========================================================= */
.page-header{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.page-header-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.page-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: transparent;
  flex-shrink: 0;
}

.page-icon {
  width: 32px;
  height: 32px;
  color: var(--text);
}

.page-title{
  font-size: clamp(20px, 6vw, 40px);
  line-height: 0.8;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
}

.page-subtitle{
  font-size: var(--fs-15);
  color: var(--muted);
  margin: 0;
}

/* =========================================================
   5b) Layouts estruturais comuns
   ========================================================= */

/* Split — mobile only */
.split{
  display:grid;
  gap: var(--sp-16);
  grid-template-columns: 1fr;
}

/* Sidebar layout — mobile only */
.sidebar-layout{
  display:grid;
  gap: var(--sp-16);
  grid-template-columns: 1fr;
}

/* Cards grid — mobile only (2 colunas) */
.cards-grid{
  display:grid;
  gap: var(--sp-12);
  grid-template-columns: repeat(2, minmax(0,1fr));
}

/* =========================================================
   6) Utilitários rápidos
   ========================================================= */
.hidden{ display:none !important; }
.w-full{ width:100% !important; }
.h-full{ height:100% !important; }

.mt-4{ margin-top: var(--sp-4) !important; }
.mt-8{ margin-top: var(--sp-8) !important; }
.mt-12{ margin-top: var(--sp-12) !important; }
.mt-16{ margin-top: var(--sp-16) !important; }
.mt-24{ margin-top: var(--sp-24) !important; }

.mb-4{ margin-bottom: var(--sp-4) !important; }
.mb-8{ margin-bottom: var(--sp-8) !important; }
.mb-12{ margin-bottom: var(--sp-12) !important; }
.mb-16{ margin-bottom: var(--sp-16) !important; }
.mb-24{ margin-bottom: var(--sp-24) !important; }

/* KPI GRID — mobile only (2x2) */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12);
  width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   7) Desktop breathing room (mobile-first preserved)
   ========================================================= */
@media (min-width: 1024px){
  .page{
    padding-left: max(40px, 6vw);
    padding-right: max(40px, 6vw);
  }

  .page > .stack{
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1440px){
  .page > .stack{
    max-width: 960px;
  }
}