/**
 * THEME SWITCHER SYSTEM - PlayTech ERP
 * Sistema de alternância de temas integrado
 */

/* ============================================
   TEMA DEFAULT (Tema atual do PlayTech)
   ============================================ */
:root,
body.theme-default {
  /* Cores Primárias - PlayTech */
  --primary-color: #1a56db;
  --primary-hover: #1341a8;
  --primary-light: #e8f0fe;

  /* Cores de Status */
  --success-color: #0e9f6e;
  --danger-color: #e02424;
  --warning-color: #d97706;
  --info-color: #3b82f6;

  /* Cores de Fundo */
  --bg-body: #f3f4f6;
  --bg-card: #ffffff;
  --bg-surface: #ffffff;

  /* Cores de Texto */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #6b7280;
  --text-white: #ffffff;

  /* Cores de Borda */
  --border-color: #d1d5db;
  --border-light: #f3f4f6;

  /* Sidebar - PlayTech Style */
  --sidebar-bg: rgb(0, 0, 0);
  --sidebar-text: #94a3b8;
  --sidebar-hover: #FF69B4;
  --sidebar-active: #FF0077;
  --sidebar-border: #FF0077;
  --sidebar-width: 230px;
  --sidebar-logo-text: #ffffff;

  /* Topbar */
  --topbar-height: 52px;
  --topbar-bg: #ffffff;
  --topbar-text: #111827;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #1a56db 0%, #1341a8 100%);
  --gradient-success: linear-gradient(135deg, #0e9f6e 0%, #047857 100%);
  --gradient-danger: linear-gradient(135deg, #e02424 0%, #b91c1c 100%);
  --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  /* Outros */
  --radius: 6px;
  --transition-speed: 0.2s;
}

/* ============================================
   TEMA PURPLE (Baseado no PurpleAdmin)
   ============================================ */
body.theme-purple {
  /* Cores Primárias - Purple */
  --primary-color: #b66dff;
  --primary-hover: #9a55ff;
  --primary-light: #f3e8ff;

  /* Cores de Status */
  --success-color: #57b657;
  --danger-color: #fe5461;
  --warning-color: #ffc100;
  --info-color: #00d0ff;

  /* Cores de Fundo */
  --bg-body: #f2edf3;
  --bg-card: #ffffff;
  --bg-surface: #ffffff;

  /* Cores de Texto */
  --text-primary: #3e4b5b;
  --text-secondary: #888888;
  --text-muted: #9e9da0;
  --text-white: #ffffff;

  /* Cores de Borda */
  --border-color: #f2edf3;
  --border-light: #f8f5f9;

  /* Sidebar - Purple Style */
  --sidebar-bg: #ffffff;
  --sidebar-text: #3e4b5b;
  --sidebar-hover: #f2edf3;
  --sidebar-active: #b66dff;
  --sidebar-border: #f2edf3;
  --sidebar-width: 230px;
  --sidebar-logo-text: #3e4b5b;

  /* Topbar */
  --topbar-height: 52px;
  --topbar-bg: #ffffff;
  --topbar-text: #3e4b5b;

  /* Sombras - Purple */
  --shadow-sm: 0 1px 2px rgba(182, 109, 255, 0.05);
  --shadow-md: 0 1px 4px rgba(182, 109, 255, 0.1);
  --shadow-lg: 0 4px 6px rgba(182, 109, 255, 0.15);

  /* Gradientes - Purple */
  --gradient-primary: linear-gradient(135deg, #da8cff 0%, #9a55ff 100%);
  --gradient-success: linear-gradient(135deg, #84d9d2 0%, #07cdae 100%);
  --gradient-danger: linear-gradient(135deg, #ffbf96 0%, #fe7096 100%);
  --gradient-info: linear-gradient(135deg, #90caf9 0%, #047edf 100%);

  /* Outros */
  --radius: 6px;
  --transition-speed: 0.2s;
}

/* ============================================
   TEMA PURPLE DARK (Sidebar Escura)
   ============================================ */
body.theme-purple-dark {
  /* Cores Primárias - Purple */
  --primary-color: #b66dff;
  --primary-hover: #9a55ff;
  --primary-light: #f3e8ff;

  /* Cores de Status */
  --success-color: #57b657;
  --danger-color: #fe5461;
  --warning-color: #ffc100;
  --info-color: #00d0ff;

  /* Cores de Fundo */
  --bg-body: #f2edf3;
  --bg-card: #ffffff;
  --bg-surface: #ffffff;

  /* Cores de Texto */
  --text-primary: #3e4b5b;
  --text-secondary: #888888;
  --text-muted: #9e9da0;
  --text-white: #ffffff;

  /* Cores de Borda */
  --border-color: #f2edf3;
  --border-light: #f8f5f9;

  /* Sidebar - Dark Purple */
  --sidebar-bg: #18151e;
  --sidebar-text: #ffffff;
  --sidebar-hover: #282037;
  --sidebar-active: #b66dff;
  --sidebar-border: #282037;
  --sidebar-width: 230px;
  --sidebar-logo-text: #ffffff;

  /* Topbar */
  --topbar-height: 52px;
  --topbar-bg: #ffffff;
  --topbar-text: #3e4b5b;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(182, 109, 255, 0.05);
  --shadow-md: 0 1px 4px rgba(182, 109, 255, 0.1);
  --shadow-lg: 0 4px 6px rgba(182, 109, 255, 0.15);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #da8cff 0%, #9a55ff 100%);
  --gradient-success: linear-gradient(135deg, #84d9d2 0%, #07cdae 100%);
  --gradient-danger: linear-gradient(135deg, #ffbf96 0%, #fe7096 100%);
  --gradient-info: linear-gradient(135deg, #90caf9 0%, #047edf 100%);

  /* Outros */
  --radius: 6px;
  --transition-speed: 0.2s;
}

/* ============================================
   TEMA App GESTÃO (Design System Dark Pro)
   ============================================ */
body.theme-dark {
  /* Cores de Marca & Destaque */
  --brand: #1a3a5c;
  --brand-lt: #2a4d75;
  --accent: #3fb950;

  --primary-color: #58a6ff;
  --primary-hover: #388bfd;
  --primary-light: rgba(88, 166, 255, 0.15);

  /* Cores de Status */
  --success-color: #3fb950;
  --danger-color: #f85149;
  --warning-color: #d29922;
  --info-color: #58a6ff;

  /* Cores de Fundo */
  --bg-body: #0d1117;
  /* Fundo da página */
  --bg-card: #161b22;
  /* Fundo de cards/topbar/surfaces */
  --bg-surface: #161b22;
  --bg-card-2: #1c2128;
  /* Cabeçalhos e inputs */
  --bg-hover: #22272e;
  /* Hover em tabelas e listas */

  /* Cores de Texto */
  --text-primary: #e6edf3;
  /* Branco-suave */
  --text-secondary: #8b949e;
  /* Cinza */
  --text-muted: #8b949e;
  --text-white: #ffffff;

  /* Cores de Borda */
  --border-color: #30363d;
  --border-light: #21262d;

  /* Sidebar - App Style */
  --sidebar-bg: #0a1929;
  --sidebar-text: rgba(255, 255, 255, 0.75);
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active: #58a6ff;
  --sidebar-border: #30363d;
  --sidebar-width: 240px;
  --sidebar-logo-text: #ffffff;

  /* Topbar */
  --topbar-height: 50px;
  --topbar-bg: #161b22;
  --topbar-text: #e6edf3;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #1a3a5c 0%, #2a4d75 100%);
  --gradient-success: linear-gradient(135deg, #238636 0%, #3fb950 100%);
  --gradient-danger: linear-gradient(135deg, #da3633 0%, #f85149 100%);
  --gradient-info: linear-gradient(135deg, #1f6feb 0%, #58a6ff 100%);

  /* Outros */
  --radius: 6px;
  --transition-speed: 0.2s;
}

/* ============================================
   ESTILOS ESPECÍFICOS: TEMA App GESTÃO
   ============================================ */

/* Sidebar no Tema App */
body.theme-dark #sidebar {
  background: #0a1929 !important;
  border-right: 1px solid #30363d !important;
}

body.theme-dark #sidebar-logo {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}

body.theme-dark #sidebar-logo .logo-text {
  color: #ffffff !important;
}

body.theme-dark #sidebar nav .nav-group-label {
  background: #050a12 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  color: #c9d1d9 !important;
  border-left: 3px solid #58a6ff !important;
  border-radius: 4px !important;
  padding: 5px 10px !important;
  margin: 10px 8px 4px !important;
}

/* Categorias com cores individuais do Design System App */
body.theme-dark #sidebar nav .nav-group-label:nth-of-type(1) {
  border-left-color: #e3b341 !important;
  color: #e3b341 !important;
}

/* PRINCIPAL */
body.theme-dark #sidebar nav .nav-group-label:nth-of-type(2) {
  border-left-color: #58a6ff !important;
  color: #58a6ff !important;
}

/* CADASTROS */
body.theme-dark #sidebar nav .nav-group-label:nth-of-type(3) {
  border-left-color: #f0883e !important;
  color: #f0883e !important;
}

/* VENDAS */
body.theme-dark #sidebar nav .nav-group-label:nth-of-type(4) {
  border-left-color: #3fb950 !important;
  color: #3fb950 !important;
}

/* FINANCEIRO */
body.theme-dark #sidebar nav .nav-group-label:nth-of-type(5) {
  border-left-color: #a371f7 !important;
  color: #a371f7 !important;
}

/* RELATÓRIOS */
body.theme-dark #sidebar nav .nav-group-label:nth-of-type(6) {
  border-left-color: #8b949e !important;
  color: #8b949e !important;
}

/* SISTEMA */

body.theme-dark .nav-item {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
  border-left: 3px solid transparent !important;
  padding: 8px 12px !important;
  transition: background 0.15s, color 0.15s, border-left-color 0.15s !important;
}

body.theme-dark .nav-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-left-color: #58a6ff !important;
}

body.theme-dark .nav-item.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-left-color: #58a6ff !important;
  font-weight: 600 !important;
}

body.theme-dark #sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Topbar & Header */
body.theme-dark #top-bar {
  background: #161b22 !important;
  border-bottom: 1px solid #30363d !important;
}

body.theme-dark #top-bar #clock {
  color: #8b949e !important;
}

body.theme-dark #page-content {
  background: #0d1117 !important;
}

/* Cards & Superfícies */
body.theme-dark .card,
body.theme-dark .kpi-card,
body.theme-dark .fin-box,
body.theme-dark .fp-section,
body.theme-dark .cf-hub-tab {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

body.theme-dark .kpi-label,
body.theme-dark .kpi-sub,
body.theme-dark .card-title,
body.theme-dark .table-footer,
body.theme-dark .text-muted {
  color: #8b949e !important;
}

/* Tabelas */
body.theme-dark table thead th {
  background: #1c2128 !important;
  color: #8b949e !important;
  border-bottom: 1px solid #30363d !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: 11px !important;
}

body.theme-dark table tbody tr {
  border-bottom: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

body.theme-dark table tbody tr:hover {
  background-color: #22272e !important;
}

body.theme-dark table tbody td {
  color: #e6edf3 !important;
}

body.theme-dark table tfoot td {
  background: #1c2128 !important;
  color: #e6edf3 !important;
  border-top: 1px solid #30363d !important;
}

body.theme-dark tbody tr.row-selected {
  background-color: #1f6feb !important;
  color: #ffffff !important;
}

/* Inputs, Selects & Forms */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .form-group input,
body.theme-dark .form-group select,
body.theme-dark .form-group textarea,
body.theme-dark .toolbar input,
body.theme-dark .toolbar select,
body.theme-dark .pager-btn {
  background: #1c2128 !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus,
body.theme-dark .form-group input:focus,
body.theme-dark .form-group select:focus,
body.theme-dark .form-group textarea:focus {
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2) !important;
  outline: none !important;
}

body.theme-dark .form-group label {
  color: #8b949e !important;
}

body.theme-dark #prod-busca-panel,
body.theme-dark .fp-valores,
body.theme-dark .pagar-valores,
body.theme-dark .venda-totais,
body.theme-dark .cf-endereco-row,
body.theme-dark .cf-contato-row {
  background: #1c2128 !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
}

/* Abas */
body.theme-dark .tab,
body.theme-dark .fp-tab,
body.theme-dark .pagar-tab {
  color: #8b949e !important;
  border-bottom: 2px solid transparent !important;
}

body.theme-dark .tab:hover,
body.theme-dark .fp-tab:hover,
body.theme-dark .pagar-tab:hover {
  color: #e6edf3 !important;
}

body.theme-dark .tab.active,
body.theme-dark .fp-tab.active,
body.theme-dark .pagar-tab.active {
  color: #58a6ff !important;
  border-bottom-color: #58a6ff !important;
  font-weight: 700 !important;
}

body.theme-dark .tabs,
body.theme-dark .fp-tabs,
body.theme-dark .pagar-tabs {
  border-bottom: 2px solid #30363d !important;
}

/* Modais */
body.theme-dark #modal-box {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  color: #e6edf3 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

body.theme-dark #modal-header {
  background: #161b22 !important;
  border-bottom: 1px solid #30363d !important;
}

body.theme-dark #modal-title {
  color: #e6edf3 !important;
}

body.theme-dark #modal-footer {
  background: #161b22 !important;
  border-top: 1px solid #30363d !important;
}

/* Botões */
body.theme-dark .btn-outline {
  background: #21262d !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.theme-dark .btn-outline:hover {
  background: #30363d !important;
  border-color: #8b949e !important;
}

body.theme-dark .theme-switcher-header {
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.theme-dark .theme-switcher-header:hover {
  background: rgba(88, 166, 255, 0.15) !important;
  border-color: #58a6ff !important;
  color: #58a6ff !important;
}

/* Badges */
body.theme-dark .badge-green {
  background: rgba(63, 185, 80, 0.18) !important;
  color: #3fb950 !important;
  border: 1px solid rgba(63, 185, 80, 0.35) !important;
}

body.theme-dark .badge-red {
  background: rgba(248, 81, 73, 0.18) !important;
  color: #f85149 !important;
  border: 1px solid rgba(248, 81, 73, 0.35) !important;
}

body.theme-dark .badge-blue {
  background: rgba(88, 166, 255, 0.18) !important;
  color: #58a6ff !important;
  border: 1px solid rgba(88, 166, 255, 0.35) !important;
}

body.theme-dark .badge-orange {
  background: rgba(240, 136, 62, 0.18) !important;
  color: #f0883e !important;
  border: 1px solid rgba(240, 136, 62, 0.35) !important;
}

body.theme-dark .badge-gray {
  background: rgba(139, 148, 158, 0.18) !important;
  color: #8b949e !important;
  border: 1px solid rgba(139, 148, 158, 0.35) !important;
}

/* ============================================
   APLICAÇÃO DAS VARIÁVEIS (Compatibilidade)
   ============================================ */

/* Transição suave ao trocar tema */
body {
  transition: background-color var(--transition-speed) ease,
    color var(--transition-speed) ease;
}

/* Mapeamento de variáveis antigas para novas */
body {
  --primary: var(--primary-color);
  --primary-dark: var(--primary-hover);
  --success: var(--success-color);
  --danger: var(--danger-color);
  --warning: var(--warning-color);
  --bg: var(--bg-body);
  --surface: var(--bg-card);
  --border: var(--border-color);
  --text: var(--text-primary);
  --sidebar-w: var(--sidebar-width);
  --topbar-h: var(--topbar-height);
  --shadow: var(--shadow-md);
}

/* Garantir que o logo text use a variável correta */
.logo-text {
  color: var(--sidebar-logo-text) !important;
  transition: color var(--transition-speed) ease;
}

/* Removido o override agressivo do nav-group-label para que ele use a cor normal (var(--sidebar-text)) e não fique diferente dos nav-items comuns */

/* Garantir que o botão de toggle da sidebar também se adapte */
#sidebar-toggle {
  color: var(--sidebar-logo-text) !important;
  transition: color var(--transition-speed) ease;
}

#sidebar-toggle:hover {
  opacity: 0.8;
}

/* ============================================
   BOTÃO DE ALTERNÂNCIA DE TEMA
   ============================================ */
.theme-switcher-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient-primary);
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed) ease;
  overflow: hidden;
}

.theme-switcher-btn:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.theme-switcher-btn:active {
  transform: scale(0.95);
}

.theme-switcher-btn .icon {
  font-size: 24px;
  transition: transform var(--transition-speed) ease;
}

.theme-switcher-btn:hover .icon {
  transform: rotate(180deg);
}

/* Botão no Header (alternativa) */
.theme-switcher-header {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-primary);
}

.theme-switcher-header:hover {
  background: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.theme-switcher-header .icon {
  font-size: 16px;
  transition: transform var(--transition-speed) ease;
}

.theme-switcher-header:hover .icon {
  transform: rotate(180deg);
}

/* ============================================
   ANIMAÇÕES
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

body.theme-loading {
  animation: fadeIn 0.3s ease;
}

.theme-switcher-btn.switching {
  animation: pulse 0.6s ease;
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */
@media (max-width: 768px) {
  .theme-switcher-btn {
    width: 48px;
    height: 48px;
    bottom: 20px;
    right: 20px;
  }

  .theme-switcher-btn .icon {
    font-size: 20px;
  }
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */
.theme-switcher-btn:focus,
.theme-switcher-header:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   MODO DE IMPRESSÃO
   ============================================ */
@media print {

  .theme-switcher-btn,
  .theme-switcher-header,
  .theme-switcher-container {
    display: none !important;
  }
}

/* ============================================================
   TEMAS GESTAOPESSOAL (GP LIGHT / GP DARK)
   ============================================================ */

/* ── GP Light ── */
body.theme-gp-light {
  /* Cores de Marca & Destaque */
  --primary-color: #4a7cf0;
  --primary-hover: #8b5fe0;
  --primary-light: rgba(74, 124, 240, 0.12);

  --success-color: #12a37e;
  --danger-color: #e02424;
  --warning-color: #e8a03c;
  --info-color: #4a7cf0;

  /* Cores de Fundo */
  --bg-body: #e9ecf7;
  --bg-card: rgba(255, 255, 255, .74);
  --bg-surface: rgba(255, 255, 255, .74);
  --bg-hover: rgba(74, 124, 240, .07);

  /* Cores de Texto */
  --text-primary: #161b3d;
  --text-secondary: #5d6386;
  --text-muted: #9096b4;
  --text-white: #ffffff;

  /* Cores de Borda */
  --border-color: #d1d5db;
  --border-light: #e5e7eb;

  /* Sidebar - GP Style (Light Glass) */
  --sidebar-bg: rgba(255, 255, 255, .55) !important;
  --sidebar-text: #5d6386;
  --sidebar-hover: rgba(74, 124, 240, .07);
  --sidebar-active: #4a7cf0;
  --sidebar-border: rgba(26, 32, 74, .09);
  --sidebar-logo-text: #161b3d;

  /* Topbar */
  --topbar-bg: rgba(255, 255, 255, .74);
  --topbar-text: #161b3d;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(22, 27, 61, .05);
  --shadow-md: 0 10px 30px -12px rgba(22, 27, 61, .16);
  --shadow-lg: 0 14px 34px -14px rgba(22, 27, 61, .25);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #4a7cf0 0%, #8b5fe0 100%);
  --gradient-success: linear-gradient(135deg, #12a37e 0%, #37c9b8 100%);
  --gradient-danger: linear-gradient(135deg, #e02424 0%, #b91c1c 100%);
  --gradient-info: linear-gradient(135deg, #4a7cf0 0%, #8b5fe0 100%);

  --radius: 14px;
}

/* ── GP Dark ── */
body.theme-gp-dark {
  /* Cores de Marca & Destaque */
  --primary-color: #6b93f7;
  --primary-hover: #a483ee;
  --primary-light: rgba(107, 147, 247, 0.15);

  --success-color: #2cc194;
  --danger-color: #f85149;
  --warning-color: #f0b45c;
  --info-color: #6b93f7;

  /* Cores de Fundo */
  --bg-body: #0d1024;
  --bg-card: rgba(255, 255, 255, .055);
  --bg-surface: rgba(255, 255, 255, .055);
  --bg-hover: rgba(107, 147, 247, .12);

  /* Cores de Texto */
  --text-primary: #eceffb;
  --text-secondary: #a2a8cc;
  --text-muted: #6e75a0;
  --text-white: #ffffff;

  /* Cores de Borda */
  --border-color: rgba(255, 255, 255, .09);
  --border-light: rgba(255, 255, 255, .16);

  /* Sidebar - GP Style (Dark Glass) */
  --sidebar-bg: rgba(20, 24, 51, .55) !important;
  --sidebar-text: #a2a8cc;
  --sidebar-hover: rgba(107, 147, 247, .12);
  --sidebar-active: #6b93f7;
  --sidebar-border: rgba(255, 255, 255, .09);
  --sidebar-logo-text: #eceffb;

  /* Topbar */
  --topbar-bg: rgba(20, 24, 51, .74);
  --topbar-text: #eceffb;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 14px 34px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 20px 40px -15px rgba(0, 0, 0, .8);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #6b93f7 0%, #a483ee 100%);
  --gradient-success: linear-gradient(135deg, #2cc194 0%, #4fd8c7 100%);
  --gradient-danger: linear-gradient(135deg, #f85149 0%, #e02424 100%);
  --gradient-info: linear-gradient(135deg, #6b93f7 0%, #a483ee 100%);

  --radius: 14px;
}

/* ── Tipografia e visual específico para Temas GP ── */
body.theme-gp-light,
body.theme-gp-dark {
  font-family: 'Manrope', 'Segoe UI', sans-serif !important;
}

body.theme-gp-light h1,
body.theme-gp-light h2,
body.theme-gp-light h3,
body.theme-gp-light .page-title,
body.theme-gp-light .logo-text,
body.theme-gp-dark h1,
body.theme-gp-dark h2,
body.theme-gp-dark h3,
body.theme-gp-dark .page-title,
body.theme-gp-dark .logo-text {
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: -.3px !important;
}

/* Efeitos de Desfoque / Glassmorphism */
#global-header {
  background-color: rgb(102, 0, 153) !important;
}

#global-header h1 {
  color: #ffffff !important;
}

body.theme-gp-light #sidebar,
body.theme-gp-dark #sidebar {
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-right: 1px solid var(--border-color) !important;
}

body.theme-gp-light .card,
body.theme-gp-dark .card,
body.theme-gp-light .kpi-card,
body.theme-gp-dark .kpi-card {
  border-radius: var(--radius) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}

body.theme-gp-light .nav-item,
body.theme-gp-dark .nav-item,
body.theme-gp-light .nav-group-toggle,
body.theme-gp-dark .nav-group-toggle {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 8px 12px !important;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease !important;
  border-left: 3px solid transparent !important;
}

body.theme-gp-light .nav-group-toggle.nav-sub-toggle,
body.theme-gp-dark .nav-group-toggle.nav-sub-toggle {
  padding-left: 28px !important;
}

/* Hover: roxo idêntico ao Command Palette */
body.theme-gp-light .nav-item:hover,
body.theme-gp-light .nav-group-toggle:hover {
  background: rgba(102, 0, 153, 0.08) !important;
  color: rgb(102, 0, 153) !important;
  border-left-color: rgb(102, 0, 153) !important;
}

body.theme-gp-dark .nav-item:hover,
body.theme-gp-dark .nav-group-toggle:hover {
  background: rgba(102, 0, 153, 0.30) !important;
  color: #c4b5fd !important;
  border-left-color: #c4b5fd !important;
}

/* Ativo: mesma cor mas mais intenso */
body.theme-gp-light .nav-item.active {
  background: rgba(102, 0, 153, 0.12) !important;
  border-left: 3px solid rgb(102, 0, 153) !important;
  color: rgb(102, 0, 153) !important;
  font-weight: 700 !important;
}

body.theme-gp-dark .nav-item.active {
  background: rgba(102, 0, 153, 0.35) !important;
  border-left: 3px solid #c4b5fd !important;
  color: #c4b5fd !important;
  font-weight: 700 !important;
}




/* ============================================================
   ESTILOS DO DROP-DOWN SWITCHER DE TEMAS
   ============================================================ */

.theme-switcher-container {
  position: relative;
  display: inline-block;
  z-index: 1010;
}

.theme-dropdown-list {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 4px;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform-origin: top right;
  backdrop-filter: blur(12px);
}

.theme-dropdown-list.hidden {
  display: none !important;
}

.theme-dropdown-list button {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  color: var(--text-primary, #111827);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
  width: 100%;
  font-weight: 500;
}

.theme-dropdown-list button:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.theme-dropdown-list button.active {
  background: var(--primary-light, #e8f0fe);
  color: var(--primary-color, #1a56db);
  font-weight: 600;
}

/* Correção de transparência em formulários, inputs e modais no GP Light */
body.theme-gp-light input,
body.theme-gp-light select,
body.theme-gp-light textarea,
body.theme-gp-light #modal-box,
body.theme-gp-light .os-lookup-box,
body.theme-gp-light .fp-valores,
body.theme-gp-light .pagar-valores,
body.theme-gp-light .venda-totais,
body.theme-gp-light .fp-autocomplete-wrap .fp-ac-list {
  background: #ffffff !important;
  opacity: 1 !important;
}

/* ============================================================
   SIDEBAR — GRUPOS COLAPSÁVEIS (nova estrutura)
   ============================================================ */

/* Label de grupo clicável (colapsável) */
.nav-group-label.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding: 9px 14px;
  border-left: 3px solid transparent;
  transition: all .15s;
  color: var(--sidebar-text);
  text-transform: none;
  letter-spacing: normal;
}

.nav-group-label.nav-group-toggle:hover {
  background: var(--sidebar-active);
  color: #fff !important;
  border-left-color: var(--sidebar-active);
  opacity: 1;
}

/* Sub-toggle (Cad. Auxiliares, Cad. Vendas, etc.) */
.nav-group-label.nav-sub-toggle {
  font-size: 13px;
  padding-left: 28px;
  opacity: 1;
}

/* Seta do collapse */
.nav-group-caret {
  font-size: 14px;
  transition: transform 0.22s ease;
  display: inline-block;
}

.nav-group-label.nav-group-toggle.collapsed .nav-group-caret {
  transform: rotate(-90deg);
}

/* Container do corpo colapsável */
.nav-group-body {
  overflow: hidden;
  max-height: 600px; /* suficientemente grande para todos os itens */
  transition: max-height 0.28s ease, opacity 0.22s ease;
  opacity: 1;
}

.nav-group-body.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Sub-corpo (segundo nível: Cad. Auxiliares, etc.) */
.nav-group-body.nav-sub-body {
  background: transparent;
}

/* Itens de 1º nível dentro do grupo */
.nav-item.nav-sub {
  padding-left: 20px !important;
}

/* Itens de 2º nível (dentro de sub-toggles) */
.nav-item.nav-sub2 {
  padding-left: 36px !important;
}

/* Badge "Em breve" */
.badge-breve {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 150, 0, 0.18);
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.3);
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1.4;
}

/* Itens "em breve" têm cursor diferente e opacidade reduzida */
.nav-item[data-module="em_breve"] {
  opacity: 0.55;
  cursor: default;
  pointer-events: auto; /* mantém o título/tooltip */
}

.nav-item[data-module="em_breve"]:hover {
  background: transparent !important;
}