/* ════════════════════════════════════════════════════════════════════
   GesTrack — Shared Layout v2.0
   Layout Global: Sidebar 256px + Header 62px + Main ajustado

   ANATOMIA DO LAYOUT:
     ┌─────────────────────────────────────────────────────┐
     │  #gt-global-header  (fixed, left:256px, h:62px, z39)│
     ├──────────┬──────────────────────────────────────────┤
     │          │  .main-area / .main / <main>             │
     │ sidebar  │  padding-top: 62px (clearance do header) │
     │ (fixed   │  margin-left: 256px                      │
     │  256px   │  overflow-x: hidden                      │
     │  z:40)   │                                          │
     └──────────┴──────────────────────────────────────────┘

   REGRAS FUNDAMENTAIS:
     • #gt-global-sidebar → position:fixed | w:256px | z:40 | h:100vh
     • #gt-global-header  → position:fixed | left:256px | h:62px | z:39
     • .app-shell → display:block (NÃO flex)
     • .main-area → margin-left:256px | padding-top:62px | overflow-x:hidden
     • .main      → margin-left:240px | padding-top:62px (legado)

   Light Mode ONLY:
     • bg: #f8fafc (bg-slate-50)
     • surface: #ffffff
     • border: #e5e7eb (gray-200)
     • text: #111827 (gray-900)
════════════════════════════════════════════════════════════════════ */

/* ── Reset mínimo ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Design tokens Light Mode ─────────────────────────────────────── */
:root {
  --sidebar-width:    256px;    /* w-64 */
  --header-height:    62px;     /* gt-global-header */
  --gt-bg:            #f8fafc;  /* bg-slate-50  */
  --gt-surface:       #ffffff;
  --gt-surface2:      #f8fafc;
  --gt-border:        #e5e7eb;  /* gray-200     */
  --gt-border2:       #d1d5db;  /* gray-300     */
  --gt-text:          #111827;  /* text-gray-900 */
  --gt-muted:         #6b7280;  /* text-gray-500 */
  --gt-dim:           #9ca3af;  /* text-gray-400 */
  --gt-teal:          #0d9488;
  --gt-teal-mid:      #14b8a6;
  --gt-teal-bg:       #f0fdfa;
  --gt-teal-border:   #99f6e4;
  --shadow-sm:        0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:        0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
}

/* ── Body base ────────────────────────────────────────────────────── */
html, body {
  background: var(--gt-bg) !important;
  color: var(--gt-text) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR — position:fixed, 256px, z-40
   Nunca sobreposição: o main recebe margin-left:256px
═══════════════════════════════════════════════════════════════════ */
.sidebar,
#gt-global-sidebar {
  position: fixed !important;
  top: 0;
  left: 0;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  background: var(--gt-surface) !important;
  border-right: 1px solid var(--gt-border) !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 40 !important;
  box-shadow: var(--shadow-sm);
}

/* ── Scrollbar da sidebar ─────────────────────────────────────────── */
.sidebar::-webkit-scrollbar       { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--gt-border2); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   APP SHELL — container raiz das páginas
   display:block (não flex) garante que sidebar+main coexistam
═══════════════════════════════════════════════════════════════════ */
.app-shell {
  display: block !important;
  min-height: 100vh;
  background: var(--gt-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL HEADER — #gt-global-header (gestrack-header.js)
   Fixo no topo, começa após a sidebar (left:256px), altura 62px
═══════════════════════════════════════════════════════════════════ */
#gt-global-header {
  position: fixed !important;
  top: 0;
  left: var(--sidebar-width) !important;  /* 256px */
  right: 0;
  height: var(--header-height) !important; /* 62px */
  background: #ffffff !important;
  border-bottom: 1.5px solid #e5e7eb !important;
  z-index: 39 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* ═══════════════════════════════════════════════════════════════════
   MAIN AREA — recebe margem da sidebar + clearance do header
   .main-area  → padrão novo (casamento, execução, etc.)
   .main       → padrão legado (holding-dashboard, financeiro, etc.)
═══════════════════════════════════════════════════════════════════ */
.main-area {
  margin-left: var(--sidebar-width) !important;         /* ml-64 = 256px */
  padding-top: var(--header-height) !important;          /* 62px clearance do header */
  width: calc(100% - var(--sidebar-width)) !important;
  min-height: 100vh;
  overflow-x: hidden;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 32px;
  background: var(--gt-bg);
}

.main {
  margin-left: 240px;            /* sidebar 240px (legado) */
  padding-top: var(--header-height) !important;  /* 62px clearance */
  overflow-x: hidden;
}

/* <main> genérico (páginas sem .main-area ou .main) */
main {
  margin-left: 256px;
  padding-top: var(--header-height);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════
   TOPBAR — fixed, estica da borda da sidebar até a direita
═══════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed !important;
  top: 0;
  left: var(--sidebar-width) !important;
  right: 0;
  height: var(--topbar-height) !important;
  background: var(--gt-surface) !important;
  border-bottom: 1px solid var(--gt-border) !important;
  display: flex;
  align-items: center;
  padding: 0 24px;
  justify-content: space-between;
  z-index: 39 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ── Topbar legado (240px sidebar) ───────────────────────────────── */
.gestrack-topbar {
  left: 240px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   KPI GRID — responsivo: 1 → 2 → 4 → 5 colunas
   Uso: <div class="kpi-responsive-grid">
═══════════════════════════════════════════════════════════════════ */
.kpi-responsive-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  width: 100%;
}
@media (min-width: 640px)  { .kpi-responsive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kpi-responsive-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .kpi-responsive-grid { grid-template-columns: repeat(5, 1fr); } }

/* ═══════════════════════════════════════════════════════════════════
   COMPANY CARDS GRID — responsivo: 1 → 2 → 3 colunas
   Uso: <div class="company-cards-grid">
═══════════════════════════════════════════════════════════════════ */
.company-cards-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  width: 100%;
}
@media (min-width: 640px)  { .company-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .company-cards-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Company card: h-full + flex-col para botão alinhar na base ───── */
.company-cards-grid > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.company-cards-grid > * .card-body { flex: 1; }
.company-cards-grid > * .card-footer {
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   CHARTS ROW — responsivo: 1 coluna mobile → 2 desktop
═══════════════════════════════════════════════════════════════════ */
.charts-responsive-row {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  width: 100%;
}
@media (min-width: 900px) { .charts-responsive-row { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES GLOBAIS
   Garante que classes Tailwind dark: ou utilitários dark não vazem
═══════════════════════════════════════════════════════════════════ */

/* Surfaces escuras → branco */
.bg-gray-950, .bg-gray-900, .bg-gray-800, .bg-gray-700,
[class*="bg-gray-9"], [class*="bg-slate-9"],
[class*="bg-zinc-9"], [class*="bg-neutral-9"] {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Texto claro em fundo escuro → gray-900 */
.text-white     { color: #111827 !important; }
.text-gray-100,
.text-gray-200  { color: #1e293b !important; }
.text-gray-300  { color: #374151 !important; }

/* Bordas escuras → light */
.border-gray-800,
.border-gray-700,
.border-gray-600  { border-color: #e5e7eb !important; }

/* Gradient bases dark → neutro */
[class*="from-gray-9"], [class*="from-slate-9"],
[class*="from-teal-9"], [class*="from-blue-9"]  {
  background: #ffffff !important;
  background-image: none !important;
}

/* Inputs sempre light */
input, select, textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}
input::placeholder,
select::placeholder,
textarea::placeholder { color: #9ca3af !important; }

/* Tabelas */
td, th {
  color: #111827 !important;
  border-color: #e5e7eb !important;
}
tr:hover td { background: #f9fafb !important; }

/* Scrollbar global */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #14b8a6; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #gt-global-sidebar,
  .sidebar { display: none !important; }
  .app-shell { display: block !important; }

  #gt-global-header {
    left: 0 !important;
  }

  .main-area {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 70px 16px 20px !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 70px !important;
  }

  main {
    margin-left: 0 !important;
    padding-top: 70px !important;
  }

  .topbar,
  .gestrack-topbar {
    left: 0 !important;
    display: none !important;   /* substituído pelo gt-global-header */
  }
}