/*
 * SISTEMA MARABÔ — Identidade Visual Personalizada
 * Design inspirado nas cores do Ministro Marabô:
 * azul-petróleo profundo, turquesa, branco e dourado.
 *
 * Este arquivo sobrepõe o SB Admin 2 e deve ser carregado por último.
 */

/* =====================================================
   1. GOOGLE FONTS — Inter
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =====================================================
   2. VARIÁVEIS DE DESIGN
   ===================================================== */
:root {
  --mb-deep:   #0D2137;   /* sidebar escura */
  --mb-mid:    #0E4272;   /* gradient sidebar */
  --mb-teal:   #1A7D8E;   /* accent principal */
  --mb-teal-lt:#22A0B5;   /* hover/light accent */
  --mb-gold:   #C9965A;   /* destaques / aniversários */
  --mb-gold-lt:#E8B97A;   /* hover gold */
  --mb-light:  #EEF4F8;   /* fundo de página */
  --mb-white:  #FFFFFF;
  --mb-text:   #2D3748;   /* texto principal */
  --mb-muted:  #718096;   /* texto secundário */
  --mb-border: #E2E8F0;   /* bordas sutis */
  --mb-danger: #C53030;
  --mb-success:#2F855A;
  --mb-radius: 10px;
  --mb-shadow: 0 2px 12px rgba(13, 33, 55, 0.10);
  --mb-shadow-md: 0 4px 24px rgba(13, 33, 55, 0.16);
  --mb-transition: all 0.22s ease;
}

/* =====================================================
   3. BASE — Tipografia e Fundo
   ===================================================== */
body,
html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--mb-light) !important;
  color: var(--mb-text) !important;
  font-size: 0.875rem;
}

/* =====================================================
   4. SIDEBAR
   ===================================================== */
.sidebar {
  background: linear-gradient(180deg, var(--mb-deep) 0%, var(--mb-mid) 100%) !important;
  background-image: none !important;
  background-color: var(--mb-deep) !important;
  box-shadow: 3px 0 20px rgba(13, 33, 55, 0.35) !important;
}

/* Marca / Logo no topo da sidebar */
.sidebar-brand {
  padding: 1.4rem 1rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.sidebar-brand-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.90) !important;
  line-height: 1.4 !important;
}

.sidebar-brand-text span.brand-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* Ícone da logo na sidebar */
.sidebar-brand .sidebar-brand-icon img,
.sidebar-brand .sidebar-brand-icon i {
  filter: brightness(1.4);
}

/* Links da sidebar */
.sidebar .nav-item .nav-link {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 0.82rem 1.2rem !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  transition: var(--mb-transition) !important;
  letter-spacing: 0.01em;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link {
  color: #fff !important;
  background: rgba(26, 125, 142, 0.30) !important;
  border-left: 3px solid var(--mb-teal) !important;
}

.sidebar .nav-item .nav-link i {
  color: rgba(255,255,255,0.45) !important;
  transition: var(--mb-transition) !important;
  width: 1.25rem;
}

.sidebar .nav-item .nav-link:hover i,
.sidebar .nav-item.active .nav-link i {
  color: var(--mb-teal-lt) !important;
}

/* Separador do sidebar */
.sidebar hr.sidebar-divider {
  border-color: rgba(255,255,255,0.08) !important;
  margin: 0.6rem 1rem !important;
}

/* Heading de seção */
.sidebar .sidebar-heading {
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 0.6rem 1.4rem 0.3rem !important;
}

/* Submenú collapse */
.sidebar .collapse-inner {
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  margin: 4px 12px !important;
  padding: 6px !important;
}

.sidebar .collapse-item {
  color: rgba(255,255,255,0.60) !important;
  font-size: 0.80rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
  transition: var(--mb-transition) !important;
}

.sidebar .collapse-item:hover,
.sidebar .collapse-item.active {
  color: #fff !important;
  background: rgba(26, 125, 142, 0.25) !important;
  text-decoration: none !important;
}

/* Botão toggle sidebar */
#sidebarToggle,
#sidebarToggle:focus {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.60) !important;
  border: none !important;
  transition: var(--mb-transition) !important;
  width: 2rem;
  height: 2rem;
}

#sidebarToggle:hover {
  background: rgba(26, 125, 142, 0.35) !important;
  color: #fff !important;
}

/* =====================================================
   5. TOPBAR
   ===================================================== */
.topbar {
  background: var(--mb-white) !important;
  box-shadow: 0 1px 8px rgba(13,33,55,0.08) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  height: 56px !important;
}

.topbar .nav-item .nav-link {
  color: var(--mb-muted) !important;
  transition: var(--mb-transition) !important;
}

.topbar .nav-item .nav-link:hover {
  color: var(--mb-teal) !important;
}

.topbar .nav-item .nav-link .img-profile {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 2px solid var(--mb-border);
  transition: var(--mb-transition);
}

.topbar .nav-item .nav-link:hover .img-profile {
  border-color: var(--mb-teal);
}

/* Nome do usuário na topbar */
.topbar .mr-2.d-none {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--mb-text) !important;
}

/* Botão toggle mobile na topbar */
#sidebarToggleTop {
  color: var(--mb-muted) !important;
}

#sidebarToggleTop:hover {
  color: var(--mb-teal) !important;
}

/* Dropdown da topbar */
.topbar .dropdown-menu {
  border: none !important;
  border-radius: var(--mb-radius) !important;
  box-shadow: var(--mb-shadow-md) !important;
  padding: 8px !important;
}

.topbar .dropdown-item {
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  padding: 8px 14px !important;
  color: var(--mb-text) !important;
  transition: var(--mb-transition) !important;
}

.topbar .dropdown-item:hover {
  background: var(--mb-light) !important;
  color: var(--mb-teal) !important;
}

.topbar .dropdown-divider {
  border-color: var(--mb-border) !important;
  margin: 4px 0 !important;
}

/* Badge de aniversário */
.badge {
  background: var(--mb-gold) !important;
  color: var(--mb-white) !important;
}

.fa-birthday-cake {
  color: var(--mb-gold) !important;
}

/* =====================================================
   6. CONTEÚDO PRINCIPAL
   ===================================================== */
#content-wrapper {
  background: var(--mb-light) !important;
}

.container-fluid {
  padding: 1.25rem 1.5rem !important;
}

/* Scroll to top */
.scroll-to-top {
  background: var(--mb-teal) !important;
  box-shadow: 0 2px 10px rgba(26,125,142,0.4) !important;
  transition: var(--mb-transition) !important;
}

.scroll-to-top:hover {
  background: var(--mb-mid) !important;
}

/* =====================================================
   7. CARDS
   ===================================================== */
.card {
  border: none !important;
  border-radius: var(--mb-radius) !important;
  box-shadow: var(--mb-shadow) !important;
  transition: var(--mb-transition) !important;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--mb-shadow-md) !important;
  transform: translateY(-1px);
}

.card-header {
  background: var(--mb-white) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--mb-text) !important;
  padding: 1rem 1.25rem !important;
}

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

.card-footer {
  background: var(--mb-light) !important;
  border-top: 1px solid var(--mb-border) !important;
  padding: 0.75rem 1.25rem !important;
  font-size: 0.80rem !important;
  color: var(--mb-muted) !important;
}

/* Card Shadow (mantendo classe do template) */
.card.shadow {
  box-shadow: var(--mb-shadow) !important;
}

/* Cards de aniversariantes */
.card.card-stats {
  border-left: 4px solid var(--mb-gold) !important;
  border-radius: var(--mb-radius) !important;
}

.card.card-stats .card-category {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--mb-text) !important;
}

.card.card-stats .card-footer {
  background: linear-gradient(90deg, rgba(201,150,90,0.07) 0%, transparent 100%) !important;
  border-top: 1px solid rgba(201,150,90,0.20) !important;
  color: var(--mb-gold) !important;
  font-weight: 600 !important;
}

/* =====================================================
   8. TABELAS
   ===================================================== */
.table-responsive {
  border-radius: var(--mb-radius) !important;
  overflow: hidden;
}

.table {
  color: var(--mb-text) !important;
  font-size: 0.82rem !important;
  margin-bottom: 0 !important;
}

.table thead th {
  background: var(--mb-deep) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 0.85rem 1rem !important;
  white-space: nowrap;
}

.table tbody tr {
  transition: var(--mb-transition) !important;
  border-bottom: 1px solid var(--mb-border) !important;
}

.table tbody tr:last-child {
  border-bottom: none !important;
}

.table tbody tr:hover {
  background: rgba(26, 125, 142, 0.05) !important;
}

.table tbody td {
  padding: 0.75rem 1rem !important;
  border: none !important;
  vertical-align: middle !important;
  color: var(--mb-text) !important;
}

.table-bordered {
  border: none !important;
}

.table-bordered thead th,
.table-bordered tbody td {
  border: none !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--mb-border) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 0.82rem !important;
  transition: var(--mb-transition) !important;
  outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--mb-teal) !important;
  box-shadow: 0 0 0 3px rgba(26,125,142,0.12) !important;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--mb-border) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 0.82rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--mb-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--mb-light) !important;
  color: var(--mb-teal) !important;
  border: none !important;
  border-radius: 6px !important;
}

/* =====================================================
   9. BOTÕES
   ===================================================== */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  padding: 0.45rem 1rem !important;
  transition: var(--mb-transition) !important;
  letter-spacing: 0.01em;
  border: none !important;
}

.btn-primary {
  background: var(--mb-teal) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(26,125,142,0.30) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--mb-mid) !important;
  box-shadow: 0 4px 14px rgba(26,125,142,0.40) !important;
  transform: translateY(-1px);
}

/* Âncoras usadas como botão (ex: Novo Doutrinador) */
a.btn-primary {
  background: var(--mb-teal) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(26,125,142,0.30) !important;
  display: inline-block;
  padding: 0.45rem 1rem !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  transition: var(--mb-transition) !important;
  text-decoration: none !important;
}

a.btn-primary:hover {
  background: var(--mb-mid) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #E2E8F0 !important;
  color: var(--mb-text) !important;
}

.btn-secondary:hover {
  background: #CBD5E0 !important;
  color: var(--mb-text) !important;
}

.btn-success {
  background: var(--mb-success) !important;
  color: #fff !important;
}

.btn-success:hover {
  background: #276749 !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--mb-danger) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: #9B2C2C !important;
  color: #fff !important;
}

.btn-sm {
  padding: 0.35rem 0.80rem !important;
  font-size: 0.76rem !important;
}

/* =====================================================
   10. FORMULÁRIOS
   ===================================================== */
.form-control {
  border: 1px solid var(--mb-border) !important;
  border-radius: 7px !important;
  font-size: 0.82rem !important;
  color: var(--mb-text) !important;
  background: #fff !important;
  padding: 0.55rem 0.9rem !important;
  transition: var(--mb-transition) !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: var(--mb-teal) !important;
  box-shadow: 0 0 0 3px rgba(26,125,142,0.14) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: #A0AEC0 !important;
}

label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--mb-text) !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.02em;
}

.form-group {
  margin-bottom: 1rem !important;
}

/* Select */
select.form-control {
  appearance: auto;
}

/* =====================================================
   11. MODAIS
   ===================================================== */
.modal-content {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 40px rgba(13,33,55,0.22) !important;
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, var(--mb-deep) 0%, var(--mb-mid) 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 1.1rem 1.5rem !important;
}

.modal-header .modal-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.03em;
}

.modal-header .close {
  color: rgba(255,255,255,0.7) !important;
  opacity: 1 !important;
  transition: var(--mb-transition) !important;
  font-size: 1.3rem !important;
}

.modal-header .close:hover {
  color: #fff !important;
}

.modal-body {
  padding: 1.5rem !important;
  background: #fff;
}

.modal-footer {
  border-top: 1px solid var(--mb-border) !important;
  padding: 1rem 1.5rem !important;
  background: var(--mb-light) !important;
}

/* =====================================================
   12. ÍCONES DE AÇÃO NAS TABELAS
   ===================================================== */
.text-primary {
  color: var(--mb-teal) !important;
}

.text-danger {
  color: var(--mb-danger) !important;
}

.far.fa-edit,
.far.fa-file,
.far.fa-trash-alt {
  font-size: 1rem !important;
  transition: var(--mb-transition) !important;
}

.far.fa-edit:hover { color: var(--mb-mid) !important; }
.far.fa-trash-alt:hover { color: #9B2C2C !important; }
.far.fa-file:hover { color: var(--mb-mid) !important; }

/* =====================================================
   13. PÁGINA INICIAL — Aniversariantes do Mês
   ===================================================== */
.marabo-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mb-teal);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(26,125,142,0.18);
}

/* =====================================================
   14. HEADING DE PÁGINA
   ===================================================== */
h1.h3 {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--mb-deep) !important;
  letter-spacing: -0.01em;
}

/* =====================================================
   15. LINKS DE AÇÕES EM GERAL
   ===================================================== */
a {
  transition: var(--mb-transition) !important;
}

a:hover {
  text-decoration: none !important;
}

/* =====================================================
   16. AJUSTES DE RESPONSIVIDADE E SCROLLBAR
   ===================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--mb-light);
}

::-webkit-scrollbar-thumb {
  background: #CBD5E0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mb-teal);
}