/* ==========================================================================
   PALETA DE CORES PADRONIZADA - Igreja
   --------------------------------------------------------------------------
   Cor predominante : Azul Petróleo  #0F4C5C
   Cor secundária   :                #1B6B7A
   Destaque (dourado):               #D4A72C
   Fundo            :                #F5F7F8
   Texto            :                #263238
   ========================================================================== */

:root {
  /* Paleta oficial */
  --petroleo:              #0F4C5C;   /* cor predominante */
  --petroleo-secundario:   #1B6B7A;   /* cor secundária    */
  --dourado:               #D4A72C;   /* destaque          */
  --fundo-cinza:           #F5F7F8;   /* fundo             */
  --texto-principal:       #263238;   /* texto             */

  /* Derivados */
  --petroleo-escuro:       #0A3440;   /* hover / acento     */
  --petroleo-claro:        #2A8294;   /* gradiente claro    */
  --petroleo-suave:        rgba(15, 76, 92, 0.10);   /* fundo suave */
  --petroleo-suave2:       rgba(15, 76, 92, 0.18);   /* fundo suave forte */
  --petroleo-borda:        #3E8BA0;   /* bordas de destaque */

  /* Sobrescritas do tema (mantém compatibilidade com arquivos existentes) */
  --template1: #0F4C5C;   /* antes #e74e0f (laranja) */
  --template2: #08323E;   /* antes #A6360A          */
  --template3: #1B6B7A;   /* antes #f2682f (hover)  */

  --primary-bg-color:      #0F4C5C;
  --primary-bg-hover:      #1B6B7A;
  --primary-bg-border:     #0F4C5C;
  --primary-bg-color-gradient: linear-gradient(135deg, #0F4C5C 0%, #1B6B7A 100%);
  --primary02: rgba(15, 76, 92, 0.2);
  --primary05: rgba(15, 76, 92, 0.5);
  --primary-transparentcolor: rgba(15, 76, 92, 0.2);

  --bs-primary: #0F4C5C;
  --bs-primary-rgb: 15, 76, 92;
  --bs-link-color: #0F4C5C;
  --bs-link-hover-color: #08323E;
}

/* ==========================================================================
   GRID / TABELAS (DataTables e tabelas padrão)
   ========================================================================== */
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--petroleo) !important;
  box-shadow: 0 0 0 0.2rem rgba(15, 76, 92, 0.15) !important;
}

.table thead th,
.table thead td {
  background-color: var(--petroleo) !important;
  color: #ffffff !important;
  border-color: var(--petroleo-escuro) !important;
  font-weight: 600;
}

.table-custom thead th,
.table-custom thead td {
  background-color: var(--petroleo) !important;
  color: #ffffff !important;
}

.table-hover tbody tr:hover {
  background-color: var(--petroleo-suave) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(15, 76, 92, 0.04) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--petroleo) !important;
  border-color: var(--petroleo) !important;
  color: #fff !important;
}

.dataTables_paginate .paginate_button:hover {
  background: var(--petroleo-secundario) !important;
  border-color: var(--petroleo-secundario) !important;
}

/* ==========================================================================
   PAINÉIS / CARDS
   ========================================================================== */
.card {
  border-radius: 0.6rem !important;
  border: 1px solid #e4e7ec;
  box-shadow: 0 1px 3px rgba(15, 76, 92, 0.08);
}

.card-header {
  background: linear-gradient(135deg, var(--petroleo) 0%, var(--petroleo-claro) 100%);
  color: #ffffff;
  border-bottom: 0;
}

.card-header .card-title,
.card-header h2,
.card-header h5,
.card-header h6 {
  color: #ffffff;
}

.card-header .text-primary,
.card-header .font-weight-bold,
.card-header h2,
.card-header h5,
.card-header h6,
.card-header i {
  color: #ffffff !important;
}

/* Botões sólidos no cabeçalho do card */
.card-header .btn-primary,
.card-header .btn-custom,
.card-header .btn-success,
.card-header .btn-info,
.card-header .btn-warning,
.card-header .btn-danger,
.card-header .btn-dark {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
/* Botões outline no cabeçalho: mantém borda clara */
.card-header .btn-outline-secondary,
.card-header .btn-outline-light {
  color: #ffffff;
  border-color: rgba(255,255,255,0.6);
}

/* Cabeçalhos de cards dos dashboards (borda lateral colorida) */
.bordacard { border-left: 5px solid var(--petroleo) !important; }
.bordacardsede { border-left: 5px solid var(--petroleo-escuro) !important; }
.bordacardtarefa { border-left: 5px solid var(--petroleo-secundario) !important; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn-primary {
  background-color: var(--petroleo);
  border-color: var(--petroleo);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--petroleo-escuro);
  border-color: var(--petroleo-escuro);
}

.btn-outline-primary {
  color: var(--petroleo);
  border-color: var(--petroleo);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--petroleo);
  border-color: var(--petroleo);
  color: #fff;
}

/* Botões personalizados usados nas páginas */
.btn-custom {
  background-color: var(--petroleo) !important;
  color: #ffffff !important;
  border-color: var(--petroleo) !important;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
  background-color: var(--petroleo-escuro) !important;
  color: #ffffff !important;
  border-color: var(--petroleo-escuro) !important;
}

.meuBotao {
  background-color: var(--petroleo) !important;
}
.meuBotao:hover {
  background-color: var(--petroleo-escuro) !important;
}

/* Botões de ação dentro da coluna Ações das tabelas */
.acoes-container .btn,
.action-buttons .btn {
  border-radius: 0.3rem;
}

/* ==========================================================================
   DESTAQUE (dourado) — seleção, badges de destaque
   ========================================================================== */
.badge-primary {
  background-color: var(--petroleo) !important;
}
.text-primary {
  color: var(--petroleo) !important;
}
.bg-primary {
  background-color: var(--petroleo) !important;
}
.border-primary {
  border-color: var(--petroleo) !important;
}
.form-control:focus,
.form-select:focus,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--petroleo) !important;
  box-shadow: 0 0 0 0.2rem rgba(15, 76, 92, 0.15) !important;
}

/* Links */
a {
  color: var(--petroleo);
}
a:hover {
  color: var(--petroleo-escuro);
}

/* Calendário de escalas e títulos de atividade */
.calendar-day.selected {
  background-color: var(--petroleo) !important;
}
.activities-title {
  color: var(--petroleo) !important;
  border-top-color: var(--petroleo) !important;
  border-bottom-color: var(--petroleo) !important;
}

/* ==========================================================================
   FUNDO E TEXTO PADRÃO
   ========================================================================== */
body {
  background-color: var(--fundo-cinza);
  color: var(--texto-principal);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--texto-principal);
}

/* Nav tabs ativas */
.nav-tabs .nav-link.active {
  color: var(--petroleo);
  border-bottom-color: var(--petroleo);
}
.nav-tabs .nav-link {
  color: var(--petroleo-secundario);
}

/* ==========================================================================
   NAVEGAÇÃO (painel-igreja)
   ========================================================================== */
/* Navbar principal */
.navbar.bg-dark {
  background: var(--petroleo-escuro) !important;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff;
}
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--dourado);
}
.navbar-dark .dropdown-menu .dropdown-item:active,
.navbar-dark .dropdown-menu .dropdown-item.active {
  background-color: var(--petroleo);
  color: #fff;
}
.navbar-dark .dropdown-menu .dropdown-item:hover {
  color: var(--petroleo);
}

/* Sidebar de APPs */
.sidebar-apps {
  background: linear-gradient(180deg, var(--petroleo-escuro) 0%, var(--petroleo) 100%) !important;
}
.sidebar-apps .app-card {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.sidebar-apps .app-card:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
.sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   TEMA TIPO SASH (painel-admin) — acentos
   ========================================================================== */
.main-header {
  background-color: var(--petroleo) !important;
}
.app-sidebar .side-menu__item:hover {
  background-color: var(--petroleo-secundario) !important;
}
.slide-item.active,
.slide-item:hover {
  color: var(--petroleo) !important;
}
.slide-menu {
  border-left-color: var(--petroleo) !important;
}
.side-menu__item a {
  background-color: var(--petroleo) !important;
}

/* Tema escuro — itens ativos do menu lateral */
.dark-theme .slide-item.active,
.dark-theme .slide-item:hover,
.dark-theme .slide-item:focus {
  color: var(--dourado) !important;
}
.dark-theme .side-menu .slide.active .side-menu__label,
.dark-theme .side-menu .slide.active .side-menu__icon {
  color: var(--dourado) !important;
}
.dark-theme .slide:hover .side-menu__label,
.dark-theme .slide:hover .angle,
.dark-theme .slide:hover .side-menu__icon {
  color: var(--dourado);
}