/* ==========================================================================
   ADVANCED MICRO — DASHBOARD MASTER v3 (HOVER-SIDEBAR + PAGE-TABS)
   Clean Soft Dark · No Rogue Styles · Single Source of Truth
   ========================================================================== */

/* ─── TOKENS ───────────────────────────────────────────────────────────── */
:root {
  --primary:       #6366f1;
  --primary-glow:  rgba(99,102,241,.15);
  --primary-dim:   rgba(99,102,241,.08);
  --success:       #10b981;
  --warning:       #f59e0b;
  --danger:        #f43f5e;

  --bg:            #0c0c0e;
  --bg-sidebar:    #111113;
  --bg-card:       #1c1c20;       /* visible surface — not nearly transparent */
  --bg-card-hover: #222226;
  --bg-sub:        rgba(255,255,255,.04);
  --bg-header:     rgba(12,12,14,.95);

  --border:        rgba(255,255,255,.09);
  --border-base:   rgba(255,255,255,.09);  /* alias for legacy HTML refs */
  --border-active: rgba(99,102,241,.4);

  --text-1:  #f4f4f5;   /* headings */
  --text-2:  #a1a1aa;   /* labels   */
  --text-3:  #71717a;   /* muted    */

  /* ⭐ ALIASES PARA COMPATIBILIDADE COM CÓDIGO LEGADO */
  --text-primary:    #f4f4f5;   /* = --text-1 */
  --text-secondary:  #a1a1aa;   /* = --text-2 */
  --text-muted:      #71717a;   /* = --text-3 */
  --bg-main:         #0c0c0e;   /* = --bg */
  --border-light:    rgba(255,255,255,.09);  /* = --border */
  --primary-light:   rgba(99,102,241,.15);   /* = --primary-glow */

  /* Radius aliases — DESIGN SYSTEM v2: cantos quadrados (0) */
  --radius-sm:  0;
  --radius-md:  0;   /* = --r-md */
  --radius-lg:  0;   /* = --r-lg */
  --radius-xl:  0;   /* = --r-xl */
  --r-sm:       0;   /* alias --radius-sm (legado) */
  --r-md:       0;   /* alias --radius-md (legado) */
  --r-lg:       0;   /* alias --radius-lg (legado) */
  --r-xl:       0;   /* alias --radius-xl (legado) */
  --radius:     0;

  /* Spacing tokens */
  --spacing-xs:  .25rem;
  --spacing-sm:  .5rem;
  --spacing-md:  1rem;
  --spacing-lg:  1.5rem;
  --spacing-xl:  2rem;
  --spacing-2xl: 2.5rem;
  --spacing-3xl: 3rem;

  /* Shadows */
  --shadow-sm:    0 1px 2px 0 rgba(0,0,0,.3);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4);
  --shadow-xl:    0 20px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.4);
  --shadow-premium: 0 20px 40px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.3);

  /* Glass effect */
  --glass-border: rgba(255,255,255,.08);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
  --transition-base: 200ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 300ms cubic-bezier(.4,0,.2,1);

  /* Gradients */
  --indigo-500: #6366f1;
  --violet-500: #8b5cf6;
  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --gradient-hardware: linear-gradient(90deg, #6366f1, #8b5cf6);

  --blur: blur(18px);

  --sidebar-w:  280px;
  --sidebar-sm:  84px;   /* icon-only centered */
  --header-h:    60px;

  --ease: cubic-bezier(.4,0,.2,1);
}

/* Global Placeholder Styling */
::placeholder {
  color: rgba(255, 255, 255, 0.04) !important;
  opacity: 1 !important;
}
:-ms-input-placeholder { color: rgba(255, 255, 255, 0.04) !important; }
::-ms-input-placeholder { color: rgba(255, 255, 255, 0.04) !important; }

/* ─── RESET ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; background: transparent; border: none; color: inherit; }
button { cursor: pointer; outline: none; }
a { color: inherit; text-decoration: none; }

html, body {
  height: 100vh; width: 100vw;
  overflow: hidden;
  background: var(--bg);
  color: var(--text-1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

/* ─── LAYOUT SHELL ─────────────────────────────────────────────────────── */
.dashboard-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR — Dynamic, Modern, Premium
   ═══════════════════════════════════════════════════════════════════════ */
.dashboard-sidebar {
  width: var(--sidebar-sm);
  min-width: var(--sidebar-sm);
  flex-shrink: 0;
  height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  box-shadow: 10px 0 30px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
    transition: width 0.6s var(--ease);
  z-index: 1000;
  position: relative;
}

/* Glass effect highlight on the edge */
.dashboard-sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(99,102,241,0.4), transparent);
  pointer-events: none;
}

/* Sidebar States & Modes */
.dashboard-sidebar:hover,
.dashboard-sidebar.sidebar-hover-open,
body.sidebar-mode-expanded .dashboard-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
}

/* Force Collapsed Mode */
body.sidebar-mode-collapsed .dashboard-sidebar,
body.sidebar-collapsed .dashboard-sidebar {
  width: var(--sidebar-sm) !important;
  min-width: var(--sidebar-sm) !important;
}

/* Disable Hover Expand in Collapsed Mode */
body.sidebar-mode-collapsed .dashboard-sidebar:hover,
body.sidebar-collapsed .dashboard-sidebar:hover {
  width: var(--sidebar-sm) !important;
}

/* ──── Sidebar Header (Logo Section) ──── */
.sidebar-header {
  height: 80px; /* Bit taller for elegance */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  transition: padding 0.3s var(--ease);
}

.dashboard-sidebar.collapsed .sidebar-header,
body.sidebar-mode-collapsed .sidebar-header,
body.sidebar-collapsed .sidebar-header {
  padding: 0;
  justify-content: center;
}

.logo-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s var(--ease);
}

.dashboard-sidebar.collapsed .logo-section,
body.sidebar-mode-collapsed .logo-section,
body.sidebar-collapsed .logo-section {
  justify-content: center;
}

.header-logo {
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.header-logo-compact {
  width: 54px;
  height: 54px;
  max-width: 54px;
}

.header-logo-full {
  display: none;
  width: calc(100% - 22px);
  height: 70px;
  max-width: 238px;
}

.dashboard-sidebar.collapsed .header-logo,
body.sidebar-mode-collapsed .header-logo,
body.sidebar-collapsed .header-logo {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
}

.dashboard-sidebar:hover .header-logo-compact,
body.sidebar-mode-expanded .header-logo-compact,
.dashboard-sidebar.sidebar-hover-open .header-logo-compact {
  display: none;
}

.dashboard-sidebar:hover .header-logo-full,
body.sidebar-mode-expanded .header-logo-full,
.dashboard-sidebar.sidebar-hover-open .header-logo-full {
  display: block;
}


.sidebar-nav {
  flex: 1;
  padding: 1rem 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.25rem;
}

.nav-tab {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  gap: 1rem;
  color: var(--text-2);
  transition: all 0.45s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
  text-align: left;
  position: relative;
  overflow: hidden;
}

/* Centering icons in collapsed mode */
.dashboard-sidebar.collapsed .nav-tab,
body.sidebar-mode-collapsed .nav-tab,
body.sidebar-collapsed .nav-tab {
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 16px;
    gap: 0;
    margin: 0 auto;
}

.nav-tab::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
  opacity: 0;
  transform: scaleY(0);
  transition: all 0.25s var(--ease);
}

.nav-tab:hover {
  background: rgba(255,255,255,0.03);
  color: var(--text-1);
  transform: translateX(4px);
}

.dashboard-sidebar.collapsed .nav-tab:hover,
body.sidebar-mode-collapsed .nav-tab:hover {
    transform: scale(1.05);
}

.nav-tab.active {
  background: var(--gradient-primary);
  color: #fff !important;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 4px 15px rgba(99,102,241,0.3);
}

.nav-tab.active::before {
  opacity: 1;
  transform: scaleY(1);
  background: #fff;
}

.tab-icon {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));
    transition: transform 0.45s var(--ease);
}
        /* Botão de edição de categoria (maior, com label oculto para acessibilidade) */
        .btn-card-edit {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            border-radius: 8px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.04);
            transition: all 0.18s ease;
        }
        .btn-card-edit:hover {
            transform: translateY(-2px);
            background: rgba(99,102,241,0.12);
            border-color: rgba(99,102,241,0.22);
            color: #fff;
        }

.nav-tab.active .tab-icon {
    transform: scale(1.1);
}

.tab-label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateX(-10px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.dashboard-sidebar:hover .tab-label,
body.sidebar-mode-expanded .tab-label,
.dashboard-sidebar.sidebar-hover-open .tab-label {
  opacity: 1;
  transform: translateX(0);
}

/* ──── Sidebar Footer ──── */
.sidebar-footer {
  padding: 1rem 0.75rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(0,0,0,0.1);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.3s var(--ease);
  overflow: hidden;
}

.dashboard-sidebar.collapsed .user-profile,
body.sidebar-mode-collapsed .user-profile {
    padding: 0.65rem 0;
    justify-content: center;
    border: none !important;
    border-color: transparent !important;
    background: transparent;
}

/* Quando a sidebar está recolhida, oculta o bloco de informações (nome/role)
   para que o ícone do botão "Minha Conta" fique perfeitamente centralizado */
.dashboard-sidebar.collapsed .user-info,
body.sidebar-mode-collapsed .user-info {
  display: none;
}

.user-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: none !important;
  box-shadow: none !important;
}

.sidebar-footer #myAccountLink,
.sidebar-footer .user-avatar.btn-icon-action,
.sidebar-footer .user-profile .btn-icon-action {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.sidebar-footer #myAccountLink:hover,
.sidebar-footer .user-avatar.btn-icon-action:hover,
.sidebar-footer .user-profile .btn-icon-action:hover {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.user-info {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s var(--ease);
  overflow: hidden;
}

.dashboard-sidebar:hover .user-info,
body.sidebar-mode-expanded .user-info {
  opacity: 1;
  transform: translateX(0);
}

.user-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info #userNameDisplay { font-weight: 700; color: var(--text-1); font-size: 0.85rem; }
.user-info .user-role { font-size: 0.7rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.btn-logout-sidebar {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(244,63,94,0.08);
  color: var(--danger);
  font-size: 0.9rem; font-weight: 700;
  gap: 1rem;
    transition: all 0.45s var(--ease);
  white-space: nowrap; overflow: hidden;
  border: 1px solid rgba(244,63,94,0.1);
}

.dashboard-sidebar.collapsed .btn-logout-sidebar,
body.sidebar-mode-collapsed .btn-logout-sidebar {
    justify-content: center;
    padding: 0.75rem 0;
    gap: 0;
}

.btn-logout-sidebar:hover {
  background: var(--danger);
  color: #fff;
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(244,63,94,0.3);
}

.btn-logout-sidebar .logout-label {
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.dashboard-sidebar:hover .btn-logout-sidebar .logout-label,
body.sidebar-mode-expanded .btn-logout-sidebar .logout-label {
    opacity: 1;
}

/* Quando a sidebar está recolhida: centralizar ícones e distribuir verticalmente */
.dashboard-sidebar.collapsed .sidebar-nav,
body.sidebar-mode-collapsed .sidebar-nav,
body.sidebar-collapsed .sidebar-nav {
    justify-content: space-evenly;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 0;
}

.dashboard-sidebar.collapsed .nav-tab,
body.sidebar-mode-collapsed .nav-tab,
body.sidebar-collapsed .nav-tab {
    justify-content: center;
    padding: 0.6rem 0;
    gap: 0;
    width: auto;
    min-width: 0;
}

.btn-logout-sidebar .logout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.dashboard-sidebar.collapsed .btn-logout-sidebar .logout-icon,
body.sidebar-mode-collapsed .btn-logout-sidebar .logout-icon,
body.sidebar-collapsed .btn-logout-sidebar .logout-icon {
    margin-right: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTENT AREA - LAYOUT PRINCIPAL DO DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */
   
.dashboard-content {
  flex: 1;
  display: flex;
  flex-direction: column !important; /* ⭐ Blindado: garante header-top / main / footer-base */
  height: 100vh;
  min-height: 100vh;
  min-width: 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* ── Header (altura fixa, não encolhe) ── */
.dashboard-header {
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  max-height: var(--header-h) !important;
  flex: 0 0 var(--header-h) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  background: rgba(18, 18, 20, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  z-index: 900;
}

/* ── Main (ocupa espaço restante, scroll interno nas tabs) ── */
.dashboard-main {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* ── Tab Content (scroll interno independente) ── */
.dashboard-main .tab-content {
  display: none;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 2rem 2rem 3rem;
  scrollbar-gutter: stable;
}

.dashboard-main .tab-content.active {
  display: block;
}

/* ── Footer (altura sincronizada com o header) ── */
.dashboard-footer {
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  max-height: var(--header-h) !important;
  flex: 0 0 var(--header-h) !important;
  flex-shrink: 0 !important; /* ⭐ Blindado: nunca encolhe nem vira coluna lateral */
  align-self: stretch;
  position: relative;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  padding: 0 1.5rem !important;
  background: rgba(12, 12, 14, 0.98);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: row !important; /* Row para ficar linear como o header */
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  z-index: 100;
}
.dashboard-header .header-actions { gap: .85rem; }
.dashboard-header .header-breadcrumb { gap: .85rem; }
.dashboard-header .menu-trigger-mobile {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-1, #f4f4f5);
  font-size: 1.25rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  z-index: 10;
}
.dashboard-header .menu-trigger-mobile:hover,
.dashboard-header .menu-trigger-mobile:active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(99, 102, 241, 0.4);
}

.desktop-hidden { display: none !important; }
@media (max-width: 900px) { .desktop-hidden { display: flex !important; } }

.header-breadcrumb {
  display: flex; align-items: center; gap: .75rem;
  font-size: .85rem; color: var(--text-3);
  letter-spacing: 0.02em;
}
.header-breadcrumb .separator {
  opacity: 0.3;
  font-size: 0.7rem;
}
.header-breadcrumb #breadcrumbTab { 
  color: var(--text-1); 
  font-weight: 700; 
  background: rgba(255,255,255,0.05);
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}

.header-actions { 
  display: flex; 
  align-items: center; 
  gap: .75rem; 
}

.btn-icon-action {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: background .2s, border-color .2s;
  box-sizing: border-box;
}
/* ── Botão Super Admin no Header (Apenas Master) ── */
.superadmin-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  min-width: 36px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.28);
  color: #818cf8;
  text-decoration: none;
  font-size: 1.05rem;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.superadmin-header-btn:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
  transform: translateY(-1px) scale(1.05);
  color: #a5b4fc;
}

.superadmin-header-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Indicador de Conexão (Botão Redondo expansível no Hover) ── */
.connection-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
  transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              gap 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.connection-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 10px rgba(100, 116, 139, 0.3);
  position: relative;
  flex-shrink: 0;
}

.connection-pill .label {
  max-width: 0;
  opacity: 0;
  transform: translateX(-6px);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  display: inline-block;
  transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              transform 0.25s ease;
}

/* Conectado (Online) */
.connection-pill.online {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #10b981;
}
.connection-pill.online .dot { 
  background: #10b981; 
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); 
}
.connection-pill.online .dot::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-success 2s infinite;
}

@keyframes pulse-success {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Desconectado (Offline) */
.connection-pill.offline {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}
.connection-pill.offline .dot { 
  background: #ef4444; 
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5); 
}
.connection-pill.offline .dot::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Hover: Transforma no botão/pill completo e mostra o texto */
.connection-pill:hover {
  max-width: 200px;
  width: auto;
  padding: 0 .95rem;
  gap: .55rem;
}
.connection-pill:hover .label {
  max-width: 140px;
  opacity: 1;
  transform: translateX(0);
}
.connection-pill.online:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.2);
}
.connection-pill.offline:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}

/* ── Badge Sempre Expandido (monitor de versão do Baileys) ── */
.version-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 .8rem;
  border-radius: 9999px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
  border: 1px solid;
}

/* ── Badge da Instância (Alinhado na mesma altura 36px) ── */
.instance-indicator-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 36px;
  padding: 0 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  box-sizing: border-box;
  user-select: none;
  transition: all 0.25s var(--ease);
}
.instance-indicator-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.04);
}
.instance-indicator-pill strong {
  color: var(--text-1);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   MAIN  — page-like tabs, NO global scroll
   ═══════════════════════════════════════════════════════════════════════ */
.dashboard-main {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Garantir que tab-content preencha corretamente */
.dashboard-main .tab-content {
  /* Regras consolidadas acima */
}

/* Prevenir overflow em abas específicas */
.dashboard-main .tab-content > *:first-child {
  margin-top: 0;
}

/* Garantir que section-header-main seja elegante e role com a página */
.dashboard-main .section-header-main {
  position: relative;
  margin: -2rem -2rem 2.5rem -2rem; /* Mantém encostado no topo e laterais do padding do pai */
  padding: 2rem 2rem;
  background: linear-gradient(to bottom, rgba(12, 12, 14, 0.8) 0%, rgba(12, 12, 14, 0.4) 100%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

/* Efeito de destaque para cabeçalhos em abas específicas */
.dashboard-main .tab-content.admins .section-header-main,
.dashboard-main .tab-content.products .section-header-main,
.dashboard-main .tab-content.settings .section-header-main {
  background: linear-gradient(to bottom, rgba(12, 12, 14, 0.9) 0%, rgba(12, 12, 14, 0.7) 100%);
}

/* Prevenir overflow horizontal */
.dashboard-main .tab-content {
  max-width: 100%;
  box-sizing: border-box;
}

.dashboard-footer .footer-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* Voltando para column para as 2 linhas */
  gap: 2px; /* Gap mínimo para caber em 60px */
  align-items: center;
  justify-content: center;
}
.dashboard-footer .footer-content p {
  margin: 0;
  font-size: 0.78rem; /* Ligeiramente menor */
  color: var(--text-3);
  line-height: 1.2; /* Line-height reduzido para caber 2 linhas */
}
.dashboard-footer .footer-content a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.dashboard-footer .footer-content a:hover {
  text-decoration: underline;
}
.dashboard-footer .footer-version {
  font-size: 0.75rem !important;
  opacity: 0.6;
  font-weight: 500;
}

.dashboard-footer p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.dashboard-footer p a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  border-bottom: 1px solid transparent;
}

.dashboard-footer p a:hover {
  color: var(--primary-light);
  border-bottom-color: var(--primary);
  opacity: 0.9;
}

@media (max-width: 768px) {
  .dashboard-footer .footer-content {
    flex-direction: column;
    gap: 0.5rem;
  }
}

.back-to-top-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.back-to-top-fab--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-fab--disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.back-to-top-fab:hover {
  transform: translateY(-2px);
}

.back-to-top-fab-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.zn-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zn-input-group label {
  font-weight: 600;
  color: var(--text-1);
  font-size: 0.95rem;
}

.zn-input-group input,
.zn-input-group select,
.zn-input-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text-1);
}

.zn-input-group input:focus,
.zn-input-group select:focus,
.zn-input-group textarea:focus {
  border-color: rgba(99,102,241,.4);
  outline: none;
}

.dashboard-toggle-setting {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  padding: 0.95rem 1rem;
  cursor: pointer;
}

.dashboard-toggle-input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.dashboard-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dashboard-toggle-title {
  font-weight: 700;
  color: var(--text-1);
}

.dashboard-toggle-copy small {
  color: var(--text-3);
  font-size: 0.85rem;
}

.color-pickers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}

.color-picker-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.color-picker-group label {
  color: var(--text-1);
  font-weight: 600;
}

.color-picker-group input[type="color"] {
  width: 100%;
  height: 46px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.12);
  padding: 0;
}

.color-picker-group small {
  color: var(--text-3);
}

.slider-input {
  width: 100%;
  accent-color: var(--primary);
}

.live-preview-container {
  width: 100%;
}

.config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.preview-box {
  min-height: 120px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 1rem;
  color: var(--text-1);
}

/* Each tab is a full-height page */
.tab-content {
  display: none;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem;
}

.tab-content.active {
  display: block;
  animation: fadeUp .22s var(--ease);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-content { padding: 2rem 2rem 2.5rem; }
.section-divider { border: none; border-bottom: 1px solid rgba(255,255,255,.08); margin: 2rem 0; }

/* ═══════════════════════════════════════════════════════════════════════
   GENERIC CARD
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   GLOBAL ZINC COMPONENT LIBRARY
   Standardized components for a consistent premium feel.
   ═══════════════════════════════════════════════════════════ */

/* --- Zinc Cards --- */
.zn-card {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.zn-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: var(--shadow-premium);
    transform: translateY(-4px);
    background: var(--bg-card-hover);
}

.zn-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
    opacity: 0.5;
}

/* --- Zinc Provider Grid & Cards --- */
.AI-provider-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.zn-card-provider {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.zn-card-provider:hover {
    border-color: rgba(99, 102, 241, 0.5);
    background: var(--bg-card-hover);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.zn-card-provider.active {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}

.zn-card-provider.active::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 12px;
    background: var(--primary);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

/* --- Zinc Greeting Cards --- */
.greeting-type-card:hover {
    border-color: var(--primary) !important;
    background: var(--bg-card-hover) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.greeting-type-card div:first-child {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.greeting-type-card:hover div:first-child {
    transform: scale(1.2);
}

.ai-charts-section .ai-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.ai-charts-section .ai-chart-card {
    background: var(--bg-card);
    border-color: var(--border);
}

.ai-charts-section .chart-panel {
    min-height: 260px;
}

.ai-charts-section .ai-chart-card h4 {
    margin-bottom: 1rem;
    color: var(--text-2);
    font-size: 0.95rem;
}

.stat-card--primary {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.15);
}

.stat-card--success {
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.2);
}

.stat-card--info {
    background: rgba(139,92,246,.08);
    border-color: rgba(139,92,246,.2);
}

.stat-card--warning {
    background: rgba(245,158,11,.08);
    border-color: rgba(245,158,11,.2);
}

.stat-number--primary { color: var(--primary); }
.stat-number--success { color: var(--success); }
.stat-number--info { color: #8b5cf6; }
.stat-number--warning { color: var(--warning); }

.zn-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.zn-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* --- Zinc Tables --- */
.zn-table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--border-base);
    background: rgba(9, 9, 11, 0.5);
}

.zn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.zn-table th {
    background: rgba(24, 24, 27, 0.8);
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-base);
    white-space: nowrap;
}

.zn-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(39, 39, 42, 0.5);
    background: transparent;
    transition: background 0.2s;
}

.zn-table tr:last-child td {
    border-bottom: none;
}

.zn-table tr:hover td {
    background: rgba(39, 39, 42, 0.3);
}

/* --- Zinc Accordions (SISTEMA UNIFICADO) --- */
/* ⭐ Este é o sistema PRIMÁRIO de accordions - todos os outros devem usar este */
.zn-accordion,
.vanguard-accordion {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.02);
    margin-bottom: 1rem;
    overflow: visible;
    transition: border-color .2s ease, transform .2s ease;
}

.zn-accordion:hover,
.vanguard-accordion:hover {
    border-color: rgba(99,102,241,.16);
}

.zn-accordion-header,
.vanguard-accordion-header {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
    background: rgba(255, 255, 255, 0.03);
}

.zn-accordion-header:hover,
.vanguard-accordion-header:hover {
    background: rgba(39, 39, 42, 0.5);
    border-color: var(--primary);
}

.zn-accordion-header.active,
.vanguard-accordion-header.active,
.zn-accordion-header.expanded,
.vanguard-accordion-header.expanded {
    background: rgba(99, 102, 241, 0.05);
    border-bottom: 1px solid var(--border-base);
}

.zn-accordion-content,
.vanguard-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    display: block;
    padding: 0 1.5rem;
    opacity: 0;
    visibility: hidden;
}

.zn-accordion-content.expanded,
.vanguard-accordion-content.expanded {
    /* max-height será definido dinamicamente via JavaScript */
    padding: 1.5rem;
    opacity: 1;
    visibility: visible;
}

/* Limitar altura do painel de Perguntas Pendentes e ativar rolagem quando necessário */
.pending-faq-panel.expanded {
    max-height: 65vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* Learned FAQs list: limitar altura e ativar rolagem mantendo o padrão visual */
.learned-faq-list {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.75rem; /* espaço para scrollbar */
}

/* Área de resposta dentro do card: limitar e permitir rolagem internamente */
.faq-answer {
    color: var(--text-2);
    font-size: 0.875rem;
    line-height: 1.6;
    max-height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

/* Espaçamento para o botão de exclusão definitiva nas perguntas desabilitadas */
.pending-delete-disabled-btn {
    min-width: 120px;
}

/* ⭐ Compatibilidade para chevron/ícone de toggle */
.zn-accordion-chevron,
.zn-accordion-icon,
.vanguard-chevron {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    font-size: 0.85rem;
    color: var(--text-3);
    min-width: 16px;
    text-align: center;
}

.zn-accordion.expanded .zn-accordion-chevron,
.zn-accordion.expanded .zn-accordion-icon,
.zn-accordion.expanded .vanguard-chevron {
    transform: rotate(90deg);
}

.zn-accordion-content-inner {
    padding: 0;
}

/* ⭐ Quando dentro de accordion expandido, adicionar espaçamento */
.zn-accordion-content.expanded .zn-accordion-content-inner {
    padding: 0.5rem 0;
}

.settings-accordions-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
}

.settings-accordions-group .zn-accordion,
.settings-accordions-group .vanguard-accordion,
.settings-accordions-group > .zn-accordion,
.settings-accordions-group > div > .zn-accordion {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

#adminsMasterBlock,
#adminsRestrictedBlock {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.section-description {
    color: var(--text-3);
    max-width: 68ch;
    line-height: 1.8;
    margin: .75rem 0 0;
    font-size: 0.95rem;
}



.section-subtitle {
    color: var(--text-3);
    font-size: .95rem;
    margin-top: .5rem;
    max-width: 72ch;
}

.groq-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.groq-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.groq-column .column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}
.groq-column .column-header h3 {
    font-size: 1rem;
    margin: 0;
}

@media (min-width: 980px) {
    .groq-dashboard-grid { grid-template-columns: 1fr 1fr; }
    .groq-layout-columns { grid-template-columns: 1fr 1fr; }
}

.zn-accordion-chevron.rotated,
.vanguard-chevron.rotated,
.vanguard-chevron.expanded {
    transform: rotate(180deg);
}

/* --- Zinc Stat Grid --- */
.zn-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
    width: 100%;
}

.zn-card-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.zn-card-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.1);
}

.stat-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
}

.stat-value.warning { color: var(--warning); }
.stat-value.primary { color: var(--primary); }
.stat-value.success { color: var(--success); }

.stat-label {
    font-size: 0.75rem;
    color: var(--text-3);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.stat-detail {
    font-size: 0.7rem;
    color: var(--text-3);
    opacity: 0.7;
}

/* --- Zinc Hardware Grid (Horizontal Layout) --- */
.zn-hardware-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}

@media (max-width: 1200px) {
    .zn-hardware-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .zn-hardware-grid {
        grid-template-columns: 1fr;
    }
}

.zn-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
}

.info-row-modern {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.85rem 1.25rem;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.info-row-modern:hover {
    background: rgba(255, 255, 255, 0.04);
}

.info-modern-label {
    font-size: 0.85rem;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.info-modern-value {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-1);
}

.info-modern-value.primary { color: var(--primary); }
.info-modern-value.success { color: var(--success); }
.info-modern-value.muted { 
    color: var(--text-2); 
    font-weight: 500;
    font-size: 0.85rem;
}

/* --- Zinc Badges --- */
.zn-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.zn-badge-success { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.zn-badge-warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); }
.zn-badge-danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.zn-badge-danger { background: rgba(244, 63, 94, 0.1); color: var(--danger); border: 1px solid rgba(244, 63, 94, 0.2); }

/* Toggle individual de produto */
.product-toggle-switch {
    width: 40px !important;
    height: 22px !important;
}

.product-toggle-switch .toggle-slider {
    border-radius: 22px !important;
}

.product-toggle-switch .toggle-slider::before {
    width: 16px !important;
    height: 16px !important;
    top: 2px !important;
    left: 2px !important;
}

.product-toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px) !important;
}

/* --- Zinc Form Utilities --- */
.zn-label-modern {
    font-size: 0.85rem;
    color: var(--text-2);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.zn-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 0.5rem;
}

.zn-hint a {
    color: var(--primary);
    font-weight: 600;
}

.zn-hint a:hover {
    text-decoration: underline;
}

.zn-control-label-flex {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}

.zn-control-label-flex:hover {
    opacity: 0.8;
}

.zn-control-label-flex input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 0.2rem;
    accent-color: var(--primary);
}

.zn-control-label-flex div strong {
    display: block;
    color: var(--text-1);
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.zn-control-label-flex div p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-3);
}

.form-actions-right {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
}

.form-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* --- Hardware Bars --- */
.hardware-bar {
    height: 8px;
    background: rgba(39, 39, 42, 0.5);
    border-radius: 999px;
    margin: 0.75rem 0;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hardware-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--indigo-500), var(--violet-500));
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

.hardware-card label {
    font-size: 0.75rem;
    color: var(--text-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hardware-card-modern {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.hardware-card-modern:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

.hardware-card-modern label {
    font-size: 0.7rem;
    color: var(--text-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hardware-card-modern span {
    font-size: 1.1rem;
    color: var(--text-1);
    font-weight: 700;
    margin: 0.25rem 0 0.5rem 0;
}

.hardware-card span {
    font-size: 0.95rem;
    color: var(--text-1);
    font-weight: 700;
    font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* --- Storage Sections --- */
.storage-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.storage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}

@media (max-width: 1200px) {
    .storage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .storage-grid {
        grid-template-columns: 1fr;
    }
}

.storage-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.storage-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

.storage-label {
    font-size: 0.7rem;
    color: var(--text-3);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.storage-value {
    font-size: 1.25rem;
    color: var(--text-1);
    font-weight: 700;
    font-family: inherit;
}

.storage-percentage {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--indigo-400);
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
}

.autonomy-info {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(245, 158, 11, 0.05);
    border-radius: var(--r-md);
    border-left: 3px solid #f59e0b;
}

.autonomy-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-2);
}

.optimize-section {
    margin-top: 1.5rem;
    text-align: left;
}

.btn-optimize {
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    background: linear-gradient(135deg, var(--warning) 0%, #ea580c 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.02em;
}

.btn-optimize:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    filter: brightness(1.1);
}

.btn-optimize:active {
    transform: translateY(0);
}

/* --- QR Code Centering --- */
.qrcode-centering-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    min-height: 400px;
}

/* Re-using existing styles but ensuring compatibility */
.status-section {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    margin-bottom: 2rem;
}
.card, .status-card, .config-section, .settings-section,
.behavior-card, .vanguard-accordion, .bot-controls,
.product-card, .ia-section, .groq-card, .vanguard-card {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-md);
  color: var(--text-1);
  position: relative;
  overflow: hidden;
}

.card:hover, .status-card:hover, .config-section:hover, .settings-section:hover,
.behavior-card:hover, .vanguard-accordion:hover, .bot-controls:hover,
.product-card:hover, .ia-section:hover, .groq-card:hover, .vanguard-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: var(--shadow-premium);
  background: var(--bg-card-hover);
}

.card::before, .status-card::before, .vanguard-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before, .status-card:hover::before, .vanguard-card:hover::before {
  opacity: 1;
}

/* Card headings */
.card h3, .status-card h3, .config-section h3, .settings-section h3 {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 1.125rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* ═══════════════════════════════════════════════════════════ */
/* CONSISTÊNCIA VISUAL UNIFICADA                             */
/* ═══════════════════════════════════════════════════════════ */

/* Títulos de seções com tamanho consistente */
.settings-section h3,
.status-section h3,
.config-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-1);
    margin: 0 0 1rem;
}

.settings-section h4,
.status-section h4,
.config-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-1);
    margin: 1.5rem 0 0.75rem;
}

/* Títulos de cards */
.zn-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
}

/* Parágrafos descritivos */
.section-note,
.form-caption {
    color: var(--text-3);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Divisores de seção */
.section-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin: 2rem 0;
}

/* ═══════════════════════════════════════════════════════════ */
/* AI PROVIDERS - Estilos para conteúdo dinâmico              */
/* ═══════════════════════════════════════════════════════════ */

.zn-section {
    margin-bottom: 2rem;
}

.zn-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-1);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zn-section-desc {
    color: var(--text-3);
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
    line-height: 1.6;
}

/* Grid de provedores */
.zn-grid {
    display: grid;
    gap: 1.25rem;
}

.zn-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.zn-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.zn-grid-4 {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

@media (min-width: 1400px) {
    .zn-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Card de provedor selecionado */
.selected-provider {
    border-color: var(--primary) !important;
    background: rgba(99, 102, 241, 0.08) !important;
}

/* ─── BUTTONS — Unified & Modernized ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Variants */
.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    filter: brightness(1.1);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-2);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.1); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); box-shadow: 0 4px 15px rgba(244, 63, 94, 0.3); }

.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover { filter: brightness(1.1); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }

/* Sizes */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-radius: 6px;
    gap: 0.45rem;
}

.btn-primary-sm { @extend .btn; @extend .btn-sm; @extend .btn-primary; } /* Composite helper logic if needed */
.btn-secondary-sm { @extend .btn; @extend .btn-sm; @extend .btn-secondary; }

/* Actual classes for JS/HTML */
.btn-success-sm { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.8rem; background: var(--success); color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.btn-danger-sm { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.8rem; background: var(--danger); color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.btn-primary-sm { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.8rem; background: var(--primary); color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.btn-secondary-sm { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.8rem; background: rgba(255,255,255,0.05); color: var(--text-2); display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); transition: all 0.2s; }

.btn-success-sm:hover, .btn-danger-sm:hover, .btn-primary-sm:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-secondary-sm:hover { background: rgba(255,255,255,0.1); color: var(--text-1); transform: translateY(-1px); }
.btn-secondary-sm.active { background: #7c3aed !important; border-color: #a855f7 !important; color: #ffffff !important; }

/* Grupos de input */
.zn-input-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.zn-input-group.layout-row {
    flex-direction: row;
    align-items: center;
}

.zn-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--text-3);
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}

/* Ajuste para inputs que têm ícone */
.zn-input-group:has(.zn-input-icon) input,
.zn-input-group:has(.zn-input-icon) .zn-input {
    padding-left: 2.85rem !important;
}

.zn-input-group input[type="text"],
.zn-input-group input[type="password"],
.zn-input-group input[type="email"],
.zn-input,
.zn-select,
.zn-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-1);
    font-size: 0.95rem;
    transition: all 0.2s;
}

.zn-input-group input:focus,
.zn-textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
}

.zn-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
    padding-right: 3rem !important;
}

.zn-select:focus {
    outline: none;
    border-color: var(--primary);
    background-color: rgba(255, 255, 255, 0.05);
}

/* ── Section page header (PADRÃO UNIFICADO) ── */
.section-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-header-main > div:first-child {
  flex: 1;
  min-width: 0;
}

.section-header-main h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
  color: var(--text-1);
}

.section-header-main .section-description {
  color: var(--text-3);
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 75ch;
}

.section-header-main .section-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .section-header-main {
    flex-direction: column;
    align-items: stretch;
  }
  
  .section-header-main .section-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .section-header-main h2 {
    font-size: 1.5rem;
  }
}

.section-header-premium {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
  padding: 1rem 1.25rem; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg);
}
.section-header-premium .section-title-group h2 { margin: 0; font-size: 1.4rem; }
.section-header-premium .section-title-group p { margin: .5rem 0 0; color: var(--text-3); font-size: .95rem; }
.section-header-premium .section-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.groq-dashboard-grid { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.groq-dashboard-grid .groq-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); padding: 1.5rem; }
.groq-dashboard-grid .groq-card h3 { margin-bottom: 1rem; font-size: 1.05rem; color: var(--text-1); }
.groq-dashboard-grid .token-stats-premium { display: grid; grid-template-columns: repeat(3, minmax(120px,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.groq-dashboard-grid .token-stats-item { display: flex; flex-direction: column; gap: .4rem; }
.groq-dashboard-grid .token-stats-item .label { color: var(--text-3); font-size: .85rem; }
.groq-dashboard-grid .token-stats-item .value { font-size: 1.6rem; font-weight: 700; color: var(--text-1); }

.groq-layout-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.groq-column { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; }
.groq-column .column-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.groq-column .column-header h3 { margin: 0; font-size: 1rem; }
.groq-column .count-badge { background: rgba(99,102,241,.12); color: var(--primary); padding: .35rem .85rem; border-radius: 999px; font-size: .8rem; }

@media (max-width: 980px) {
  .groq-layout-columns { grid-template-columns: 1fr; }
}

.products-header,
.products-search-wrapper,
.products-section,
.admin-header,
.config-grid,
.settings-section,
.qrcode-container,
.qrcode-display,
.qrcode-info,
.loading-state {
    width: 100%;
}

.zn-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
    gap: 1rem;
}

.faq-mode-tab {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: var(--text-1);
    transition: background .2s, border-color .2s, transform .2s;
}
.faq-mode-tab:hover,
.faq-mode-tab.active {
    background: rgba(99,102,241,.15);
    border-color: rgba(99,102,241,.35);
    transform: translateY(-1px);
}

.btn-copy-mode {
    background: rgba(255,255,255,.06);
    color: var(--text-1);
    border: 1px solid rgba(255,255,255,.08);
}
.btn-copy-mode:hover {
    background: rgba(255,255,255,.12);
}

.products-header {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
    width: 100%;
}
.products-search-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 2; /* Search takes more space */
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 1rem;
    height: 48px;
    transition: var(--transition-base);
}
.products-search-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.products-search {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-1);
    font-size: 0.95rem;
    outline: none;
}
    min-width: 0;
}
.products-search::placeholder {
    color: rgba(255,255,255,.04);
}
.btn-clear-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    color: var(--text-2);
}
.btn-clear-filter:hover { background: rgba(255,255,255,.1); }

.products-status-filter {
    flex: 1;
    min-width: 0;
    height: 48px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-2);
    padding: 0 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-base);
}
.products-status-filter:hover {
    border-color: var(--border-active);
    background: var(--bg-card-hover);
}
.products-status-filter:focus {
    outline: none;
    border-color: var(--primary);
}

.results-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.95rem;
    background: rgba(99,102,241,.12);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: var(--text-1);
}
.data-table th,
.data-table td {
    padding: 0.95rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
}
.data-table th {
    color: var(--text-2);
    font-weight: 700;
}
.data-table tbody tr:hover {
    background: rgba(255,255,255,.02);
}

.banner-card {
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.accordion-header-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.accordion-header-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.accordion-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-1);
    font-weight: 700;
}

.accordion-desc {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--text-3);
}

.stat-card {
    text-align: center;
    border-radius: var(--r-xl);
    padding: 1.3rem;
    min-height: 170px;
}

.stat-card .stat-icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.stat-card .stat-number {
    font-size: 1.5rem;
    font-weight: 800;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-3);
    margin-top: 0.25rem;
}

.zn-table-container {
    overflow-x: auto;
    border-radius: var(--r-xl);
    border: 1px solid rgba(255,255,255,.08);
    background: var(--bg-card);
}

.zn-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

.zn-table th,
.zn-table td {
    padding: 0.95rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
}

.zn-table th {
    color: var(--text-2);
    font-weight: 700;
}

.table-header-center th {
    text-align: center;
}

.table-header-right th {
    text-align: right;
}

.table-empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-3);
}

.section-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1.5rem;
}

.section-panel h4,
.section-panel h5 {
    margin: 0 0 1rem 0;
    color: var(--text-2);
}

.schedule-card,
.holiday-type-card,
.accent-box,
.custom-messages-panel,
.toggle-setting-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
}

.schedule-card {
    justify-content: space-between;
}

.schedule-card .schedule-info,
.holiday-type-card .holiday-info {
    flex: 1;
}

.schedule-day-title,
.holiday-type-title,
.toggle-setting-label {
    font-weight: 600;
}

.time-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.time-row label {
    color: #94a3b8;
    font-size: 0.85rem;
}

.schedule-controls,
.holiday-options-grid,
.custom-messages-grid,
.form-actions-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.holiday-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
}

.holiday-type-card {
    align-items: flex-start;
}

.holiday-type-card input[type="checkbox"] {
    flex-shrink: 0;
}

.custom-messages-panel {
    display: grid;
    gap: 1rem;
}

.behavior-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
}

.behavior-card .zn-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.behavior-card .zn-card-title {
    margin: 0;
    font-size: 1rem;
}

.behavior-banner {
    margin-bottom: 2rem;
    border-color: var(--primary-glow);
    background: var(--primary-dim);
}

.feature-banner {
    margin-bottom: 2rem;
    border-color: var(--primary-glow);
    background: var(--primary-dim);
}

.feature-banner p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.9rem;
    line-height: 1.6;
}

.confidence-panel {
    margin-top: 1rem;
}

.confidence-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.confidence-row label {
    font-weight: 600;
}

.confidence-legend {
    margin-top: 0.75rem;
    color: #95a5a6;
}

.semantic-toggle-panel {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.92);
    border-radius: 10px;
    border: 1px solid rgba(79, 124, 255, 0.12);
}

.semantic-toggle-stream {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

.toggle-card-content {
    flex: 1;
}

.toggle-card-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.toggle-card-description {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.semantic-label-active,
.semantic-label-inactive {
    font-size: 0.85rem;
    font-weight: 600;
}

.panel-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    align-items: center;
}

.panel-buttons-row button {
    min-width: 180px;
}

.behavior-description {
    color: var(--text-2);
    font-size: 0.9rem;
    line-height: 1.6;
    min-height: 4.5rem;
}

.behavior-edit-area {
    display: none;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-light);
    padding-top: 1.5rem;
}

.behavior-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.selected-behavior-box {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-xl);
    padding: 1rem;
    min-height: 96px;
}

.confidence-panel,
.semantic-toggle-card,
.copy-mode-panel,
.search-bar-panel,
.pending-faq-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1rem;
}

.confidence-panel h4,
.semantic-toggle-card h4,
.copy-mode-panel h4 {
    margin: 0 0 0.75rem 0;
    color: var(--text-2);
}

.confidence-actions,
.semantic-actions,
.copy-mode-actions,
.search-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Confidence and Semantic Search --- */
.confidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.confidence-mode-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    transition: all 0.3s ease;
}

.confidence-mode-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

.confidence-mode-card.active {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}

.mode-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.mode-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-1);
}

.mode-desc {
    font-size: 0.8rem;
    color: var(--text-3);
    line-height: 1.5;
}

.semantic-toggle-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.semantic-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: var(--r-xl);
    transition: all 0.2s;
}

.semantic-toggle-row:hover {
    background: rgba(255,255,255,.04);
}

.semantic-toggle-row .toggle-label-active,
.semantic-toggle-row .toggle-label-inactive {
    font-size: 0.85rem;
    font-weight: 600;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--gradient-primary);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px var(--primary-glow);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(24px);
}

/* ==========================
   Modernização de Listas
   Aplica um visual mais atual a listas e selects do Dashboard
   ========================== */
.zn-list,
.interactions-list,
.keys-list-vanguard,
.keys-list-zinc,
.performance-list-vanguard,
#backupsList {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.35rem;
}

.zn-list > *,
.interactions-list > *,
.keys-list-vanguard > *,
.keys-list-zinc > *,
.performance-list-vanguard > *,
#backupsList > * {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: transform 0.18s var(--transition-fast), box-shadow 0.18s var(--transition-fast), background 0.18s;
}

.zn-list > *:hover,
.interactions-list > *:hover,
.keys-list-vanguard > *:hover,
.keys-list-zinc > *:hover,
.performance-list-vanguard > *:hover,
#backupsList > *:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    background: var(--bg-card-hover);
}

/* Modernizar selects usados no Dashboard */
.zn-select-modern,
.zn-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1rem;
    padding-right: 2.8rem !important;
    padding-left: 1rem;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background-color: rgba(255,255,255,0.02);
    color: var(--text-1);
    font-weight: 600;
}

.zn-select-modern:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(99,102,241,0.08);
}

/* Botão de remover modelo (padronizar aparência) */
.btn-remove-model {
    background: transparent;
    border: 1px solid transparent;
    color: var(--danger);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
}
.btn-remove-model:hover { background: rgba(244,63,94,0.06); transform: translateY(-1px); }

/* ==================================================================
   Forçar contraste e aparência consistente das dropdowns/options
   Aplica-se a todos os selects e options no Dashboard para evitar
   fundos claros / texto esmaecido (problema visual relatado).
   ================================================================== */

/* Forçar cores e background das opções (Chrome/Electron) */
select, .zn-select, .zn-select-modern, select.zn-select-modern {
    color: var(--text-1) !important;
    background-color: var(--bg-card) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Estilizar items da lista (quando possível pelo browser) */
select option, .zn-select option, .zn-select-modern option {
    color: var(--text-1) !important;
    background-color: var(--bg-card) !important;
    padding: 6px 10px;
}

/* Estado selecionado e hover das options */
select option:checked,
select option[selected],
.zn-select option:checked,
.zn-select-modern option:checked {
    background: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08)) !important;
    color: #fff !important;
}

select option:hover,
.zn-select option:hover,
.zn-select-modern option:hover {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-1) !important;
}

/* Opções desabilitadas (mais sutis) */
select option:disabled,
.zn-select option:disabled,
.zn-select-modern option:disabled {
    color: var(--text-3) !important;
    background-color: rgba(255,255,255,0.01) !important;
}

/* Remover seta nativa em alguns browsers e ajustar posicionamento */
.zn-select-modern::-ms-expand { display: none; }
.zn-select-modern::-webkit-appearance: none;
.zn-select-modern::-moz-focus-inner { border: 0; }

/* Edge case: quando dropdown renderiza em overlay branco por tema do SO
   tentamos reforçar contraste aplicando borda escura e sombra para o menu
   (funciona no Chromium-based renderers que aceitam these rules). */
select[aria-expanded="true"], .zn-select[aria-expanded="true"] {
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}



.layout-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.layout-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.layout-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.toggle-switch .toggle-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .3s;
}

.faq-mode-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.copy-mode-panel {
    margin-bottom: 1.5rem;
}

.pending-faq-panel {
    padding: 1.5rem;
}

.copy-mode-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.copy-mode-actions .btn-secondary,
.copy-mode-actions .btn-copy-mode {
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
}

.search-bar-panel {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.search-bar-panel .text-input,
.search-bar-panel .select-input {
    flex: 1;
    min-width: 200px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}

.search-actions select {
    min-width: 180px;
}

.form-actions-row {
    justify-content: flex-start;
}

.form-actions-row.align-end {
    justify-content: flex-end;
}

.form-actions-row .btn-primary,
.form-actions-row .btn-secondary,
.form-actions-row .btn-danger {
    min-width: 160px;
}

.form-row,
.section-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.form-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-1);
}

.form-caption {
    color: var(--text-3);
    font-size: 0.9rem;
    line-height: 1.6;
}

.toggle-setting-panel {
    justify-content: space-between;
    width: 100%;
}

.form-row,
.section-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.form-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-1);
}

.form-caption {
    color: var(--text-3);
    font-size: 0.9rem;
    line-height: 1.6;
}

.form-actions-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.instance-status-banner,
.accent-box,
.callout-box {
    border-radius: 12px;
    padding: 1rem;
}

.instance-status-banner {
    background: rgba(74, 144, 226, 0.1);
    border-left: 4px solid var(--primary);
    margin-bottom: 1.5rem;
}

.callout-box {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.accent-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
}

.qrcode-centering-wrapper {
    display: flex;
    justify-content: center;
}

.qrcode-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-xl);
    padding: 1.5rem;
}

.qrcode-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-3);
}

.robot-emoji {
    font-size: 3rem;
}

.qrcode-info h3 {
    margin: 0 0 0.75rem 0;
}

.qrcode-info ol {
    padding-left: 1.25rem;
    color: var(--text-2);
}

.qrcode-info p.connection-status {
    margin-top: 1rem;
    color: var(--text-1);
    font-weight: 600;
}

.products-section h3 {
    margin-bottom: 1rem;
    color: var(--text-1);
}

@media (max-width: 1024px) {
    .products-header {
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .products-header {
        flex-direction: column;
        align-items: stretch;
    }
    .products-section,
    .config-grid,
    .qrcode-container {
        grid-template-columns: 1fr;
    }
}

.admin-header,
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.admin-header {
    justify-content: space-between;
}

.section-note {
    color: var(--text-3);
    font-size: 0.92rem;
    line-height: 1.7;
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 980px) {
    .config-grid { grid-template-columns: 1fr; }
}

.config-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1.5rem;
}

.toggle-switch {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 26px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.toggle-switch .slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch input:checked + .slider {
    background: var(--gradient-primary);
    box-shadow: 0 0 15px var(--primary-glow);
}

.toggle-switch input:checked + .slider::before {
    transform: translateX(22px);
}

.time-input,
.text-input,
.select-input,
textarea {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--text-1);
    border-radius: var(--r-md);
    padding: 0.65rem 0.9rem;
}
.time-input { max-width: 170px; }

.qrcode-container {
    display: grid;
    grid-template-columns: 320px minmax(280px, 1fr);
    gap: 2rem;
    align-items: center;
}
@media (max-width: 860px) {
    .qrcode-container { grid-template-columns: 1fr; }
}

.qrcode-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-xl);
    padding: 1.5rem;
}
.qrcode-display .qrcode-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-3);
}
.qrcode-display .robot-emoji {
    font-size: 3rem;
}

.qrcode-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.qrcode-info h3 {
    margin: 0 0 .5rem 0;
}
.qrcode-info ol {
    padding-left: 1.25rem;
    color: var(--text-2);
}
.qrcode-info li {
    margin-bottom: 0.5rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--text-1);
    font-size: 0.78rem;
    font-weight: 600;
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 2.5rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.02);
}

@media (max-width: 680px) {
    .products-header,
    .products-search-wrapper,
    .products-section,
    .config-grid,
    .qrcode-container {
        grid-template-columns: 1fr;
    }
}



/* ─── Stat grid ─── */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 1100px) { .status-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:  680px) { .status-grid { grid-template-columns: 1fr; } }

.status-grid .status-card { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    align-items: center;
    text-align: center;
}
.status-grid .status-card h3 { 
    margin-bottom: 0.25rem; 
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-2);
}
.status-grid .status-card p { 
    font-size: 1.75rem; 
    font-weight: 800; 
    color: var(--text-1); 
    margin: 0.25rem 0;
}
.status-grid .status-card small { 
    font-size: 0.75rem; 
    color: var(--text-3); 
    font-weight: 500;
}

/* ─── 2-col top grid (Controls | Terminal) ─── */
.dashboard-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 960px) { .dashboard-top-grid { grid-template-columns: 1fr; } }

/* ─── Bot controls ─── */
.controls-header h3 { font-size: .95rem; font-weight: 600; margin-bottom: 1rem; }
/* O card contém um dropdown que precisa vazar (abrir para cima/baixo) sem ser
   cortado: overflow visível e sem transform no hover (evita containing block). */
.bot-controls {
  overflow: visible;
}
.bot-controls:hover {
  transform: none !important;
}
.controls-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
.btn-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  transition: all var(--transition-base);
  cursor: pointer;
  color: var(--text-2);
}

.btn-control:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  color: var(--text-1);
}

.btn-control .control-icon {
  font-size: 1.5rem;
  transition: transform 0.2s;
}

.btn-control:hover .control-icon {
  transform: scale(1.1);
}

.btn-control .control-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-control.btn-success .control-icon { color: var(--success); }
.btn-control.btn-danger .control-icon { color: var(--danger); }
.btn-control.btn-warning .control-icon { color: var(--warning); }

.control-status { font-size: .82rem; color: var(--text-2); margin-bottom: .75rem; }
.control-status .loading { color: var(--text-3); }

.mode-selector-simplified {
  display: flex; gap: .625rem; align-items: center;
  padding-top: 1rem; border-top: 1px solid var(--border);
}
.bot-mode-select-minimal {
  flex: 1; background: rgba(0,0,0,.3); border: 1px solid var(--border);
  padding: .5rem .75rem; border-radius: var(--r-md); color: var(--text-1); appearance: auto;
}
.bot-mode-select-minimal:focus { outline: none; border-color: var(--primary); }

/* ─── Nexus Custom Select (dropdown com ícones SVG do design system) ─── */
.nexus-mode-select {
  position: relative;
  flex: 1;
  min-width: 0;
}
.nexus-mode-select-trigger {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border);
  padding: .5rem .75rem;
  border-radius: var(--r-md);
  color: var(--text-1);
  cursor: pointer;
  font-size: .875rem;
  font-weight: 500;
  transition: border-color .2s ease;
  text-align: left;
}
.nexus-mode-select-trigger:hover,
.nexus-mode-select-trigger[aria-expanded="true"] {
  border-color: var(--primary);
}
.nexus-mode-select-trigger .nexus-mode-select-icon .ic-wrap { width: 1.15em; height: 1.15em; }
.nexus-mode-select-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nexus-mode-select-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nexus-mode-select-caret {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-3);
  font-size: .65em;
  transition: transform .2s ease;
}
.nexus-mode-select-trigger[aria-expanded="true"] .nexus-mode-select-caret {
  transform: rotate(180deg);
}
.nexus-mode-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + .375rem);
  left: 0;
  right: 0;
  z-index: 200;
  background: #1a1a1d;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  padding: .375rem;
  flex-direction: column;
  gap: .125rem;
}
.nexus-mode-select-menu.open {
  display: flex;
}
.nexus-mode-select-menu.flip-up {
  top: auto;
  bottom: calc(100% + .375rem);
  transform-origin: bottom;
}
.nexus-mode-select-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: calc(var(--r-md) - 2px);
  padding: .5rem .625rem;
  color: var(--text-2);
  cursor: pointer;
  font-size: .875rem;
  text-align: left;
  transition: background .15s ease, color .15s ease;
}
.nexus-mode-select-option:hover {
  background: rgba(255,255,255,.05);
  color: var(--text-1);
}
.nexus-mode-select-option.selected {
  color: var(--text-1);
  background: rgba(99,102,241,.14);
}
.nexus-mode-select-option .ic-wrap { width: 1.15em; height: 1.15em; }
.btn-apply-mode-sm {
  padding: 0.5rem 1.125rem;
  background: var(--primary);
  color: #fff;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.82rem;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}

.btn-apply-mode-sm:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ─── Terminal ─── */
.terminal-header-mini {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.terminal-header-mini h3 { font-size: .9rem; font-weight: 600; color: var(--text-2); }
.terminal-actions-mini { display: flex; gap: .4rem; }
.terminal-actions-mini button {
  padding: .25rem .5rem; border-radius: var(--r-md);
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: .85rem; color: var(--text-2); transition: background .18s;
}
.terminal-actions-mini button:hover,
.terminal-actions-mini button.active { background: var(--primary-dim); color: var(--primary); }

.terminal-window-mini {
  height: 210px;
  background: rgba(0,0,0,.35);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: .875rem;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: .78rem;
  line-height: 1.5;
  overflow-y: auto;
}
/* Legacy alias */
.terminal-window { height: 210px; background: rgba(0,0,0,.35); border-radius: var(--r-lg); border: 1px solid var(--border); padding: .875rem; font-family: 'Fira Code', 'Consolas', monospace; font-size: .78rem; line-height: 1.5; overflow-y: auto; }

.terminal-line         { color: var(--text-2); margin-bottom: 4px; display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; }
.terminal-line .terminal-timestamp { color: var(--text-3); font-size: 0.72rem; min-width: 60px; font-weight: 500; }
.terminal-line .terminal-message { flex: 1; word-break: break-all; }

/* ─── Categorias Semânticas ─── */
.terminal-line.system  { color: var(--warning); border-left: 2px solid var(--warning); padding-left: 6px; }
.terminal-line.success { color: var(--success); }
.terminal-line.error   { color: var(--danger); font-weight: 600; background: rgba(244, 63, 94, 0.05); padding: 4px; border-radius: 4px; }
.terminal-line.warning { color: var(--warning); }

.terminal-line.ai { 
    color: #a78bfa; 
    border-left: 2px solid #a78bfa; 
    padding-left: 6px;
    background: rgba(167, 139, 250, 0.03);
}
.terminal-line.user { 
    color: #34d399; 
    border-left: 2px solid #34d399; 
    padding-left: 6px;
}
.terminal-line.bot { 
    color: #22d3ee; 
    border-left: 2px solid #22d3ee; 
    padding-left: 6px;
}
.terminal-line.metrics { 
    color: var(--text-3); 
    font-size: 0.74rem; 
    font-style: italic;
}

/* ─── Destaque para Fluxo de Chat ─── */
.terminal-line.chat-gap {
    height: 1rem;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    margin: 0.5rem 0;
}

/* Animação de destaque para mensagens de IA */
@keyframes ai-highlight-pulse {
  0% { background-opacity: 0.15; }
  50% { background-opacity: 0.25; }
  100% { background-opacity: 1; }
}

/* ─── General section divider ─── */
.status-meta-row {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 2.5rem;
  padding: 0 0.5rem;
}
.instance-indicator { font-size: .82rem; color: var(--text-3); font-weight: 500; }

/* ─── Utility Buttons ─── */

.btn-icon-action {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: all 0.2s;
    cursor: pointer;
}

/* ─── FORM VALIDATION ──────────────────────────────────────────────────── */
.zn-invalid-field {
  border-color: var(--danger) !important;
  background: rgba(244, 63, 94, 0.05) !important;
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.15) !important;
}

.zn-invalid-field:focus {
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25) !important;
}

/* ──────────────────────────────────────────────────────────────────────── */

.btn-icon-action:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}


/* ─── Interactions list ─── */
.status-section { flex-shrink: 0; }
.status-section > h3 { font-size: .95rem; font-weight: 600; color: var(--text-2); margin-bottom: 1rem; }
.interactions-list { display: flex; flex-direction: column; gap: .75rem; }
.interaction-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem;
  transition: all 0.2s ease;
}
.interaction-item:hover {
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.interaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
  font-size: .82rem;
}
.client-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
}
.client-number { font-weight: 700; color: var(--text-1); font-size: 0.88rem; white-space: nowrap; }
.interaction-time { color: var(--text-3); font-size: 0.78rem; white-space: nowrap; }
.interaction-content {
  font-size: .84rem;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.user-question {
  background: rgba(255, 255, 255, 0.03);
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  border-left: 3px solid #6366f1;
  color: var(--text-1);
}
.bot-answer {
  background: rgba(16, 185, 129, 0.06);
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  border-left: 3px solid #10b981;
  color: var(--text-1);
}
.interaction-tag { padding: .2rem .5rem; border-radius: 6px; font-size: .7rem; font-weight: 700; background: var(--primary-dim); color: var(--primary); }

/* ─── Info table ─── */
.info-table { display: flex; flex-direction: column; gap: .625rem; }
.info-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem .875rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); font-size: .82rem; }
.info-label { color: var(--text-3); }
.info-row span:last-child { color: var(--text-1); font-weight: 500; }

/* ─── Forms ─── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
  background: rgba(0,0,0,.28);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-1);
  padding: .55rem .875rem;
  width: 100%;
  transition: border-color .18s;
  appearance: auto;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); }

label { font-size: .82rem; color: var(--text-2); margin-bottom: .35rem; display: block; }

/* ─── Misc ─── */
hr { border: none; border-bottom: 1px solid var(--border); }
.hidden { display: none !important; }
.loading { color: var(--text-3); font-size: .82rem; }
.mode-status-msg { font-size: .8rem; color: var(--text-3); margin-top: .5rem; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.07); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.14); }

/* ─── Modal ─── */
/* Confirmações/prompts do sistema (Utils.confirmCustom): sempre acima de
   qualquer modal (.modal = 9999), inclusive Minha Conta e modais internos. */
.zn-modal-overlay {
  z-index: 99999 !important;
}
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.modal-content {
  background: #1a1a1e;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  max-width: 1000px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Body will handle scrolling */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  position: relative;
}

.modal-header {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.modal-close-btn,
.close-modal {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  outline: none;
}

.modal-close-btn:hover,
.close-modal:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.35);
  color: #f43f5e;
  transform: scale(1.06);
}

.modal-body {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.modal-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border);
  background: var(--bg-sidebar);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Scrollbar support for modal body */
.modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.modal-body::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

/* Botões de Seleção (Selection Buttons) para Modais */
.btn-selection {
  padding: 0.75rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-selection:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #f1f5f9;
}

.btn-selection.active {
  background: #7c3aed !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

/* --- Pending FAQs Manager Layout Fix --- */
#pendingFAQList {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem;
}

#pendingFAQList > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    transform: none !important;
    box-shadow: none !important;
}

.pending-faq-item, .disabled-faq-item {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-xl) !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.pending-faq-item:hover {
    transform: translateY(-2px);
    border-color: var(--warning-glow) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
}

.disabled-faq-item:hover {
    transform: translateY(-2px);
    border-color: var(--danger-glow) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* PRODUCTS MODAL - Enhanced Label Contrast */
/* ═══════════════════════════════════════════════════════════ */

/* Form groups no modal de produtos */
#productModal .form-group label {
  font-weight: 700 !important;
  color: var(--text-1) !important; /* Títulos mais fortes */
  font-size: 0.95rem !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

#productModal .form-group small {
  color: var(--text-3) !important; /* Descrições mais apagadas */
  font-size: 0.8rem !important;
  opacity: 0.7 !important;
  margin-top: 0.25rem !important;
  display: block !important;
}

/* Campo especial de informações para IA */
#productModal .ai-info-field label {
  color: var(--primary) !important;
  font-weight: 800 !important;
}

#productModal .ai-info-field small {
  color: var(--text-3) !important;
  opacity: 0.6 !important;
}

.analytics-tab {
    padding: 2rem;
}

.analytics-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.analytics-quick-stats .stat-card {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    text-align: center;
    transition: all 0.3s var(--ease);
}

.analytics-quick-stats .stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.1);
}

.analytics-quick-stats .stat-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.analytics-quick-stats .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 0.5rem;
}

.analytics-quick-stats .stat-label {
    font-size: 0.8rem;
    color: var(--text-3);
}

.analytics-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
}

.analytics-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--r-md);
    border-left: 3px solid var(--primary);
}

.analytics-list-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.analytics-list-item-label {
    color: var(--text-2);
    font-size: 0.9rem;
    flex: 1;
}

.analytics-list-item-value {
    color: var(--text-1);
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    background: var(--primary-glow);
    border-radius: var(--r-md);
    font-size: 0.85rem;
}

.analytics-list-item-percent {
    color: var(--success);
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

/* Chart Panel Styles */
.chart-panel {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--r-md);
    padding: 1rem;
}

.chart-panel canvas {
    max-width: 100%;
    height: auto !important;
}

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
    .analytics-quick-stats {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 768px) {
    .analytics-quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .analytics-tab {
        padding: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   🧪 SIMULATOR - WhatsApp Chat Simulator Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* Chat Messages */
.sim-message {
    max-width: 80%;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    position: relative;
    animation: simMsgFadeIn 0.25s ease-out;
}

@keyframes simMsgFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.sim-message-user {
    align-self: flex-end;
    background: #005c4b;
    border-bottom-right-radius: 2px;
}

.sim-message-bot {
    align-self: flex-start;
    background: #202c33;
    border-bottom-left-radius: 2px;
}

.sim-message-error {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.sim-message-content {
    display: flex;
    flex-direction: column;
}

.sim-message-text {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #e9edef;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.sim-message-time {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.45);
    text-align: right;
    margin-top: 0.2rem;
}

/* Scrollbar for chat */
#simChatMessages::-webkit-scrollbar { width: 6px; }
#simChatMessages::-webkit-scrollbar-track { background: transparent; }
#simChatMessages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
#simChatMessages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Typing animation */
@keyframes simTypingPulse {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}

/* Send button hover */
#simSendBtn:hover {
    background: #00c896 !important;
    transform: scale(1.05);
}

#simSendBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Input focus */
#simMessageInput:focus {
    box-shadow: 0 0 0 1px rgba(0,168,132,0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   DESATIVAR EFEITOS DE MOVIMENTO E SOMBRAS DOS CARDS (MODO PLANO)
   ═══════════════════════════════════════════════════════════════════ */
body.no-card-effects .card,
body.no-card-effects .card:hover,
body.no-card-effects .zn-card,
body.no-card-effects .zn-card:hover,
body.no-card-effects .zn-card-stat,
body.no-card-effects .zn-card-stat:hover,
body.no-card-effects .zn-card-provider,
body.no-card-effects .zn-card-provider:hover,
body.no-card-effects .status-card,
body.no-card-effects .status-card:hover,
body.no-card-effects .config-section,
body.no-card-effects .config-section:hover,
body.no-card-effects .settings-section,
body.no-card-effects .settings-section:hover,
body.no-card-effects .behavior-card,
body.no-card-effects .behavior-card:hover,
body.no-card-effects .vanguard-accordion,
body.no-card-effects .vanguard-accordion:hover,
body.no-card-effects .vanguard-accordion-header,
body.no-card-effects .vanguard-accordion-header:hover,
body.no-card-effects .zn-accordion,
body.no-card-effects .zn-accordion:hover,
body.no-card-effects .zn-accordion-header,
body.no-card-effects .zn-accordion-header:hover,
body.no-card-effects .bot-controls,
body.no-card-effects .bot-controls:hover,
body.no-card-effects .product-card,
body.no-card-effects .product-card:hover,
body.no-card-effects .ia-section,
body.no-card-effects .ia-section:hover,
body.no-card-effects .groq-card,
body.no-card-effects .groq-card:hover,
body.no-card-effects .vanguard-card,
body.no-card-effects .vanguard-card:hover,
body.no-card-effects .confidence-mode-card,
body.no-card-effects .confidence-mode-card:hover,
body.no-card-effects .hardware-card-modern,
body.no-card-effects .hardware-card-modern:hover,
body.no-card-effects .storage-card,
body.no-card-effects .storage-card:hover,
body.no-card-effects .greeting-type-card,
body.no-card-effects .greeting-type-card:hover,
body.no-card-effects .dashboard-toggle-setting,
body.no-card-effects .dashboard-toggle-setting:hover,
body.no-card-effects .optimize-section,
body.no-card-effects .optimize-section:hover,
body.no-card-effects .accordion,
body.no-card-effects .accordion:hover,
body.no-card-effects .interaction-item,
body.no-card-effects .interaction-item:hover,
body.no-card-effects .chat-item,
body.no-card-effects .chat-item:hover,
body.no-card-effects .info-row-modern,
body.no-card-effects .info-row-modern:hover,
html.no-card-effects .card,
html.no-card-effects .zn-card,
html.no-card-effects .zn-card-stat,
html.no-card-effects .zn-accordion,
html.no-card-effects .interaction-item {
    transform: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

body.no-card-effects .card::before,
body.no-card-effects .zn-card::before,
body.no-card-effects .status-card::before,
body.no-card-effects .vanguard-card::before {
    display: none !important;
}

/* =========================================================
   FUNCIONAMENTO DA EMPRESA & FERIADOS - BORDAS QUADRADAS
   ========================================================= */
#businessHoursAccordion,
#businessHoursAccordion .zn-card,
#businessHoursAccordion .zn-input,
#businessHoursAccordion .time-input,
#businessHoursAccordion select,
#businessHoursAccordion input[type="text"],
#businessHoursAccordion input[type="date"],
#businessHoursAccordion input[type="time"],
#businessHoursAccordion button,
#businessHoursAccordion .btn-primary,
#businessHoursAccordion .btn-secondary-sm,
#businessHoursAccordion .btn-warning-sm,
#businessHoursAccordion .btn-danger-sm,
#businessHoursAccordion .zn-badge,
#businessHoursAccordion .day-schedule-row,
#businessHoursAccordion .holiday-row-item,
#businessHoursAccordion .holiday-pill-badge,
#businessHoursAccordion .remove-holiday-btn,
#businessHoursAccordion .remove-closure-btn,
#businessHoursAccordion #holidaysCountBadge,
#businessHoursAccordion #syncHolidaysOnlineBtn,
#businessHoursAccordion #addNewHolidayBtn,
#businessHoursAccordion #addSpecialClosureBtn,
#businessHoursAccordion #saveBusinessHoursBtn,
#businessHoursAccordion #refreshLiveStatusBtn,
.business-hours-group .day-schedule-row,
.business-hours-group .holiday-row-item,
.business-hours-group .time-input {
    border-radius: 0px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — TODOS OS CANTOS QUADRADOS
   Camada final de verdade: força borda 0 em qualquer elemento, exceções
   apenas para itens funcionais (ponto de status e botão do toggle).
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    border-radius: 0 !important;
}

/* Exceções funcionais (não são cards — mantêm o formato circular) */
.toggle-switch .slider::before,
.connection-pill .dot,
.connection-pill .dot::after,
.btn-processing::after,
.btn-simulator-send,
.sim-typing-dot,
#statusGlowEffect {
    border-radius: 50% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — TIPOGRAFIA PADRONIZADA
   ═══════════════════════════════════════════════════════════════════════ */
body,
button,
input,
select,
textarea {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
h1, h2, h3, h4, h5 {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    letter-spacing: -0.01em !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — POPUPS PADRONIZADOS (.modal / .modal-content / .modal-box)
   ═══════════════════════════════════════════════════════════════════════ */
.modal {
    background: rgba(5, 5, 7, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.modal-content,
.modal-box,
.modal-account-box {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55) !important;
}
.modal-header {
    padding: 1.15rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid var(--border) !important;
}
.modal-header h2,
.modal-header h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
    margin: 0 !important;
}
.modal-body {
    padding: 1.5rem !important;
}
.modal-footer {
    padding: 1rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid var(--border) !important;
}
.modal-close-btn,
.close-modal,
.modal-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-2) !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.modal-close-btn:hover,
.close-modal:hover,
.modal-close:hover {
    background: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
    color: #f43f5e !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — ÍCONES NEXUS (substituição emojis → SVGs minimalistas)
   ═══════════════════════════════════════════════════════════════════════ */
.ic-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.ic {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: block;
}
.ic .ic-dot {
    fill: currentColor;
    stroke: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   OTOMIZAÇÕES DE DESEMPENHO — modo baixo desempenho / movimento reduzido
   ═══════════════════════════════════════════════════════════════════════ */
html.low-perf,
html.reduce-motion {
    --header-h: 54px;
}
html.low-perf *,
html.reduce-motion * {
    scroll-behavior: auto !important;
}
html.low-perf .dashboard-header,
html.low-perf #desktopTopbar,
html.low-perf .mobile-topbar,
html.low-perf .section-header,
html.low-perf .modal,
html.low-perf .simulator-window,
html.low-perf .toast,
html.low-perf .terminal-toolbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #141416 !important;
}
html.low-perf .dashboard-header {
    box-shadow: none !important;
}
html.low-perf .tab-content.active {
    animation: none !important;
}
html.low-perf .pulse-red,
html.low-perf .btn-pulse,
html.low-perf .status-pulse,
html.low-perf .simTypingPulse,
html.low-perf .pulse,
html.low-perf .animate-pulse,
html.low-perf .note-pulse,
html.low-perf *:not(.no-theme-transition) {
    animation: none !important;
    transition: none !important;
}
html.low-perf .zn-card,
html.low-perf .status-card,
html.low-perf .behavior-card,
html.low-perf .vanguard-card,
html.low-perf .modal-content,
html.low-perf .modal-box,
html.low-perf .modal-account-box {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
html.low-perf .interaction-item,
html.low-perf .chat-item,
html.low-perf .info-row-modern {
    transition: none !important;
}
html.low-perf .terminal-window-mini,
html.low-perf .terminal-window,
html.low-perf #terminalLines {
    contain: content;
}

/* Redução de trabalho de layout/render em telas grandes: renderiza
   conteúdo pesado em camadas e evita repaint fora da viewport. */
.dashboard-main .tab-content.active {
    contain: layout style;
}
.terminal-window-mini,
.terminal-window {
    contain: content;
}
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   📱 RESPONSIVIDADE AVANÇADA: TABLETS E SMARTPHONES (AGENT + CONTACT)
   ═══════════════════════════════════════════════════════════════════════ */

/* Backdrop para gaveta mobile */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.sidebar-backdrop.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

body.mobile-menu-open {
    overflow: hidden !important;
}

/* ─── Breakpoint Tablet / Mobile: <= 900px ─── */
@media (max-width: 900px) {
    .dashboard-layout {
        position: relative;
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    /* Menu Lateral Off-Canvas (Gaveta deslizante) */
    body.sidebar-mode-collapsed .dashboard-sidebar,
    body.sidebar-collapsed .dashboard-sidebar,
    .dashboard-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 85vw !important;
        z-index: 1100 !important;
        background: #090d16 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    body.sidebar-mode-collapsed .dashboard-sidebar.active,
    body.sidebar-collapsed .dashboard-sidebar.active,
    .dashboard-sidebar.active {
        transform: translateX(0) !important;
        box-shadow: 15px 0 45px rgba(0, 0, 0, 0.75) !important;
    }

    /* Forçar labels e visual completo quando aberto no mobile */
    body.sidebar-mode-collapsed .dashboard-sidebar.active .tab-label,
    body.sidebar-mode-collapsed .dashboard-sidebar .tab-label,
    body.sidebar-collapsed .dashboard-sidebar.active .tab-label,
    body.sidebar-collapsed .dashboard-sidebar .tab-label,
    .dashboard-sidebar.active .tab-label,
    .dashboard-sidebar .tab-label {
        opacity: 1 !important;
        display: inline-block !important;
        transform: none !important;
        visibility: visible !important;
    }

    body.sidebar-mode-collapsed .user-info,
    body.sidebar-collapsed .user-info,
    .dashboard-sidebar .user-info {
        opacity: 1 !important;
        display: block !important;
        transform: none !important;
    }

    .dashboard-sidebar .header-logo-full {
        display: block !important;
    }

    .dashboard-sidebar .header-logo-compact {
        display: none !important;
    }

    body.sidebar-mode-collapsed .nav-tab,
    body.sidebar-collapsed .nav-tab,
    .dashboard-sidebar .nav-tab {
        padding: 0.75rem 1rem !important;
        gap: 0.9rem !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 100% !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    .sidebar-close-mobile {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #94a3b8;
        font-size: 1.1rem;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-left: auto;
        margin-right: 0.5rem;
        transition: all 0.2s ease;
    }
    .sidebar-close-mobile:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(99, 102, 241, 0.4);
    }
    }

    /* Conteúdo principal ocupa 100% da viewport */
    .dashboard-content {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }

    .dashboard-main {
        padding: 1rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Cabeçalho Compacto */
    .dashboard-header {
        padding: 0.75rem 1rem !important;
        gap: 0.6rem !important;
    }

    .header-breadcrumb {
        font-size: 0.8rem !important;
    }

    .header-actions {
        gap: 0.5rem !important;
    }
}

/* ─── Breakpoint Smartphone Portrait: <= 640px ─── */
@media (max-width: 640px) {
    .dashboard-header {
        padding: 0.6rem 0.75rem !important;
        flex-wrap: wrap !important;
    }

    .dashboard-header .header-breadcrumb {
        max-width: calc(100vw - 180px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.75rem !important;
    }

    .dashboard-header .header-breadcrumb .separator,
    .dashboard-header .header-breadcrumb #breadcrumbCurrent {
        display: none !important;
    }

    .dashboard-header .header-breadcrumb #breadcrumbTab {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.78rem !important;
    }

    /* Pílulas de status compactas no mobile */
    .connection-pill {
        padding: 0.25rem 0.55rem !important;
        font-size: 0.72rem !important;
    }

    .connection-pill .label {
        display: none !important;
    }

    .instance-indicator-pill {
        padding: 0.25rem 0.55rem !important;
        font-size: 0.72rem !important;
        max-width: 110px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Grids em coluna única */
    .status-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        margin-bottom: 1.5rem !important;
    }

    .dashboard-top-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .config-grid,
    .products-section,
    .qrcode-container {
        grid-template-columns: 1fr !important;
    }

    .analytics-quick-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }

    /* Modais Fullscreen/Bottom-Sheet no mobile */
    .modal-box,
    .zn-modal,
    .modal-account-box,
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        margin: auto !important;
        border-radius: 14px !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Aumentar área de toque em inputs e botões */
    button, 
    .btn, 
    .btn-super, 
    .btn-primary, 
    .btn-secondary,
    .btn-icon-action,
    .nav-tab {
        min-height: 40px !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Previne auto-zoom no iOS */
        padding: 0.65rem 0.75rem !important;
    }

    /* Tabelas com rolagem suave no toque */
    .table-container,
    .table-scroll-container,
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAL DE MONITORAMENTO AVANÇADO (RESTAURAÇÃO & ATUALIZAÇÃO)
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes op-spin {
    to { transform: rotate(360deg); }
}

@keyframes op-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px currentColor; }
    50% { opacity: 0.35; transform: scale(0.85); box-shadow: none; }
}

@keyframes op-modal-fade-in {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes op-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.op-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(3, 7, 18, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 1rem;
    box-sizing: border-box;
}

.op-modal-container {
    background: linear-gradient(160deg, #131b2e 0%, #0b0f19 100%);
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 20px;
    padding: 2rem 2.25rem;
    max-width: 540px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 45px rgba(99, 102, 241, 0.15);
    animation: op-modal-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    overflow: hidden;
}

.op-modal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #38bdf8, #6366f1, #a855f7, #ec4899);
}

.op-modal-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.op-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(99, 102, 241, 0.14);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.28);
    margin-bottom: 0.65rem;
}

.op-modal-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6366f1;
    color: #6366f1;
    animation: op-pulse-dot 1.8s ease-in-out infinite;
}

.op-modal-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
}

.op-modal-file-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    color: #cbd5e1;
    margin-top: 0.75rem;
    max-width: 100%;
}

.op-modal-file-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.op-modal-file-size {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    font-size: 0.74rem;
    font-weight: 600;
}

/* Painel de Progresso Dinâmico */
.op-modal-progress-wrap {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.op-modal-progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.op-modal-progress-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.op-modal-percent-number {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #60a5fa 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.op-modal-phase-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #cbd5e1;
}

.op-modal-progress-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: #94a3b8;
}

.op-modal-speed {
    color: #38bdf8;
    font-weight: 600;
    margin-top: 2px;
}

.op-modal-bar-bg {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.op-modal-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.5);
}

.op-modal-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: op-shimmer 2s infinite ease-in-out;
}

/* Lista de Etapas */
.op-modal-steps {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}

.op-step-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.95rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.25s ease;
    opacity: 0.65;
}

.op-step-item.waiting {
    opacity: 0.5;
}

.op-step-item.active {
    opacity: 1;
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.12);
}

.op-step-item.done {
    opacity: 0.92;
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.25);
}

.op-step-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.op-step-item.active .op-step-icon-wrap {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
}

.op-step-item.done .op-step-icon-wrap {
    background: rgba(16, 185, 129, 0.15);
}

.op-step-content {
    flex: 1;
    min-width: 0;
}

.op-step-text {
    font-size: 0.86rem;
    font-weight: 600;
    color: #cbd5e1;
    line-height: 1.25;
}

.op-step-item.active .op-step-text {
    color: #ffffff;
}

.op-step-subtext {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.op-step-item.active .op-step-subtext {
    color: #a5b4fc;
    font-weight: 500;
}

.op-step-item.done .op-step-subtext {
    color: #34d399;
}

.op-step-status-wrap {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.op-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(99, 102, 241, 0.25);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: op-spin 0.75s linear infinite;
}

.op-check-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

/* Terminal / Rodapé de Status */
.op-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1rem;
}

.op-terminal-line {
    padding: 0.65rem 0.95rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    color: #94a3b8;
}

.op-terminal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #06b6d4;
    color: #06b6d4;
    flex-shrink: 0;
    animation: op-pulse-dot 1.5s ease-in-out infinite;
}

.op-terminal-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #cbd5e1;
}