/* ===================================================
   CargoPro - Cores Customizadas
   Cor principal: #F35312
   =================================================== */

/* ---- Prevenir scroll horizontal (só nas tabelas e conteúdo interno) ---- */
.table-responsive, .card-body, .px-3 {
    overflow-x: auto;
    max-width: 100%;
}

/* ---- Botões Primary ---- */
.btn-primary {
    background-color: #F35312 !important;
    border-color: #F35312 !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #d94810 !important;
    border-color: #d94810 !important;
    color: #fff !important;
}

/* ---- Botões Soft Primary ---- */
.btn-soft-primary {
    background-color: rgba(243, 83, 18, 0.1) !important;
    color: #F35312 !important;
    border-color: transparent !important;
}
.btn-soft-primary:hover, .btn-soft-primary:focus {
    background-color: #F35312 !important;
    color: #fff !important;
}

/* ---- Botões Outline Primary ---- */
.btn-outline-primary {
    color: #F35312 !important;
    border-color: #F35312 !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: #F35312 !important;
    border-color: #F35312 !important;
    color: #fff !important;
}

/* ---- Badges Primary ---- */
.badge.bg-primary {
    background-color: #F35312 !important;
}

/* ---- Links ---- */
a.text-primary, .text-primary {
    color: #F35312 !important;
}

/* ---- Paginação ---- */
.page-item.active .page-link {
    background-color: #F35312 !important;
    border-color: #F35312 !important;
}
.page-link {
    color: #F35312;
}
.page-link:hover {
    color: #d94810;
}

/* ---- Form Focus ---- */
.form-control:focus, .form-select:focus {
    border-color: #F35312 !important;
    box-shadow: 0 0 0 0.15rem rgba(243, 83, 18, 0.25) !important;
}

/* ---- Menu/Nav ---- */
.app-menu .menu-item > .menu-link.active,
.app-menu .menu-item > .menu-link:hover {
    color: #F35312 !important;
}

/* ---- Submenu padronizado ---- */
.app-menu .sub-menu .menu-item .menu-link {
    color: #6c757d !important;
    font-size: 13.5px;
    position: relative;
    transition: all 0.15s ease;
}
.app-menu .sub-menu .menu-item .menu-link:hover,
.app-menu .sub-menu .menu-item .menu-link.active {
    color: #F35312 !important;
    background-color: rgba(243, 83, 18, 0.05);
}
.app-menu .sub-menu .menu-item .menu-link:hover::before,
.app-menu .sub-menu .menu-item .menu-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background-color: #F35312;
    border-radius: 0 3px 3px 0;
}

/* ---- Nav Pills (abas) ---- */
.nav-pills .nav-link.active {
    background-color: #F35312 !important;
    color: #fff !important;
}

/* ---- Checkbox/Radio ---- */
.form-check-input:checked {
    background-color: #F35312 !important;
    border-color: #F35312 !important;
}

/* ---- Select2 ---- */
.select2-container--bootstrap-5 .select2-selection--single:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: #F35312 !important;
    box-shadow: 0 0 0 0.15rem rgba(243, 83, 18, 0.25) !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #F35312 !important;
}

/* ---- DataTable sorting icon ---- */
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    color: #F35312 !important;
}

/* ---- Menu responsivo automático ---- */
.main-menu .app-menu > .menu-title {
    display: none !important;
}
.main-menu .app-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    justify-content: center !important;
}
.main-menu .app-menu > .menu-item {
    flex: 0 1 auto !important;
}
.main-menu .app-menu > .menu-item > .menu-link {
    padding-left: clamp(5px, 0.8vw, 18px) !important;
    padding-right: clamp(5px, 0.8vw, 18px) !important;
    white-space: nowrap !important;
}
.main-menu .app-menu > .menu-item > .menu-link > .menu-text {
    font-size: clamp(11px, 0.9vw, 14.5px) !important;
}
.main-menu .app-menu > .menu-item > .menu-link > .menu-icon {
    font-size: clamp(14px, 1.1vw, 18px) !important;
    margin-right: clamp(2px, 0.3vw, 6px) !important;
}
.main-menu .app-menu > .menu-item > .menu-link > .menu-arrow {
    margin-left: clamp(1px, 0.2vw, 4px) !important;
}

/* ---- DataTables Responsive: seta de expandir ---- */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    padding-left: 30px !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    content: '\f0142' !important;
    font-family: 'Material Design Icons' !important;
    background-color: transparent !important;
    border: 2px solid #F35312 !important;
    color: #F35312 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 16px !important;
    font-size: 14px !important;
    text-align: center !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 6px !important;
    position: absolute !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    position: relative !important;
}
table.dataTable.dtr-inline.collapsed > thead > tr > th.dtr-control::before {
    content: '' !important;
    display: none !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
    content: '\f0140' !important;
    background-color: #F35312 !important;
    color: #fff !important;
}

/* ---- Modais: scroll automático em todos ---- */
.modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

/* ---- Uppercase apenas em nomes de motoristas e clientes ---- */
.form-control.uppercase, .form-select.uppercase,
.form-control[name="nome"], .form-control[name="razao_social"],
.form-control[name="nome_fantasia"], .form-control[name="beneficiario"] {
    text-transform: uppercase;
}

/* ---- Scrollbar thumb ---- */
::-webkit-scrollbar-thumb {
    background-color: rgba(243, 83, 18, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(243, 83, 18, 0.5);
}


/* =========================================================
   Tema ESCURO — overrides pra elementos com cor fixa escura
   (códigos de barras, logos, nome da filial, títulos azuis)
   ========================================================= */
[data-bs-theme="dark"] .frete-barcode,
[data-bs-theme="dark"] .frete-barcode .barcode-text {
    color: #e6ecf5 !important;
}

/* Logo da filial no topbar: imagens coloridas/escuras → forçar branca */
[data-bs-theme="dark"] .topbar .dropdown img[alt="Logo"],
[data-bs-theme="dark"] img.filial-logo {
    filter: brightness(0) invert(1);
}

/* Nome/cidade da filial (era #103E6F fixo) */
[data-bs-theme="dark"] .filial-nome,
[data-bs-theme="dark"] [style*="color:#103E6F"],
[data-bs-theme="dark"] [style*="color: #103E6F"] {
    color: #e6ecf5 !important;
}

/* Cards de header com gradiente azul escuro permanecem (já têm contraste claro), mas
   títulos H4/H5/strong em modo escuro precisam puxar pra cor clara */
[data-bs-theme="dark"] h4[style*="color:#103E6F"],
[data-bs-theme="dark"] h5[style*="color:#103E6F"],
[data-bs-theme="dark"] strong[style*="color:#103E6F"],
[data-bs-theme="dark"] span[style*="color:#103E6F"],
[data-bs-theme="dark"] .text-azul-institucional {
    color: #8db4e2 !important;
}

/* Footer dos wizards (Novo Frete, Veículo, Cliente, Produto, Despesa, etc): tinha #f8f9fa fixo */
[data-bs-theme="dark"] [class*="wiz-footer"] {
    background: #2a2f3a !important;
    border-top-color: #3a4050 !important;
}
/* Bordas internas das sections dos wizards */
[data-bs-theme="dark"] [class*="wiz-body"] h6.wiz-section {
    border-bottom-color: #3a4050 !important;
}


/* =========================================================
   PADRÃO GLOBAL DE MODAIS (estilo "wiz" — jun/2026)
   Replica o visual do modal de Abastecimento pra todos os
   modais Bootstrap do sistema: header gradient azul, título
   laranja, corpo limpo, footer cinza com botões largos.
   Modais com classes *wiz-* próprias já seguem esse padrão.
   ========================================================= */
/* Cantos QUADRADOS (preferência do Allef, jun/2026) — !important vence
   as regras antigas de 16px que algumas páginas têm em <style>/inline */
.modal-content {
    border: 0;
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.modal-header {
    background: linear-gradient(135deg, #103E6F 0%, #1a5ba0 100%);
    border-bottom: 0;
    padding: 16px 24px 12px;
}
.modal-header .modal-title {
    color: #F35312;
    font-size: 17px;
    font-weight: 700;
}
.modal-header .modal-title i { color: #F35312; margin-right: 6px; }
/* Subtítulos e textos auxiliares dentro do header ficam brancos */
.modal-header p, .modal-header small, .modal-header .text-muted {
    color: #fff !important;
    opacity: 0.9;
    margin-bottom: 0;
}
.modal-header .btn-close {
    /* Branco puro pra destacar no header azul (o invert simples ficava acinzentado
       por causa da opacity 0.5 padrão do Bootstrap) */
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1 !important;
}
.modal-body { padding: 18px 24px; }
/* Seções internas (h6.wiz-section) funcionam em QUALQUER modal-body,
   não só nos wizards — usar nos próximos modais */
.modal-body h6.wiz-section {
    font-size: 12px;
    font-weight: 700;
    color: #F35312;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 12px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e9ecef;
}
.modal-body h6.wiz-section:first-child { margin-top: 0; }
.modal-footer {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 12px 24px;
    gap: 10px;
}
.modal-footer .btn { min-width: 100px; }
/* Placeholders dentro de modais: sem uppercase, itálico cinza */
.modal .form-control::placeholder, .modal .form-select::placeholder {
    text-transform: none !important;
    font-style: italic;
    color: #adb5bd;
}

/* Tema escuro: footer e seções dos modais padronizados */
[data-bs-theme="dark"] .modal-footer {
    background: #2a2f3a;
    border-top-color: #3a4050;
}
[data-bs-theme="dark"] .modal-body h6.wiz-section {
    border-bottom-color: #3a4050;
}

/* =========================================================
   MENU PRINCIPAL AZUL INSTITUCIONAL (jun/2026)
   Sobrescreve as variáveis do template (data-menu-color=dark)
   pro azul Agromoura, com gradient sutil e ativo laranja —
   mesmo DNA visual dos headers de modal.
   ========================================================= */
html[data-menu-color="dark"] {
    --bs-menu-bg: #103E6F;
    --bs-menu-item-color: rgba(255, 255, 255, 0.78);
    --bs-menu-item-hover-color: #ffffff;
    --bs-menu-item-active-color: #F35312;
}
.main-menu {
    background: linear-gradient(135deg, #103E6F 0%, #1a5ba0 100%) !important;
}
/* Títulos de seção do menu ("Módulos") mais suaves no azul */
.main-menu .menu-title {
    color: rgba(255, 255, 255, 0.45) !important;
}
/* Item ativo ganha um leve fundo pra reforçar o destaque */
.main-menu .menu-item .menu-link.active,
.main-menu .menu-item > a[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

/* =========================================================
   PALETA DE BADGES/TAGS (jun/2026)
   Identidade reduzida a tons de AZUL (positivo/informativo),
   LARANJA (atenção/negativo) e CINZA (neutro) — sem verde,
   vermelho ou ciano nas tags de status (ativo, aprovado,
   pendente, atrasado, não avaliado...).
   Não afeta botões nem textos monetários (verde/vermelho
   contábil continua nos valores).
   ========================================================= */
/* Sólidas */
.badge.bg-success { background-color: #1a5ba0 !important; }   /* positivo → azul médio */
.badge.bg-info    { background-color: #5b8fc7 !important; }   /* informativo → azul claro */
.badge.bg-danger  { background-color: #b23a0d !important; }   /* negativo → laranja queimado */
.badge.bg-warning { background-color: #fd9843 !important; }   /* atenção → laranja claro */
.badge.bg-pink    { background-color: #5b8fc7 !important; }
/* bg-primary já é laranja #F35312 (regra no topo do arquivo) */
/* bg-secondary / bg-dark / bg-light seguem cinzas padrão */

/* Soft (fundo translúcido + texto colorido) */
.badge.badge-soft-success { background-color: rgba(26, 91, 160, 0.12) !important; color: #1a5ba0 !important; }
.badge.badge-soft-info    { background-color: rgba(91, 143, 199, 0.15) !important; color: #3d77b4 !important; }
.badge.badge-soft-danger  { background-color: rgba(178, 58, 13, 0.12) !important; color: #b23a0d !important; }
.badge.badge-soft-warning { background-color: rgba(253, 152, 67, 0.18) !important; color: #c96a14 !important; }
.badge.badge-soft-primary { background-color: rgba(243, 83, 18, 0.12) !important; color: #F35312 !important; }

/* =========================================================
   PALETA TOTAL (jun/2026) — textos, botões e barras também
   seguem azul/laranja/cinza. Verde e vermelho saem do sistema:
   positivo/receita = AZUL, negativo/despesa = LARANJA QUEIMADO.
   ========================================================= */
.text-success { color: #1a5ba0 !important; }
.text-danger  { color: #b23a0d !important; }
.text-warning { color: #c96a14 !important; }
.text-info    { color: #3d77b4 !important; }

.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: #1a5ba0 !important; border-color: #1a5ba0 !important; color: #fff !important;
}
.btn-soft-success { background-color: rgba(26,91,160,0.12) !important; color: #1a5ba0 !important; border-color: transparent !important; }
.btn-soft-success:hover, .btn-soft-success:focus { background-color: #1a5ba0 !important; color: #fff !important; }

.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: #b23a0d !important; border-color: #b23a0d !important; color: #fff !important;
}
.btn-soft-danger { background-color: rgba(178,58,13,0.12) !important; color: #b23a0d !important; border-color: transparent !important; }
.btn-soft-danger:hover, .btn-soft-danger:focus { background-color: #b23a0d !important; color: #fff !important; }

.btn-soft-warning { background-color: rgba(253,152,67,0.18) !important; color: #c96a14 !important; border-color: transparent !important; }
.btn-soft-warning:hover, .btn-soft-warning:focus { background-color: #fd9843 !important; color: #212529 !important; }
.btn-soft-info { background-color: rgba(91,143,199,0.15) !important; color: #3d77b4 !important; border-color: transparent !important; }
.btn-soft-info:hover, .btn-soft-info:focus { background-color: #5b8fc7 !important; color: #fff !important; }

.progress-bar.bg-success { background-color: #1a5ba0 !important; }
.progress-bar.bg-danger  { background-color: #b23a0d !important; }

/* SweetAlert2 SEMPRE acima de qualquer modal Bootstrap (evita alerta "invisível" atrás do modal) */
.swal2-container { z-index: 20000 !important; }