:root {
  --template1: #eb2327; /* Vermelho Expert */
  --template2: #1d252b; /* Grafite Expert */
  --template3: #333d47; 
  --accent: #eb2327;
  --success: #2ba304;
  --border-radius-md: 10px;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Overrides para Modernização */
.card {
    border-radius: var(--border-radius-md) !important;
    border: none !important;
    box-shadow: var(--card-shadow) !important;
    margin-bottom: 20px;
}

.main-content {
    background-color: #f8fafc !important;
}

.table thead th {
    background-color: #f1f5f9 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--template2);
    border-bottom: 2px solid #e2e8f0 !important;
}

.table td {
    vertical-align: middle;
    padding: 12px 8px !important;
}

.btn {
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0px !important;
}

.btn-primary {
    background-color: var(--template1) !important;
    border-color: var(--template1) !important;
    box-shadow: 0 4px 10px rgba(235, 35, 39, 0.2);
}

.btn-primary:hover {
    background-color: #c41e22 !important;
    border-color: #c41e22 !important;
}

.main-sidemenu {
    background-color: var(--template2) !important;
}

.app-sidebar {
    background-color: var(--template2) !important;
}

.main-sidebar-header {
    background: var(--template2) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.main-header {
    background-color: var(--template2) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.side-menu__label {
    font-weight: 500 !important;
}

.slide-menu {
    border-left: 3px solid var(--template1) !important;
    background-color: rgba(0,0,0,0.1) !important;
}

.select2-container .select2-selection--single {
    height: 42px !important;
    border-radius: 6px !important;
}

.select2-selection__rendered {
    line-height: 40px !important;
}

/* Efeito Hover nas Tabelas */
.table-hover tbody tr:hover {
    background-color: #f1f5f9 !important;
}

/* Badge Styling */
.badge {
    padding: 5px 10px !important;
    border-radius: 4px !important;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
  margin-right: 8px;
  cursor: pointer;
}

.text-verde{
  color: var(--success);
}