/*
 * Tema v2 (tki) - moldura das paginas: recuos do conteudo, cabecalho de
 * pagina (page-title-box / page-title), trilha (breadcrumb) e rodape.
 * Mesmo alinhamento do dashboard v2 (.tki-page: 32px em cima, 16px dos lados,
 * no maximo 1480px).
 */

/* O recuo do .page-content (menu, topo) fica como no dashboard; o respiro
   vem do container de cada pagina: 32px (desktop) / 20px 12px (celular),
   exatamente onde o .tki-page do dashboard poe o titulo. */
html.tki-layout .page-content > :is(.container-xxl, .container-fluid, .container, .container-lg, .container-xl):not(:has(> .tki-page)) {
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 32px 32px 48px !important;
}

@media (max-width: 767.98px) {
  html.tki-layout .page-content > :is(.container-xxl, .container-fluid, .container, .container-lg, .container-xl):not(:has(> .tki-page)) {
    padding: 20px 12px 32px !important;
  }
}

/* Paginas montadas com a casca do kit (.tki-page): o respiro e' o do
   dashboard em todas as pastas. As classes adm-phase2..5 do admin-refine.css
   (v1) davam de 16 a 24px por pasta e o cabecalho andava 8px entre abas do
   mesmo hub. */
html.tki-layout .page-wrapper .page-content:has(> .container-fluid > .tki-page) {
  padding-top: 16px !important;
  padding-bottom: 24px !important;
}
@media (min-width: 768px) {
  html.tki-layout .page-content > .container-fluid:has(> .tki-page) {
    padding-top: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Linhas do grid nao podem empurrar a pagina para o lado no celular. */
html.tki-layout .page-content { overflow-x: clip; }

/* ---------- Cabecalho de pagina ---------- */

html.tki-layout .page-title-box {
  padding: 0 0 8px !important;
  margin-bottom: 24px !important;
  background: transparent !important;
}

html.tki-layout .page-content .page-title,
html.tki-layout .page-title-box h1,
html.tki-layout .page-title-box h4,
html.tki-layout .config-header h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  color: var(--tki-fg) !important;
}

html.tki-layout .page-title-box p,
html.tki-layout .config-header p {
  color: var(--tki-muted) !important;
  font-size: 15px;
}

@media (max-width: 767.98px) {
  html.tki-layout .page-content .page-title,
  html.tki-layout .page-title-box h1,
  html.tki-layout .page-title-box h4,
  html.tki-layout .config-header h1 { font-size: 22px !important; }
}

/* ---------- Trilha (breadcrumb) ---------- */

html.tki-layout .breadcrumb {
  --bs-breadcrumb-divider-color: var(--tki-subtle);
  --bs-breadcrumb-item-active-color: var(--tki-fg);
  font-size: 13px;
  margin-bottom: 8px;
  background: transparent !important;
  padding: 0 !important;
}

html.tki-layout .breadcrumb .breadcrumb-item,
html.tki-layout .breadcrumb .breadcrumb-item a,
html.tki-layout .page-wrapper .page-content .page-title-box .breadcrumb .breadcrumb-item a {
  color: var(--tki-muted) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

html.tki-layout .breadcrumb .breadcrumb-item a:hover { color: var(--tki-fg) !important; }
html.tki-layout .breadcrumb .breadcrumb-item.active { color: var(--tki-fg) !important; }
html.tki-layout .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--tki-subtle); }

/* ---------- Rodape ---------- */

html.tki-layout .footer {
  background: var(--tki-bg) !important;
  border-top: 1px solid var(--tki-border) !important;
  color: var(--tki-muted) !important;
}

html.tki-layout .footer a { color: var(--tki-muted) !important; }

@media (min-width: 1200px) {
  html.tki-layout body[data-sidebar-size='default'] .footer { width: calc(100% - 266px) !important; margin-left: 266px !important; }
  html.tki-layout body[data-sidebar-size='collapsed'] .footer { width: calc(100% - 64px) !important; margin-left: 64px !important; }
}

@media (max-width: 1199.98px) {
  html.tki-layout .footer { width: 100% !important; margin-left: 0 !important; }
}

/* Carregamento inicial (overlay do html.php): claro no tema claro. */
html.tki-layout #main-spinner-overlay,
html.tki-layout .spinner-overlay {
  background: rgba(243, 244, 246, 0.82) !important;
}
html.tki-layout[data-bs-theme='dark'] #main-spinner-overlay,
html.tki-layout[data-bs-theme='dark'] .spinner-overlay {
  background: rgba(15, 17, 21, 0.82) !important;
}