/* 
 * PALETA DE CORES GLOBAL - AGENDA TÉCNICA DE QUALIDADE
 * Esta paleta deve ser aplicada em TODAS as páginas HTML e modais
 * Tema: Cyber Dark / Modern Pro (Vibrante & Neon)
 */

/* Design responsivo — aplicado globalmente em todas as páginas */
@import url('responsive.css');

:root {
  /* Fundo e Superfícies (Dark Deep) */
  --bg-main: #0b0f19;
  --bg-card: #161e2e;
  --bg-input: #1f293d;
  --bg-modal: #111827;
  --glass-bg: rgba(22, 30, 46, 0.85);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* Acentos Vibrantes (Cyber Neon) */
  --accent-primary: #8b5cf6;    /* Roxo Neon Principal */
  --accent-secondary: #06b6d4;  /* Ciano Eletrizante */
  --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  --accent-hover: #7c3aed;

  /* Textos de Alta Legibilidade (Contrast Ratio > 4.5:1) */
  --text-primary: #f8fafc;      /* Branco Puro para Textos Principais */
  --text-secondary: #94a3b8;    /* Cinza Claro para Subtítulos */
  --text-muted: #64748b;        /* Cinza Médio */
  --text-white: #ffffff;
  --text-dark: #0f172a;         /* Usado apenas em botões claros se houver */

  /* Estados e Status */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Bordas e Sombras */
  --border-color: #2d3748;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-accent: #8b5cf6;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-heavy: 0 10px 25px -5px rgba(0, 0, 0, 0.5);

  /* Padrões Rápida Conversão de Legado */
  --primary-navy: var(--bg-card);
  --secondary-gray: var(--bg-input);
  --accent-blue: var(--accent-secondary);
  --light-gray: var(--bg-input);
  --medium-gray: var(--text-secondary);
  --white: var(--bg-card);

  /* Mapeamento Adicional para Compatibilidade Total */
  --bg-primary: var(--bg-main);
  --bg-secondary: var(--bg-card);
  --bg-dark: var(--bg-modal);
  
  --border-primary: var(--border-color);
  --border-secondary: var(--border-light);
  --border-dark: var(--border-color);
  
  --text-light: var(--text-muted);
  
  --hover-primary: var(--accent-hover);
  --hover-secondary: var(--accent-secondary);
  --hover-light: var(--bg-input);
  
  --shadow-light: var(--shadow-sm);
  --shadow-medium: var(--shadow-md);
  
  --gradient-primary: var(--accent-gradient);
  --gradient-secondary: var(--accent-primary);
  --gradient-accent: var(--accent-gradient);
  
  --primary-blue: var(--accent-primary);
  --primary-dark: var(--bg-modal);
  --secondary-blue: var(--accent-secondary);
  --secondary-light: var(--accent-primary);
}

/* Reset Global */
* {
  box-sizing: border-box;
}

/* Estilos Base do Body */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  background-color: var(--bg-main) !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
}

/* Títulos Globais */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
}

h1 {
  font-size: 2.5rem !important;
  border-bottom: 3px solid var(--border-accent) !important;
  padding-bottom: 0.5rem !important;
}

/* Botões Globais */
button, .btn, input[type="submit"], input[type="button"] {
  background: var(--accent-gradient) !important;
  color: var(--text-white) !important;
  border: 1px solid var(--border-accent) !important;
  padding: 12px 24px !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
}

button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--accent-primary) !important;
}

button:active, .btn:active {
  transform: translateY(0) !important;
}

/* Campos de Input Globais */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="date"], 
input[type="time"], 
input[type="datetime-local"],
select, 
textarea {
  border: 2px solid var(--border-color) !important;
  border-radius: 5px !important;
  padding: 12px !important;
  font-size: 14px !important;
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent-secondary) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important;
  background-color: var(--bg-input) !important;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
  color-scheme: dark !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  filter: none !important;
  -webkit-filter: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.2s ease !important;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1 !important;
  transform: scale(1.15) !important;
  filter: drop-shadow(0 0 4px #ffffff) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
  font-style: italic !important;
}

/* Containers Globais */
.container {
  background: var(--bg-card) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border-color) !important;
  padding: 2rem !important;
  margin: 1rem auto !important;
}

/* Modais Globais */
.modal {
  background-color: rgba(11, 15, 25, 0.85) !important;
}

.modal-content {
  background: var(--bg-modal) !important;
  border: 2px solid var(--border-accent) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-heavy) !important;
  color: var(--text-primary) !important;
}

/* Tables Globais */
table {
  background-color: var(--bg-card) !important;
  border-collapse: collapse !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
  width: 100% !important;
}

th {
  background: var(--accent-gradient) !important;
  color: var(--text-white) !important;
  font-weight: 600 !important;
  padding: 15px !important;
  text-align: left !important;
  border-bottom: 2px solid var(--border-accent) !important;
}

td {
  padding: 12px 15px !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

tr:hover {
  background-color: var(--bg-input) !important;
}

/* Links Globais */
a {
  color: var(--accent-secondary) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: var(--accent-primary) !important;
  text-decoration: underline !important;
}

/* Alertas e Mensagens */
.alert, .message {
  padding: 15px !important;
  border-radius: 5px !important;
  margin-bottom: 1rem !important;
  border-left: 4px solid !important;
}

.alert-success, .message-success {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-left-color: var(--success) !important;
  color: #a7f3d0 !important;
}

.alert-warning, .message-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-left-color: var(--warning) !important;
  color: #fde68a !important;
}

.alert-error, .message-error {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-left-color: var(--error) !important;
  color: #fecaca !important;
}

/* Scrollbars Personalizadas de Alto Contraste - Cyber Dark */
html, body {
  scrollbar-width: auto !important;
  scrollbar-color: var(--accent-secondary, #06b6d4) var(--bg-modal, #0f172a) !important;
}

::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.8) !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--accent-gradient) !important;
  border-radius: 6px !important;
  border: 2px solid #0f172a !important;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary, #06b6d4) !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.9) !important;
}

::-webkit-scrollbar-corner {
  background: #0f172a !important;
}

/* Universal Cyber Dark Button System - Design Exato de applyFiltersBtn */
button,
.btn-primary,
.btn-secondary,
.btn-styled,
.btn-action,
.login-btn,
input[type="button"],
input[type="submit"] {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-input) 100%) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: var(--shadow-heavy) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  position: relative;
  overflow: hidden;
}

button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-styled:hover,
.btn-action:hover,
.login-btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background: var(--accent-gradient) !important;
  color: var(--text-white) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.6) !important;
  transform: translateY(-2px) !important;
}

button:active,
.btn-primary:active,
.btn-secondary:active,
.btn-styled:active,
.btn-action:active,
.login-btn:active,
input[type="button"]:active,
input[type="submit"]:active {
  transform: translateY(0) !important;
}

/* Botões especiais de estado */
button.btn-error,
button.btn-danger,
.btn-error,
.btn-danger {
  border-color: rgba(239, 68, 68, 0.5) !important;
}

button.btn-error:hover,
button.btn-danger:hover,
.btn-error:hover,
.btn-danger:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.6) !important;
}

button.btn-success,
.btn-success {
  border-color: rgba(16, 185, 129, 0.5) !important;
}

button.btn-success:hover,
.btn-success:hover {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.6) !important;
}

/* Utilitários de Texto */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-primary {
  color: var(--text-primary) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-white {
  color: var(--text-white) !important;
}

/* Classes de Background */
.bg-primary {
  background-color: var(--bg-main) !important;
}

.bg-secondary {
  background-color: var(--bg-card) !important;
}

.bg-dark {
  background-color: var(--bg-modal) !important;
}

/* ==========================================================================
   CORREÇÕES DE CONSISTÊNCIA VISUAL - TEMA ESCURO CYBER (DESIGN SYSTEM OVERRIDES)
   ========================================================================== */

/* 1. CORREÇÃO GLOBAL DE TÍTULOS (Garantir Visibilidade Absoluta) */
h1, h1 * {
  color: var(--accent-secondary, #06b6d4) !important;
  -webkit-text-fill-color: var(--accent-secondary, #06b6d4) !important;
  background: none !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  border-bottom: 4px solid var(--accent-secondary, #06b6d4) !important;
  border-image: none !important;
}
h2, h3, h4, h5, h6, .card-title, .title, .main-title {
  color: var(--text-primary, #f8fafc) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
th, th * {
  color: #ffffff !important;
}

/* 2. UNIFORMIZAÇÃO DE INPUTS, SELECTS E TEXTAREAS (Eliminar fundo branco e rosa) */
input[type="text"], 
input[type="date"], 
input[type="time"], 
input[type="number"], 
input[type="email"], 
input[type="password"], 
select, 
textarea,
.form-group input,
.form-group select,
.form-group textarea {
  background-color: var(--bg-input, #1f293d) !important;
  color: var(--text-primary, #f8fafc) !important;
  border: 1px solid var(--border-color, #2d3748) !important;
  border-radius: 6px !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted, #94a3b8) !important;
}

/* Foco nos campos (Usar Ciano/Roxo do Tema Cyber) */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  background-color: #27354d !important;
  border-color: var(--accent-primary, #8b5cf6) !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4) !important;
  color: #ffffff !important;
}

/* 4. MODAIS E PAINÉIS FLUTUANTES */
.modal-content, .panel, .card, .stat-box {
  background: var(--bg-modal, #111827) !important;
  color: var(--text-primary, #f8fafc) !important;
  border: 1px solid var(--border-color, #2d3748) !important;
}