/* ============================================================
   Arquivo: isp-default.css
   Sistema: ISP System — Design System Dark Tech v9.0 (FINAL)
   Descrição: CSS completo e unificado — Dark Tech como padrão
              Dual-theme: Dark (padrão) + Light (alternativo)
              CORREÇÃO: Selects, inputs e todos os componentes
              agora seguem o tema escuro corretamente.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&family=Sora:wght@700;800&display=swap');


/* ════════════════════════════════════════════════════════════
   TOKENS — TEMA DARK TECH (padrão / :root)
   v9.0 — Corrigido para selects e inputs obedecerem o tema dark
   ════════════════════════════════════════════════════════════ */
:root {

  /* — Paleta de marca (Blue Electric) — */
  --brand-50:  #e8ecff;
  --brand-100: #d0d8ff;
  --brand-200: #a8b4fa;
  --brand-300: #7a8ef5;
  --brand-400: #5a72ef;
  --brand-500: #4361ee;
  --brand-600: #3651d4;
  --brand-700: #2a3fb0;
  --brand-800: #1e2d8c;
  --brand-900: #121b68;

  /* — Paleta de acento (Purple) — */
  --accent-300: #c77dff;
  --accent-400: #a855f7;
  --accent-500: #7209b7;
  --accent-600: #5a0792;
  --accent-700: #43056d;

  /* — Paleta secundária (Cyan) — */
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0e8fa3;

  /* — Status — */
  --success-50:  #e6fdf6;
  --success-400: #06d6a0;
  --success-500: #2ecc71;
  --success-600: #27ae60;
  --warning-50:  #fff8e1;
  --warning-400: #ffb703;
  --warning-500: #f39c12;
  --warning-600: #e67e22;
  --danger-50:   #fde8ee;
  --danger-400:  #ef476f;
  --danger-500:  #e74c3c;
  --danger-600:  #c0392b;
  --info-50:     #e0f9ff;
  --info-400:    #22d3ee;
  --info-500:    #06b6d4;
  --info-600:    #0e8fa3;

  /* — Cores semânticas — */
  --primary-color:   var(--brand-500);
  --secondary-color: var(--brand-400);
  --accent-color:    var(--accent-500);
  --danger-color:    var(--danger-400);
  --warning-color:   var(--warning-400);
  --success-color:   var(--success-400);
  --info-color:      var(--cyan-500);

  /* ════════════════════════════════════════════════════════════
     SUPERFÍCIES (Dark Tech — indigo profundo)
  ════════════════════════════════════════════════════════════ */
  --body-bg:   linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  --surface-0: #0f0c29;
  --surface-1: #1a1730;
  --surface-2: #24243e;
  --surface-3: rgba(255, 255, 255, 0.10);
  --surface-4: rgba(255, 255, 255, 0.07);
  --surface-5: rgba(255, 255, 255, 0.13);
  --card-bg:   rgba(255, 255, 255, 0.10);

  /* ════════════════════════════════════════════════════════════
     TEXTO
  ════════════════════════════════════════════════════════════ */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-muted:     rgba(255, 255, 255, 0.65);
  --text-subtle:    rgba(255, 255, 255, 0.40);
  --text-color:     var(--text-primary);

  /* ════════════════════════════════════════════════════════════
     BORDAS
  ════════════════════════════════════════════════════════════ */
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.15);
  --border-strong:  rgba(255, 255, 255, 0.25);
  --border-color:   var(--border-default);

  /* ════════════════════════════════════════════════════════════
     SIDEBAR
  ════════════════════════════════════════════════════════════ */
  --sidebar-bg-from: #0d0b20;
  --sidebar-bg-to:   #16213e;
  --sidebar-text:          rgba(255, 255, 255, 0.93);
  --sidebar-text-muted:    rgba(255, 255, 255, 0.50);
  --sidebar-border:        rgba(255, 255, 255, 0.09);
  --sidebar-active-bg:     rgba(67, 97, 238, 0.24);
  --sidebar-hover-bg:      rgba(255, 255, 255, 0.07);
  --sidebar-active-border: var(--brand-400);

  /* ════════════════════════════════════════════════════════════
     GLASS
  ════════════════════════════════════════════════════════════ */
  --glass-bg:     rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur:   20px;

  /* ════════════════════════════════════════════════════════════
     SOMBRAS
  ════════════════════════════════════════════════════════════ */
  --shadow-xs:  0 2px 8px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-sm:  0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.07);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.50), 0 3px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
  --shadow-lg:  0 15px 45px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.09);
  --shadow-xl:  0 24px 70px rgba(0,0,0,0.65), 0 10px 28px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.10);
  --shadow-brand:    0 0 20px rgba(67,97,238,0.55), 0 4px 18px rgba(67,97,238,0.30);
  --shadow-brand-lg: 0 0 40px rgba(67,97,238,0.75), 0 8px 36px rgba(67,97,238,0.45);
  --shadow-accent:   0 0 20px rgba(114,9,183,0.50);
  --shadow-success:  0 0 18px rgba(46,204,113,0.60);
  --shadow-danger:   0 0 18px rgba(231,76,60,0.60);
  --shadow-warning:  0 0 18px rgba(255,183,3,0.50);

  /* ════════════════════════════════════════════════════════════
     LAYOUT
  ════════════════════════════════════════════════════════════ */
  --sidebar-width:           280px;
  --sidebar-collapsed-width: 70px;
  --nav-height:              62px;

  /* ════════════════════════════════════════════════════════════
     TIPOGRAFIA
  ════════════════════════════════════════════════════════════ */
  --font-main:    'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Sora', sans-serif;
  --font-mono:    'DM Mono', 'Fira Code', monospace;

  /* — Tamanhos de fonte — */
  --font-xs:   0.62rem;
  --font-sm:   0.72rem;
  --font-base: 0.82rem;
  --font-md:   0.875rem;
  --font-lg:   1rem;
  --font-xl:   1.2rem;

  /* ════════════════════════════════════════════════════════════
     GEOMETRIA
  ════════════════════════════════════════════════════════════ */
  --radius-xs:   3px;
  --radius-sm:   8px;
  --radius:      10px;
  --radius-md:   13px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ════════════════════════════════════════════════════════════
     DURAÇÕES BASE (para animações)
  ════════════════════════════════════════════════════════════ */
  --dur-fast:  110ms;
  --dur-base:  210ms;
  --dur-slow:  360ms;

  /* ════════════════════════════════════════════════════════════
     EASINGS / CURVAS DE TRANSIÇÃO
  ════════════════════════════════════════════════════════════ */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);

  /* ════════════════════════════════════════════════════════════
     GRADIENTES
  ════════════════════════════════════════════════════════════ */
  --gradient-brand:   linear-gradient(135deg, var(--brand-500) 0%, var(--accent-500) 100%);
  --gradient-brand-v: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
  --gradient-accent:  linear-gradient(135deg, var(--accent-500) 0%, var(--cyan-500) 100%);
  --gradient-success: linear-gradient(135deg, var(--success-400) 0%, var(--success-500) 100%);
  --gradient-danger:  linear-gradient(135deg, var(--danger-400) 0%, var(--danger-500) 100%);
  --gradient-warning: linear-gradient(135deg, var(--warning-400) 0%, var(--warning-500) 100%);
  --gradient-surface: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
  --gradient-body:    linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}


/* ════════════════════════════════════════════════════════════
   RESET E ESTILOS GLOBAIS
   ════════════════════════════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--body-bg);
  background-attachment: fixed;
  font-family: var(--font-main);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}


/* ════════════════════════════════════════════════════════════
   SELECTS, INPUTS E FORMULÁRIOS — CORREÇÃO PRINCIPAL
   Garantia de que TODOS os selects e inputs tenham fundo escuro
   ════════════════════════════════════════════════════════════ */

/* Base para todos os selects e inputs */
select,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
.form-control,
.form-select,
.isp-input,
.isp-select {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.5rem 0.75rem !important;
  transition: all var(--dur-base) var(--ease-smooth) !important;
}

/* Focus para todos */
select:focus,
input:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.isp-input:focus,
.isp-select:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--brand-400) !important;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2), var(--shadow-brand) !important;
  outline: none !important;
}

/* Select dropdown arrow - branca para tema escuro */
select,
.form-select,
.isp-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
}

/* Options dentro do select - fundo escuro */
select option,
.form-select option,
.isp-select option {
  background: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border: none !important;
  padding: 8px 12px !important;
}

select option:hover,
.form-select option:hover,
.isp-select option:hover {
  background: rgba(67, 97, 238, 0.3) !important;
}

/* Select disabled */
select:disabled,
.form-select:disabled,
.isp-select:disabled {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: not-allowed !important;
}

/* Labels */
label,
.form-label {
  color: var(--text-muted);
  font-size: var(--font-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

/* Input group - corrigido */
.input-group-text {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  border-radius: var(--radius-md);
}

/* Placeholder */
::placeholder {
  color: var(--text-subtle) !important;
  opacity: 0.7;
}


/* ════════════════════════════════════════════════════════════
   CARDS E PAINEIS
   ════════════════════════════════════════════════════════════ */
.card,
.stat-card,
.table-wrapper,
.isp-panel {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: all var(--dur-base) var(--ease-smooth);
}

.card:hover,
.stat-card:hover,
.isp-panel:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-header,
.card-header-isp {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-footer,
.card-footer-isp {
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border-default);
  padding: 1rem 1.5rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Glass card */
.glass-card,
.card-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}


/* ════════════════════════════════════════════════════════════
   TABELAS
   ════════════════════════════════════════════════════════════ */
.table,
.table-isp {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-primary);
}

.table thead th,
.table-isp thead th {
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--border-default);
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table tbody td,
.table-isp tbody td {
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.table tbody tr:hover,
.table-isp tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Tabela responsiva */
.table-responsive {
  overflow-x: auto;
  border-radius: var(--radius-lg);
}


/* ════════════════════════════════════════════════════════════
   BOTÕES
   ════════════════════════════════════════════════════════════ */
.btn {
  border-radius: var(--radius-md);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  transition: all var(--dur-base) var(--ease-smooth);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--font-sm);
}

.btn-isp {
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.btn-isp:hover {
  background: var(--surface-4);
  border-color: var(--brand-400);
  transform: translateY(-1px);
}

.btn-isp-primary {
  background: var(--gradient-brand);
  border: none;
  color: #fff;
}

.btn-isp-primary:hover {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--accent-600) 100%);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}

.btn-isp-success {
  background: var(--gradient-success);
  border: none;
  color: #fff;
}

.btn-isp-success:hover {
  background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
  box-shadow: var(--shadow-success);
  transform: translateY(-1px);
}

.btn-isp-danger {
  background: var(--gradient-danger);
  border: none;
  color: #fff;
}

.btn-isp-danger:hover {
  background: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%);
  box-shadow: var(--shadow-danger);
  transform: translateY(-1px);
}

.btn-isp-outline {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.btn-isp-outline:hover {
  background: var(--surface-3);
  border-color: var(--brand-400);
  color: #fff;
  transform: translateY(-1px);
}

.btn-isp-sm {
  padding: 0.25rem 0.75rem;
  font-size: var(--font-xs);
}

.btn-group .btn {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-xs);
}


/* ════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════ */
.badge,
.badge-isp {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-success,
.badge-soft-success {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.badge-danger,
.badge-soft-danger {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.badge-warning,
.badge-soft-warning {
  background: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  border: 1px solid rgba(243, 156, 18, 0.3);
}

.badge-info,
.badge-soft-info {
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-primary,
.badge-soft-primary {
  background: rgba(67, 97, 238, 0.15);
  color: #4361ee;
  border: 1px solid rgba(67, 97, 238, 0.3);
}

.badge-purple {
  background: rgba(114, 9, 183, 0.15);
  color: #7209b7;
  border: 1px solid rgba(114, 9, 183, 0.3);
}


/* ════════════════════════════════════════════════════════════
   MODAIS
   ════════════════════════════════════════════════════════════ */
.modal-content {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.modal-header {
  border-bottom: 1px solid var(--border-default);
  padding: 1rem 1.5rem;
}

.modal-header .modal-title {
  color: var(--text-primary);
}

.modal-body {
  background: transparent;
  padding: 1.5rem;
  color: var(--text-primary);
}

.modal-footer {
  border-top: 1px solid var(--border-default);
  padding: 1rem 1.5rem;
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

.btn-close:hover {
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════
   ALERTAS E TOASTS
   ════════════════════════════════════════════════════════════ */
.alert {
  border: none;
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
}

.alert-success {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  border-left: 4px solid #2ecc71;
}

.alert-danger {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border-left: 4px solid #e74c3c;
}

.alert-warning {
  background: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  border-left: 4px solid #f39c12;
}

.alert-info {
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
  border-left: 4px solid #06b6d4;
}

.toast {
  background: rgba(22, 22, 46, 0.97);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
}

.toast-header {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
}

.toast-body {
  color: var(--text-primary);
}


/* ════════════════════════════════════════════════════════════
   PAGINAÇÃO
   ════════════════════════════════════════════════════════════ */
.pagination {
  gap: 4px;
}

.pagination .page-link {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  transition: all var(--dur-fast) var(--ease-smooth);
}

.pagination .page-link:hover {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
  background: var(--gradient-brand);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.pagination .page-item.disabled .page-link {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}


/* ════════════════════════════════════════════════════════════
   LOADING OVERLAY E SPINNERS
   ════════════════════════════════════════════════════════════ */
.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(5px);
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--border-default);
  border-top-color: var(--brand-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.spinner-overlay {
  background: rgba(4, 5, 16, 0.82);
}

.spinner-content {
  background: rgba(22, 22, 46, 0.97);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 2rem;
}


/* ════════════════════════════════════════════════════════════
   ANIMAÇÕES
   ════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse-online {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(46, 204, 113, 0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

.isp-status-dot.online {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #2ecc71;
  border-radius: 50%;
  animation: pulse-online 1.5s infinite;
}


/* ════════════════════════════════════════════════════════════
   UTILITÁRIOS
   ════════════════════════════════════════════════════════════ */
.cursor-pointer {
  cursor: pointer;
}

.text-mono {
  font-family: var(--font-mono);
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shadow-glow {
  box-shadow: var(--shadow-brand);
}

.border-white-10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-isp-surface {
  background: var(--surface-3);
}

.bg-isp-surface2 {
  background: var(--surface-4);
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
  .table-responsive table thead {
    display: none;
  }
  
  .table-responsive table tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.5rem;
  }
  
  .table-responsive table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: none;
    text-align: right;
  }
  
  .table-responsive table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--brand-400);
    font-size: var(--font-xs);
    text-transform: uppercase;
    margin-right: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  /* ===== ESTILIZAÇÃO DO DATE PICKER NATIVO ===== */
input[type="date"].isp-input {
    color-scheme: dark;
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid var(--isp-border2) !important;
    color: #ffffff !important;
    padding: 10px 14px;
    border-radius: var(--isp-radius);
    font-size: 0.88rem;
}

/* Ícone do calendário (WebKit/Blink) */
input[type="date"].isp-input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
input[type="date"].isp-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Placeholder (se houver) – usando pseudo‑elemento não padrão, mas funcional */
input[type="date"].isp-input::-webkit-datetime-edit-fields-wrapper {
    color: #ffffff;
}
input[type="date"].isp-input::-webkit-datetime-edit-text {
    color: var(--isp-text-dim);
}
input[type="date"].isp-input::-webkit-datetime-edit-month-field,
input[type="date"].isp-input::-webkit-datetime-edit-day-field,
input[type="date"].isp-input::-webkit-datetime-edit-year-field {
    color: #ffffff;
}
/* ============================================ */
/* ANIMAÇÕES PARA KPIs EM TEMPO REAL            */
/* ============================================ */

/* Animação de pulso para atualização de KPI */
.kpi-updated {
    animation: kpiPulse 0.5s ease-in-out;
}

@keyframes kpiPulse {
    0% { 
        transform: scale(1); 
        background-color: rgba(67, 97, 238, 0);
    }
    50% { 
        transform: scale(1.05); 
        background-color: rgba(67, 97, 238, 0.25);
        text-shadow: 0 0 8px rgba(67, 97, 238, 0.5);
    }
    100% { 
        transform: scale(1); 
        background-color: rgba(67, 97, 238, 0);
    }
}

/* Badge de status WebSocket */
.ws-badge-online {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: pulseOnline 2s infinite;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

.ws-badge-offline {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

@keyframes pulseOnline {
    0% { 
        opacity: 0.85; 
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
    }
    70% { 
        opacity: 1; 
        box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);
    }
    100% { 
        opacity: 0.85; 
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* Cards de KPI - hover e transições */
.stat-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.stat-card:active {
    transform: translateY(0);
}

/* Efeito de loading shimmer para KPIs */
.kpi-loading {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.03) 25%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: kpiShimmer 1.5s infinite;
    border-radius: 8px;
    min-height: 60px;
}

@keyframes kpiShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tooltips para badges */
.ws-badge-online:hover,
.ws-badge-offline:hover {
    transform: scale(1.05);
    cursor: help;
    transition: transform 0.2s ease;
}

/* Valor do KPI - destaque */
.kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* Cores específicas para cada tipo de KPI */
.kpi-success { color: #2ecc71; }
.kpi-danger { color: #e74c3c; }
.kpi-warning { color: #f39c12; }
.kpi-info { color: #3498db; }
.kpi-primary { color: #4361ee; }

/* Ícone de atualização girando */
.kpi-refresh-icon {
    animation: kpiSpin 0.8s linear infinite;
}

@keyframes kpiSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Efeito de brilho para novos dados */
.kpi-glowing {
    animation: kpiGlow 0.8s ease-out;
}

@keyframes kpiGlow {
    0% { text-shadow: 0 0 0 rgba(46, 204, 113, 0); }
    50% { text-shadow: 0 0 15px rgba(46, 204, 113, 0.8); }
    100% { text-shadow: 0 0 0 rgba(46, 204, 113, 0); }
}

/* Fallback para Firefox (input type="date" não é completamente estilizável, 
   mas ao menos o texto fica branco) */
input[type="date"].isp-input {
    color-scheme: dark;
}
}

/* ════════════════════════════════════════════════════════════
   TEMA ALTERNATIVO — WINDOWS DARK (cinzas neutros)
   Ativado por <html data-theme="windows">
   Paleta inspirada no Windows 11 Dark Mode:
     Background base   #202020
     Surfaces          #2b2b2b → #323232
     Borders           #3a3a3a (subtle) / #4a4a4a (default)
     Acento            #4cc2ff (azul sistema do Windows 11)
   Não altera :root — Dark Tech continua sendo o tema padrão.
   ════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
[data-theme="windows"] {
  --body-bg:   #202020;
  --surface-0: #202020;
  --surface-1: #2b2b2b;
  --surface-2: #323232;
  --surface-3: #3a3a3a;
  --surface-4: #454545;
  --surface-5: #525252;
  --card-bg:   #2b2b2b;
  --text-primary:   #ffffff;
  --text-secondary: rgba(255,255,255,0.92);
  --text-muted:     rgba(255,255,255,0.72);
  --text-subtle:    rgba(255,255,255,0.50);
  --text-color:     var(--text-primary);
  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.22);
  --border-color:   var(--border-default);
  --sidebar-bg-from: #1f1f1f;
  --sidebar-bg-to:   #2b2b2b;
  --sidebar-text:          rgba(255,255,255,0.95);
  --sidebar-text-muted:    rgba(255,255,255,0.55);
  --sidebar-border:        rgba(255,255,255,0.07);
  --sidebar-active-bg:     rgba(76,194,255,0.18);
  --sidebar-hover-bg:      rgba(255,255,255,0.06);
  --sidebar-active-border: #4cc2ff;
  --glass-bg:     rgba(43,43,43,0.85);
  --glass-border: rgba(255,255,255,0.10);
  --glass-blur:   24px;
  --brand-300: #99d8ff;
  --brand-400: #6ccfff;
  --brand-500: #4cc2ff;
  --brand-600: #3aa9e6;
  --brand-700: #2d8fc4;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.07);
  --shadow-brand:    0 0 14px rgba(76,194,255,0.45), 0 2px 10px rgba(76,194,255,0.25);
  --shadow-brand-lg: 0 0 24px rgba(76,194,255,0.55), 0 4px 18px rgba(76,194,255,0.35);
  --gradient-brand:   linear-gradient(135deg, #4cc2ff 0%, #6ccfff 100%);
  --gradient-brand-v: linear-gradient(180deg, #4cc2ff 0%, #3aa9e6 100%);
  --gradient-surface: linear-gradient(135deg, #2b2b2b 0%, #323232 100%);
  --gradient-body:    #202020;
  --primary-color:   #4cc2ff;
  --secondary-color: #6ccfff;
  --accent-color:    #4cc2ff;
  --light-color:     #3a3a3a;
  --dark-color:      #ffffff;
  --surface:         #2b2b2b;
}

/* ── Body e containers principais ── */
[data-theme="windows"] body { background: #202020 !important; }
[data-theme="windows"] .main-content { background: transparent; }
[data-theme="windows"] .layout-topbar .main-content { background: #202020; }

/* ── Sidebar ── */
[data-theme="windows"] .sidebar {
  background: linear-gradient(180deg, #1f1f1f 0%, #2b2b2b 100%) !important;
  box-shadow: 6px 0 50px rgba(0,0,0,0.40), 1px 0 0 rgba(255,255,255,0.05) !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
[data-theme="windows"] .sidebar-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
[data-theme="windows"] .sidebar-header::before { background: #4cc2ff !important; }
[data-theme="windows"] .sidebar-user {
  background: rgba(0,0,0,0.18) !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
}
[data-theme="windows"] .sidebar-user:hover { background: rgba(76,194,255,0.08) !important; }
[data-theme="windows"] .sidebar-footer {
  background: rgba(0,0,0,0.25) !important;
  border-top-color: rgba(255,255,255,0.07) !important;
}
[data-theme="windows"] .sidebar-controls {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="windows"] .sidebar-control-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="windows"] .sidebar-control-btn:hover {
  background: rgba(76,194,255,0.24) !important;
  border-color: rgba(76,194,255,0.40) !important;
}
[data-theme="windows"] .menu-search-input {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.95) !important;
}
[data-theme="windows"] .menu-search-input:focus {
  background: rgba(76,194,255,0.10) !important;
  border-color: #4cc2ff !important;
  box-shadow: 0 0 0 3px rgba(76,194,255,0.18) !important;
}
[data-theme="windows"] .menu-search-count { color: rgba(255,255,255,0.55) !important; }
[data-theme="windows"] .menu-recents-panel {
  background: rgba(0,0,0,0.30) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="windows"] .menu-recents-clear { color: rgba(255,255,255,0.30) !important; }
[data-theme="windows"] .menu-recents-clear:hover { color: #ef476f !important; }
[data-theme="windows"] .menu-recent-item { color: rgba(255,255,255,0.65) !important; }
[data-theme="windows"] .menu-recent-item:hover,
[data-theme="windows"] .menu-recent-item.kb-focused {
  background: rgba(76,194,255,0.10) !important;
  color: #fff !important;
  border-left-color: #4cc2ff !important;
}
[data-theme="windows"] .sidebar-section-title { color: rgba(255,255,255,0.45) !important; }
[data-theme="windows"] .sidebar-section-title::after { background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent) !important; }
[data-theme="windows"] .sidebar.collapsed .sidebar-menu .nav-link:hover::after {
  background: rgba(20,20,20,0.97) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="windows"] .user-avatar-sidebar,
[data-theme="windows"] .tb-avatar {
  background: #4cc2ff !important;
  box-shadow: 0 2px 8px rgba(76,194,255,0.40) !important;
  color: #1a1a1a !important;
}
[data-theme="windows"] .sidebar-brand i,
[data-theme="windows"] .topbar-brand i {
  background: #4cc2ff !important;
  -webkit-text-fill-color: #4cc2ff !important;
  animation: none !important;
}

/* ── Topbar ── */
[data-theme="windows"] .topbar {
  background: rgba(31,31,31,0.92) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(24px) !important;
}
[data-theme="windows"] .topbar::before { background: #4cc2ff !important; animation: none !important; }
[data-theme="windows"] .topbar-brand { border-right-color: rgba(255,255,255,0.07) !important; }
[data-theme="windows"] .topbar-search input {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="windows"] .topbar-search input:focus {
  background: rgba(76,194,255,0.10) !important;
  border-color: #4cc2ff !important;
  box-shadow: 0 0 0 3px rgba(76,194,255,0.18) !important;
}
[data-theme="windows"] .tb-btn {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.72) !important;
}
[data-theme="windows"] .tb-btn:hover {
  background: rgba(76,194,255,0.20) !important;
  border-color: rgba(76,194,255,0.40) !important;
  color: #fff !important;
  box-shadow: none !important;
}
[data-theme="windows"] .tb-btn.danger:hover {
  background: rgba(239,71,111,0.30) !important;
  border-color: rgba(239,71,111,0.50) !important;
  box-shadow: none !important;
}
[data-theme="windows"] .tb-user:hover { background: rgba(255,255,255,0.05) !important; }
[data-theme="windows"] .tb-badge { border-color: #202020 !important; }

/* ── Cards, panels, surfaces ── */
[data-theme="windows"] .card {
  background: #2b2b2b !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="windows"] .card::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%) !important;
}
[data-theme="windows"] .card:hover {
  background: #323232 !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) !important;
}
[data-theme="windows"] .card-header,
[data-theme="windows"] .card-header-isp {
  background: #323232 !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
[data-theme="windows"] .card-header::before,
[data-theme="windows"] .card-header::after { display: none !important; }
[data-theme="windows"] .card-footer,
[data-theme="windows"] .card-footer-isp {
  background: #323232 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
[data-theme="windows"] .isp-panel {
  background: #2b2b2b !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="windows"] .isp-panel-header {
  background: #323232 !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-theme="windows"] .isp-panel-footer {
  background: #252525 !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── Tabela ── */
[data-theme="windows"] .table {
  background: #2b2b2b !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="windows"] .table thead {
  background: #323232 !important;
  color: rgba(255,255,255,0.85) !important;
}
[data-theme="windows"] .table thead th {
  background: #323232 !important;
  color: rgba(255,255,255,0.85) !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}
[data-theme="windows"] .table td {
  border-color: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}
[data-theme="windows"] .table tbody tr:hover,
[data-theme="windows"] .table-hover tbody tr:hover {
  background: rgba(255,255,255,0.05) !important;
}

/* ── Forms / Inputs ── */
[data-theme="windows"] .form-control,
[data-theme="windows"] .form-select,
[data-theme="windows"] select,
[data-theme="windows"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="windows"] textarea,
[data-theme="windows"] .isp-input,
[data-theme="windows"] .isp-select {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
[data-theme="windows"] .form-control:focus,
[data-theme="windows"] .form-select:focus,
[data-theme="windows"] select:focus,
[data-theme="windows"] input:focus,
[data-theme="windows"] textarea:focus,
[data-theme="windows"] .isp-input:focus,
[data-theme="windows"] .isp-select:focus {
  background: rgba(255,255,255,0.08) !important;
  border-color: #4cc2ff !important;
  box-shadow: 0 0 0 2px rgba(76,194,255,0.25) !important;
}
[data-theme="windows"] select option,
[data-theme="windows"] .form-select option,
[data-theme="windows"] .isp-select option {
  background: #2b2b2b !important;
  color: #fff !important;
}
[data-theme="windows"] .form-label { color: rgba(255,255,255,0.78) !important; }
[data-theme="windows"] .input-group-text {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.72) !important;
}

/* ── Botões ── */
[data-theme="windows"] .btn-primary {
  background: #4cc2ff !important;
  background-image: none !important;
  border: 1px solid #4cc2ff !important;
  color: #1a1a1a !important;
  box-shadow: 0 0 12px rgba(76,194,255,0.35) !important;
}
[data-theme="windows"] .btn-primary:hover {
  background: #6ccfff !important;
  color: #1a1a1a !important;
  box-shadow: 0 0 18px rgba(76,194,255,0.55) !important;
}
[data-theme="windows"] .btn-secondary {
  background: #3a3a3a !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
[data-theme="windows"] .btn-secondary:hover { background: #454545 !important; }
[data-theme="windows"] .btn-outline-primary {
  background: transparent !important;
  border-color: #4cc2ff !important;
  color: #4cc2ff !important;
}
[data-theme="windows"] .btn-outline-primary:hover {
  background: #4cc2ff !important;
  color: #1a1a1a !important;
  border-color: #4cc2ff !important;
}
[data-theme="windows"] .btn-isp {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
[data-theme="windows"] .btn-isp:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.25) !important;
}
[data-theme="windows"] .btn-isp-primary {
  background: #4cc2ff !important;
  border-color: #4cc2ff !important;
  color: #1a1a1a !important;
}
[data-theme="windows"] .btn-isp-primary:hover {
  background: #6ccfff !important;
  border-color: #6ccfff !important;
  color: #1a1a1a !important;
  box-shadow: 0 0 14px rgba(76,194,255,0.50) !important;
}
[data-theme="windows"] .btn-isp-success {
  background: #2ecc71 !important;
  border-color: #2ecc71 !important;
}
[data-theme="windows"] .btn-isp-danger {
  background: #e74c3c !important;
  border-color: #e74c3c !important;
}

/* ── Badges ── */
[data-theme="windows"] .badge.bg-primary {
  background: rgba(76,194,255,0.18) !important;
  color: #4cc2ff !important;
  border-color: rgba(76,194,255,0.32) !important;
}
[data-theme="windows"] .badge.bg-success {
  background: rgba(46,204,113,0.18) !important;
  color: #2ecc71 !important;
  border-color: rgba(46,204,113,0.32) !important;
}
[data-theme="windows"] .badge.bg-danger {
  background: rgba(231,76,60,0.18) !important;
  color: #e74c3c !important;
  border-color: rgba(231,76,60,0.30) !important;
}
[data-theme="windows"] .badge.bg-warning {
  background: rgba(243,156,18,0.18) !important;
  color: #f39c12 !important;
  border-color: rgba(243,156,18,0.32) !important;
}
[data-theme="windows"] .badge.bg-info {
  background: rgba(6,182,212,0.18) !important;
  color: #06b6d4 !important;
  border-color: rgba(6,182,212,0.32) !important;
}
[data-theme="windows"] .badge.bg-secondary {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* ── Alerts ── */
[data-theme="windows"] .alert-success { background: rgba(46,204,113,0.15) !important; color: #2ecc71 !important; border-left-color: #2ecc71 !important; }
[data-theme="windows"] .alert-danger  { background: rgba(231,76,60,0.15) !important; color: #e74c3c !important; border-left-color: #e74c3c !important; }
[data-theme="windows"] .alert-warning { background: rgba(243,156,18,0.15) !important; color: #f39c12 !important; border-left-color: #f39c12 !important; }
[data-theme="windows"] .alert-info    { background: rgba(76,194,255,0.15) !important; color: #4cc2ff !important; border-left-color: #4cc2ff !important; }

/* ── Modal ── */
[data-theme="windows"] .modal-content {
  background: #2b2b2b !important;
  border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="windows"] .modal-header,
[data-theme="windows"] .modal-footer {
  background: #323232 !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}
[data-theme="windows"] .modal-header::before,
[data-theme="windows"] .modal-header::after { display: none !important; }
[data-theme="windows"] .modal-body { background: transparent !important; color: #fff !important; }

/* ── Paginação ── */
[data-theme="windows"] .pagination .page-link,
[data-theme="windows"] .page-link {
  background: #323232 !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.85) !important;
}
[data-theme="windows"] .page-link:hover {
  background: #4cc2ff !important;
  color: #1a1a1a !important;
  border-color: #4cc2ff !important;
}
[data-theme="windows"] .page-item.active .page-link {
  background: #4cc2ff !important;
  color: #1a1a1a !important;
  border-color: #4cc2ff !important;
}

/* ── Toast / spinner / overlays ── */
[data-theme="windows"] .toast {
  background: #2b2b2b !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
[data-theme="windows"] .toast-header {
  background: #323232 !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}
[data-theme="windows"] .toast::before { background: #4cc2ff !important; }
[data-theme="windows"] .spinner-overlay { background: rgba(0,0,0,0.72) !important; }
[data-theme="windows"] .spinner-content {
  background: #2b2b2b !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
[data-theme="windows"] .spinner-content::before { background: #4cc2ff !important; }
[data-theme="windows"] .loading-overlay { background: rgba(0,0,0,0.82) !important; }

/* ── Progress / divider / chip ── */
[data-theme="windows"] .progress { background: rgba(255,255,255,0.08) !important; }
[data-theme="windows"] .progress-bar {
  background: #4cc2ff !important;
  animation: none !important;
  box-shadow: none !important;
}
[data-theme="windows"] .isp-divider {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
}
[data-theme="windows"] .isp-chip {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.85) !important;
}
[data-theme="windows"] .isp-chip:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* ── Global progress bar ── */
[data-theme="windows"] #globalProgressBar {
  background: #4cc2ff !important;
  box-shadow: 0 0 8px rgba(76,194,255,0.5) !important;
  animation: none !important;
}

/* ── Nav-tabs / pills ── */
[data-theme="windows"] .nav-tabs { border-bottom-color: rgba(255,255,255,0.10) !important; }
[data-theme="windows"] .nav-tabs .nav-link { color: rgba(255,255,255,0.70) !important; }
[data-theme="windows"] .nav-tabs .nav-link.active {
  color: #4cc2ff !important;
  border-bottom-color: #4cc2ff !important;
}
[data-theme="windows"] .nav-pills .nav-link.active {
  background: #4cc2ff !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
}
[data-theme="windows"] .nav-pills .nav-link { color: rgba(255,255,255,0.72) !important; }

/* ── Dropdown ── */
[data-theme="windows"] .dropdown-menu {
  background: #2b2b2b !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
[data-theme="windows"] .dropdown-menu::before { background: #4cc2ff !important; }
[data-theme="windows"] .dropdown-item { color: rgba(255,255,255,0.85) !important; }
[data-theme="windows"] .dropdown-item:hover {
  background: rgba(76,194,255,0.18) !important;
  color: #fff !important;
}
[data-theme="windows"] .dropdown-divider { border-color: rgba(255,255,255,0.10) !important; }

/* ── Nav dropdowns (topbar) ── */
[data-theme="windows"] .nav-dropdown,
[data-theme="windows"] .sub-dropdown {
  background: #2b2b2b !important;
  border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="windows"] .nav-dropdown::before { background: #4cc2ff !important; }
[data-theme="windows"] .dd-link { color: rgba(255,255,255,0.85) !important; }
[data-theme="windows"] .dd-link:hover {
  background: rgba(76,194,255,0.15) !important;
  color: #fff !important;
}
[data-theme="windows"] .dd-link.active {
  background: rgba(76,194,255,0.18) !important;
  color: #4cc2ff !important;
}
[data-theme="windows"] .dd-link.active::before { background: #4cc2ff !important; }

/* ════════════════════════════════════════════════════════════
   MODAIS — Centralização Global (v9.0)
   Aplica-se a TODOS os modais .isp-modal e #isp-modal-export de todas as views
   Garante centralização na viewport + backdrop cobrindo tudo
   (inclui sidebar com z-index 1000 fixo)
   ════════════════════════════════════════════════════════════ */
.modal-backdrop {
  z-index: 99998 !important;
  background-color: rgba(0,0,0,0.85) !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  inset: 0 !important;
}
/* ────────────────────────────────────────────────────────────────────────
   [FIX 31/07/2026] TODO modal precisa ficar acima do backdrop — não só os
   que têm a classe `isp-modal`.

   O bug: a regra acima joga `.modal-backdrop` para z-index 99998, mas o
   z-index correspondente (99999) era aplicado APENAS a `.isp-modal` e
   `#isp-modal-export`. Qualquer modal declarado como `class="modal fade"`
   — o padrão do Bootstrap — permanecia no z-index 1055 e ficava DEBAIXO do
   backdrop.

   Consequência: o modal aparecia (o backdrop é translúcido, 0.85), mas
   NENHUM clique chegava nele. Botões, campos, o X de fechar: tudo inerte.
   O usuário descreve exatamente como "a tela congelou".

   Levantamento no momento do fix: de 625 modais nas views, apenas 39 tinham
   a classe `isp-modal`. **586 estavam inclicáveis.** Concentração em
   cron/index (10), contratos/index (9), clientes/ver (8),
   admin/configuracoes (8), nfse/configuracoes (8), clientes/editar (7).

   Diagnóstico que fechou o caso, no console com o modal aberto:
       document.elementFromPoint(x, y)   // devolvia <div class="modal-backdrop">
   com backdrops = 1 e modais = 1 — ou seja, não era empilhamento de modal,
   era ordem de pintura.

   Só o Z-INDEX é generalizado aqui. As regras de POSICIONAMENTO
   (`transform: translate(-50%,-50%)`) seguem restritas a `.isp-modal` de
   propósito: aplicá-las a todo modal mudaria o layout de telas que dependem
   da centralização padrão do Bootstrap.
   ──────────────────────────────────────────────────────────────────────── */
.modal {
  /* 100000, não 99999. Mais abaixo neste arquivo há
     `body:has(.modal.show) .modal-backdrop { z-index: 99999 }` — com um modal
     aberto o backdrop TAMBÉM sobe para 99999. Em caso de empate de z-index,
     pinta por cima quem vem depois no DOM, e o backdrop é anexado ao final do
     <body>, depois do markup do modal. Ou seja: 99999 aqui perderia o empate e
     o bug continuaria. 100000 é o mesmo valor que `.isp-modal` recebe na regra
     de `body:has(...)`, que é justamente por que os 39 modais com essa classe
     funcionavam. */
  z-index: 100000 !important;
}

.isp-modal,
#isp-modal-export.modal {
  z-index: 99999 !important;
  padding-left: 0 !important;
}
.isp-modal .modal-dialog,
#isp-modal-export .modal-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-width: 560px !important;
  width: 90% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  z-index: 99999 !important;
}
.isp-modal .modal-dialog-centered,
#isp-modal-export .modal-dialog-centered {
  display: block !important;
  align-items: normal !important;
  min-height: 0 !important;
}
.isp-modal.fade .modal-dialog,
.isp-modal.show .modal-dialog,
#isp-modal-export.modal.fade .modal-dialog,
#isp-modal-export.modal.show .modal-dialog {
  transform: translate(-50%, -50%) !important;
}
/* Modal-lg / modal-xl com largura maior */
.isp-modal .modal-dialog.modal-lg { max-width: 800px !important; }
.isp-modal .modal-dialog.modal-xl { max-width: 1140px !important; }
/* Forçar backdrop em tela cheia cobrindo sidebar (todas combinações) */
body.modal-open .sidebar,
html.modal-open .sidebar,
body:has(.modal.show) .sidebar,
body:has(.modal.fade.show) .sidebar,
body:has(.isp-modal.show) .sidebar,
body:has(#isp-modal-export.show) .sidebar,
.modal-open .sidebar {
  z-index: 1 !important;
  pointer-events: none !important;
}
body.modal-open .topbar,
body:has(.modal.show) .topbar,
body:has(.isp-modal.show) .topbar,
body:has(#isp-modal-export.show) .topbar {
  z-index: 1 !important;
  pointer-events: none !important;
}
body.modal-open .toggle-sidebar,
body:has(.modal.show) .toggle-sidebar {
  z-index: 1 !important;
  pointer-events: none !important;
}
/* Garante que modal e backdrop estão acima de TUDO */
/* [FIX 31/07/2026] `.modal` incluído aqui também.
   Antes só `.isp-modal` e `#isp-modal-export` subiam para 100000 quando um
   modal abria — e o backdrop subia para 99999 na regra seguinte. Modal comum
   (`class="modal fade"`) ficava em 1055, muito abaixo, e recebia o backdrop em
   cima: visível e inclicável. Eram 586 dos 625 modais do sistema. */
body:has(.modal.show) .modal,
body:has(.modal.show) #isp-modal-export,
body:has(.isp-modal.show) #isp-modal-export,
body:has(.modal.show) .isp-modal,
body:has(.isp-modal.show) .isp-modal {
  z-index: 100000 !important;
}
body:has(.modal.show) .modal-backdrop,
body:has(.isp-modal.show) .modal-backdrop {
  z-index: 99999 !important;
}
[data-theme="windows"] .dd-section-title { color: rgba(255,255,255,0.45) !important; }
[data-theme="windows"] .dd-divider { background: rgba(255,255,255,0.08) !important; }

/* ── Sync toast ── */
[data-theme="windows"] .sync-toast {
  background: rgba(31,31,31,0.97) !important;
  border-color: rgba(46,204,113,0.30) !important;
  color: rgba(255,255,255,0.85) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.50) !important;
}

/* ── Skeleton ── */
[data-theme="windows"] .skeleton {
  background: linear-gradient(90deg,
                rgba(255,255,255,0.04) 25%,
                rgba(255,255,255,0.10) 50%,
                rgba(255,255,255,0.04) 75%) !important;
}

/* ── Session timer ── */
[data-theme="windows"] .session-timer {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.72) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="windows"] .sidebar-footer .sidebar-timer {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.55) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="windows"] .sidebar-footer .sidebar-timer.warning {
  background: rgba(220,38,38,0.30) !important;
  border-color: rgba(220,38,38,0.50) !important;
  color: #fca5a5 !important;
}

/* ── Session clock (sidebar) ── */
[data-theme="windows"] .sidebar-session-clock { background: rgba(255,255,255,0.04) !important; }
[data-theme="windows"] .topbar-session-clock {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── Sidebar nav-link active/hover (cinza neutro, sem tinte indigo) ── */
[data-theme="windows"] .sidebar-menu .nav-link:hover {
  background: rgba(255,255,255,0.06) !important;
  border-left-color: rgba(255,255,255,0.20) !important;
}
[data-theme="windows"] .sidebar-menu .nav-link.active {
  background: rgba(76,194,255,0.15) !important;
  border-left-color: #4cc2ff !important;
}
[data-theme="windows"] .sidebar-menu .nav-link.active i {
  color: #4cc2ff !important;
  filter: drop-shadow(0 0 6px rgba(76,194,255,0.55)) !important;
}

/* ── Table-hover neutralizada ── */
[data-theme="windows"] .table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.05) !important;
}

/* ── Glass card ── */
[data-theme="windows"] .glass-card,
[data-theme="windows"] .card-glass {
  background: rgba(31,31,31,0.85) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── Scrollbar neutra ── */
[data-theme="windows"] ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
[data-theme="windows"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18) !important;
}
[data-theme="windows"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(76,194,255,0.55) !important;
}

/* ── Menu nav-preview tooltip ── */
[data-theme="windows"] .menu-nav-preview {
  background: rgba(20,20,20,0.97) !important;
  border-color: rgba(76,194,255,0.20) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) !important;
}

/* ── Logo/sidebar-brand color ── */
[data-theme="windows"] .sidebar-brand { color: #fff !important; }
[data-theme="windows"] .sidebar-brand-text { color: #fff !important; }
[data-theme="windows"] .sidebar-brand i { color: #4cc2ff !important; }
[data-theme="windows"] .topbar-brand { color: #fff !important; }
[data-theme="windows"] .topbar-brand i { color: #4cc2ff !important; }

/* ── Gradient texts neutros (text-gradient) ── */
[data-theme="windows"] .text-gradient {
  background: #4cc2ff !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Tag colors (kpi) ── */
[data-theme="windows"] .kpi-primary { color: #4cc2ff !important; }
[data-theme="windows"] .kpi-info    { color: #06b6d4 !important; }

/* ── Pulse dot neutra ── */
[data-theme="windows"] .isp-status-dot {
  box-shadow: 0 0 12px rgba(46,204,113,0.6) !important;
}

/* ── Stat-card hover (cinza) ── */
[data-theme="windows"] .stat-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.50) !important;
}

/* ── Generic helper classes ── */
[data-theme="windows"] .border-white-10 { border-color: rgba(255,255,255,0.12) !important; }
[data-theme="windows"] .bg-isp-surface  { background: #2b2b2b !important; }
[data-theme="windows"] .bg-isp-surface2 { background: #323232 !important; }


/* ════════════════════════════════════════════════════════════
   FIM — ISP SYSTEM DARK TECH v9.0 (FINAL)
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   TOKENS DE DESIGN — TEMA ESCURO (Abyss Ultra v6.1)
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* — Superfícies (Abyss Ultra — v6.1 preto-índigo profundo) — */
  --body-bg:   linear-gradient(145deg, #040510 0%, #07091a 50%, #050712 100%);
  --surface-0: #0a0d1e;   /* base — quase preto com tint índigo */
  --surface-1: #0e1228;   /* cards */
  --surface-2: #131730;   /* inputs, áreas elevadas */
  --surface-3: #191e3c;   /* hover states */
  --surface-4: #202548;   /* bordas internas */
  --surface-5: #2a3058;   /* destaques estruturais */
  --card-bg:   var(--surface-1);

  /* — Texto (Dark — v6.1 contraste preciso, sem ofuscar) — */
  --text-primary:   #eef0ff;   /* ≈ 14:1 sobre surface-0 */
  --text-secondary: #c0c8e8;   /* ≈ 9:1  sobre surface-0 */
  --text-muted:     #7078a8;   /* ≈ 4.6:1 sobre surface-0 */
  --text-subtle:    #404878;   /* ≈ 2.5:1 — uso decorativo */
  --text-color:     var(--text-primary);

  /* — Bordas (Dark — v6.1 melhor presença) — */
  --border-subtle:  rgba(130, 140, 255, 0.07);
  --border-default: rgba(130, 140, 255, 0.12);
  --border-strong:  rgba(130, 140, 255, 0.22);
  --border-color:   var(--border-default);

  /* — Sidebar (Dark) — */
  --sidebar-bg-from: #030410;
  --sidebar-bg-to:   #070818;
  --sidebar-text:         rgba(220, 224, 255, 0.93);
  --sidebar-text-muted:   rgba(80, 92, 160, 0.75);
  --sidebar-border:       rgba(255, 255, 255, 0.05);
  --sidebar-active-bg:    rgba(99, 102, 241, 0.20);
  --sidebar-hover-bg:     rgba(255, 255, 255, 0.04);
  --sidebar-active-border: var(--brand-400);

  /* — Glass (Dark) — */
  --glass-bg:     rgba(10, 13, 30, 0.88);
  --glass-border: rgba(130, 140, 255, 0.10);
  --glass-blur:   28px;

  /* — Sombras dual-layer (Dark — v6.1 profundas e dramáticas) — */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.55),
               0 0 0 1px rgba(130,140,255,0.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.65),
               0 1px 3px rgba(0,0,0,0.40),
               0 0 0 1px rgba(130,140,255,0.07);
  --shadow-md: 0 6px 28px rgba(0,0,0,0.72),
               0 3px 8px rgba(0,0,0,0.48),
               0 0 0 1px rgba(130,140,255,0.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.80),
               0 6px 14px rgba(0,0,0,0.56),
               0 0 0 1px rgba(130,140,255,0.09);
  --shadow-xl: 0 24px 80px rgba(0,0,0,0.88),
               0 10px 24px rgba(0,0,0,0.62),
               0 0 0 1px rgba(130,140,255,0.10);
  --shadow-brand:    0 4px 28px rgba(99,102,241,0.32),
                     0 1px 6px  rgba(99,102,241,0.18);
  --shadow-brand-lg: 0 8px 48px rgba(99,102,241,0.42),
                     0 4px 14px rgba(99,102,241,0.26);
  --shadow-accent:   0 4px 28px rgba(168,85,247,0.30);
  --shadow-success:  0 4px 24px rgba(34,197,94,0.24);
  --shadow-danger:   0 4px 24px rgba(239,68,68,0.26);

  /* — Gradientes dark — */
  --gradient-brand:   linear-gradient(135deg, var(--brand-400) 0%, var(--accent-400) 100%);
  --gradient-brand-v: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
  --gradient-accent:  linear-gradient(135deg, var(--accent-400) 0%, var(--cyan-400) 100%);
  --gradient-surface: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);

  /* — Legado — */
  --primary-color:   #6366f1;
  --secondary-color: #818cf8;
  --accent-color:    #a855f7;
  --light-color:     #191e3c;
  --dark-color:      #eef0ff;
  --surface:         var(--surface-0);
}


/* ════════════════════════════════════════════════════════════
   RESET & BASE GLOBAL
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background:  var(--body-bg);
  color:       var(--text-color);
  font-family: var(--font-main);
  font-size:   0.9rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x:  hidden;
  min-height:  100vh;
  transition:
    background var(--duration-slow) var(--ease-smooth),
    color      var(--duration-base) var(--ease-smooth);
}


/* ════════════════════════════════════════════════════════════
   SCROLLBAR ULTRA PREMIUM
   ════════════════════════════════════════════════════════════ */
::-webkit-scrollbar               { width: 5px; height: 5px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         {
  background:    linear-gradient(180deg, var(--brand-400), var(--accent-500));
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover   {
  background: linear-gradient(180deg, var(--brand-500), var(--accent-600));
}
::-webkit-scrollbar-corner        { background: transparent; }

[data-theme="dark"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-500), var(--accent-600));
}
[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand-400), var(--accent-500));
}


/* ════════════════════════════════════════════════════════════
   ANIMAÇÕES GLOBAIS
   ════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(110%); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(99,102,241,0.55)); }
  50%       { filter: drop-shadow(0 0 18px rgba(168,85,247,0.90)); }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.40); opacity: 0.70; }
}

@keyframes pulse-warning {
  0%, 100% { background: #dc2626; opacity: 1;    }
  50%       { background: #991b1b; opacity: 0.85; transform: scale(1.03); }
}

@keyframes menuItemPulse {
  0%   { background: rgba(99,102,241,0.10); }
  50%  { background: rgba(99,102,241,0.20); }
  100% { background: transparent;           }
}

@keyframes menuItemPulseDark {
  0%   { background: rgba(99,102,241,0.08); }
  50%  { background: rgba(99,102,241,0.18); }
  100% { background: transparent;           }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ════════════════════════════════════════════════════════════
   BARRA DE PROGRESSO GLOBAL
   ════════════════════════════════════════════════════════════ */
#globalProgressBar {
  position:      fixed;
  top:           0;
  left:          0;
  height:        2px;
  width:         0;
  background:    var(--gradient-brand);
  background-size: 200% 100%;
  animation:     gradientShift 2s ease infinite;
  box-shadow:    0 0 16px rgba(99,102,241,0.70),
                 0 0 6px  rgba(168,85,247,0.50);
  transition:    width 0.26s var(--ease-out);
  z-index:       9999;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}


/* ════════════════════════════════════════════════════════════
   TOASTS
   ════════════════════════════════════════════════════════════ */
.toast-container {
  position:       fixed;
  top:            20px;
  right:          20px;
  z-index:        9998;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  max-width:      370px;
  pointer-events: none;
}

.toast {
  border-radius:   var(--radius-md);
  box-shadow:      var(--shadow-lg);
  animation:       slideInRight var(--duration-base) var(--ease-spring);
  pointer-events:  all;
  border:          1px solid var(--border-default);
  background:      var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  color:           var(--text-primary);
  position:        relative;
  overflow:        hidden;
}

.toast::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: var(--gradient-brand);
}

[data-theme="dark"] .toast {
  background:   rgba(14, 18, 40, 0.92);
  border-color: var(--border-default);
}


/* ════════════════════════════════════════════════════════════
   OVERLAY / SPINNER
   ════════════════════════════════════════════════════════════ */
.spinner-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(4, 5, 16, 0.72);
  display:         none;
  justify-content: center;
  align-items:     center;
  z-index:         99999;
  backdrop-filter: blur(10px);
}

.spinner-overlay.show { display: flex; }

.spinner-content {
  background:      var(--glass-bg);
  padding:         2.5rem 3rem;
  border-radius:   var(--radius-xl);
  text-align:      center;
  box-shadow:      var(--shadow-xl);
  border:          1px solid var(--border-default);
  animation:       scaleIn var(--duration-base) var(--ease-spring);
  backdrop-filter: blur(var(--glass-blur));
  position:        relative;
  overflow:        hidden;
}

.spinner-content::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: var(--gradient-brand);
}

[data-theme="dark"] .spinner-content {
  background:   rgba(14, 18, 40, 0.94);
  border-color: var(--border-default);
}

.spinner-content .spinner-border {
  width:        2.5rem;
  height:       2.5rem;
  border-width: 2.5px;
  color:        var(--brand-500);
}


/* ════════════════════════════════════════════════════════════
   CARDS — Ultra Premium v6.1
   ════════════════════════════════════════════════════════════ */
.card {
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background:    var(--surface-0);
  box-shadow:    var(--shadow-sm);
  transition:
    transform    var(--duration-base) var(--ease-smooth),
    box-shadow   var(--duration-base) var(--ease-smooth),
    border-color var(--duration-base);
  margin-bottom: 1.5rem;
  overflow:      hidden;
  position:      relative;
}

/* Reflexo de vidro sutil */
.card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     55%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none;
  z-index:    0;
  border-radius: inherit;
}

.card:hover {
  transform:    translateY(-5px);
  box-shadow:   var(--shadow-lg);
  border-color: var(--border-default);
}

[data-theme="dark"] .card {
  background:   var(--surface-1);
  border-color: var(--border-subtle);
}

[data-theme="dark"] .card::before {
  background: linear-gradient(180deg, rgba(130,140,255,0.045) 0%, transparent 100%);
}

[data-theme="dark"] .card:hover {
  border-color: var(--border-default);
  box-shadow:   var(--shadow-xl);
}

.card-header {
  background:    var(--gradient-brand-v);
  color:         #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding:       1.15rem 1.6rem;
  border:        none;
  position:      relative;
  overflow:      hidden;
}

/* Orbe decorativo no header */
.card-header::after {
  content:    '';
  position:   absolute;
  top:        -40%;
  right:      -30px;
  width:      130px;
  height:     200%;
  background: rgba(255,255,255,0.08);
  transform:  skewX(-22deg);
  pointer-events: none;
}

.card-header::before {
  content:    '';
  position:   absolute;
  bottom:     -60%;
  left:       -20px;
  width:      100px;
  height:     180%;
  background: rgba(168,85,247,0.12);
  transform:  skewX(18deg);
  pointer-events: none;
}

.card-header .card-title,
.card-header h5,
.card-header h6 {
  font-family:    var(--font-display);
  font-weight:    700;
  letter-spacing: -0.025em;
  margin:         0;
  position:       relative;
  z-index:        1;
}

/* — Cards com borda lateral colorida — */
.card.border-left-primary  { border-left: 3px solid var(--brand-500)   !important; }
.card.border-left-success  { border-left: 3px solid var(--success-500) !important; }
.card.border-left-danger   { border-left: 3px solid var(--danger-500)  !important; }
.card.border-left-info     { border-left: 3px solid var(--info-500)    !important; }
.card.border-left-warning  { border-left: 3px solid var(--warning-500) !important; }

/* — Card variante glass (especial) — */
.card.card-glass {
  background:      var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-color:    var(--glass-border);
}

[data-theme="dark"] .card.card-glass {
  background:   rgba(14, 18, 40, 0.78);
  border-color: var(--border-subtle);
}


/* ════════════════════════════════════════════════════════════
   TABELAS — Ultra Premium v6.1
   ════════════════════════════════════════════════════════════ */
.table {
  background:    var(--surface-0);
  border-radius: var(--radius-md);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  color:         var(--text-primary);
  border-color:  var(--border-subtle);
  font-size:     0.875rem;
}

[data-theme="dark"] .table {
  background:   var(--surface-1);
  border-color: var(--border-subtle);
  color:        var(--text-primary);
}

.table thead {
  background: var(--gradient-brand-v);
  color:      #fff;
}

[data-theme="dark"] .table thead {
  background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-4) 100%);
  color:      var(--text-primary);
}

.table th {
  font-family:    var(--font-display);
  font-weight:    700;
  font-size:      0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-top:     none;
  padding:        0.95rem 1.1rem;
  white-space:    nowrap;
}

.table td {
  padding:        0.78rem 1.1rem;
  border-color:   var(--border-subtle);
  vertical-align: middle;
  color:          var(--text-secondary);
}

.table tbody tr {
  transition:
    background var(--duration-fast),
    transform  var(--duration-fast);
}

.table tbody tr:hover,
.table-hover tbody tr:hover {
  background: rgba(99, 102, 241, 0.06);
  cursor:     pointer;
}

[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover {
  background: rgba(99, 102, 241, 0.09);
}


/* ════════════════════════════════════════════════════════════
   FORMULÁRIOS — Ultra Premium v6.1
   ════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
  border:        1.5px solid var(--border-default);
  border-radius: var(--radius);
  padding:       0.66rem 0.95rem;
  background:    var(--surface-0);
  color:         var(--text-primary);
  font-family:   var(--font-main);
  font-size:     0.875rem;
  transition:
    border-color var(--duration-fast),
    box-shadow   var(--duration-fast),
    background   var(--duration-base);
  line-height: 1.5;
}

.form-control::placeholder { color: var(--text-subtle); }

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-500);
  box-shadow:   0 0 0 3px rgba(99, 102, 241, 0.16);
  outline:      none;
  background:   var(--surface-0);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background:   var(--surface-2);
  border-color: var(--border-default);
  color:        var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background:   var(--surface-1);
  border-color: var(--brand-400);
  box-shadow:   0 0 0 3px rgba(129, 140, 248, 0.15);
}

.form-label {
  font-weight:    600;
  font-size:      0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-bottom:  0.4rem;
}

.input-group-text {
  background:   var(--surface-2);
  border:       1.5px solid var(--border-default);
  color:        var(--text-muted);
  font-size:    0.875rem;
}

[data-theme="dark"] .input-group-text {
  background:   var(--surface-3);
  border-color: var(--border-default);
  color:        var(--text-muted);
}


/* ════════════════════════════════════════════════════════════
   BADGES — Ultra Premium v6.1 (contraste reforçado no dark)
   ════════════════════════════════════════════════════════════ */
.badge {
  padding:        0.32rem 0.72rem;
  border-radius:  var(--radius-full);
  font-size:      0.68rem;
  font-weight:    700;
  font-family:    var(--font-main);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  line-height:    1;
  position:       relative;
}

/* Light */
.badge.bg-primary {
  background: rgba(99,102,241,0.12)  !important;
  color:      var(--brand-800)        !important;
  border:     1px solid rgba(99,102,241,0.22);
}
.badge.bg-success {
  background: rgba(34,197,94,0.12)   !important;
  color:      var(--success-600)      !important;
  border:     1px solid rgba(34,197,94,0.24);
}
.badge.bg-danger {
  background: rgba(239,68,68,0.11)   !important;
  color:      var(--danger-600)       !important;
  border:     1px solid rgba(239,68,68,0.22);
}
.badge.bg-warning {
  background: rgba(245,158,11,0.13)  !important;
  color:      var(--warning-600)      !important;
  border:     1px solid rgba(245,158,11,0.24);
}
.badge.bg-info {
  background: rgba(59,130,246,0.11)  !important;
  color:      var(--info-600)         !important;
  border:     1px solid rgba(59,130,246,0.22);
}
.badge.bg-secondary {
  background: var(--surface-3)        !important;
  color:      var(--text-muted)       !important;
  border:     1px solid var(--border-subtle);
}

/* Dark — tons mais luminosos para compensar fundo escuro */
[data-theme="dark"] .badge.bg-primary {
  background: rgba(99,102,241,0.20)  !important;
  color:      var(--brand-300)        !important;
  border-color: rgba(99,102,241,0.32);
}
[data-theme="dark"] .badge.bg-success {
  background: rgba(34,197,94,0.18)   !important;
  color:      var(--success-400)      !important;
  border-color: rgba(34,197,94,0.30);
}
[data-theme="dark"] .badge.bg-danger {
  background: rgba(239,68,68,0.17)   !important;
  color:      var(--danger-400)       !important;
  border-color: rgba(239,68,68,0.28);
}
[data-theme="dark"] .badge.bg-warning {
  background: rgba(245,158,11,0.17)  !important;
  color:      var(--warning-400)      !important;
  border-color: rgba(245,158,11,0.30);
}
[data-theme="dark"] .badge.bg-info {
  background: rgba(59,130,246,0.17)  !important;
  color:      var(--info-400)         !important;
  border-color: rgba(59,130,246,0.28);
}
[data-theme="dark"] .badge.bg-secondary {
  background:   var(--surface-3) !important;
  color:        var(--text-muted) !important;
  border-color: var(--border-subtle);
}


/* ════════════════════════════════════════════════════════════
   BOTÕES — Ultra Premium v6.1
   ════════════════════════════════════════════════════════════ */
.btn {
  position:        relative;
  overflow:        hidden;
  border-radius:   var(--radius);
  font-weight:     600;
  font-family:     var(--font-main);
  font-size:       0.875rem;
  border:          none;
  padding:         0.62rem 1.3rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  line-height:     1;
  transition:
    transform  var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth),
    background var(--duration-fast),
    color      var(--duration-fast);
  cursor:      pointer;
  white-space: nowrap;
  isolation:   isolate;
}

/* Efeito shimmer no hover */
.btn::before {
  content:    '';
  position:   absolute;
  top:        0; left: -100%;
  width:      60%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform:  skewX(-20deg);
  transition: left 0.5s var(--ease-smooth);
  pointer-events: none;
}

.btn:hover::before { left: 160%; }

/* Efeito press */
.btn::after {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    rgba(0,0,0,0);
  transition:    background var(--duration-fast);
  border-radius: inherit;
}
.btn:active::after { background: rgba(0,0,0,0.10); }

/* Btn Primary */
.btn-primary {
  background:      var(--gradient-brand);
  background-size: 200% 100%;
  color:           #fff;
  box-shadow:      var(--shadow-brand);
  border:          1px solid rgba(99,102,241,0.28);
}
.btn-primary:hover {
  transform:           translateY(-2px);
  box-shadow:          var(--shadow-brand-lg);
  color:               #fff;
  background-position: right center;
}
.btn-primary:active { transform: translateY(0); }

/* Btn Secondary */
.btn-secondary {
  background: var(--surface-2);
  color:      var(--text-primary);
  box-shadow: var(--shadow-xs);
  border:     1px solid var(--border-default);
}
.btn-secondary:hover {
  background:  var(--surface-3);
  transform:   translateY(-1px);
  box-shadow:  var(--shadow-sm);
  color:       var(--text-primary);
}

[data-theme="dark"] .btn-secondary {
  background:   var(--surface-3);
  color:        var(--text-primary);
  border-color: var(--border-default);
}
[data-theme="dark"] .btn-secondary:hover {
  background: var(--surface-4);
}

/* Btn Outline Primary */
.btn-outline-primary {
  background:  transparent;
  border:      1.5px solid var(--brand-500);
  color:       var(--brand-700);
  box-shadow:  none;
}
.btn-outline-primary:hover {
  background:   var(--gradient-brand);
  color:        #fff;
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-brand);
  border-color: transparent;
}

[data-theme="dark"] .btn-outline-primary {
  border-color: var(--brand-400);
  color:        var(--brand-300);
}

/* Btn Danger */
.btn-danger {
  background: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%);
  color:      #fff;
  box-shadow: var(--shadow-danger);
  border:     1px solid rgba(239,68,68,0.28);
}
.btn-danger:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 32px rgba(239,68,68,0.48);
  color:      #fff;
}

/* Btn Success */
.btn-success {
  background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
  color:      #fff;
  box-shadow: var(--shadow-success);
  border:     1px solid rgba(34,197,94,0.28);
}
.btn-success:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 32px rgba(34,197,94,0.48);
  color:      #fff;
}

/* Btn Ghost */
.btn-ghost {
  background:  transparent;
  color:       var(--text-muted);
  border:      1px solid transparent;
  box-shadow:  none;
}
.btn-ghost:hover {
  background:   var(--surface-2);
  color:        var(--text-primary);
  border-color: var(--border-subtle);
}

/* Tamanhos */
.btn-sm {
  padding:       0.4rem 0.88rem;
  font-size:     0.8rem;
  border-radius: var(--radius-sm);
  gap:           5px;
}

.btn-lg {
  padding:       0.9rem 1.85rem;
  font-size:     0.975rem;
  border-radius: var(--radius-md);
}

.btn-group .btn {
  padding:       0.36rem 0.72rem;
  font-size:     0.82rem;
  border-radius: var(--radius-sm);
}

/* WhatsApp */
.btn-group .btn-success[style*="#25D366"]:hover {
  background-color: #128C7E !important;
  border-color:     #128C7E !important;
}


/* ════════════════════════════════════════════════════════════
   ALERTAS — Ultra Premium v6.1
   ════════════════════════════════════════════════════════════ */
.alert {
  border:        none;
  border-radius: var(--radius-md);
  padding:       1rem 1.3rem;
  border-left:   3px solid;
  font-size:     0.875rem;
  position:      relative;
  overflow:      hidden;
}

.alert::before {
  content:    '';
  position:   absolute;
  inset:      0;
  opacity:    0.04;
  pointer-events: none;
}

.alert-success {
  border-color: var(--success-500);
  background:   rgba(34,197,94,0.08);
  color:        #166534;   /* verde 800 — contraste alto */
}
.alert-danger {
  border-color: var(--danger-500);
  background:   rgba(239,68,68,0.08);
  color:        #991b1b;   /* vermelho 800 */
}
.alert-warning {
  border-color: var(--warning-500);
  background:   rgba(245,158,11,0.09);
  color:        #92400e;   /* âmbar 800 */
}
.alert-info {
  border-color: var(--brand-500);
  background:   rgba(99,102,241,0.08);
  color:        var(--brand-800);
}

[data-theme="dark"] .alert-success { background: rgba(34,197,94,0.12);  color: var(--success-400); }
[data-theme="dark"] .alert-danger  { background: rgba(239,68,68,0.12);  color: var(--danger-400);  }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.12); color: var(--warning-400); }
[data-theme="dark"] .alert-info    { background: rgba(99,102,241,0.12); color: var(--brand-300);   }


/* ════════════════════════════════════════════════════════════
   MODAIS — Ultra Premium v6.1
   ════════════════════════════════════════════════════════════ */
.modal-content {
  background:      var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border:          1px solid var(--border-default);
  border-radius:   var(--radius-xl);
  box-shadow:      var(--shadow-xl);
  color:           var(--text-primary);
  animation:       scaleIn var(--duration-base) var(--ease-spring);
  overflow:        hidden;
}

[data-theme="dark"] .modal-content {
  background:   rgba(14, 18, 40, 0.94);
  border-color: var(--border-default);
}

.modal-header {
  background:    var(--gradient-brand-v);
  color:         #fff;
  border-radius: 0;
  padding:       1.3rem 1.85rem;
  border:        none;
  position:      relative;
  overflow:      hidden;
}

.modal-header::after {
  content:    '';
  position:   absolute;
  top: -50%; right: -20px;
  width: 130px; height: 220%;
  background: rgba(255,255,255,0.07);
  transform:  skewX(-18deg);
}

.modal-header::before {
  content:    '';
  position:   absolute;
  bottom: -60%; left: -30px;
  width: 110px; height: 200%;
  background: rgba(168,85,247,0.12);
  transform:  skewX(18deg);
}

.modal-header .modal-title {
  font-family:    var(--font-display);
  font-weight:    700;
  font-size:      1rem;
  letter-spacing: -0.025em;
  position:       relative;
  z-index:        1;
}

.modal-header .btn-close {
  filter:   brightness(0) invert(1);
  opacity:  0.75;
  position: relative;
  z-index:  1;
}
.modal-header .btn-close:hover { opacity: 1; }

.modal-footer {
  border-top:    1px solid var(--border-subtle);
  padding:       1.1rem 1.85rem;
  background:    var(--surface-1);
  border-radius: 0;
}

[data-theme="dark"] .modal-footer {
  background:   var(--surface-2);
  border-color: var(--border-subtle);
}

.modal-body { padding: 1.6rem 1.85rem; }


/* ════════════════════════════════════════════════════════════
   PAGINAÇÃO — Ultra Premium v6.1
   ════════════════════════════════════════════════════════════ */
.pagination { gap: 4px; flex-wrap: wrap; }

.page-link {
  border:        none;
  border-radius: var(--radius-sm);
  padding:       0.54rem 0.9rem;
  background:    var(--surface-0);
  color:         var(--text-muted);
  box-shadow:    var(--shadow-xs);
  font-size:     0.84rem;
  font-weight:   600;
  border:        1px solid var(--border-subtle);
  transition:
    background   var(--duration-fast),
    color        var(--duration-fast),
    transform    var(--duration-fast),
    box-shadow   var(--duration-fast),
    border-color var(--duration-fast);
}

.page-link:hover {
  background:   var(--gradient-brand);
  color:        #fff;
  transform:    translateY(-1px);
  box-shadow:   var(--shadow-brand);
  border-color: transparent;
}

.page-item.active .page-link {
  background:   var(--gradient-brand);
  color:        #fff;
  box-shadow:   var(--shadow-brand);
  border-color: transparent;
}

.page-item.disabled .page-link {
  background:   var(--surface-2);
  color:        var(--text-subtle);
  box-shadow:   none;
  border-color: var(--border-subtle);
}

[data-theme="dark"] .page-link {
  background:   var(--surface-2);
  color:        var(--text-muted);
  border-color: var(--border-subtle);
}
[data-theme="dark"] .page-link:hover {
  background:   var(--gradient-brand);
  color:        #fff;
  border-color: transparent;
}
[data-theme="dark"] .page-item.disabled .page-link { background: var(--surface-1); }


/* ════════════════════════════════════════════════════════════
   MODOS DE LAYOUT
   ════════════════════════════════════════════════════════════ */
body.layout-sidebar .topbar       { display: none; }
body.layout-sidebar .main-content { margin-left: var(--sidebar-width); }
body.layout-topbar  .sidebar      { display: none; }
body.layout-topbar  .main-content {
  margin-top:  var(--nav-height);
  margin-left: 0 !important;
  padding:     1.85rem;
}


/* ════════════════════════════════════════════════════════════
   SIDEBAR — Ultra Premium Abyss v6.1
   ════════════════════════════════════════════════════════════ */
.sidebar {
  position:       fixed;
  top:            0;
  left:           0;
  height:         100vh;
  width:          var(--sidebar-width);
  background:     linear-gradient(180deg,
                    var(--sidebar-bg-from) 0%,
                    var(--sidebar-bg-to)   100%);
  color:          var(--sidebar-text);
  z-index:        1000;
  box-shadow:     6px 0 50px rgba(0,0,0,0.40),
                  1px 0 0 rgba(130,140,255,0.09);
  transition:     width var(--duration-slow) var(--ease-smooth);
  overflow-y:     auto;
  overflow-x:     hidden;
  display:        flex;
  flex-direction: column;
  border-right:   1px solid rgba(130,140,255,0.09);
}

/* — Estado colapsado — */
.sidebar.collapsed { width: var(--sidebar-collapsed-width); }

.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .sidebar-menu .nav-link span,
.sidebar.collapsed .sidebar-user .user-info,
.sidebar.collapsed .sidebar-brand-text {
  display: none !important;
}

.sidebar.collapsed .sidebar-menu .nav-link {
  padding:         0.8rem;
  justify-content: center;
  margin:          0.1rem 0.3rem;
}

.sidebar.collapsed .sidebar-menu .nav-link i {
  margin-right: 0;
  font-size:    1.15rem;
}

.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  gap: 0;
}

/* — Header da sidebar — */
.sidebar-header {
  padding:       1.3rem 1.05rem 1.05rem;
  border-bottom: 1px solid rgba(130,140,255,0.09);
  background:    rgba(99,102,241,0.07);
  flex-shrink:   0;
  position:      relative;
  overflow:      hidden;
}

/* Linha de acento topo */
.sidebar-header::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: var(--gradient-brand);
}

.sidebar-brand {
  display:         flex;
  align-items:     center;
  gap:             10px;
  color:           #fff;
  font-family:     var(--font-display);
  font-weight:     800;
  font-size:       1.22rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition:      gap var(--duration-slow) var(--ease-smooth);
}

.sidebar-brand i {
  font-size:  1.55rem;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  animation:  glow 3.5s ease-in-out infinite;
  flex-shrink: 0;
}

.sidebar-brand img {
  max-height: 36px;
  width:      auto;
  flex-shrink: 0;
}

/* — Área do usuário — */
.sidebar-user {
  padding:       0.95rem 1.05rem;
  border-bottom: 1px solid rgba(130,140,255,0.07);
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    rgba(0,0,0,0.07);
  transition:    background var(--duration-base);
}

.sidebar-user:hover {
  background: rgba(99,102,241,0.08);
}

.user-avatar-sidebar {
  width:           40px;
  height:          40px;
  border-radius:   var(--radius-md);
  background:      var(--gradient-brand);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-weight:     800;
  font-family:     var(--font-display);
  font-size:       1rem;
  flex-shrink:     0;
  box-shadow:      0 3px 14px rgba(99,102,241,0.45);
}

.user-info {
  flex-grow: 1;
  min-width: 0;
}

.user-name {
  font-weight:    700;
  font-size:      0.875rem;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  color:          rgba(255,255,255,0.97);
  letter-spacing: -0.015em;
}

.user-role {
  font-size:   0.71rem;
  color:       var(--sidebar-text-muted);
  margin-top:  1px;
  font-weight: 500;
}

/* — Status online dot — */
.user-status-dot {
  width:         8px;
  height:        8px;
  border-radius: var(--radius-full);
  background:    var(--success-500);
  animation:     pulse-dot 2.8s ease-in-out infinite;
  flex-shrink:   0;
  box-shadow:    0 0 0 3px rgba(34,197,94,0.24);
}

/* — Menu de navegação — */
.sidebar-menu {
  padding:    0.75rem 0;
  flex-grow:  1;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-section {
  margin-bottom: 0.2rem;
}

.sidebar-section-title {
  font-size:      0.63rem;
  font-weight:    800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--sidebar-text-muted);
  padding:        0.65rem 1.3rem 0.3rem;
  margin-top:     0.5rem;
  display:        flex;
  align-items:    center;
  gap:            8px;
}

.sidebar-section-title::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: linear-gradient(90deg, var(--sidebar-border), transparent);
}

.sidebar-menu .nav-link {
  color:           var(--sidebar-text);
  padding:         0.62rem 1.3rem;
  margin:          0.08rem 0.55rem;
  border-radius:   var(--radius);
  border-left:     2px solid transparent;
  transition:
    background   var(--duration-fast),
    color        var(--duration-fast),
    border-color var(--duration-fast),
    transform    var(--duration-fast);
  display:         flex;
  align-items:     center;
  white-space:     nowrap;
  text-decoration: none;
  position:        relative;
  font-size:       0.852rem;
  font-weight:     500;
}

.sidebar-menu .nav-link:hover {
  background:        rgba(99,102,241,0.11);
  color:             #fff;
  border-left-color: rgba(255,255,255,0.24);
  transform:         translateX(2px);
}

.sidebar-menu .nav-link.active {
  background:        var(--sidebar-active-bg);
  color:             #fff;
  border-left-color: var(--brand-400);
  font-weight:       600;
}

.sidebar-menu .nav-link.active i {
  color:  var(--brand-400);
  filter: drop-shadow(0 0 6px rgba(129,140,248,0.62));
}

.sidebar-menu .nav-link i {
  width:        20px;
  text-align:   center;
  margin-right: 10px;
  font-size:    0.94rem;
  transition:   color var(--duration-fast), filter var(--duration-fast);
  flex-shrink:  0;
}

.sidebar-menu .nav-link span {
  flex-grow:     1;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.sidebar-menu .nav-link .badge {
  margin-left:   6px;
  font-size:     0.60rem;
  padding:       0.18rem 0.42rem;
  min-width:     18px;
  border-radius: var(--radius-full);
}

/* — Tooltip no modo colapsado — */
.sidebar.collapsed .sidebar-menu .nav-link {
  position: relative;
}

.sidebar.collapsed .sidebar-menu .nav-link:hover::after {
  content:        attr(data-tooltip);
  position:       absolute;
  left:           calc(100% + 14px);
  top:            50%;
  transform:      translateY(-50%);
  background:     rgba(8, 10, 28, 0.97);
  color:          #fff;
  font-size:      0.78rem;
  font-weight:    600;
  padding:        0.42rem 0.8rem;
  border-radius:  var(--radius-sm);
  white-space:    nowrap;
  box-shadow:     var(--shadow-lg);
  z-index:        2000;
  pointer-events: none;
  border:         1px solid rgba(130,140,255,0.16);
}

/* — Rodapé da sidebar — */
.sidebar-footer {
  padding:     0.9rem;
  border-top:  1px solid rgba(130,140,255,0.08);
  background:  rgba(0,0,0,0.20);
  margin-top:  auto;
  flex-shrink: 0;
}

.sidebar-controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         0.4rem;
  border-radius:   var(--radius);
  background:      rgba(255,255,255,0.03);
  border:          1px solid rgba(130,140,255,0.09);
}

.sidebar-control-btn {
  background:      rgba(255,255,255,0.06);
  border:          1px solid rgba(255,255,255,0.08);
  color:           rgba(255,255,255,0.65);
  width:           34px;
  height:          34px;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:
    background var(--duration-fast),
    color      var(--duration-fast),
    transform  var(--duration-fast);
  text-decoration: none;
}

.sidebar-control-btn:hover {
  background:   rgba(99,102,241,0.24);
  color:        #fff;
  transform:    translateY(-2px) scale(1.06);
  border-color: rgba(99,102,241,0.38);
}

/* — Timer na sidebar — */
.sidebar-footer .sidebar-timer {
  background:    rgba(99,102,241,0.09);
  border-radius: var(--radius-full);
  font-size:     0.67rem;
  font-family:   var(--font-mono);
  font-weight:   500;
  padding:       0.22rem 0.65rem;
  text-align:    center;
  margin-bottom: 8px;
  color:         rgba(255,255,255,0.52);
  border:        1px solid rgba(130,140,255,0.11);
}

.sidebar-footer .sidebar-timer.warning {
  background:   rgba(220,38,38,0.24);
  border-color: rgba(220,38,38,0.40);
  color:        #fca5a5;
  animation:    pulse-warning 1s infinite;
}

.sidebar.collapsed .sidebar-footer .sidebar-timer span { display: none; }


/* ════════════════════════════════════════════════════════════
   MENU SEARCH (sidebar)
   ════════════════════════════════════════════════════════════ */
.menu-search-container {
  position: relative;
  padding:  0.65rem 0.9rem;
}

.menu-search-input {
  width:         100%;
  padding:       0.5rem 2rem 0.5rem 0.85rem;
  border:        1px solid rgba(130,140,255,0.13);
  border-radius: var(--radius-sm);
  font-size:     0.8rem;
  font-family:   var(--font-main);
  background:    rgba(99,102,241,0.08);
  color:         var(--sidebar-text);
  transition:    all var(--duration-base) var(--ease-smooth);
}

.menu-search-input::placeholder { color: var(--sidebar-text-muted); }

.menu-search-input:focus {
  outline:      none;
  border-color: var(--brand-400);
  box-shadow:   0 0 0 3px rgba(99,102,241,0.18);
  background:   rgba(99,102,241,0.11);
}

.menu-search-icon {
  position:       absolute;
  right:          1.65rem;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--sidebar-text-muted);
  font-size:      0.76rem;
  pointer-events: none;
}

.menu-search-container:focus-within .menu-search-icon { color: var(--brand-400); }

.menu-search-clear {
  position:      absolute;
  right:         2rem;
  top:           50%;
  transform:     translateY(-50%);
  background:    none;
  border:        none;
  color:         var(--sidebar-text-muted);
  cursor:        pointer;
  display:       none;
  font-size:     0.75rem;
  padding:       0.2rem 0.45rem;
  border-radius: var(--radius-xs);
  transition:    color var(--duration-fast);
}
.menu-search-clear:hover { color: var(--sidebar-text); }

.sidebar-menu.searching .sidebar-section { transition: all var(--duration-base) var(--ease-smooth); }
.sidebar-menu.searching .sidebar-section.no-results { opacity: 0.2; pointer-events: none; }
.nav-item.search-hidden      { display: none !important; }
.sidebar-section.search-no-results { opacity: 0.2; pointer-events: none; }

/* THEME-SWITCHER-INJECT:do-not-remove */
(function(){var t=localStorage.getItem('isp_theme')||'dark';document.documentElement.setAttribute('data-theme',t);var fn=function(){var s=document.createElement('script');s.src='/ispsystem/public/assets/js/theme-switcher.js';s.defer=true;document.body.appendChild(s);};if(document.body)fn();else document.addEventListener('DOMContentLoaded',fn);})();
/* THEME-SWITCHER-END */

.menu-highlight {
  background:    rgba(168,85,247,0.38);
  padding:       1px 3px;
  border-radius: var(--radius-xs);
  font-weight:   700;
  color:         #fff;
}

.menu-search-count {
  font-family:    var(--font-mono);
  font-size:      0.60rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color:          var(--sidebar-text-muted);
  padding:        0 1rem 0.35rem;
  display:        none;
}

.menu-search-container.searching .menu-search-count {
  display:   block;
  animation: fadeIn var(--duration-base) var(--ease-smooth) both;
}

.nav-item.search-match       { animation: menuItemPulse 1.5s var(--ease-smooth); }
[data-theme="dark"] .nav-item.search-match { animation-name: menuItemPulseDark; }

@media (max-width: 768px) {
  .menu-search-container { padding: 0.5rem 0.75rem; }
  .menu-search-input     { font-size: 0.78rem; }
}


/* ════════════════════════════════════════════════════════════
   CONTEÚDO PRINCIPAL
   ════════════════════════════════════════════════════════════ */
.main-content {
  transition: margin-left var(--duration-slow) var(--ease-smooth);
  animation:  fadeIn 0.42s var(--ease-out);
  padding:    1.6rem;
  min-height: 100vh;
}


/* ════════════════════════════════════════════════════════════
   TOPBAR — Ultra Premium Crystalline v6.1
   ════════════════════════════════════════════════════════════ */
.topbar {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  height:          var(--nav-height);
  background:      var(--glass-bg);
  border-bottom:   1px solid var(--border-subtle);
  box-shadow:      var(--shadow-sm);
  z-index:         1050;
  display:         flex;
  align-items:     center;
  padding:         0 1.3rem;
  backdrop-filter: blur(var(--glass-blur));
  overflow:        visible;
}

/* Linha de acento superior animada */
.topbar::before {
  content:         '';
  position:        absolute;
  top: 0; left: 0; right: 0;
  height:          2px;
  background:      var(--gradient-brand);
  background-size: 200% 100%;
  animation:       gradientShift 4s ease infinite;
}

[data-theme="dark"] .topbar {
  background:      rgba(10, 13, 30, 0.90);
  border-color:    var(--border-subtle);
  backdrop-filter: blur(28px);
}

/* — Marca na topbar — */
.topbar-brand {
  display:         flex;
  align-items:     center;
  gap:             9px;
  text-decoration: none;
  color:           var(--text-primary);
  font-family:     var(--font-display);
  font-weight:     800;
  font-size:       1.1rem;
  letter-spacing: -0.035em;
  white-space:     nowrap;
  padding:         0 1rem 0 0;
  border-right:    1px solid var(--border-subtle);
  margin-right:    0.5rem;
  min-width:       160px;
}

.topbar-brand i {
  font-size:  1.35rem;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  flex-shrink: 0;
}

.topbar-brand img { max-height: 30px; width: auto; }

/* — Menu de navegação horizontal — */
.topbar-nav {
  display:     flex;
  align-items: center;
  height:      100%;
  flex:        1;
  overflow:    visible;
  min-width:   0;
}

.nav-item-top {
  position:    relative;
  height:      100%;
  display:     flex;
  align-items: center;
}

.nav-link-top {
  display:         flex;
  align-items:     center;
  gap:             5px;
  padding:         0 0.85rem;
  height:          100%;
  color:           var(--text-muted);
  text-decoration: none;
  font-size:       0.84rem;
  font-weight:     600;
  white-space:     nowrap;
  border-bottom:   2px solid transparent;
  transition:
    color        var(--duration-fast),
    border-color var(--duration-fast);
  cursor:          pointer;
  user-select:     none;
}

.nav-link-top i      { font-size: 0.87rem; flex-shrink: 0; }
.nav-link-top .caret { font-size: 0.58rem; margin-left: 2px; transition: transform var(--duration-base) var(--ease-smooth); }

.nav-item-top:hover > .nav-link-top,
.nav-link-top.active {
  color:               var(--brand-700);
  border-bottom-color: var(--brand-500);
}

[data-theme="dark"] .nav-item-top:hover > .nav-link-top,
[data-theme="dark"] .nav-link-top.active {
  color:               var(--brand-300);
  border-bottom-color: var(--brand-400);
}

.nav-item-top:hover > .nav-link-top .caret { transform: rotate(180deg); }

/* — Dropdowns — */
.nav-dropdown,
.sub-dropdown {
  position:        absolute;
  top:             calc(100% + 10px);
  left:            0;
  min-width:       228px;
  background:      var(--glass-bg);
  border:          1px solid var(--border-default);
  border-radius:   var(--radius-md);
  box-shadow:      var(--shadow-xl);
  opacity:         0;
  visibility:      hidden;
  transform:       translateY(-8px) scale(0.97);
  transform-origin: top left;
  transition:
    opacity    var(--duration-base) var(--ease-smooth),
    transform  var(--duration-base) var(--ease-smooth),
    visibility var(--duration-base);
  z-index:         2000;
  padding:         0.45rem 0;
  overflow:        hidden;
  backdrop-filter: blur(var(--glass-blur));
}

[data-theme="dark"] .nav-dropdown,
[data-theme="dark"] .sub-dropdown {
  background:   rgba(14, 18, 40, 0.96);
  border-color: var(--border-default);
}

/* Linha de acento animada no dropdown */
.nav-dropdown::before {
  content:         '';
  position:        absolute;
  top: 0; left: 0; right: 0;
  height:          2px;
  background:      var(--gradient-brand);
  background-size: 200% 100%;
  animation:       gradientShift 4s ease infinite;
}

.nav-item-top:hover > .nav-dropdown,
.nav-item-sub:hover > .sub-dropdown {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0) scale(1);
}

.dd-section-title {
  font-size:      0.63rem;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color:          var(--text-subtle);
  padding:        0.55rem 1rem 0.25rem;
}

.dd-divider {
  height:     1px;
  background: var(--border-subtle);
  margin:     0.3rem 0;
}

.dd-link {
  display:         flex;
  align-items:     center;
  gap:             9px;
  padding:         0.52rem 1rem;
  color:           var(--text-secondary);
  text-decoration: none;
  font-size:       0.84rem;
  font-weight:     500;
  transition:
    background var(--duration-fast),
    color      var(--duration-fast);
  position:        relative;
}

.dd-link i {
  width:       16px;
  text-align:  center;
  color:       var(--text-subtle);
  flex-shrink: 0;
  font-size:   0.87rem;
  transition:  color var(--duration-fast), filter var(--duration-fast);
}

.dd-link span    { flex: 1; }
.dd-link .badge  { font-size: 0.60rem; padding: 0.14rem 0.38rem; }

.dd-link:hover {
  background: rgba(99,102,241,0.08);
  color:      var(--brand-700);
}
.dd-link:hover i {
  color:  var(--brand-500);
  filter: drop-shadow(0 0 4px rgba(99,102,241,0.52));
}

[data-theme="dark"] .dd-link:hover   { background: rgba(99,102,241,0.11); color: var(--brand-300); }
[data-theme="dark"] .dd-link:hover i { color: var(--brand-400); }

.dd-link.active {
  background:  linear-gradient(90deg, rgba(99,102,241,0.10), transparent);
  color:       var(--brand-700);
  font-weight: 600;
}

.dd-link.active::before {
  content:       '';
  position:      absolute;
  left:          0; top: 10%; bottom: 10%;
  width:         2px;
  background:    var(--gradient-brand);
  border-radius: 0 2px 2px 0;
}

[data-theme="dark"] .dd-link.active { color: var(--brand-300); }
[data-theme="dark"] .dd-link.active::before { background: var(--gradient-brand); }

/* — Sub-dropdowns — */
.nav-item-sub { position: relative; }

.nav-item-sub > .dd-link::after {
  content:     '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size:   0.58rem;
  color:       var(--text-subtle);
  margin-left: auto;
}

.sub-dropdown { left: 100%; top: -4px; min-width: 200px; }

/* — Área direita da topbar — */
.topbar-right {
  display:      flex;
  align-items:  center;
  gap:          5px;
  padding-left: 1rem;
  border-left:  1px solid var(--border-subtle);
  margin-left:  auto;
  flex-shrink:  0;
}

.tb-btn {
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-sm);
  border:          1px solid var(--border-subtle);
  background:      var(--surface-1);
  color:           var(--text-muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:
    background   var(--duration-fast),
    color        var(--duration-fast),
    transform    var(--duration-fast),
    box-shadow   var(--duration-fast),
    border-color var(--duration-fast);
  position:        relative;
  text-decoration: none;
  font-size:       0.9rem;
}

.tb-btn:hover {
  background:   var(--gradient-brand);
  color:        #fff;
  border-color: transparent;
  transform:    translateY(-1px);
  box-shadow:   var(--shadow-brand);
}

.tb-btn.danger:hover {
  background:   linear-gradient(135deg, var(--danger-500), var(--danger-600));
  border-color: transparent;
  box-shadow:   var(--shadow-danger);
}

[data-theme="dark"] .tb-btn {
  background:   var(--surface-2);
  border-color: var(--border-default);
  color:        var(--text-muted);
}

.tb-badge {
  position:        absolute;
  top:             -5px;
  right:           -5px;
  background:      linear-gradient(135deg, var(--danger-500), var(--danger-600));
  color:           #fff;
  font-size:       0.58rem;
  font-weight:     800;
  font-family:     var(--font-mono);
  width:           16px;
  height:          16px;
  border-radius:   var(--radius-full);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px solid var(--surface-0);
  animation:       pulse-dot 2.5s ease-in-out infinite;
}

[data-theme="dark"] .tb-badge { border-color: var(--surface-0); }

/* — Usuário na topbar — */
.tb-user {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       0.3rem 0.65rem;
  cursor:        pointer;
  border-radius: var(--radius-sm);
  transition:    background var(--duration-fast), border-color var(--duration-fast);
  border:        1px solid transparent;
}

.tb-user:hover {
  background:   var(--surface-2);
  border-color: var(--border-default);
}

.tb-avatar {
  width:           34px;
  height:          34px;
  border-radius:   var(--radius-sm);
  background:      var(--gradient-brand);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-weight:     800;
  color:           #fff;
  flex-shrink:     0;
  font-size:       0.88rem;
  box-shadow:      0 2px 10px rgba(99,102,241,0.40);
}

.tb-user-info { line-height: 1.25; }
.tb-user-name { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.tb-user-role { font-size: 0.7rem; color: var(--text-muted); }

/* — Campo de busca na topbar — */
.topbar-search { position: relative; margin: 0 0.2rem; }

.topbar-search input {
  background:    var(--surface-2);
  border:        1px solid var(--border-subtle);
  color:         var(--text-primary);
  border-radius: var(--radius-sm);
  padding:       0.42rem 1rem 0.42rem 2.1rem;
  font-size:     0.82rem;
  width:         192px;
  font-family:   var(--font-main);
  transition:
    border-color var(--duration-fast),
    box-shadow   var(--duration-fast),
    width        var(--duration-base) var(--ease-smooth),
    background   var(--duration-fast);
}

.topbar-search input::placeholder { color: var(--text-subtle); }

.topbar-search input:focus {
  outline:      none;
  border-color: var(--brand-500);
  box-shadow:   0 0 0 3px rgba(99,102,241,0.15);
  width:        235px;
  background:   var(--surface-0);
}

[data-theme="dark"] .topbar-search input { background: var(--surface-2); border-color: var(--border-default); }
[data-theme="dark"] .topbar-search input:focus { background: var(--surface-1); border-color: var(--brand-400); }

.topbar-search i {
  position:       absolute;
  left:           0.72rem;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--text-subtle);
  pointer-events: none;
  font-size:      0.84rem;
}

/* — Hamburger (mobile) — */
.topbar-hamburger {
  display:         none;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   var(--radius-sm);
  border:          1px solid var(--border-subtle);
  background:      var(--surface-2);
  color:           var(--text-muted);
  cursor:          pointer;
  margin-right:    0.5rem;
  transition:
    background   var(--duration-fast),
    color        var(--duration-fast),
    border-color var(--duration-fast);
}

.topbar-hamburger:hover {
  background:   var(--gradient-brand);
  color:        #fff;
  border-color: transparent;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVIDADE — TOPBAR (mobile)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .topbar-hamburger { display: flex; }
  .topbar-nav       { display: none; }

  .topbar-nav.mobile-open {
    display:         flex;
    flex-direction:  column;
    position:        fixed;
    top:             var(--nav-height);
    left:            0;
    right:           0;
    height:          calc(100vh - var(--nav-height));
    background:      var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    overflow-y:      auto;
    z-index:         1049;
    padding:         1rem 0;
    align-items:     flex-start;
    border-top:      1px solid var(--border-subtle);
  }

  [data-theme="dark"] .topbar-nav.mobile-open {
    background: rgba(10, 13, 30, 0.97);
  }

  .nav-item-top {
    width:          100%;
    height:         auto;
    flex-direction: column;
    align-items:    flex-start;
  }

  .nav-link-top {
    width:         100%;
    height:        auto;
    padding:       0.78rem 1.3rem;
    border-bottom: none;
    border-left:   2px solid transparent;
    font-size:     0.9rem;
  }

  .nav-item-top:hover > .nav-link-top,
  .nav-link-top.active {
    border-left-color: var(--brand-500);
  }

  .nav-dropdown,
  .sub-dropdown {
    position:        static;
    opacity:         1;
    visibility:      visible;
    transform:       none;
    box-shadow:      none;
    border:          none;
    border-radius:   0;
    background:      var(--surface-2);
    display:         none;
    width:           100%;
    padding:         0;
    backdrop-filter: none;
  }

  .nav-dropdown::before { display: none; }

  .nav-item-top:hover > .nav-dropdown { display: block; }
  .sub-dropdown { padding-left: 1.5rem; }
  .nav-item-sub:hover > .sub-dropdown { display: block; }
}


/* ════════════════════════════════════════════════════════════
   UTILITÁRIOS
   ════════════════════════════════════════════════════════════ */
.text-gradient {
  background:              var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  font-family:             var(--font-display);
  font-weight:             800;
}

.text-gradient-accent {
  background:              var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.shadow-soft   { box-shadow: var(--shadow-sm); }
.shadow-medium { box-shadow: var(--shadow-md); }
.shadow-hard   { box-shadow: var(--shadow-xl); }
.fade-in       { animation: fadeIn var(--duration-slow) var(--ease-out); }
.scale-in      { animation: scaleIn var(--duration-base) var(--ease-spring); }

.hover-lift {
  transition: transform  var(--duration-base) var(--ease-smooth),
              box-shadow var(--duration-base) var(--ease-smooth);
}
.hover-lift:hover {
  transform:  translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Glass effect helper */
.glass {
  background:      var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur));
  border:          1px solid var(--glass-border) !important;
}

/* Skeleton loader ultra */
.skeleton {
  border-radius:   var(--radius-sm);
  background:      linear-gradient(90deg,
                     var(--surface-3) 25%,
                     var(--surface-2) 50%,
                     var(--surface-3) 75%);
  background-size: 800px 100%;
  animation:       shimmer 1.8s infinite linear;
}

[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg,
                var(--surface-3) 25%,
                var(--surface-4) 50%,
                var(--surface-3) 75%);
  background-size: 800px 100%;
}

/* Dot de status online */
.status-online  { color: var(--success-500); }
.status-offline { color: var(--text-subtle);  }
.status-busy    { color: var(--warning-500);  }


/* ════════════════════════════════════════════════════════════
   SESSÃO / TIMER
   ════════════════════════════════════════════════════════════ */
.session-timer {
  font-size:     0.82rem;
  font-weight:   600;
  font-family:   var(--font-mono);
  background:    var(--surface-2);
  color:         var(--text-muted);
  padding:       0.28rem 0.68rem;
  border-radius: var(--radius-full);
  white-space:   nowrap;
  border:        1px solid var(--border-subtle);
  transition:    all var(--duration-base);
}

.session-timer.warning {
  background:   rgba(220,38,38,0.13);
  color:        var(--danger-500);
  border-color: rgba(220,38,38,0.26);
  animation:    pulse-warning 1s infinite;
}

[data-theme="dark"] .session-timer {
  background:   var(--surface-2);
  border-color: var(--border-default);
  color:        var(--text-muted);
}

[data-theme="dark"] .session-timer.warning {
  color: var(--danger-400);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVIDADE GERAL (mobile ≤ 768px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .btn-group {
    flex-wrap: wrap;
    gap:       4px;
  }

  .btn-group .btn { margin-bottom: 2px; }

  .d-flex.justify-content-between {
    flex-direction: column;
    gap:            10px;
  }

  .d-flex.justify-content-between > div {
    width:           100%;
    display:         flex;
    justify-content: space-between;
  }

  .main-content { padding: 1rem; }
  .card         { margin-bottom: 1rem; }

  .topbar-search { display: none; }
  .tb-user-info  { display: none; }
}


/* ════════════════════════════════════════════════════════════
   IMPRESSÃO
   ════════════════════════════════════════════════════════════ */
@media print {

  .sidebar,
  .topbar,
  .toggle-sidebar,
  .sidebar-overlay,
  .toast-container,
  .topbar-hamburger,
  #globalProgressBar { display: none !important; }

  .main-content {
    margin-left: 0 !important;
    padding:     0 !important;
    animation:   none !important;
  }

  .card {
    box-shadow:  none !important;
    border:      1px solid #d1d5db !important;
    background:  #fff !important;
  }

  .card-header {
    background: #4338ca !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff !important;
    color:      #000 !important;
  }
}


/* ════════════════════════════════════════════════════════════
   AJUSTES BOOTSTRAP — sobrescritas finas v6.1
   ════════════════════════════════════════════════════════════ */
.table-hover tbody tr:hover { background-color: rgba(99,102,241,0.06); }

#btnWhatsAppMassa .badge { font-size: 0.66rem; padding: 0.18rem 0.4rem; }

/* Dropdown Bootstrap */
.dropdown-menu {
  border:          1px solid var(--border-default);
  border-radius:   var(--radius-md);
  box-shadow:      var(--shadow-xl);
  background:      var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  padding:         0.45rem 0;
  font-size:       0.875rem;
  color:           var(--text-primary);
  animation:       scaleIn var(--duration-base) var(--ease-spring);
  overflow:        hidden;
  position:        relative;
}

.dropdown-menu::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: var(--gradient-brand);
}

[data-theme="dark"] .dropdown-menu {
  background:   rgba(14, 18, 40, 0.96);
  border-color: var(--border-default);
}

.dropdown-item {
  color:      var(--text-secondary);
  padding:    0.52rem 1rem;
  font-size:  0.855rem;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.dropdown-item:hover {
  background: rgba(99,102,241,0.08);
  color:      var(--brand-700);
}

[data-theme="dark"] .dropdown-item:hover { background: rgba(99,102,241,0.11); color: var(--brand-300); }

.dropdown-divider { border-color: var(--border-subtle); }

/* Nav-pills e tabs */
.nav-pills .nav-link {
  border-radius: var(--radius-sm);
  color:         var(--text-muted);
  font-weight:   600;
  font-size:     0.855rem;
  transition:    all var(--duration-fast);
}

.nav-pills .nav-link.active {
  background: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
  color:      #fff;
}

.nav-tabs {
  border-bottom: 2px solid var(--border-subtle);
}

.nav-tabs .nav-link {
  color:         var(--text-muted);
  border:        none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-weight:   600;
  font-size:     0.855rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition:    all var(--duration-fast);
}

.nav-tabs .nav-link.active {
  color:               var(--brand-700);
  border-bottom-color: var(--brand-500);
  background:          transparent;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  color:               var(--brand-300);
  border-bottom-color: var(--brand-400);
}

/* Progress bars */
.progress {
  height:        6px;
  border-radius: var(--radius-full);
  background:    var(--surface-3);
  overflow:      visible;
}

.progress-bar {
  background:      var(--gradient-brand);
  background-size: 200% 100%;
  animation:       gradientShift 3s ease infinite;
  border-radius:   var(--radius-full);
  box-shadow:      0 0 8px rgba(99,102,241,0.52);
  position:        relative;
}

/* Separador decorativo */
.isp-divider {
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--border-default), transparent);
  margin:     1.5rem 0;
  border:     none;
}

/* Chip/tag premium */
.isp-chip {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  padding:        0.25rem 0.65rem;
  border-radius:  var(--radius-full);
  font-size:      0.74rem;
  font-weight:    600;
  background:     var(--surface-2);
  color:          var(--text-muted);
  border:         1px solid var(--border-subtle);
  transition:     all var(--duration-fast);
}

.isp-chip:hover {
  background:   var(--surface-3);
  border-color: var(--border-default);
  color:        var(--text-primary);
}
/* ============================================================
   ISP v8.9 — Compact Mode
   Ativado por Ctrl+B ou ISP.compact.toggle()
   ============================================================ */
body.compact-mode .isp-card,
body.compact-mode .card {
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
}
body.compact-mode .isp-kpi-card,
body.compact-mode .isp-stat-card {
    padding: 10px 14px !important;
    min-height: auto !important;
}
body.compact-mode .isp-kpi-value,
body.compact-mode .isp-stat-value {
    font-size: 1.4rem !important;
}
body.compact-mode .isp-table,
body.compact-mode .table {
    font-size: 12px !important;
}
body.compact-mode .isp-table thead th,
body.compact-mode .table thead th {
    padding: 5px 8px !important;
    font-size: 11px !important;
}
body.compact-mode .isp-table tbody td,
body.compact-mode .table tbody td {
    padding: 4px 8px !important;
}
body.compact-mode .btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
}
body.compact-mode .isp-toolbar {
    padding: 8px 12px !important;
}
body.compact-mode .isp-header-page {
    padding: 12px 20px !important;
}
body.compact-mode .isp-header-page h4 {
    font-size: 1rem !important;
}
body.compact-mode .isp-filtros {
    padding: 10px 16px !important;
}
body.compact-mode .modal-body {
    padding: 16px !important;
}

/* Singleton modal overlay — garante que todos os modais globais ficarem acima */
.isp-modal-singleton {
    z-index: 1055;
}
.isp-modal-singleton .modal-backdrop {
    z-index: 1054;
}

/* Command Palette backdrop */
#ispModalCommandPalette {
    z-index: 10001;
}