/* ==========================================================================
   H10 Portal V3 — PELE para as telas Bootstrap legadas (19/set/2026)
   ---------------------------------------------------------------------------
   ~60 templates ainda são Bootstrap puro (admin, RH, reembolsos, cadastros, dashboards
   antigos) e outros tantos H10 carregam .card com cabeçalho navy inline e thead.table-dark.
   Esta folha reveste os componentes do Bootstrap com os tokens V3 dentro de .main-content,
   para o usuário sentir o MESMO produto sem reescrever cada template (kit: fase 4).
   Regras com !important só onde o template traz style="" inline (cabeçalho colorido).
   Tokens: :root em h10-design.css. Carregada no base.html DEPOIS do h10-design.css.
   ========================================================================== */

.main-content { font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; color: var(--h10-text); }

/* ---------- Títulos de página (legado usa <h2>/<h3> soltos no topo) ---------- */
.main-content > h1, .main-content > h2, .main-content > h3,
.main-content > .container > h1, .main-content > .container > h2, .main-content > .container > h3,
.main-content > .container-fluid > h1, .main-content > .container-fluid > h2, .main-content > .container-fluid > h3,
.main-content > .d-flex:first-child h1, .main-content > .d-flex:first-child h2, .main-content > .d-flex:first-child h3,
.main-content > .container > .d-flex:first-child h2, .main-content > .container-fluid > .d-flex:first-child h2,
.main-content > .container-fluid > .row:first-child h2, .main-content > .row:first-child h2 {
  font-size: 30px; font-weight: 750; letter-spacing: -.6px; color: #081947; line-height: 1.05; margin-bottom: 14px;
}
.main-content h4, .main-content h5 { color: #102653; font-weight: 700; }

/* ---------- Cards ---------- */
.main-content .card {
  border: 1px solid #ebf0f6; border-radius: 14px; box-shadow: var(--h10-shadow-card); background: #fff;
  overflow: hidden;
}
.main-content .card-header {
  background: #fff !important; color: #102653 !important; border-bottom: 1px solid #ebf0f6 !important;
  padding: 13px 16px; font-size: 15px; font-weight: 750; border-radius: 0 !important;
}
.main-content .card-header *, .main-content .card-header .text-white, .main-content .card-header .text-light { color: inherit !important; }
.main-content .card-header .badge { background: #e9f3ff !important; color: #0f64eb !important; }
.main-content .card-header h1, .main-content .card-header h2, .main-content .card-header h3,
.main-content .card-header h4, .main-content .card-header h5, .main-content .card-header h6 { font-size: 15px; font-weight: 750; margin: 0; }
.main-content .card-footer { background: #f8fbff; border-top: 1px solid #ebf0f6; }
/* card inteiro colorido (bg-primary/success/…) vira card branco com acento semântico à esquerda */
.main-content .card.bg-primary, .main-content .card.bg-success, .main-content .card.bg-danger, .main-content .card.bg-warning,
.main-content .card.bg-info, .main-content .card.bg-secondary, .main-content .card.bg-dark, .main-content .card.text-bg-primary,
.main-content .card.text-bg-success, .main-content .card.text-bg-danger, .main-content .card.text-bg-warning, .main-content .card.text-bg-info {
  background: #fff !important; color: var(--h10-text) !important; border-left-width: 4px;
}
.main-content .card.bg-primary, .main-content .card.text-bg-primary, .main-content .card.bg-info, .main-content .card.text-bg-info { border-left-color: var(--h10-primary); }
.main-content .card.bg-success, .main-content .card.text-bg-success { border-left-color: var(--h10-success); }
.main-content .card.bg-danger, .main-content .card.text-bg-danger { border-left-color: var(--h10-danger); }
.main-content .card.bg-warning, .main-content .card.text-bg-warning { border-left-color: var(--h10-warning); }
.main-content .card.bg-secondary, .main-content .card.bg-dark { border-left-color: var(--h10-navy); }
.main-content .card[class*="bg-"] .text-white, .main-content .card[class*="bg-"] .text-white-50,
.main-content .card[class*="text-bg-"] .text-white { color: var(--h10-text) !important; opacity: 1; }
.main-content .card[class*="bg-"] .card-title, .main-content .card[class*="bg-"] h1, .main-content .card[class*="bg-"] h2,
.main-content .card[class*="bg-"] h3, .main-content .card[class*="bg-"] h4, .main-content .card[class*="bg-"] h5 { color: #0c204c; }
/* cabeçalho de card colorido por classe (bg-*) — mesma regra do inline: fica branco */
.main-content .card-header.bg-primary, .main-content .card-header.bg-success, .main-content .card-header.bg-danger,
.main-content .card-header.bg-warning, .main-content .card-header.bg-info, .main-content .card-header.bg-dark,
.main-content .card-header.bg-secondary, .main-content .card-header.bg-light { background: #fff !important; }
.main-content .card-header.bg-primary, .main-content .card-header.bg-info { box-shadow: inset 3px 0 0 var(--h10-primary); }
.main-content .card-header.bg-success { box-shadow: inset 3px 0 0 var(--h10-success); }
.main-content .card-header.bg-danger { box-shadow: inset 3px 0 0 var(--h10-danger); }
.main-content .card-header.bg-warning { box-shadow: inset 3px 0 0 var(--h10-warning); }
.main-content .card-header.bg-dark, .main-content .card-header.bg-secondary { box-shadow: inset 3px 0 0 var(--h10-navy); }
.main-content .card.border-success, .main-content .card.border-danger, .main-content .card.border-warning, .main-content .card.border-primary { border-width: 1px; border-left-width: 4px; }

/* ---------- Tabelas ---------- */
.main-content .table { font-size: 12.5px; color: #253a5d; --bs-table-bg: transparent; margin-bottom: 0; }
.main-content .table > thead > tr > th, .main-content .table > thead > tr > td {
  background: #f6f9fd !important; color: #6680a2 !important; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid #ebf0f6 !important; border-top: 0; white-space: nowrap; vertical-align: middle;
}
.main-content .table > thead.table-dark, .main-content .table > thead.table-dark > tr > th, .main-content .table.table-dark > thead > tr > th,
.main-content .table > thead.table-primary > tr > th, .main-content .table > thead.table-light > tr > th, .main-content .table > thead.table-secondary > tr > th,
.main-content .table > thead > tr.table-dark > th, .main-content .table > thead > tr.bg-dark > th, .main-content .table > thead > tr.bg-primary > th,
.main-content .table > thead > tr > th.bg-dark, .main-content .table > thead > tr > th.bg-primary, .main-content .table > thead > tr > th.text-white {
  --bs-table-bg: #f6f9fd; --bs-table-color: #6680a2; background: #f6f9fd !important; color: #6680a2 !important; border-color: #ebf0f6 !important;
}
.main-content .table > tbody > tr > td { padding: 9px 12px; border-bottom: 1px solid #edf2f8; border-top: 0; vertical-align: middle; }
.main-content .table > tbody > tr:hover > td { background: #fafdff; }
.main-content .table > tfoot > tr > td, .main-content .table > tfoot > tr > th { background: #f8fbff; font-weight: 700; color: #102653; }
.main-content .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #fbfcfe; }
.main-content .table-bordered { border-color: #ebf0f6; }
.main-content .table-bordered > :not(caption) > * > * { border-color: #ebf0f6; }
.main-content .table-responsive { border-radius: 12px; }
.main-content .card > .table-responsive, .main-content .card > .table { border-radius: 0; }
/* linha inteira pintada (table-danger/warning/success) → só um tom bem leve; a cor fica no chip */
.main-content .table-danger > td, .main-content tr.table-danger > td, .main-content .table > tbody > tr.table-danger > * { --bs-table-bg: #fff6f7; --bs-table-accent-bg: #fff6f7; }
.main-content .table > tbody > tr.table-warning > * { --bs-table-bg: #fffbef; --bs-table-accent-bg: #fffbef; }
.main-content .table > tbody > tr.table-success > * { --bs-table-bg: #f3fcf8; --bs-table-accent-bg: #f3fcf8; }

/* ---------- Botões ---------- */
.main-content .btn { border-radius: 10px; font-weight: 650; font-size: 13px; padding: .5rem .9rem; transition: .16s ease; }
.main-content .btn-sm { padding: .32rem .65rem; font-size: 12px; border-radius: 8px; }
.main-content .btn-lg { padding: .65rem 1.2rem; font-size: 14px; }
.main-content .btn-primary, .main-content .btn-info {
  background: linear-gradient(180deg, #1875ff, #0d65ef); border-color: #0d65ef; color: #fff; box-shadow: 0 7px 18px rgba(20, 108, 246, .18);
}
.main-content .btn-primary:hover, .main-content .btn-info:hover { background: linear-gradient(180deg, #146cf6, #0b5ee8); border-color: #0b5ee8; color: #fff; transform: translateY(-1px); }
.main-content .btn-secondary, .main-content .btn-light, .main-content .btn-outline-primary, .main-content .btn-outline-secondary,
.main-content .btn-outline-dark, .main-content .btn-outline-info, .main-content .btn-dark, .main-content .btn-outline-light {
  background: #fff; border: 1px solid var(--h10-border); color: #18345d;
}
.main-content .btn-secondary:hover, .main-content .btn-light:hover, .main-content .btn-outline-primary:hover, .main-content .btn-outline-secondary:hover,
.main-content .btn-outline-dark:hover, .main-content .btn-outline-info:hover, .main-content .btn-dark:hover, .main-content .btn-outline-light:hover {
  background: var(--h10-surface-soft); color: #0f1f47; border-color: #c9d6e6; box-shadow: 0 7px 18px rgba(26, 61, 107, .10);
}
.main-content .btn-success { background: var(--h10-success); border-color: var(--h10-success); color: #fff; }
.main-content .btn-success:hover { background: #0fa36c; border-color: #0fa36c; }
.main-content .btn-outline-success { border-color: #b9ecd8; color: #099767; background: #fff; }
.main-content .btn-outline-success:hover { background: #e7f8f1; color: #099767; }
.main-content .btn-danger, .main-content .btn-outline-danger { background: #fff; border: 1px solid #ffcbd2; color: var(--h10-danger); }
.main-content .btn-danger:hover, .main-content .btn-outline-danger:hover { background: var(--h10-danger); border-color: var(--h10-danger); color: #fff; }
.main-content .btn-warning, .main-content .btn-outline-warning { background: #fff6df; border: 1px solid #ffe2a3; color: #b47300; }
.main-content .btn-warning:hover, .main-content .btn-outline-warning:hover { background: var(--h10-warning); border-color: var(--h10-warning); color: #fff; }
.main-content .btn-link { color: var(--h10-primary); text-decoration: none; }

/* ---------- Formulários ---------- */
.main-content .form-control, .main-content .form-select {
  border: 1px solid var(--h10-border); border-radius: 10px; font-size: 13px; color: var(--h10-text); min-height: 40px; background-color: #fff;
}
.main-content .form-control-sm, .main-content .form-select-sm { min-height: 32px; border-radius: 8px; font-size: 12.5px; }
.main-content .form-control:focus, .main-content .form-select:focus { border-color: var(--h10-primary); box-shadow: 0 0 0 3px rgba(20, 108, 246, .14); }
.main-content .form-label, .main-content label.form-check-label { font-size: 12.5px; font-weight: 600; color: var(--h10-text-secondary); }
.main-content .input-group-text { border-color: var(--h10-border); background: #f8fbff; color: var(--h10-text-secondary); border-radius: 10px; }
.main-content .form-check-input:checked { background-color: var(--h10-primary); border-color: var(--h10-primary); }

/* ---------- Abas ---------- */
.main-content .nav-tabs { border-bottom: 0; gap: 10px; padding: 0 8px; background: #fff; border: 1px solid var(--h10-border); border-radius: 12px;
  box-shadow: var(--h10-shadow-card); margin-bottom: 16px; }
.main-content .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: #607894; font-size: 13px; font-weight: 600;
  padding: 15px 12px; margin-bottom: -1px; background: transparent; }
.main-content .nav-tabs .nav-link:hover { color: #0f1f47; }
.main-content .nav-tabs .nav-link.active { color: var(--h10-primary); border-bottom-color: var(--h10-primary); background: transparent; }
.main-content .nav-pills .nav-link { border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--h10-text-secondary); border: 1px solid var(--h10-border); background: #fff; }
.main-content .nav-pills .nav-link.active { background: var(--h10-primary); border-color: var(--h10-primary); color: #fff; }

/* ---------- Badges / alertas / modais / paginação ---------- */
.main-content .badge { border-radius: 7px; font-weight: 650; font-size: 10.5px; padding: .3em .6em; letter-spacing: 0; }
.main-content .badge.bg-primary, .main-content .badge.text-bg-primary { background: #e9f3ff !important; color: #0f64eb !important; }
.main-content .badge.bg-success, .main-content .badge.text-bg-success { background: #e7f8f1 !important; color: #099767 !important; }
.main-content .badge.bg-danger, .main-content .badge.text-bg-danger { background: #ffe9ed !important; color: #ee3049 !important; }
.main-content .badge.bg-warning, .main-content .badge.text-bg-warning { background: #fff2d2 !important; color: #cb8500 !important; }
.main-content .badge.bg-info, .main-content .badge.text-bg-info { background: #e9f3ff !important; color: #0f64eb !important; }
.main-content .badge.bg-secondary, .main-content .badge.text-bg-secondary, .main-content .badge.bg-dark, .main-content .badge.bg-light { background: #edf2f7 !important; color: #657a95 !important; }
.main-content .alert { border-radius: 12px; border: 1px solid var(--h10-border); border-left-width: 4px; font-size: 13.5px; }
.main-content .alert-info { background: var(--h10-primary-soft); border-left-color: var(--h10-primary); color: #0f1f47; }
.main-content .alert-success { background: var(--h10-success-soft); border-left-color: var(--h10-success); color: #0f1f47; }
.main-content .alert-warning { background: var(--h10-warning-soft); border-left-color: var(--h10-warning); color: #0f1f47; }
.main-content .alert-danger { background: var(--h10-danger-soft); border-left-color: var(--h10-danger); color: #0f1f47; }
.modal-content { border-radius: 14px; border: 1px solid var(--h10-border); box-shadow: var(--h10-shadow-hover); font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; }
.modal-header { border-bottom: 1px solid #ebf0f6; background: #fff !important; color: #102653 !important; }
.modal-header * { color: inherit !important; }
.modal-header .btn-close { filter: none; }
.modal-footer { border-top: 1px solid #ebf0f6; background: #f8fbff; }
.main-content .pagination .page-link { border-color: var(--h10-border); color: var(--h10-text-secondary); font-size: 12px; font-weight: 600; border-radius: 8px; margin: 0 2px; }
.main-content .pagination .page-item.active .page-link { background: var(--h10-primary); border-color: var(--h10-primary); color: #fff; }
.main-content .list-group-item { border-color: #edf2f8; font-size: 13px; }
.main-content .progress { height: 6px; border-radius: 999px; background: #eef2f7; }
.main-content .text-primary { color: var(--h10-primary) !important; }
.main-content .text-success { color: #099767 !important; }
.main-content .text-danger { color: #ee3049 !important; }
.main-content .text-warning { color: #cb8500 !important; }
.main-content .text-muted { color: var(--h10-text-muted) !important; }
.main-content .bg-light { background: #f8fbff !important; }
.main-content hr { border-color: #e5edf7; opacity: 1; }
.main-content .border { border-color: #ebf0f6 !important; }
.main-content .shadow, .main-content .shadow-sm { box-shadow: var(--h10-shadow-card) !important; }
.main-content .rounded { border-radius: 12px !important; }

/* Grupo de botões (ações de linha): compactos, uma linha só, cantos só nas pontas */
.main-content .btn-group > .btn, .main-content .btn-group-sm > .btn { white-space: nowrap; box-shadow: none; }
.main-content .btn-group-sm > .btn { padding: .3rem .6rem; font-size: 12px; }
.main-content .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.main-content .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.main-content .table .btn { white-space: nowrap; }
.main-content .table .btn:not(.btn-sm) { padding: .34rem .7rem; font-size: 12px; }
.main-content .table > tbody > tr.table-secondary > *, .main-content .table > tbody > tr.table-active > *,
.main-content .table > tfoot > tr.table-secondary > *, .main-content .table > tbody > tr.table-light > * { --bs-table-bg: #f3f6fb; --bs-table-accent-bg: #f3f6fb; }

/* ---------- Faixa-título azul do legado (.pg-header/.adm-header/.page-header em ~19 telas) ----------
   O V3 não tem faixa pesada: vira o cabeçalho padrão (H1 30px navy + subtítulo), botões continuam. */
.main-content .pg-header, .main-content .adm-header, .main-content .page-header, .main-content .perm-head {
  background: none !important; color: #081947 !important; padding: 4px 0 14px !important; margin-bottom: 12px !important;
  border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid #e5edf7;
}
.main-content .pg-header h1, .main-content .adm-header h1, .main-content .page-header h1, .main-content .perm-head h1,
.main-content .pg-header h2, .main-content .adm-header h2, .main-content .page-header h2 {
  font-size: 30px; font-weight: 750; letter-spacing: -.6px; line-height: 1.05; margin: 0 0 4px; color: #081947 !important;
}
.main-content .pg-header h1 i, .main-content .adm-header h1 i, .main-content .page-header h1 i { color: var(--h10-primary); font-size: .8em; }
.main-content .pg-header p, .main-content .adm-header p, .main-content .page-header p, .main-content .perm-head p,
.main-content .pg-header small, .main-content .adm-header small, .main-content .page-header small,
.main-content .pg-header .opacity-75, .main-content .adm-header .opacity-75, .main-content .page-header .opacity-75,
.main-content .pg-header .text-white-50, .main-content .adm-header .text-white-50, .main-content .page-header .text-white-50 {
  color: #6680a3 !important; opacity: 1 !important; font-size: 13.5px; margin: 0;
}
.main-content .pg-header .text-white, .main-content .adm-header .text-white, .main-content .page-header .text-white { color: #081947 !important; }
.main-content .pg-header .btn-light, .main-content .adm-header .btn-light, .main-content .page-header .btn-light,
.main-content .pg-header .btn-outline-light, .main-content .adm-header .btn-outline-light, .main-content .page-header .btn-outline-light {
  background: #fff; border: 1px solid var(--h10-border); color: #18345d;
}
.main-content .pg-header .badge, .main-content .adm-header .badge, .main-content .page-header .badge { background: #e9f3ff !important; color: #0f64eb !important; }