/*!
 * TAOLA — tema da plataforma
 *
 * Camada de harmonização por cima do Bootstrap 5 / Datta Able.
 * Carrega depois de style.css, style-preset.css e tailwind.css (ver templates/includes/head.html).
 *
 * 1. Variáveis de marca  -> trocar a paleta aqui, num único sítio (o Tailwind lê as mesmas variáveis).
 * 2. Mapeamento para as variáveis do Bootstrap/Datta (cor primária, links, botões, foco).
 * 3. Componentes comuns  -> cartões, tabelas, formulários, cabeçalho de página, rodapé.
 * 4. Layout com navegação no topo (sem barra lateral).
 */

/* ───────────────────────── 1. Variáveis de marca ───────────────────────── */
:root {
  /* Cores do logótipo TAOLA: azul (principal), azul-claro, verde e dourado. */
  --taola-brand: #2e5eaa;
  --taola-brand-rgb: 46 94 170;
  --taola-brand-dark: #234a88;
  --taola-brand-dark-rgb: 35 74 136;
  --taola-brand-soft: #eaf1fb;
  --taola-brand-soft-rgb: 234 241 251;
  --taola-sky-rgb: 141 200 247;     /* azul-claro (#8dc8f7) */
  --taola-leaf-rgb: 108 206 91;     /* verde      (#6cce5b) */
  --taola-sand-rgb: 211 165 98;     /* dourado    (#d3a562) */

  --taola-ink-rgb: 15 23 42;       /* texto forte  (#0f172a) */
  --taola-muted-rgb: 100 116 139;  /* texto suave  (#64748b) */

  --taola-surface: #ffffff;
  --taola-page-bg: #f4f6f9;
  --taola-border: #e5e9f0;

  --taola-radius: 14px;
  --taola-radius-sm: 10px;
  --taola-topbar-h: 64px;
  --taola-content-max: 1440px;
}

/* ───────────── 2. Mapeamento para variáveis Bootstrap / Datta ───────────── */
/* O seletor body[data-pc-preset] ganha em especificidade a [data-pc-preset=preset-1] do tema. */
body[data-pc-preset] {
  --bs-body-bg: var(--taola-page-bg);
  --bs-body-color: rgb(var(--taola-ink-rgb) / 0.82);
  --bs-border-color: var(--taola-border);

  --bs-blue: var(--taola-brand);
  --bs-primary: var(--taola-brand);
  --bs-primary-rgb: 46, 94, 170;
  --bs-primary-light: var(--taola-brand-soft);
  --bs-link-color: var(--taola-brand);
  --bs-link-color-rgb: 46, 94, 170;
  --bs-link-hover-color: var(--taola-brand-dark);
  --bs-link-hover-color-rgb: 35, 74, 136;
  --dt-row-selected: 46, 94, 170;

  background-color: var(--taola-page-bg);
}

body[data-pc-preset] .btn-primary {
  --bs-btn-bg: var(--taola-brand);
  --bs-btn-border-color: var(--taola-brand);
  --bs-btn-hover-bg: var(--taola-brand-dark);
  --bs-btn-hover-border-color: var(--taola-brand-dark);
  --bs-btn-active-bg: var(--taola-brand-dark);
  --bs-btn-active-border-color: var(--taola-brand-dark);
  --bs-btn-disabled-bg: var(--taola-brand);
  --bs-btn-disabled-border-color: var(--taola-brand);
  --bs-btn-focus-shadow-rgb: 46, 94, 170;
}

body[data-pc-preset] .btn-outline-primary {
  --bs-btn-color: var(--taola-brand);
  --bs-btn-border-color: var(--taola-brand);
  --bs-btn-hover-bg: var(--taola-brand);
  --bs-btn-hover-border-color: var(--taola-brand);
  --bs-btn-active-bg: var(--taola-brand);
  --bs-btn-active-border-color: var(--taola-brand);
}

body[data-pc-preset] .bg-light-primary {
  background: var(--taola-brand-soft);
  color: var(--taola-brand);
}

body[data-pc-preset] .link-primary {
  color: var(--taola-brand) !important;
}
body[data-pc-preset] .link-primary:hover,
body[data-pc-preset] .link-primary:focus {
  color: var(--taola-brand-dark) !important;
}

body[data-pc-preset] .text-bg-primary {
  background-color: rgb(var(--taola-brand-rgb) / var(--bs-bg-opacity, 1)) !important;
}

body[data-pc-preset] .nav-pills {
  --bs-nav-pills-link-active-bg: var(--taola-brand);
}

body[data-pc-preset] .pagination {
  --bs-pagination-color: var(--taola-brand);
  --bs-pagination-hover-color: var(--taola-brand-dark);
  --bs-pagination-focus-color: var(--taola-brand-dark);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgb(var(--taola-brand-rgb) / 0.25);
  --bs-pagination-active-bg: var(--taola-brand);
  --bs-pagination-active-border-color: var(--taola-brand);
}

body[data-pc-preset] .list-group {
  --bs-list-group-active-bg: var(--taola-brand);
  --bs-list-group-active-border-color: var(--taola-brand);
}

body[data-pc-preset] .alert-primary {
  --bs-alert-color: var(--taola-brand-dark);
  --bs-alert-bg: var(--taola-brand-soft);
  --bs-alert-border-color: rgb(var(--taola-brand-rgb) / 0.25);
}

/* ───────────────────────── 3. Componentes comuns ───────────────────────── */
body[data-pc-preset] .card {
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--taola-border);
  --bs-card-border-radius: var(--taola-radius);
  --bs-card-inner-border-radius: calc(var(--taola-radius) - 1px);
  --bs-card-box-shadow: none;
  border-radius: var(--taola-radius);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 6px 20px rgb(15 23 42 / 0.05);
  margin-bottom: 1.5rem;
}
body[data-pc-preset] .card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--taola-border);
  padding: 1.1rem 1.5rem;
}
body[data-pc-preset] .card .card-header h5,
body[data-pc-preset] .card .card-header .h5 {
  font-weight: 600;
  color: rgb(var(--taola-ink-rgb));
}

body[data-pc-preset] .btn {
  border-radius: var(--taola-radius-sm);
  font-weight: 600;
}

body[data-pc-preset] .form-control,
body[data-pc-preset] .form-select {
  border-radius: var(--taola-radius-sm);
  border-color: #d5dbe5;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
body[data-pc-preset] .form-control:focus,
body[data-pc-preset] .form-select:focus {
  border-color: var(--taola-brand);
  box-shadow: 0 0 0 0.2rem rgb(var(--taola-brand-rgb) / 0.18);
}

body[data-pc-preset] .table > :not(caption) > * > * {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
body[data-pc-preset] .table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--taola-muted-rgb));
  background: #f8fafc;
  border-bottom: 1px solid var(--taola-border);
}

body[data-pc-preset] .modal-content {
  border: 0;
  border-radius: var(--taola-radius);
}

body[data-pc-preset] .badge {
  font-weight: 600;
}

/* Ícones/avatares quadrados do Datta passam a ter cantos arredondados */
body[data-pc-preset] .avtar:not(.rounded-circle) {
  border-radius: var(--taola-radius-sm);
}

/* Cabeçalho de página (título + breadcrumb) */
body[data-pc-preset] .page-header {
  padding: 0.25rem 0 0.5rem;
}
body[data-pc-preset] .page-header h5,
body[data-pc-preset] .page-header .h5 {
  font-size: 1.35rem;
  font-weight: 700;
  color: rgb(var(--taola-ink-rgb));
}
body[data-pc-preset] .page-header .breadcrumb .breadcrumb-item a:hover {
  color: var(--taola-brand);
}

/* Rodapé */
body[data-pc-preset] .pc-footer {
  color: rgb(var(--taola-muted-rgb));
  font-size: 0.8125rem;
}

/* ───────────────── 4. Layout com navegação no topo ─────────────────
   O Datta Able reserva 264px à esquerda (barra lateral) e 74px no topo (cabeçalho fixo).
   Aqui a navegação vive na barra .taola-topbar (templates/includes/navigation.html), em fluxo normal. */
body[data-pc-preset] .pc-container {
  top: 0;
  margin-left: 0;
  min-height: calc(100vh - var(--taola-topbar-h) - 56px);
}
body[data-pc-preset] .pc-container .pc-content {
  max-width: var(--taola-content-max);
  margin: 0 auto;
  padding: 1.75rem 2rem 1rem;
}
body[data-pc-preset] .pc-footer {
  margin-left: 0;
  margin-top: 0;
}
body[data-pc-preset] .pc-footer .footer-wrapper {
  max-width: var(--taola-content-max);
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 575.98px) {
  body[data-pc-preset] .pc-container .pc-content {
    padding: 1.25rem 1rem 0.75rem;
  }
  body[data-pc-preset] .pc-footer .footer-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Barra de topo */
.taola-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--taola-border);
}
.taola-topbar .taola-brand img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* Ligações do menu principal */
.taola-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--taola-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--taola-ink-rgb) / 0.72);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  border: 0;
  background: transparent;
}
.taola-nav-link:hover,
.taola-nav-link:focus-visible {
  background: rgb(var(--taola-ink-rgb) / 0.05);
  color: rgb(var(--taola-ink-rgb));
}
.taola-nav-link.is-active {
  background: var(--taola-brand-soft);
  color: var(--taola-brand);
}
.taola-nav-link svg {
  width: 18px;
  height: 18px;
}
.taola-nav-link.dropdown-toggle::after {
  margin-left: 0.15rem;
  vertical-align: 0.1em;
}

/* Menus (dropdown) da barra de topo */
.taola-topbar .dropdown-menu {
  border: 1px solid var(--taola-border);
  border-radius: var(--taola-radius-sm);
  box-shadow: 0 12px 32px rgb(15 23 42 / 0.12);
  padding: 0.4rem;
  min-width: 14rem;
  margin-top: 0.5rem !important;
}
.taola-topbar .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.taola-topbar .dropdown-item svg {
  width: 16px;
  height: 16px;
  color: rgb(var(--taola-muted-rgb));
}
.taola-topbar .dropdown-item:hover,
.taola-topbar .dropdown-item:focus {
  background: var(--taola-brand-soft);
  color: var(--taola-brand-dark);
}
.taola-topbar .dropdown-item:hover svg {
  color: var(--taola-brand);
}

/* Avatar (iniciais) */
.taola-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--taola-brand);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Menu móvel */
@media (max-width: 991.98px) {
  .taola-mobile-menu .taola-nav-link {
    display: flex;
    width: 100%;
    padding: 0.7rem 0.9rem;
  }
}

/* Alternativa textual ao logótipo (usada se a imagem não carregar) */
.taola-wordmark {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--taola-brand);
}