/**
 * 🌙 Temas
 * 
 * Dark mode e variações de tema
 */

/* ========== DARK MODE ========== */

body.dark-mode {
  /* Cores de texto - Chatwoot exatas */
  --color-text-primary: #f0f2f5;
  --color-text-secondary: #a3acb9;
  --color-text-tertiary: #6b7280;
  
  /* Cores de fundo - Chatwoot exatas */
  --color-bg-primary: #282828;
  --color-bg-secondary: #121213;
  --color-bg-tertiary: #333333;
  --color-bg-hover: #2f2f2f;
  
  /* Cor primária - Azul Chatwoot */
  --color-primary: #2781f6;
  --color-primary-light: #4a9bff;
  --color-primary-dark: #1a6dd8;
  
  /* Cores de status para dark mode */
  --color-warning-bg: #3d3520;
  
  /* Cores de borda - Sutis */
  --color-border-primary: #3a3a3a;
  --color-border-secondary: #4a4a4a;
  
  /* Sombras - Mais sutis */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.7);
}

/* ========== DARK MODE ADJUSTMENTS ========== */

body.dark-mode .card:hover {
  box-shadow: var(--shadow-md);
}

body.dark-mode .btn-secondary {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-secondary);
}

body.dark-mode .btn-icon:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
}

body.dark-mode .badge-success {
  background: rgba(68, 206, 75, 0.1);
  border-color: rgba(68, 206, 75, 0.3);
}

body.dark-mode .badge-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .badge-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .badge-info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .form-input,
body.dark-mode .form-select {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-primary);
  color: var(--color-text-primary);
}

body.dark-mode .form-input:focus,
body.dark-mode .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 147, 255, 0.2);
}

body.dark-mode .toast {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-xl);
}

body.dark-mode .diagnostic-item,
body.dark-mode .pon-item,
body.dark-mode .device-card,
body.dark-mode .lan-port {
  background: var(--color-bg-secondary);
}

body.dark-mode .device-card:hover {
  background: var(--color-bg-tertiary);
}

body.dark-mode .contract-card {
  border-color: var(--color-border-primary);
}

body.dark-mode .contract-card:hover {
  border-color: var(--color-primary);
}

body.dark-mode .skeleton-line {
  background: linear-gradient(
    90deg,
    var(--color-border-primary) 25%,
    var(--color-bg-tertiary) 50%,
    var(--color-border-primary) 75%
  );
}

/* ========== THEME TOGGLE BUTTON ========== */

.theme-toggle {
  position: relative;
  width: 50px;
  height: 26px;
  background: var(--color-border-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-normal);
}

.theme-toggle::before {
  content: '☀️';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all var(--transition-normal);
}

body.dark-mode .theme-toggle {
  background: var(--color-primary);
}

body.dark-mode .theme-toggle::before {
  content: '🌙';
  left: calc(100% - 24px);
}

body.dark-mode .chart-tooltip {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-secondary);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
}

body.dark-mode .chart-legend-count {
  background: var(--color-bg-secondary);
}

/* ========== SMOOTH THEME TRANSITION ========== */

* {
  transition: background-color var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-normal);
}

/* Exclui elementos que não devem ter transição de tema */
.btn,
.toast,
.skeleton-line,
.progress-bar-fill,
.status-indicator::before,
.chart-tooltip {
  transition: all var(--transition-fast);
}