/* =====================================================
   FRILLO — Layout
   Header, main area, grid containers
   ===================================================== */

/* ── App Shell ── */
#app {
  height: 100vh;
  display: flex;
  overflow: hidden;
}

/* ── Sidebar ── */
#sidebar {
  width: 170px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-base), transform var(--transition-base);
  z-index: var(--z-drawer);
}

.sidebar-header {
  height: 64px;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-action {
  padding: var(--space-4) var(--space-3);
  display: flex;
  margin-top: -5px; /* Ajusta o botão Adicionar para subir apenas 5px */
}

.sidebar-action .btn {
  width: 100%;
  flex: 1;
  padding: var(--space-3); /* Matches .nav-item's padding exactly, giving them the same size! */
}

.sidebar-nav {
  flex: 1;
  padding: 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
}

.sidebar-footer {
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  font-weight: 500;
  font-size: var(--text-sm);
}

.nav-item svg {
  flex-shrink: 0;
}

.nav-item:hover {
  background: var(--bg-chip);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--bg-chip-active);
  color: var(--accent);
}

.nav-item.active svg {
  color: var(--accent);
}

/* Sidebar Collapsed State */
#sidebar.collapsed {
  width: 80px;
}
#sidebar.collapsed .logo-text,
#sidebar.collapsed .nav-text,
#sidebar.collapsed .btn-text {
  display: none;
}
#sidebar.collapsed .btn-primary {
  padding: var(--space-3);
  justify-content: center;
}
#sidebar.collapsed .nav-item {
  justify-content: center;
  padding: var(--space-3);
}
#sidebar.collapsed #sidebar-toggle svg {
  transform: rotate(180deg);
}

/* ── Content Area ── */
#content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: var(--bg-primary);
}

/* ── Header ── */
#header {
  flex-shrink: 0;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color var(--transition-slow), border-color var(--transition-slow);
}

.header-inner {
  height: 100%;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* ── Centered and Wider Header Search ── */
.header-search {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.header-search .filter-search {
  width: 320px !important;
  height: 40px !important; /* Altura padronizada para 40px */
  border-radius: var(--radius-md) !important;
  box-sizing: border-box !important;
}

.header-search .filter-search:focus {
  width: 400px !important;
}

/* ── Logo (Header) - Oculto agora que está na sidebar ── */
#header .logo-wrapper {
  display: none;
}

/* ── User Profile Widget ── */
.header-user-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 40px; /* Altura padronizada para 40px */
  box-sizing: border-box;
  background: var(--bg-chip);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); /* Retângulo com cantos arredondados */
  transition: all var(--transition-fast);
  user-select: none;
  min-width: 160px; /* Largura mínima aumentada */
}

/* ── Padronização dos Botões Adicionais do Header para 40px ── */
.view-mode-btn,
#btn-notifications,
#btn-header-settings,
#btn-mods-toggle {
  width: 40px !important;
  height: 40px !important;
}

.header-user-badge:hover {
  background: var(--bg-chip-active);
  border-color: var(--border-default);
}

.user-badge-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  background: var(--accent);
  color: #000000;
  user-select: none;
  text-transform: uppercase;
}

.user-badge-greeting {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* ── Logo ── */
.logo-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-image {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-bounce), height var(--transition-base);
}

.logo-wrapper:hover .logo-image {
  transform: scale(1.04);
}

/* Sidebar Logo Responsiveness based on collapse state */
#sidebar.collapsed .logo-wrapper {
  justify-content: center;
  width: 100%;
  padding: 0;
}

#sidebar.collapsed #sidebar-logo {
  height: 38px; /* Elegant 38px square cat logo centered perfectly inside the 80px collapsed sidebar */
}

/* ── Header Center: Stats ── */
.header-stats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 40px; /* Altura padronizada de 40px */
  box-sizing: border-box;
  background: transparent; /* Fundo transparente igual ao botão PERÍODO */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); /* Retangular com cantos arredondados */
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  user-select: none;
}

.stat-badge strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  margin-right: 5px;
}

/* ── Header Actions ── */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Filter Bar & Universal Subheader ── */
#filter-bar,
.subheader {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) - 1);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color var(--transition-slow);
}

.filter-bar-inner,
.subheader-inner {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── View Container & Views ── */
#view-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.view {
  display: none;
  animation: fadeIn 300ms ease;
  min-height: 100%;
}

.view.active {
  display: flex;
  flex-direction: column;
}

.view-header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  width: 100%;
}

.view-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.view-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ── Main Content (Quadro) ── */
#main {
  width: 100%;
  padding: var(--space-6);
}

/* ── Board Grid ── */
#board, #board-archive {
  display: block;
  column-count: 4;
  column-gap: var(--space-4);
}

/* ── Board Section Header ── */
.board-section-header {
  grid-column: 1 / -1;
  column-span: all;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.board-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Empty State ── */
#empty-state {
  grid-column: 1 / -1;
  column-span: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  text-align: center;
  gap: var(--space-4);
  animation: fadeInUp 400ms ease forwards;
}

.empty-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  animation: float 3s ease-in-out infinite;
}

.empty-icon svg {
  width: 40px;
  height: 40px;
  color: var(--text-muted);
}

.empty-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
}

.empty-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 360px;
  line-height: 1.7;
}

/* ── Toast Container ── */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  #board, #board-archive {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  .header-inner {
    padding: 0 var(--space-4);
    height: 56px;
  }

  .header-search .filter-search {
    width: 180px !important;
  }

  .header-search .filter-search:focus {
    width: 220px !important;
  }

  .header-stats {
    display: none;
  }

  .filter-bar-inner {
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
  }

  #main {
    padding: var(--space-4);
  }

  #board, #board-archive {
    column-count: 2;
  }

  #toast-container {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }
}

@media (max-width: 520px) {
  #board, #board-archive {
    column-count: 1;
  }
}

@media (max-width: 480px) {
  .logo-text { display: none; }
}