:root {
  /* Cores Base do Tema Dark Trans War */
  --bg-dark: #0f111a;
  --bg-gradient-start: #111424;
  --bg-gradient-mid: #251d38;
  --bg-gradient-end: #36172e;
  
  --card-bg: rgba(30, 32, 47, 0.6);
  --card-border: rgba(255, 255, 255, 0.1);
  --input-bg: #14151b;
  --input-border: #222433;
  --text-primary: #ffffff;
  --text-muted: #888c9e;
  
  --primary-color: #4376ff; /* Azul Vibrante Trans War */
  --primary-hover: #325ecc;
  
  --success-color: #198754;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
}

/* Força cores Bootstrap para o Tema Escuro */
.text-muted {
  color: #9299b8 !important;
}
.text-primary {
  color: #4376ff !important;
}
.text-success {
  color: #20c997 !important;
}
.text-warning {
  color: #ffc107 !important;
}

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  color: var(--text-primary);
  /* Fundo Escuro Sólido baseado no layout TransWar (como Image 2 e 3) */
  background: #0d0f14;
  min-height: 100vh;
}

/* Scrollbar escura */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* ---------------------------------
   LOGIN PAGE SPECIFIC
----------------------------------*/
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background-color: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.login-title {
  color: var(--primary-color);
  font-weight: 800;
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
}

/* Inputs Escuros */
.dark-input {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
  border-radius: 6px;
  padding: 12px 16px;
}
.dark-input::placeholder { color: var(--text-muted); }
.dark-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(67, 118, 255, 0.25) !important;
}

/* Botão Azul Customizado */
.btn-tw {
  background-color: var(--primary-color);
  color: white;
  border: none;
  font-weight: 700;
  border-radius: 6px;
  padding: 10px 24px;
  transition: all 0.2s ease;
}
.btn-tw:hover {
  background-color: var(--primary-hover);
  color: white;
}

/* ---------------------------------
   DASHBOARD & SIDEBAR 
----------------------------------*/
.sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  background-color: rgba(15, 17, 26, 0.95);
  border-right: 1px solid var(--card-border);
  backdrop-filter: blur(5px);
  overflow-y: auto;
}

.sidebar h4 { color: var(--primary-color); font-weight: 800; }

.sidebar a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  margin: 5px 15px;
  transition: all 0.2s;
  font-weight: 500;
  white-space: nowrap;
}

.sidebar a:hover, .sidebar a.active {
  color: white;
  background-color: rgba(67, 118, 255, 0.15);
  border-left: 3px solid var(--primary-color);
}

/* Painel principal */
.main-content {
  padding: 30px;
}

.main-content h1, .main-content h2 {
  font-weight: 700;
  color: white;
}
.border-bottom { border-color: rgba(255, 255, 255, 0.1) !important; }

/* Cards & Utilities */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.card-stats { border-left: 4px solid var(--primary-color); }

/* Customização Tabelas Bootstrap para Tema Escuro */
.table {
  --bs-table-bg: rgba(30, 32, 47, 0.4);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--card-border);
  --bs-table-hover-bg: rgba(67, 118, 255, 0.1);
  --bs-table-hover-color: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.table-light {
  --bs-table-bg: rgba(255, 255, 255, 0.05) !important;
  --bs-table-color: var(--primary-color) !important;
}
.table th {
  font-weight: 700;
  letter-spacing: 0.5px;
}
.table td, .table th {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-bottom: 1px solid var(--bs-table-border-color) !important;
  padding: 16px;
}
.table-hover>tbody>tr:hover>td {
  background-color: var(--bs-table-hover-bg) !important;
  color: var(--bs-table-hover-color) !important;
}

/* Base Tabela Arredondada */
.table-responsive { background: transparent; padding: 0; box-shadow: none; border-radius: 12px; border: 1px solid var(--card-border); }

/* Fix Modais Escuros */
.modal-content {
  background-color: #1e202f;
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.modal-header, .modal-footer { border-color: rgba(255,255,255,0.1); }
.modal-title { font-weight: bold; color: var(--primary-color); }
label { color: var(--text-muted); margin-bottom: 5px; font-size: 0.9em; font-weight: 500;}

/* Selects, Inputs e Controles do Tema */
.form-select, .form-control { background-color: var(--input-bg); border: 1px solid var(--input-border); color: white; }
.form-select:focus, .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(67, 118, 255, 0.25); background-color: var(--input-bg); color: white;}
.form-select option { background-color: var(--bg-dark); color: white; }