/*
 * Sprint 10/12 — onda Nublado: cadastros, configurações e módulos auxiliares.
 * Autoridade cromática exclusiva; nenhuma propriedade geométrica é redefinida.
 */

html[data-theme="cinza"] :is(
  #page-atendentes,
  #page-configuracoes,
  #page-abrir-ticket,
  #page-perfil,
  #page-biblioteca,
  #page-ponto,
  #page-call,
  #page-tarefas,
  #page-auditoria,
  #page-indicadores
).page.active {
  --corp-bg-deep: var(--nuv-bg) !important;
  --corp-surface-1: var(--nuv-surface-parent) !important;
  --corp-surface-2: var(--nuv-surface-child) !important;
  --corp-surface-3: var(--nuv-surface-grandchild) !important;
  --corp-border: var(--nuv-line) !important;
  --corp-border-strong: var(--nuv-line-strong) !important;
  --corp-text: var(--nuv-text) !important;
  --corp-text-muted: var(--nuv-text-soft) !important;
  --corp-focus: var(--nuv-focus) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--nuv-navy-rgb), .11), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .45), transparent 28%),
    var(--nuv-bg) !important;
  color: var(--nuv-text) !important;
}

html[data-theme="cinza"] :is(
  #page-atendentes,
  #page-configuracoes,
  #page-abrir-ticket,
  #page-perfil,
  #page-ponto,
  #page-call,
  #page-tarefas,
  #page-auditoria,
  #page-indicadores
) :is(.card-value, [class*="-title"], h1, h2, h3, h4, strong) {
  color: var(--nuv-text) !important;
}

html[data-theme="cinza"] :is(
  #page-atendentes,
  #page-configuracoes,
  #page-abrir-ticket,
  #page-perfil,
  #page-ponto,
  #page-call,
  #page-tarefas,
  #page-auditoria,
  #page-indicadores
) :is([class*="-subtitle"], [class*="-hint"], small) {
  color: var(--nuv-text-soft) !important;
}

html[data-theme="cinza"] :is(
  #page-atendentes,
  #page-configuracoes,
  #page-abrir-ticket,
  #page-perfil,
  #page-ponto,
  #page-call,
  #page-tarefas,
  #page-auditoria,
  #page-indicadores
) :is(
  .content-section,
  .pp-card,
  .analyst-card,
  .admin-cadastro-panel,
  .analistas-kanban-panel,
  .config-shell,
  .config-subsection,
  .perfil-card,
  .ind-card,
  .pt-mapcard,
  .pt-reg-card,
  .pt-formcard,
  .pt-cartao,
  .pt-soltable,
  .call-direta-card,
  .call-fx-section,
  .call-server-access-panel,
  .call-sala-access-panel,
  .tf-card,
  .tf-filter-card,
  .tf-tabs-card,
  .tf-time-card,
  .tf-org-panel,
  .tf-empty-card,
  .indicadores-card-metric,
  .indicadores-bloco,
  .indicadores-filtros-panel
) {
  background: var(--nuv-surface-parent) !important;
  border-color: var(--nuv-line) !important;
  color: var(--nuv-text) !important;
  box-shadow: inset 0 0 0 0.0625rem var(--nuv-line-subtle), var(--nuv-shadow-card) !important;
}

html[data-theme="cinza"] :is(
  #page-atendentes,
  #page-configuracoes,
  #page-abrir-ticket,
  #page-perfil,
  #page-ponto,
  #page-call,
  #page-tarefas,
  #page-auditoria,
  #page-indicadores
) :is(
  .section-header,
  .analyst-card-header,
  .perfil-card-header,
  .config-tabs-card,
  .pt-empbar,
  .pt-reg-card .rc-h,
  .call-modal-card > header,
  .call-server-modal-card > header,
  .tf-drawer-panel > header,
  .tf-modal-card > header,
  .tf-section-head
) {
  background: var(--nuv-header-band) !important;
  border-color: var(--nuv-line-on-header) !important;
  color: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] :is(
  #page-atendentes,
  #page-configuracoes,
  #page-abrir-ticket,
  #page-perfil,
  #page-ponto,
  #page-call,
  #page-tarefas,
  #page-auditoria,
  #page-indicadores
) :is(
  .section-header,
  .analyst-card-header,
  .perfil-card-header,
  .config-tabs-card,
  .pt-empbar,
  .pt-reg-card .rc-h,
  .call-modal-card > header,
  .call-server-modal-card > header,
  .tf-drawer-panel > header,
  .tf-modal-card > header,
  .tf-section-head
) :is(h1, h2, h3, h4, p, span, strong, button) {
  color: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] #page-configuracoes.page.active {
  --cfg-head-bg: var(--nuv-navy) !important;
  --cfg-head-bg-end: var(--nuv-navy-soft) !important;
  --cfg-body-bg: var(--nuv-surface-parent) !important;
  --cfg-head-ink: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] #page-configuracoes :is(.config-body, .config-content) {
  background: var(--nuv-surface-parent) !important;
  color: var(--nuv-text) !important;
}

html[data-theme="cinza"] #page-configuracoes .config-tab.active {
  background: var(--nuv-surface-raised) !important;
  border-color: var(--nuv-line-strong) !important;
  color: var(--nuv-navy-deep) !important;
  box-shadow: var(--nuv-shadow-soft) !important;
}

html[data-theme="cinza"] :is(#page-biblioteca, .modal-biblioteca) {
  --bib-accent: var(--nuv-navy) !important;
  --bib-accent-ink: var(--nuv-navy-deep) !important;
  --bib-rail-bg: var(--nuv-navy-strong) !important;
  --bib-menu-bg: var(--nuv-surface-child) !important;
  --bib-menu-text: var(--nuv-text) !important;
  --bib-menu-muted: var(--nuv-text-soft) !important;
  --bib-menu-line: var(--nuv-line-subtle) !important;
  --bib-palco-bg: var(--nuv-bg) !important;
  --bib-card-bg: var(--nuv-surface-parent) !important;
  --bib-line: var(--nuv-line) !important;
  --bib-text: var(--nuv-text) !important;
  --bib-muted: var(--nuv-text-soft) !important;
  --bib-code-bg: var(--nuv-navy-deep) !important;
  --bib-code-text: var(--nuv-text-on-header) !important;
  --bib-grid: rgba(var(--nuv-navy-rgb), .08) !important;
}

html[data-theme="cinza"] #page-biblioteca .bib-rail {
  background: transparent !important;
}

html[data-theme="cinza"] #page-biblioteca :is(.bib-rail .active, .bib-rail [aria-current="page"]) {
  background: var(--nuv-header-band) !important;
  color: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] #page-biblioteca :is(.bib-menu, .bib-palco, .bib-card) {
  background-color: var(--nuv-surface-parent) !important;
  border-color: var(--nuv-line) !important;
}

html[data-theme="cinza"] #page-ponto {
  --f5c-brand: var(--nuv-navy) !important;
  --f5c-brand-50: var(--nuv-info-bg) !important;
  --f5c-surface-1: var(--nuv-surface-parent) !important;
  --f5c-surface-2: var(--nuv-surface-child) !important;
  --f5c-surface-3: var(--nuv-surface-grandchild) !important;
  --f5c-border: var(--nuv-line) !important;
  --f5c-ink-1: var(--nuv-text) !important;
  --f5c-ink-2: var(--nuv-text-soft) !important;
  --f5c-ink-3: var(--nuv-text-muted) !important;
  --f5c-blue: var(--nuv-navy) !important;
}

html[data-theme="cinza"] :is(#page-ponto, #page-indicadores) :is(.pt-btn.on, .pt-seg button.on, .ind-tabs button.on) {
  background: var(--nuv-header-band) !important;
  border-color: var(--nuv-line-on-header) !important;
  color: var(--nuv-text-on-header) !important;
}

html[data-theme="cinza"] #page-perfil .perfil-hero {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--nuv-navy-rgb), .16), transparent 44%),
    var(--nuv-surface-child) !important;
  border-color: var(--nuv-line) !important;
}

html[data-theme="cinza"] #page-call :is(.call-modal, .call-modal-card, .call-server-modal-card, .call-sala-modal-shell),
html[data-theme="cinza"] #page-tarefas :is(.tf-drawer-panel, .tf-modal-card, .tf-org-person-card) {
  background: var(--nuv-surface-parent) !important;
  border-color: var(--nuv-line) !important;
  color: var(--nuv-text) !important;
  box-shadow: inset 0 0 0 0.0625rem var(--nuv-line-subtle), var(--nuv-shadow-popover) !important;
}

html[data-theme="cinza"] :is(#page-tarefas, #page-atendentes, #page-indicadores) :is(
  .tf-card,
  .tf-org-person-card,
  .analyst-card,
  .analistas-kanban-panel tr,
  .indicadores-card-metric
):hover {
  background: var(--nuv-surface-hover) !important;
  border-color: var(--nuv-line-strong) !important;
  box-shadow: inset 0 0 0 0.0625rem var(--nuv-line-subtle), var(--nuv-shadow-raised) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="cinza"] :is(
    #page-atendentes,
    #page-configuracoes,
    #page-abrir-ticket,
    #page-perfil,
    #page-biblioteca,
    #page-ponto,
    #page-call,
    #page-tarefas,
    #page-auditoria,
    #page-indicadores
  ) * {
    transition: none !important;
  }
}