/* ==========================================
   TEMA.CSS — tema visual da Intranet São Roque: tokens de cor --intra-*
   (paleta do logo), rebranding do Bootstrap/AdminLTE, avatar e menu lateral.
   Carregado em todas as páginas, antes de app-common.css / login.css.

   VARIABLES & GLOBAL SETUP
   ========================================== */
:root {
  --intra-bg: #f8f9fa;
  --intra-card-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  --intra-primary: #3d3b5e;          /* azul-marinho do logo São Roque */
  --intra-primary-dark: #2b2a45;
  --intra-primary-light: #ecebf3;
  --intra-accent: #4ba8d0;           /* azul-água do logo (cascata) */
  --intra-navy: #2b2a45;             /* marinho escuro (detalhes) */
  --intra-sidebar: #1f1e33;          /* marinho quase preto, mesma família do logo */
}

body {
  background-color: var(--intra-bg) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.app-header {
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.9) !important;
  /* Topbar travada em todas as páginas (o AdminLTE já suporta isso via a
     classe .fixed-header no body, mas aqui é global e direto — sem precisar
     editar o <body> de cada página uma por uma). */
  position: sticky;
  top: 0;
  z-index: 1030;
}

.premium-card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: var(--intra-card-shadow);
  background: #ffffff;
}

.premium-card-link {
  text-decoration: none !important;
  color: inherit;
}
.premium-card-link:hover .premium-card {
  transform: translateY(-4px);
  box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.08);
}

/* ==========================================
   REBRANDING DO BOOTSTRAP/ADMINLTE
   O Bootstrap 5.3 vendorizado usa custom properties pra tudo (--bs-primary
   e derivados), então dá pra retintar .btn-primary/.bg-primary/.text-primary/
   .border-primary em todo o app só redefinindo essas variáveis aqui — sem
   editar dist/css/adminlte.css. .btn-primary guarda seus próprios tokens
   (--bs-btn-bg etc.) já calculados no build, por isso precisa de override
   à parte, não herda de --bs-primary sozinho.
   ========================================== */
:root {
  --bs-primary: var(--intra-primary);
  --bs-primary-rgb: 61, 59, 94;
  --bs-primary-text-emphasis: var(--intra-primary-dark);
  --bs-primary-bg-subtle: var(--intra-primary-light);
  --bs-primary-border-subtle: #c4c3d8;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--intra-primary);
  --bs-btn-border-color: var(--intra-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--intra-primary-dark);
  --bs-btn-hover-border-color: var(--intra-primary-dark);
  --bs-btn-focus-shadow-rgb: 61, 59, 94;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #22213a;
  --bs-btn-active-border-color: #22213a;
  --bs-btn-disabled-bg: var(--intra-primary);
  --bs-btn-disabled-border-color: var(--intra-primary);
}

/* ==========================================
   AVATAR DO USUÁRIO (topbar / dropdown / dashboard)
   Foto do Google, ou círculo com as iniciais quando não há foto —
   ver avatarUsuario() em partials/nav.php.
   ========================================== */
.avatar-foto {
  object-fit: cover;
  background-color: #fff;
}
.avatar-ini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--intra-primary-dark), var(--intra-primary));
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
/* Topbar: herda os 2rem de .user-image do AdminLTE */
.navbar-nav > .user-menu .avatar-ini.user-image { font-size: .72rem; }
/* Cabeçalho do dropdown: o span já recebe width/height 75px inline */
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > .avatar-ini { font-size: 1.7rem; }
/* Dashboard: .profile-avatar já dá 100px */
.avatar-ini.profile-avatar { font-size: 2.4rem; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.1); }

/* ==========================================
   IDENTIDADE SÃO ROQUE — MENU LATERAL
   O logo (URL pública, ver partials/nav.php) tem fundo branco, então a área da marca
   no topo do menu fica branca, com a faixa marinho/azul-água do logo embaixo.
   Item ativo: marinho do logo com marcador azul-água à esquerda.
   ========================================== */
.app-sidebar .sidebar-brand {
  background: #ffffff;
  border-bottom: 4px solid var(--intra-accent) !important;
  box-shadow: inset 0 -8px 0 -4px var(--intra-primary);
}
.app-sidebar .sidebar-menu .nav-link.active {
  background-color: var(--intra-primary) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--intra-accent);
}
.app-sidebar .sidebar-menu .nav-link:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.06);
}
.app-sidebar .sidebar-menu .nav-link.active .nav-icon {
  color: var(--intra-accent);
}

/* Login: logo sobre cartão branco no painel escuro */
.login-logo {
  display: inline-block;
  background: #ffffff;
  border-radius: 12px;
  padding: .6rem .9rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.login-logo img { max-height: 48px; width: auto; display: block; }

/* ==========================================
   PAGINAÇÃO (Lista de Contatos e qualquer .pagination)
   O Bootstrap deixa o ativo em azul (#0d6efd, literal — não herda de
   --bs-primary) e os números na cor de link; aqui vai tudo pro azul-marinho da
   marca. :visited evita os números roxos de páginas já abertas.
   ========================================== */
.pagination {
  --bs-pagination-color: var(--intra-primary);
  --bs-pagination-hover-color: var(--intra-primary-dark);
  --bs-pagination-hover-bg: var(--intra-primary-light);
  --bs-pagination-hover-border-color: #c4c3d8;
  --bs-pagination-focus-color: var(--intra-primary-dark);
  --bs-pagination-focus-bg: var(--intra-primary-light);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(61, 59, 94, 0.2);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--intra-primary);
  --bs-pagination-active-border-color: var(--intra-primary);
}
.page-link:visited {
  color: var(--bs-pagination-color);
}
.page-item.active .page-link:visited {
  color: var(--bs-pagination-active-color);
}