/* 
 * racing-setup-global.css (Versão 3.0)
 * CSS global para sistema de setups de carros de corrida
 * Compatível com Bootstrap 4 e tema escuro
 */

/* Variáveis de cores e estilos */
:root {
  /* Cores principais */
  --dark-bg: #181818;
  --darker-bg: #121212;
  --card-bg: #202020;
  --card-header-bg: #252525;
  --border-color: #303030;
  --text-primary: #f8f9fa;
  --text-secondary: #adb5bd;
  --text-muted: #6c757d;

  /* Cores de destaque */
  --primary-color: #3498db;
  /* Azul para ações secundárias */
  --secondary-color: #3498db;
  --success-color: #2ecc71;
  /* Verde para salvar/enviar */
  --warning-color: #f39c12;
  --danger-color: #e74c3c;
  /* Vermelho para cancelar/excluir */
  --info-color: #1abc9c;

  /* Sombras e efeitos */
  --card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
  --input-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  --hover-transition: all 0.3s ease;
}

/* Estilos base - FORÇANDO APLICAÇÃO */
html,
body {
  background-color: var(--dark-bg) !important;
  color: var(--text-primary) !important;
  padding-top: 56px !important;
  /* Compensar o cabeçalho fixo */
}

/* Cabeçalhos e títulos */
h1,
h2,
h3,
h4,
h5,
h6,
.card-header,
.font-weight-bold,
#titulo,
label {
  color: var(--text-primary) !important;
}

/* Cards e containers */
.card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: var(--card-shadow) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

.card-header {
  background-color: var(--card-header-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.card-body {
  background-color: var(--card-bg) !important;
  /* Sobrescrever estilos inline */
  color: var(--text-primary) !important;
  box-shadow: none !important;
  /* Remover sombra duplicada */
}

/* Formulários e inputs */
/* .form-control,
select,
input:not(.select2-search__field),
textarea {
  background-color: var(--darker-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--input-shadow) !important;
} */

/**************************************************************************************************/
.form-control:disabled,
.form-control[readonly] {
  background-color: rgb(64, 65, 68) !important;
  opacity: 0.5 ;
}

select,
input,
textarea,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
  background-color: rgb(0, 0, 0) !important;
  color: #fff !important;
}

/**************************************************************************************************/

/* input.select2-search__field {
  background-color: var(--darker-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--input-shadow) !important;
} */

.form-control:focus {
  background-color: var(--darker-bg) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
}

.form-group label {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* Botões com cores distintas */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #2980b9 !important;
  border-color: #2980b9 !important;
}

.btn-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: white !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #27ae60 !important;
  border-color: #27ae60 !important;
}

.btn-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: white !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #c0392b !important;
  border-color: #c0392b !important;
}

.btn-warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  color: white !important;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #d35400 !important;
  border-color: #d35400 !important;
  color: white !important;
}

/* Tabelas */
.table {
  color: var(--text-primary) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.table thead th {
  /* background-color: var(--card-header-bg) !important; */
  background: #000 !important;
  border-bottom: 2px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.table td {
  background-color: transparent !important;
  /* Sobrescrever estilos inline */
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Bootstrap Table */
.bootstrap-table .table {
  border-collapse: collapse !important;
}

.fixed-table-container {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.fixed-table-toolbar .btn-dark {
  /* background-color: var(--card-header-bg) !important; */
  background-color: #000 !important;
  border-color: var(--border-color) !important;
}

.fixed-table-toolbar .btn-dark:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Navegação por abas */
.nav-tabs {
  border-bottom: 1px solid var(--border-color) !important;
}

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

.nav-tabs .nav-link:hover {
  border-color: var(--border-color) var(--border-color) transparent !important;
  color: var(--text-primary) !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) var(--border-color) var(--card-bg) !important;
  color: var(--primary-color) !important;
}

/* Accordion e Collapse */
.card-header[data-toggle="collapse"] {
  cursor: pointer !important;
}

.card-header[data-toggle="collapse"]:hover {
  background-color: #303030 !important;
}

/* Select2 e SelectPicker */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  /* background-color: var(--darker-bg) !important; */
  /* border: 1px solid var(--border-color) !important; */
  /* color: var(--text-primary) !important; */

  background-color: rgb(0, 0, 0) !important;
  color: #fff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-color) !important;
}

.select2-dropdown {
  background-color: var(--darker-bg) !important;
  border: 1px solid var(--border-color) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #303030 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #2c2c2c;
  border-color: #444;
  color: white;

}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #e74c3c !important;
  /* Vermelho ao passar o mouse */
}

.bootstrap-select .dropdown-menu {
  background-color: var(--darker-bg) !important;
}

.bootstrap-select .dropdown-item {
  color: var(--text-primary) !important;
}

.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* Correções para elementos específicos */
/* Fieldsets e elementos dinâmicos */
fieldset,
.fieldset-curvas,
.fieldset-retas {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

fieldset legend {
  background-color: var(--card-header-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  padding: 0.3rem 1rem !important;
}

/* Correção para botões de fechar em fieldsets */
.fieldset-close-curva,
.fieldset-close-reta {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
}

.fieldset-close-curva:hover,
.fieldset-close-reta:hover {
  color: var(--danger-color) !important;
}

/* Correção para áreas de preview e upload */
#preview-area {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.bg-light-green {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--success-color) !important;
  color: var(--text-primary) !important;
}

/* Correção para inputs de arquivo */
#label_mapa,
#label_foto {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
  margin-bottom: 0 !important;
}

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

.input-group.bg-white {
  background-color: var(--darker-bg) !important;
}

/* Correção para form-container */
.form-container {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Estilos para mensagens e alertas */
.swal2-popup {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

.swal2-title,
.swal2-content {
  color: var(--text-primary) !important;
}

.swal2-actions button {
  box-shadow: var(--input-shadow) !important;
}

/* Estilos para ícones */
.fas,
.far,
.fab,
.fa {
  color: inherit !important;
}

/* Estilos para elementos específicos da home */
.timeline-item {
  border-bottom-color: var(--border-color) !important;
}

/* Estilos para elementos circulares */
[style*="border-radius: 50%"] {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Correções para dropdown e selectpicker */
.dropdown-menu {
  background-color: var(--darker-bg) !important;
  border: 1px solid var(--border-color) !important;
}

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

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.bootstrap-select>.dropdown-toggle {
  background-color: var(--darker-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

.bootstrap-select .dropdown-menu li a {
  color: var(--text-primary) !important;
}

.bootstrap-select .dropdown-menu li.selected a {
  background-color: var(--primary-color) !important;
}

/* Correção para botões de cancelar e salvar */
#btn_cancel_edt,
button[onclick*="cancelar_edt"]:not(#btn_return_inicio) {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: white !important;
}

/* Botões de salvar/cadastrar sempre verdes */
#btn_salvar,
button[onclick*="save"],
button[onclick*="salvar"],
button[id*="salvar"],
button[id*="cad_"],
button.btn-primary[type="submit"],
button[onclick*="Save"],
button[onclick*="Salvar"] {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: white !important;
}

/* Correção para elementos com fundo branco */
[class*="bg-white"],
[style*="background: white"],
[style*="background-color: white"],
[style*="background: azure"],
[style*="background: honeydew"],
[style*="background: seashell"],
[style*="background: lavender"],
[style*="background: beige"],
[style*="background: lightcyan"] {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Correção para tabelas */
td,
th {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* Correção para elementos específicos */
.navbar-dark {
  background-color: var(--darker-bg) !important;
}

textarea:hover,
input:not([class="select2-search__field"]):hover {
  background-color: rgba(170, 171, 182, 0.27) !important;
}

.no-break {
  white-space: nowrap;
}

/* Responsividade */
@media (max-width: 768px) {
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card-header {
    padding: 0.75rem !important;
  }

  .card-body {
    padding: 1rem !important;
  }
}