/* ==========================================================================
   Telemix CSS — layout.css (App Grid / Sidebars / Painéis)
   ========================================================================== */

/**
 * Este arquivo define o *layout estrutural* do app:
 * - Grid principal (.app)
 * - Sidebar, Topbar e Content
 * - Estados responsivos por breakpoint
 * - Estados de página (e.g., .projects-page)
 *
 * Dica: Ajustes visuais de componentes vão em base.css / dashboard.css.
 */

/* Estrutura geral (app, painéis, sidebar, topo, conteúdo) */
.app{ position:relative; z-index:1; width:min(98vw, 1360px); height:min(94vh, 860px); display:grid; grid-template-columns: 260px 1fr; grid-template-rows: 64px 1fr; gap:12px; padding:14px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); border:1px solid var(--card-border); border-radius: 20px; box-shadow: var(--shadow); backdrop-filter: blur(var(--blur)); }
.app .panel{ background: var(--surface); border:1px solid var(--card-border); border-radius: 14px; }

.sidebar{ grid-row: 1 / span 2; padding:14px; display:flex; flex-direction:column; gap:12px; }
.sidebar .logo-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sidebar .logo{ width:36px; height:36px; border-radius:8px; flex-shrink:0; background-image: url(/home/assets/img/icone.png); background-size: cover; background-position: center; }
.sidebar .nav{ display:grid; gap:8px; }
.nav .navbtn{ text-align:left; background:#12161e; border:1px solid var(--card-border); padding:10px 12px; border-radius:10px; color:var(--text); cursor:pointer; transition:all var(--transition) }
.nav .navbtn:hover{ transform:translateY(-1px); border-color:rgba(122,162,255,.45) }
.nav .navbtn.active{ border-color: rgba(122,162,255,.6); box-shadow: 0 0 0 6px rgba(122,162,255,.12) inset; }
.nav .admin-subnav{ display:none; gap:6px; padding-left:10px; }
.nav .admin-subnav.open{ display:grid; }
.nav .admin-subnav .navbtn{ font-size:13px; padding-left:20px; }

.top{ grid-column: 2; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.brand-inline{ display:flex; align-items:center; gap:10px; }
.hamburger{ display:none; background:rgba(0,0,0,.6); border:1px solid var(--card-border); border-radius:10px; padding:8px 10px; color:var(--text); cursor:pointer; }
.pill{ padding:6px 10px; border-radius:999px; border:1px solid var(--card-border); color:var(--muted); font-size:12px }
.logout{ background:transparent; border:1px solid var(--card-border); color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; transition:all var(--transition) }
.logout:hover{ border-color:rgba(255,69,58,.6) }

.content{ grid-column: 2; padding:14px; display:grid; gap:12px; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto); overflow:auto; }
.section{ background:#10141c; border:1px solid var(--card-border); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:12px }
.section h2{ font-size:14px; color:var(--muted); font-weight:600; letter-spacing:.3px; display:flex; align-items:center; justify-content:space-between }

/* Responsivo */
@media (max-width: 1200px){ .tickets{ grid-column: span 12 } .charts{ grid-column: span 12 } }
@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; grid-template-rows: 64px auto 1fr; width:100vw; height:auto; min-height:100vh }
  .sidebar{ position: fixed; z-index: 100; left:12px; right:12px; top:12px; bottom:12px; transform: translateY(-8px) scale(.98); opacity:0; pointer-events:none; transition: opacity var(--transition), transform var(--transition); background:#10141c; }
  .sidebar::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:-1; opacity:0; transition:opacity var(--transition); pointer-events:none; }
  .sidebar.open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto }
  .sidebar.open::before{ opacity:1; pointer-events:auto; }
  .top{ grid-column:1 }
  .hamburger{ display:block; position:relative; z-index:101 }
  .content{ grid-column:1; grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 560px){ .content{ grid-template-columns: 1fr } }

/* Páginas/estados */
.projects-page .tickets, .projects-page .charts{ display:none }
.projects-page .projects{ grid-column: span 12 }

/* ==== PATCH v2 (layout): gap suave e grid à prova de overflow ==== */
/* Evita estouro horizontal de filhos dentro do grid */
.content{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
.content > *{ min-width: 0; }

/* Um respiro mínimo entre o header e o primeiro bloco no mobile */
@media (max-width: 900px){
  .app{ gap: 16px; } /* antes ~12px */
}