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

/* ─── TOKENS ───────────────────────────────────────────────────────────── */
:root {
  --primary:       #818cf8;
  --primary-glow:  rgba(129,140,248,.18);
  --primary-dim:   rgba(129,140,248,.10);
  --success:       #34d399;
  --warning:       #fbbf24;
  --danger:        #fb7185;

  --bg:            #04070b;
  --bg-sidebar:    linear-gradient(180deg, #090d16 0%, #04070b 100%);
  --bg-card:       linear-gradient(145deg, rgba(15,23,42,0.98), rgba(8,15,28,0.98));
  --bg-card-hover: linear-gradient(145deg, rgba(17,24,39,0.99), rgba(15,23,42,0.98));
  --card-surface: linear-gradient(145deg, rgba(15,23,42,0.98) 0%, rgba(8,15,28,0.98) 45%, rgba(7,11,18,0.98) 100%);
  --card-surface-hover: linear-gradient(145deg, rgba(17,24,39,0.99) 0%, rgba(12,18,30,0.98) 45%, rgba(10,14,21,0.98) 100%);
  --card-glow: 0 18px 36px rgba(2,6,23,.35), 0 0 0 1px rgba(148,163,184,.08), 0 0 18px rgba(56,189,248,.05);
  --card-glow-hover: 0 22px 40px rgba(2,6,23,.42), 0 0 0 1px rgba(129,140,248,.14), 0 0 28px rgba(56,189,248,.08);
  --button-surface: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(8,15,28,0.98));
  --button-surface-hover: linear-gradient(180deg, rgba(17,24,39,1), rgba(15,23,42,0.98));
  --bg-sub:        rgba(148,163,184,.08);
  --bg-header:     rgba(6,10,18,.96);

  --border:        rgba(148,163,184,.16);
  --border-base:   rgba(148,163,184,.16);
  --border-active: rgba(56,189,248,.35);

  --text-1:  #eff6ff;   /* headings */
  --text-2:  #dbe4f0;   /* labels   */
  --text-3:  #94a3b8;   /* muted    */

  /* ⭐ ALIASES PARA COMPATIBILIDADE COM CÓDIGO LEGADO */
  --text-primary:    #eff6ff;   /* = --text-1 */
  --text-secondary:  #dbe4f0;   /* = --text-2 */
  --text-muted:      #94a3b8;   /* = --text-3 */
  --bg-main:         #04070b;   /* = --bg */
  --border-light:    rgba(148,163,184,.16);  /* = --border */
  --primary-light:   rgba(129,140,248,.18);   /* = --primary-glow */

  /* Radius aliases */
  --radius-sm:  .5rem;
  --radius-md:  .625rem;  /* = --r-md */
  --radius-lg:  .875rem;  /* = --r-lg */
  --radius-xl:  1.125rem; /* = --r-xl */

  /* 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(2,6,23,.35);
  --shadow-md:    0 10px 18px rgba(2,6,23,.35), 0 2px 8px rgba(15,23,42,.22);
  --shadow-lg:    0 18px 34px rgba(2,6,23,.4), 0 8px 16px rgba(15,23,42,.25);
  --shadow-xl:    0 26px 45px rgba(2,6,23,.45), 0 10px 20px rgba(15,23,42,.25);
  --shadow-premium: 0 18px 36px rgba(2,6,23,.35), 0 0 0 1px rgba(148,163,184,.08), 0 0 18px rgba(56,189,248,.05);

  /* 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, #22d3ee 0%, #818cf8 45%, #a78bfa 100%);
  --gradient-hardware: linear-gradient(90deg, #22d3ee, #818cf8);

  --blur: blur(18px);

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

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

  /* Shared surfaces for popups created dynamically by the Dashboard. */
  --popup-backdrop: rgba(2, 6, 23, 0.78);
  --popup-surface: #111827;
  --popup-surface-raised: #1e293b;
  --popup-border: rgba(56, 189, 248, 0.4);
  --popup-accent: #38bdf8;
  --popup-accent-text: #06131f;
  --popup-text: #f8fafc;
  --popup-muted: #cbd5e1;
  --popup-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  --popup-glow: 0 0 35px rgba(56, 189, 248, 0.18);
}

/* ─── LIGHT THEME TOKENS ─── */
html[data-theme='light'],
:root[data-theme='light'] {
  --text-1: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --border: rgba(15, 23, 42, 0.12);
  --border-base: rgba(15, 23, 42, 0.12);
}

html[data-theme='light'] label {
  color: #1e293b !important;
  font-weight: 600 !important;
}

html[data-theme='light'] {
  --popup-backdrop: rgba(15, 23, 42, 0.52);
  --popup-surface: #f8fafc;
  --popup-surface-raised: #e2e8f0;
  --popup-border: rgba(2, 132, 199, 0.42);
  --popup-accent: #0284c7;
  --popup-accent-text: #ffffff;
  --popup-text: #0f172a;
  --popup-muted: #334155;
  --popup-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  --popup-glow: 0 0 28px rgba(2, 132, 199, 0.12);
}

html[data-theme='block-steel'] {
  --popup-backdrop: rgba(4, 7, 11, 0.82);
  --popup-surface: #242d38;
  --popup-surface-raised: #171e26;
  --popup-border: #6b7d93;
  --popup-accent: #8fa3b5;
  --popup-accent-text: #10161d;
  --popup-text: #f1f5f9;
  --popup-muted: #cbd5e1;
  --popup-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  --popup-glow: 0 0 0 rgba(0, 0, 0, 0);
}

html[data-theme='block-blue'] {
  --popup-backdrop: rgba(3, 15, 31, 0.84);
  --popup-surface: #0f2742;
  --popup-surface-raised: #12385c;
  --popup-border: #3b82f6;
  --popup-accent: #60a5fa;
  --popup-accent-text: #071a2e;
  --popup-text: #eff6ff;
  --popup-muted: #bfdbfe;
  --popup-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  --popup-glow: 0 0 35px rgba(96, 165, 250, 0.2);
}

html[data-theme='dark-block'] {
  --popup-backdrop: rgba(0, 0, 0, 0.88);
  --popup-surface: #101010;
  --popup-surface-raised: #1a1a1a;
  --popup-border: #737373;
  --popup-accent: #e5e5e5;
  --popup-accent-text: #080808;
  --popup-text: #ffffff;
  --popup-muted: #d4d4d4;
  --popup-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
  --popup-glow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Global Placeholder Styling - Quase invisível */
::placeholder {
  color: var(--placeholder-color, rgba(148, 163, 184, 0.2)) !important;
  opacity: 0.22 !important;
}
:-ms-input-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.2)) !important; opacity: 0.22 !important; }
::-ms-input-placeholder { color: var(--placeholder-color, rgba(148, 163, 184, 0.2)) !important; opacity: 0.22 !important; }

input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--placeholder-color, rgba(148, 163, 184, 0.2)) !important;
  opacity: 0.22 !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,
.amti-modal-close,
.os-modal-close,
.zn-modal-close,
.toast-close-btn,
.feedback-panel-close,
.feedback-success-close-btn,
.amti-settings-search-clear,
.close,
.btn-close,
[data-dismiss="modal"] {
  cursor: pointer !important;
  outline: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  caret-color: transparent !important;
}

button *,
.amti-modal-close *,
.os-modal-close *,
.zn-modal-close *,
.toast-close-btn *,
.feedback-panel-close *,
.feedback-success-close-btn *,
.amti-settings-search-clear *,
.close *,
.btn-close *,
[data-dismiss="modal"] * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  cursor: pointer !important;
  caret-color: transparent !important;
}

button:focus,
button:focus-visible,
button:active,
.amti-modal-close:focus,
.amti-modal-close:focus-visible,
.amti-modal-close:active {
  outline: none !important;
  caret-color: transparent !important;
}

/* Padrão visual global: todo controle de fechar com X deve ser quadrado. */
:is(
  .amti-modal-close,
  .sa-modal-close,
  .os-modal-close,
  .zn-modal-close,
  .toast-close-btn,
  .feedback-panel-close,
  .feedback-screenshot-remove,
  .amti-contract-expiration-close,
  .amti-settings-search-clear,
  .sa-search-clear,
  .pdv-widget-search-clear,
  .close,
  .btn-close,
  [data-dismiss="modal"],
  [data-amti-close],
  [aria-label="Fechar"],
  [aria-label="Fechar menu"],
  [aria-label="Close"],
  [aria-label*="Fechar"],
  [aria-label*="fechar"],
  [title="Fechar menu"],
  [title="Fechar"]:not(.view-agenda-footer *),
  [title*="Fechar"]:not(.view-agenda-footer *),
  .amti-modal-header button:has(> i.fa-xmark),
  .amti-modal-header button:has(> i.fa-times),
  .modal-header button:has(> i.fa-xmark),
  .modal-header button:has(> i.fa-times)
) {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

a { color: inherit; text-decoration: none; }

html, body {
  height: 100%;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  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 380ms var(--ease), min-width 380ms var(--ease);
  z-index: 1000;
  position: relative;
  /* GPU promotion: sidebar pintada em camada própria, sem invalidar a árvore de conteúdo */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style;
}

/* 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: 72px;
  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: 62px;
  height: 62px;
  max-width: 62px;
}

.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: 62px !important;
  height: 62px !important;
  max-width: 62px !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: 1.25rem 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-tab {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  gap: 1rem;
  color: var(--text-2);
    transition: background 0.3s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.3s 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;
    padding: 0.6rem 0;
    gap: 0;
    width: auto;
    min-width: 0;
}

.nav-tab::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
  opacity: 0;
  transform: scaleY(0);
  transition: opacity 0.25s var(--ease), transform 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;
    text-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: transform 0.3s 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: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  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-color: transparent;
    background: transparent;
}

.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.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 organizar espaçamento */
.dashboard-sidebar.collapsed .sidebar-nav,
body.sidebar-mode-collapsed .sidebar-nav,
body.sidebar-collapsed .sidebar-nav {
    justify-content: center;
    align-items: center;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    gap: 0.85rem;
}

.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;
  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.98);
  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;
  padding: 0 1.5rem !important;
  background: rgba(12, 12, 14, 0.98);
  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;
  position: relative;
}
.dashboard-header .header-actions { gap: .85rem; }
.dashboard-header .header-breadcrumb { gap: .85rem; }
.dashboard-header .menu-trigger-mobile {
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
}
.dashboard-header .menu-trigger-mobile:hover { background: rgba(255,255,255,.08); }

.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: 1.25rem; 
}

.btn-icon-action {
  width: 34px; height: 34px;
  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;
}
.btn-icon-action:hover { background: var(--bg-card-hover); }

.connection-pill {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem;
  border-radius: 99px;
  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;
  transition: all 0.3s var(--ease);
}
.connection-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 10px rgba(100, 116, 139, 0.3);
  position: relative;
}
.connection-pill.online {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
  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; }
}

.connection-pill.offline {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.connection-pill.offline .dot { 
  background: #ef4444; 
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5); 
}

/* ═══════════════════════════════════════════════════════════════════════
   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%);
  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(--radius-xl);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.22s var(--transition-base), border-color 0.22s var(--transition-base);
    position: relative;
    overflow: hidden;
}

.zn-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    background: var(--card-surface-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(--radius-xl);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.22s var(--transition-base), border-color 0.22s var(--transition-base);
    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(56, 189, 248, 0.35);
    background: var(--card-surface-hover);
    transform: translateY(-4px);
    box-shadow: var(--card-glow-hover);
}

.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-monitoring .ai-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 0;
}

.ai-monitoring .ai-summary-grid .stat-card {
    min-height: 175px;
}

.ai-monitoring .ai-summary-grid .stat-card .stat-icon {
    font-size: 1.7rem;
    margin-bottom: 0.75rem;
}

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

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

.ai-monitoring .ai-compact-panel {
    background: var(--bg-sub);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: 1rem;
}

.ai-monitoring .ai-compact-panel .panel-label {
    color: var(--text-3);
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}

.ai-monitoring .ai-compact-panel .panel-value {
    color: var(--text-1);
    font-weight: 700;
    font-size: 1rem;
}

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

.ai-monitoring .ai-empty-state .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.ai-monitoring .ai-empty-state .title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.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); }

.ai-monitoring .ai-efficiency-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ai-monitoring .ai-efficiency-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ai-monitoring .ai-efficiency-header strong {
    color: var(--text-1);
    font-size: 1.05rem;
}

.ai-monitoring .ai-efficiency-meta {
    color: var(--text-3);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.ai-monitoring .ai-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

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

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

.ai-monitoring .zn-table-container {
    background: var(--bg-card);
}

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

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

/* --- 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;
}

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

/* Indicador de instância no header (Status tab) */
.instance-indicator-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 9999px;
    font-size: 0.85rem;
    color: var(--text-2);
    white-space: nowrap;
}

.instance-indicator-pill strong {
    color: var(--text-1);
    font-weight: 600;
}

.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: 10px;
    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: 10px;
    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: 10px;
}

.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: right;
}

.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), inset 0 1px 0 rgba(148,163,184,.06);
  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(-3px);
  border-color: rgba(56,189,248,.35);
  box-shadow: var(--shadow-premium), 0 0 0 1px rgba(56,189,248,.08);
  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;
}

/* Divisor entre opções de formulário (ex.: Configurações da Empresa / Aparência) */
.amti-form-divider {
    border: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    margin: 1.4rem 0;
}

html[data-theme='light'] .amti-form-divider {
    border-top-color: rgba(15, 23, 42, 0.12);
}

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

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

.zn-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.02em;
}

.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.25rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base), border-color var(--transition-base);
    border: 1px solid rgba(148,163,184,.18);
    background: var(--button-surface, linear-gradient(180deg, rgba(15,23,42,.98), rgba(8,15,28,.98)));
    color: var(--text-1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 16px rgba(2,6,23,.28);
    user-select: none;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
    border-color: rgba(56,189,248,.35);
    box-shadow: 0 14px 24px rgba(2,6,23,.35), 0 0 18px rgba(56,189,248,.08);
}

.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: #03111d;
    border: 1px solid rgba(56,189,248,.35);
    box-shadow: 0 10px 18px rgba(56,189,248,.18);
}

.btn-primary:hover {
    box-shadow: 0 14px 28px rgba(56,189,248,.22);
    filter: brightness(1.05);
}

.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;
}

.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: 10px; 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,.12);
}
.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: 10px;
    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.625rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    vertical-align: middle;
}
.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(--radius-xl);
    padding: 1.15rem;
    min-height: 170px;
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    box-shadow: var(--shadow-md);
}

.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.625rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    vertical-align: middle;
}

.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);
/* Light theme inline-style & hardcoded dark overrides */
html[data-theme='light'] [style*="rgba(15, 23, 42"] {
    background: var(--card-surface) !important;
    background-image: none !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-soft) !important;
}
html[data-theme='light'] [style*="rgba(8, 15, 28"] {
    background: var(--card-surface) !important;
}
html[data-theme='light'] [style*="background: rgba(0, 0, 0"] {
    background: rgba(238,241,246,0.8) !important;
    color: var(--text-primary) !important;
}

}

.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 {
    /* Hide native dropdown glyph for modern selects so custom icon is used */
    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,
select.amti-form-control {
    color: var(--text-1) !important;
    background: rgba(15, 23, 42, 0.98) !important;
    background-color: rgba(15, 23, 42, 0.98) !important;
    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") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.9rem center !important;
    background-size: 1rem !important;
    padding-right: 2.6rem !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    /* Force hide native dropdown glyph so only custom SVG appears */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
}

/* Hide Internet Explorer / Edge default dropdown glyph */
select::-ms-expand { display: none !important; }

/* Estilizar items da lista (quando possível pelo browser) */
select option, .zn-select option, .zn-select-modern option,
.amti-form-control option {
    color: #e5eefb !important;
    background-color: var(--bg-input, #0f172a) !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;
}

.amti-contract-expiration-banner {
    align-items: center;
    background: linear-gradient(90deg, var(--popup-surface-raised), var(--popup-surface));
    border-bottom: 2px solid var(--popup-accent);
    color: var(--popup-text);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 36px;
    padding: 3px 10px;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 38px;
}

.amti-contract-expiration-banner[hidden] {
    display: none;
}

.amti-contract-expiration-content,
.amti-contract-expiration-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.amti-contract-expiration-content {
    font-size: .78rem;
    line-height: 1.25;
}

.amti-contract-expiration-close,
.amti-contract-warning-close {
    background: transparent;
    border: 0;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 3px 5px;
}

.amti-contract-expiration-actions .amti-btn {
    font-size: .74rem;
    min-height: 28px;
    padding: 4px 9px;
    white-space: nowrap;
}

.amti-contract-expiration-close:hover,
.amti-contract-warning-close:hover {
    color: #ffffff;
}

#contractExpirationWarningModal {
    align-items: center;
    background: var(--popup-backdrop);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 100000;
}

.amti-contract-warning-backdrop {
    inset: 0;
    position: absolute;
}

.amti-contract-warning-card {
    background: var(--popup-surface);
    border: 1px solid var(--popup-border);
    border-radius: 12px;
    box-shadow: var(--popup-shadow), var(--popup-glow);
    color: var(--popup-text);
    max-width: 520px;
    padding: 30px;
    position: relative;
    text-align: center;
    width: 100%;
}

.amti-contract-warning-close {
    position: absolute;
    right: 12px;
    top: 10px;
}

.amti-contract-warning-icon {
    color: var(--warning);
    font-size: 2rem;
    margin-bottom: 12px;
}

.amti-contract-warning-card h2 {
    font-size: 1.35rem;
    margin: 0 0 10px;
}

.amti-contract-warning-card p {
    color: var(--popup-muted);
    line-height: 1.6;
    margin: 0;
}

.amti-contract-warning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}

.amti-contract-warning-actions .amti-btn {
    min-height: 42px;
}

/* Dynamic contract/payment popup surfaces must follow the active Dashboard theme. */
#amtiPaymentModal {
    background: var(--popup-backdrop) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#contractExpirationWarningModal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#amtiPaymentModalCard {
    background: var(--popup-surface) !important;
    border-color: var(--popup-border) !important;
    color: var(--popup-text) !important;
}

#amtiPaymentModalCard > div:first-child {
    background: linear-gradient(135deg, var(--popup-surface-raised), var(--popup-surface)) !important;
    border-bottom-color: var(--popup-border) !important;
}

#amtiPaymentModalCard h2,
#amtiPaymentModalCard strong,
#amtiPaymentModalCard label,
#amtiPaymentModalCard .dash-plan-card,
#amtiPaymentModalCard .dash-method-option {
    color: var(--popup-text) !important;
}

#amtiPaymentModalCard p,
#amtiPaymentModalCard span,
#amtiPaymentModalCard small {
    color: var(--popup-muted) !important;
}

#amtiPaymentModalCard .dash-plan-card:not(.selected),
#amtiPaymentModalCard .dash-method-option,
#amtiPaymentModalCard #dashPaymentActionArea,
#amtiPaymentModalCard #dashPixResultArea,
#amtiPaymentModalCard #dashCardResultArea,
#amtiPaymentModalCard #dashBoletoResultArea {
    background: var(--popup-surface-raised) !important;
    border-color: var(--popup-border) !important;
}

#amtiPaymentModalCard .dash-plan-card.selected {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.34), rgba(15, 23, 42, 0.96)) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.28), 0 10px 24px rgba(2, 132, 199, 0.22) !important;
    transform: translateY(-2px);
}

#amtiPaymentModalCard .dash-plan-card:not(.selected) {
    box-shadow: none !important;
    transform: none;
}

#amtiPaymentModalCard input,
#amtiPaymentModalCard select {
    background: var(--popup-surface-raised) !important;
    border-color: var(--popup-border) !important;
    color: var(--popup-text) !important;
}

#amtiPaymentModalCard .amti-btn-primary,
#amtiPaymentModalCard #dashCardCheckoutBtn,
#amtiPaymentModalCard #dashBoletoLinkBtn {
    background: var(--popup-accent) !important;
    border-color: var(--popup-accent) !important;
    color: var(--popup-accent-text) !important;
}

#amtiPaymentModalCard #dashPixQrContainer {
    background: #ffffff !important;
}

/* Dynamic popups inherit the visual preferences configured in the Dashboard. */
html.amti-hide-blur #amtiPaymentModal,
html.amti-hide-blur #contractExpirationWarningModal,
body.amti-hide-blur #amtiPaymentModal,
body.amti-hide-blur #contractExpirationWarningModal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.amti-hide-animations #amtiPaymentModal *,
html.amti-hide-animations #contractExpirationWarningModal *,
body.amti-hide-animations #amtiPaymentModal *,
body.amti-hide-animations #contractExpirationWarningModal * {
    animation: none !important;
    transition: none !important;
}

html.amti-hide-glow #amtiPaymentModalCard,
html.amti-hide-glow .amti-contract-warning-card,
body.amti-hide-glow #amtiPaymentModalCard,
body.amti-hide-glow .amti-contract-warning-card {
    box-shadow: var(--popup-shadow) !important;
}

@media (max-width: 700px) {
    .amti-contract-expiration-banner {
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        min-height: 50px;
        flex-basis: 50px;
        padding: 3px 7px;
    }

    body.has-contract-expiration-banner .amti-shell {
        height: calc(100vh - 50px);
        max-height: calc(100vh - 50px);
        min-height: 0;
    }

    @media (max-width: 700px) {
        body.has-contract-expiration-banner .amti-shell {
            height: calc(100vh - 58px);
            max-height: calc(100vh - 58px);
            min-height: 0;
        }
    }

    .amti-contract-expiration-actions {
        justify-content: flex-end;
    }
}

.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;
    min-width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.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: 10px;
    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: 10px;
    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;
    }
}

.instance-indicator-pill {
  padding: .35rem .875rem;
  background: var(--primary-dim);
  border: 1px solid var(--border-active);
  border-radius: 99px;
  font-size: .78rem;
  color: var(--primary);
  font-weight: 600;
}

/* ─── 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; }
.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: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.bot-mode-select-minimal:focus { outline: none; border-color: var(--primary); }
.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;
}
.interaction-header { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .8rem; }
.client-number { font-weight: 600; color: var(--text-1); }
.interaction-time { color: var(--text-3); }
.interaction-content { font-size: .82rem; color: var(--text-2); display: flex; flex-direction: column; gap: .3rem; }
.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(15, 23, 42, 0.98);
  background-color: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--r-md);
  color: var(--text-1);
  padding: .55rem .875rem;
  width: 100%;
    /* Hide native dropdown glyphs globally so custom arrows are used */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: dark;
}

/* Ensure IE/Edge default expand glyph is hidden globally */
select::-ms-expand { display: none !important; }

/* Remove spinners/setas internas redundantes do navegador em inputs numéricos */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

select option,
select optgroup {
  color: var(--text-1);
  background-color: var(--bg-input, #0f172a);
}

select option:checked,
select option:hover,
select option[selected] {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.18), rgba(129, 140, 248, 0.18));
  color: #fff;
}
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 ─── */
.modal {
  position: fixed; inset: 0;
  background: rgba(2,6,23,.72);
  backdrop-filter: none;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.modal-content {
  background: var(--bg-card, linear-gradient(180deg, rgba(15,23,42,.98), rgba(8,15,28,.98)));
  border: 1px solid rgba(148,163,184,.18);
  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 28px 50px rgba(2,6,23,.55), 0 0 0 1px rgba(56,189,248,.08), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
}

.modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.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);
}


/* Fully rounded chat input */
#chatInput { border-radius: 10px !important; padding-left: 16px; }



/* Force all form controls to match button radius */
input.amti-form-control, select.amti-form-control, textarea.amti-form-control, .amti-form-control, .os-card-search-input, .pdv-widget-search-input, .chat-input, #chatInput { border-radius: var(--radius-md) !important; }

/* Force remove shadow */
input.amti-form-control, select.amti-form-control, textarea.amti-form-control, .amti-form-control, .os-card-search-input, .pdv-widget-search-input, .chat-input, #chatInput, .amti-form-control:focus, .amti-form-control:active, .amti-search-wrapper, .os-card-search-panel { box-shadow: none !important; outline: none !important; }


/* ==========================================================================
   PERFORMANCE ENGINE — GPU Acceleration, Containment & Compositing
   Otimizações avançadas para renderização suave em 60fps.
   ========================================================================== */

/* ── GPU Compositing: Promover elementos pesados para layers GPU ── */
.amti-card,
.amti-sidebar,
.amti-table-container,
.amti-modal-overlay,
.amti-tab-content.active {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── CSS Containment: Limitar recálculo de layout ── */
.amti-card,
.amti-grid-card,
.amti-stat-card {
  contain: layout style paint;
}

.amti-sidebar,
.amti-topbar {
  contain: layout style;
}

.amti-modal-content {
  contain: layout style paint;
}

.amti-tab-content {
  contain: layout style;
}

/* ── Content Visibility: Pular renderização de abas fora da viewport ── */
.amti-tab-content:not(.active) {
  content-visibility: hidden;
  contain-intrinsic-size: 0 500px;
}

/* ── Content Visibility Auto: Renderização preguiçosa de cards fora da viewport ── */
.amti-dashboard-grid > .amti-card,
.amti-dashboard-grid > .amti-grid-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

/* ── Containment em linhas de tabela (evita reflow total em delta updates) ── */
.amti-table tbody tr {
  contain: layout style paint;
}

/* ── will-change: Avisar o browser sobre elementos que serão animados ── */
.amti-card:hover,
.amti-btn:hover,
.amti-sidebar-link:hover {
  will-change: transform, box-shadow;
}

/* Remover will-change após 300ms para não manter layers desnecessárias */
.amti-card,
.amti-btn,
.amti-sidebar-link {
  will-change: auto;
}


/* ==========================================================================
   ACESSIBILIDADE — Respeitar preferência do sistema por menos movimento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body:not(.amti-motion-enabled) *,
  body:not(.amti-motion-enabled) *::before,
  body:not(.amti-motion-enabled) *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  /* Disable GPU-heavy effects for reduced-motion users when animations are not explicitly enabled */
  body:not(.amti-motion-enabled) .amti-sidebar,
  body:not(.amti-motion-enabled) .amti-modal-overlay,
  body:not(.amti-motion-enabled) .amti-modal-content,
  body:not(.amti-motion-enabled) .amti-topbar,
  body:not(.amti-motion-enabled) .amti-card,
  body:not(.amti-motion-enabled) .amti-grid-card,
  body:not(.amti-motion-enabled) .amti-stat-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   📱 RESPONSIVIDADE TOTAL DISPOSITIVOS MÓVEIS (RETRATO & PAISAGEM)
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
  .zn-card, .amti-card {
    padding: 1rem !important;
  }
  .zn-modal-content, .amti-modal-content, .modal-content {
    max-width: 95vw !important;
    margin: 1rem auto !important;
    padding: 1.25rem !important;
  }
}

/* Ajustes em modo Paisagem para Smartphones (Altura útil reduzida) */
@media (max-height: 580px) and (orientation: landscape) {
  .zn-modal-overlay, .amti-modal-overlay, .modal-backdrop {
    align-items: flex-start !important;
    padding: 0.5rem !important;
    overflow-y: auto !important;
  }
  .zn-modal-content, .amti-modal-content, .modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 0.25rem auto !important;
  }
  .top-navbar, .amti-topbar {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
}


.company-shortcuts-notice-highlight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-left: 5px solid #fbbf24;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.08));
  color: var(--text-primary, #eff6ff);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12);
}

.company-shortcuts-notice-highlight > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #fbbf24;
  font-size: 1.25rem;
}

.company-shortcuts-notice-highlight p {
  margin: 0;
  line-height: 1.6;
}

/* ── Standalone Mode: Esconder elementos de navegador ── */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) {
  /* Esconder botões que só fazem sentido em navegador (instalar app, certificado) */
  #installAppButton,
  #installCertButton,
  #installAppSimpleButton {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ── PWA Já Instalado ou em Standalone: Ocultar permanentemente botões de instalação ── */
html.amti-pwa-installed #installAppButton,
html.amti-pwa-installed #installCertButton,
html.amti-pwa-installed #installAppSimpleButton,
html.amti-pwa-standalone #installAppButton,
html.amti-pwa-standalone #installCertButton,
html.amti-pwa-standalone #installAppSimpleButton,
body.amti-pwa-installed #installAppButton,
body.amti-pwa-installed #installCertButton,
body.amti-pwa-installed #installAppSimpleButton,
body.amti-pwa-standalone #installAppButton,
body.amti-pwa-standalone #installCertButton,
body.amti-pwa-standalone #installAppSimpleButton,
body[data-pwa-installed="true"] #installAppButton,
body[data-pwa-installed="true"] #installCertButton,
body[data-pwa-installed="true"] #installAppSimpleButton {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Modo com certificado (toggle ativado): os controles guiados prevalecem
      mesmo com o PWA instalado ou em janela standalone, pois o certificado
      e as instruções servem aos demais computadores da rede. ── */
body.amti-cert-mode #installAppButton,
body.amti-cert-mode #installCertButton {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.amti-cert-mode #installAppSimpleButton {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Modo simples (toggle desativado): garantia por CSS de que o header mostra
      SOMENTE o botão padrão de instalação, sem instruções e sem certificado.
      Não depende de inline styles do JS, prevalecendo mesmo em caches mistos.
      A regra de MOSTRAR é escopada com :not(...) para NÃO forçar o botão quando
      o app já está instalado/standalone — nesses casos o JS esconde tudo e o
      clique não teria efeito (equivalente à ocultação das regras abaixo). ── */
body.amti-simple-mode #installAppButton,
body.amti-simple-mode #installCertButton {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.amti-simple-mode:not(.amti-pwa-installed):not(.amti-pwa-standalone):not([data-pwa-installed="true"]) #installAppSimpleButton {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── PWA já instalado (somente no NAVEGADOR): o botão é MANTIDO com o rótulo
      "App Instalado" e o clique orienta a abertura do aplicativo instalado. Dentro
      da janela do app (amti-pwa-standalone) o botão permanece oculto — seria
      um controle morto. Sobrescreve a ocultação permanente acima SEM afetar o
      fluxo de instalação (:not(.amti-pwa-standalone) blinda o app aberto). ── */
body.amti-simple-mode.amti-pwa-installed:not(.amti-pwa-standalone) #installAppSimpleButton,
body.amti-simple-mode[data-pwa-installed="true"]:not(.amti-pwa-standalone) #installAppSimpleButton {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

  /* Esconder seleção de texto que não faz sentido em apps nativos */
  body {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Manter seleção de texto em inputs/textareas/conteúdo editável */
  input, textarea, [contenteditable="true"],
  .amti-form-control, .amti-textarea, pre, code {
    -webkit-user-select: text !important;
    user-select: text !important;
  }

/* ── Proibição Absoluta de Seleção de Texto em TODAS as Tabelas do Dashboard ── */
table,
table *,
.amti-table,
.amti-table *,
.os-table,
.os-table *,
.clients-table,
.clients-table *,
.equipments-table,
.equipments-table *,
.comissao-detail-table,
.comissao-detail-table *,
.view-os-items-table,
.view-os-items-table *,
.amti-table-container,
.amti-table-container *,
.os-table-wrap,
.os-table-wrap * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Permitir seleção apenas em campos editáveis caso existam dentro de células */
table input,
table textarea,
table [contenteditable="true"],
.amti-table input,
.amti-table textarea,
.amti-table [contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}