/* ══════════════════════════════════════════════════════════════
   global.css — Sistema Grupo Participa
   Estilos compartilhados entre todas as páginas do dashboard.
   Qualquer alteração aqui reflete em todo o sistema.
   ══════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ── */
:root {
  /* Brand */
  --accent:         #F29725;
  --accent-dim:     #D08220;
  --accent-subtle:  rgba(242, 151, 37, 0.12);
  --accent-border:  rgba(242, 151, 37, 0.22);

  /* Semantic */
  --green:          #16a34a;
  --green-subtle:   rgba(22, 163, 74, 0.12);
  --green-border:   rgba(22, 163, 74, 0.22);
  --yellow:         #d97706;
  --yellow-subtle:  rgba(217, 119, 6, 0.12);
  --yellow-border:  rgba(217, 119, 6, 0.22);
  --purple:         #7c3aed;
  --purple-subtle:  rgba(124, 58, 237, 0.12);
  --purple-border:  rgba(124, 58, 237, 0.22);
  --red:            #dc2626;
  --red-subtle:     rgba(220, 38, 38, 0.12);
  --red-border:     rgba(220, 38, 38, 0.22);

  /* Surfaces — elevação por lightness (dark) */
  --surface-0:      #000000;   /* canvas / page bg */
  --surface-1:      #0d0d0d;   /* sidebar, header */
  --surface-2:      #141414;   /* cards, painéis */
  --surface-3:      #1c1c1c;   /* hover, inputs */
  --surface-4:      #242424;   /* hover ativo, dropdowns */

  /* Borders */
  --border-faint:   rgba(255,255,255,0.04);
  --border:         rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.14);
  --border-accent:  rgba(242,151,37,0.28);

  /* Foreground */
  --fg:             #f0f0f0;   /* primário */
  --fg-2:           #a0a0a0;   /* secundário */
  --fg-3:           #606060;   /* terciário / muted */
  --fg-4:           #363636;   /* disabled / dim */

  /* Spacing */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;

  /* Radius */
  --r-sm:           6px;
  --r-md:           10px;
  --r-lg:           14px;
  --r-xl:           18px;
  --r-pill:         999px;

  /* Shadows */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:      0 2px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.5);

  /* Layout */
  --header-height:  60px;
  --sidebar-width:  264px;

  /* Legados (não remover — usados em páginas antigas) */
  --orange:         #F29725;
  --orange2:        #D08220;
  --radius:         10px;
  --shadow:         0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.4);
  --bg:             #000;
  --bg-header:      #0d0d0d;
  --bg-sidebar:     #0d0d0d;
  --bg-nav:         #000;
  --bg-card:        #141414;
  --bg-hover:       #1c1c1c;
  --bg-loading:     rgba(255,255,255,.02);
  --border-subtle:  rgba(255,255,255,0.14);
  --text:           #f0f0f0;
  --text-muted:     #a0a0a0;
  --text-dim:       #606060;
  --text-sidebar:   #a0a0a0;
  --text-hover:     #f0f0f0;
  --text-card:      #f0f0f0;
  --text-card-sub:  #a0a0a0;
  --text-card-dim:  #606060;
  --spinner-track:  #242424;
  --tab-text:       #606060;
  --tab-text-hover: #f0f0f0;
  --tab-text-active:#f0f0f0;
  --sync-text:      #606060;
}

/* ── Tema Claro ──
   Paleta "surface elevada": fundo cinza frio → cards brancos com borda + sombra.
   Cores semânticas com opacidade maior (0.16-0.22) pra destacar em fundo claro.
*/
[data-theme="light"] {
  /* Brand — levemente mais escuro pra ganhar contraste em fundo branco */
  --accent:         #E07F10;
  --accent-dim:     #B56509;
  --accent-subtle:  rgba(224, 127, 16, 0.14);
  --accent-border:  rgba(224, 127, 16, 0.38);

  /* Semantic — opacidades sobem pra não ficarem "apagados" em fundo claro */
  --green:          #15803d;
  --green-subtle:   rgba(21, 128, 61, 0.14);
  --green-border:   rgba(21, 128, 61, 0.32);
  --yellow:         #b45309;
  --yellow-subtle:  rgba(180, 83, 9, 0.14);
  --yellow-border:  rgba(180, 83, 9, 0.32);
  --purple:         #6d28d9;
  --purple-subtle:  rgba(109, 40, 217, 0.14);
  --purple-border:  rgba(109, 40, 217, 0.32);
  --red:            #b91c1c;
  --red-subtle:     rgba(185, 28, 28, 0.14);
  --red-border:     rgba(185, 28, 28, 0.32);

  /* Surfaces — fundo cinza frio, cards brancos */
  --surface-0:      #eef1f6;   /* canvas / page bg (frio, sutil) */
  --surface-1:      #ffffff;   /* sidebar, header, cards base */
  --surface-2:      #ffffff;   /* cards, painéis (elevados com sombra+border) */
  --surface-3:      #eef1f6;   /* hover, inputs */
  --surface-4:      #dde3ec;   /* hover ativo, dropdowns */

  /* Borders — mais presentes no claro */
  --border-faint:   rgba(15, 23, 42, 0.06);
  --border:         rgba(15, 23, 42, 0.12);
  --border-strong:  rgba(15, 23, 42, 0.22);
  --border-accent:  rgba(224, 127, 16, 0.42);

  /* Foreground — contraste AA/AAA */
  --fg:             #0f172a;
  --fg-2:           #475569;
  --fg-3:           #64748b;
  --fg-4:           #94a3b8;

  /* Shadows — mais perceptíveis pra criar profundidade */
  --shadow-sm:      none;
  --shadow-md:      none;
  --shadow-lg:      none;
  --shadow:         none;

  /* Legados — espelham os tokens acima */
  --orange:         #E07F10;
  --orange2:        #B56509;
  --bg:             #eef1f6;
  --bg-header:      #ffffff;
  --bg-sidebar:     #ffffff;
  --bg-nav:         #eef1f6;
  --bg-card:        #ffffff;
  --bg-hover:       #eef1f6;
  --bg-loading:     rgba(15, 23, 42, 0.03);
  --border-subtle:  rgba(15, 23, 42, 0.22);
  --text:           #0f172a;
  --text-muted:     #475569;
  --text-dim:       #64748b;
  --text-sidebar:   #475569;
  --text-hover:     #0f172a;
  --text-card:      #0f172a;
  --text-card-sub:  #475569;
  --text-card-dim:  #64748b;
  --spinner-track:  #dde3ec;
  --tab-text:       #64748b;
  --tab-text-hover: #0f172a;
  --tab-text-active:#0f172a;
  --sync-text:      #64748b;
}

/* ── Refinamentos adicionais do tema claro ── */
[data-theme="light"] body {
  background: var(--surface-0);
}
[data-theme="light"] #app,
[data-theme="light"] #body-wrap,
[data-theme="light"] #content-area,
[data-theme="light"] main {
  background: var(--surface-0);
  box-shadow: none !important;
  filter: none !important;
}
[data-theme="light"] main {
  max-width: none;
  margin: 0;
}
/* Cards ganham sombra sutil no claro pra não colapsarem contra o fundo */
[data-theme="light"] .stat-card,
[data-theme="light"] .section-card {
  box-shadow: var(--shadow-sm);
}
/* Header e sidebar com borda mais visível no claro */
[data-theme="light"] header {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
[data-theme="light"] #body-wrap > aside {
  border-right-color: var(--border);
}
/* Avatar com borda mais suave no claro */
[data-theme="light"] .user-avatar {
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px var(--border-strong);
}
/* Sidebar active: estado mais definido no claro */
[data-theme="light"] .sidebar-item.active {
  background: var(--accent-subtle);
  color: var(--accent-dim);
  font-weight: 600;
}
/* Botão primário no claro: texto branco segue legível porque accent é escuro */
[data-theme="light"] .btn-primary {
  box-shadow: none;
}
/* Scrollbar permanece oculta em ambos os temas (evita halos laterais) — scroll continua funcional */

/* ── Scrollbars — ocultos (scroll ainda funciona) ── */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Base ── */
html, body { height: 100%; font-family: 'Inter', sans-serif; color-scheme: dark; }
html[data-theme="light"], html[data-theme="light"] body { color-scheme: light; }
body { background: var(--surface-0); color: var(--fg); font-size: 14px; line-height: 1.5; overflow: hidden; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
nav { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }

/* Quarentena para overlays de ferramentas externas injetadas fora do app. */
body > iframe,
body > [id*="design-lab" i],
body > [class*="design-lab" i],
body > [id*="interface-design" i],
body > [class*="interface-design" i],
body > [aria-label*="Design Lab" i],
body > [title*="Design Lab" i] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── App Layout ── */
#app { display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
#body-wrap { display: flex; flex: 1; min-height: 0; overflow: hidden; }
#content-area { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
main { flex: 1; padding: var(--space-8); max-width: 1600px; margin: 0 auto; width: 100%; overflow-y: auto; min-height: 0; }

/* ── Header ── */
header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-8);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  gap: var(--space-3);
  flex-shrink: 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  flex-shrink: 0;
}
.logo img { height: 30px; width: auto; }
.logo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ── Logo tema (especificidade dupla .logo + classe pra vencer .logo img) ── */
.logo img.logo-dark  { display: block; }
.logo img.logo-light { display: none; }
[data-theme="light"] .logo img.logo-dark  { display: none; }
[data-theme="light"] .logo img.logo-light { display: block; }

.header-right { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; min-width: 0; }
.sync-wrap { font-size: 12px; color: var(--fg-3); display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

.header-user { display: flex; align-items: center; gap: var(--space-3); }
.cargo-badge {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.btn-logout {
  background: transparent;
  color: var(--fg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.btn-logout:hover { border-color: var(--border-strong); color: var(--fg); background: var(--surface-3); }

/* ── Sidebar ── */
#body-wrap > aside {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  padding: var(--space-3) var(--space-2) var(--space-8);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  transition: width .25s ease, min-width .25s ease, padding .25s ease;
  position: relative;
}
/* Barra fixa no topo da sidebar */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-faint);
}
.sidebar-header-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--fg-4);
}
.sidebar-collapse-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-3);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar-collapse-btn:hover { background: var(--surface-3); color: var(--fg-2); border-color: var(--border-strong); }
#body-wrap > aside.collapsed { width: 0; min-width: 0; padding: 0; border-right: none; overflow: hidden; }
#body-wrap > aside.collapsed .sidebar-header { display: none; }

.sidebar-open-btn {
  position: fixed;
  top: calc(var(--gp-header-height, var(--header-height)) + 12px);
  left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg-3);
  font-size: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 210;
  transition: background .15s, color .15s;
}
.sidebar-open-btn:hover { background: var(--surface-3); color: var(--fg-2); }
.sidebar-open-btn.visible { display: flex; }

/* Grupos */
.sidebar-group { margin-bottom: var(--space-1); }
.sidebar-section-toggle {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: var(--space-2) var(--space-3);
  transition: color .15s;
  margin-bottom: 2px;
}
.sidebar-section-toggle:hover { color: var(--fg-3); }
.sidebar-section-chevron { font-size: 11px; transition: transform .2s; }
.sidebar-group.collapsed .sidebar-section-chevron { transform: rotate(-90deg); }
.sidebar-group-body { overflow: hidden; }
.sidebar-group.collapsed .sidebar-group-body { display: none; }

/* Itens */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-2);
  padding: 9px var(--space-3);
  margin: 1px var(--space-1);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s;
}
.sidebar-item:hover { background: var(--surface-3); color: var(--fg); }
.sidebar-item.active {
  background: var(--accent-subtle);
  color: var(--accent);
}
.sidebar-item-parent { justify-content: space-between; }
.sidebar-subtoggle {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: transform .2s, background .15s;
  flex-shrink: 0;
}
.sidebar-subtoggle:hover { background: var(--surface-4); }
.sidebar-subtoggle.open { transform: rotate(180deg); }

.sidebar-sublist { display: grid; gap: 1px; padding-bottom: var(--space-1); }
.sidebar-sublist.collapsed { display: none; }
.sidebar-item.sub-item {
  margin-left: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 500;
}
.sidebar-item.sub-item .sidebar-item-icon { width: 16px; opacity: .7; }
.sidebar-item-icon {
  width: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  opacity: .75;
}
.sidebar-item.active .sidebar-item-icon { opacity: 1; }
.sidebar-item-icon img { width: 16px; height: 16px; object-fit: contain; filter: brightness(0) invert(.65); }
.sidebar-item.active .sidebar-item-icon img { filter: brightness(0) saturate(1) invert(65%) sepia(80%) saturate(400%) hue-rotate(5deg); }
.sidebar-item-badge {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-4);
  color: var(--fg-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.sidebar-item.active .sidebar-item-badge { background: var(--accent-subtle); color: var(--accent); }
.sidebar-divider { height: 1px; background: var(--border-faint); margin: var(--space-2) var(--space-3); }

/* ── Tabs (nav) ── */
nav {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-8);
  display: flex;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 500;
  padding: 14px var(--space-5);
  border-bottom: 2px solid transparent;
  transition: color .15s;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { color: var(--fg); border-bottom-color: var(--accent); }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

/* ── Common Components ── */

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-card {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
}
.stat-label { font-size: 11px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .6px; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--fg); margin: var(--space-1) 0; line-height: 1.1; }
.stat-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
/* Accent line mínima */
.stat-card.orange { border-top: 2px solid var(--accent); }
.stat-card.green  { border-top: 2px solid var(--green); }
.stat-card.yellow { border-top: 2px solid var(--yellow); }
.stat-card.gray   { border-top: 2px solid var(--border-strong); }

/* Section / Cards */
.section-card {
  background: var(--surface-2);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  padding: var(--space-8);
}
.section-title { font-size: 18px; font-weight: 700; color: var(--fg); margin-bottom: var(--space-2); }
.section-sub { color: var(--fg-2); line-height: 1.7; margin-bottom: var(--space-5); max-width: 860px; }

/* Pills */
.pill-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  border-radius: var(--r-pill);
  padding: 0 var(--space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.pill.orange { background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--accent-border); }
.pill.green  { background: var(--green-subtle);  color: var(--green);  border: 1px solid var(--green-border); }
.pill.purple { background: var(--purple-subtle); color: var(--purple); border: 1px solid var(--purple-border); }

/* Buttons */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 9px var(--space-4);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
}
.btn-primary:hover { background: var(--accent-dim); }

/* Empty state */
.empty-state {
  border: 1px dashed var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: var(--r-lg);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  font-size: 13px;
}

/* ── Loading ── */
.loading-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  color: var(--fg-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--surface-4);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
  margin-right: var(--space-3);
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 920px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100dvh; }
  #body-wrap { flex-direction: column; overflow: visible; }
  #content-area { overflow: visible; }
  main { overflow: visible; padding: var(--space-5) var(--space-4); }
  #body-wrap > aside { width: 100% !important; min-width: 100% !important; border-right: 0; border-bottom: 1px solid var(--border); overflow-y: visible; }
  #body-wrap > aside.collapsed { width: 0 !important; min-width: 0 !important; border-bottom: none; }
  .sidebar-collapse-btn { display: none; }
  .sidebar-open-btn { display: none !important; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  header { padding: 0 var(--space-4); }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .user-name { max-width: 120px; }
  .btn-logout { padding-left: var(--space-3); padding-right: var(--space-3); }
  main { padding: var(--space-4); }
}