/**
 * UX da Visão geral — Gestão Executiva · RH · SST · T.I.
 * Paleta ATLAS G.P.S (--green, --green-dark, --green-gradient, tokens painel).
 */

.painel-app {
  --overview-green: var(--green, #1d6b3b);
  --overview-green-dark: var(--green-dark, #14502c);
  --overview-green-light: var(--green-light, #fbfcfc);
  --overview-green-line: var(--painel-accent-line, #c5ddd0);
  --overview-green-soft: var(--painel-accent-soft, #fbfcfc);
  --overview-hero-wash: linear-gradient(
    to left,
    #4f9b72 0%,
    #72b592 14%,
    #9dccb5 32%,
    #cce8d8 50%,
    #eef7f1 68%,
    #ffffff 88%
  );
}

.painel-app .painel-toolbar-field:focus-within {
  border-color: var(--overview-green-line);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--overview-green) 12%, transparent);
}

/* -- Cabeçalho visão geral (RH / SST / T.I.) -- */
.overview-page-head {
  position: relative;
  overflow: hidden;
  margin: 14px 0 16px;
  padding: 16px 20px 16px 24px;
  border-radius: 16px;
  border: 1px solid var(--overview-green-line);
  background: var(--overview-hero-wash);
  box-shadow: var(--painel-shadow);
}

.overview-page-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 16px 0 0 16px;
  background: var(--green-gradient);
  pointer-events: none;
}

.overview-page-head h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--painel-text);
}

.overview-page-head p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 52rem;
  font-size: var(--painel-fs-body, 13px);
  line-height: 1.5;
  color: var(--painel-muted);
}

.overview-page-head .overview-updated {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  font-size: var(--painel-fs-micro, 12px);
  color: var(--painel-ui-subtle, #8a9690);
}

/* -- Abas (segment control verde) -- */
.painel-app .painel-tabs {
  padding: 5px;
  gap: 4px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfdfc 0%, #f4f7f5 100%);
  border: 1px solid var(--painel-neutral-line);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.painel-app .painel-tab {
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--painel-muted);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.painel-app .painel-tab:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--painel-text);
}

.painel-app .painel-tab.is-active {
  background: #fff;
  color: var(--overview-green-dark);
  border-color: var(--overview-green-line);
  box-shadow: 0 2px 10px rgba(20, 80, 44, 0.08);
}

.admin-app .btn.admin-cadence-trigger,
.admin-app .admin-cadence-trigger {
  border-radius: 10px !important;
}

/* -- Cards principais da visão geral -- */
.painel-app .painel-consolidated-read,
.painel-app .admin-overview-card,
.painel-app .sst-overview-card,
.painel-app .ti-overview-card {
  border-radius: 16px;
  border-color: var(--overview-green-line);
}

.painel-app .painel-consolidated-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom-color: color-mix(in srgb, var(--overview-green) 12%, var(--painel-border));
}

.painel-app .painel-executive-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #fff !important;
  background: var(--green-gradient);
  box-shadow: 0 1px 2px rgba(13, 51, 32, 0.18);
}

.painel-app .painel-executive-sublabel {
  font-size: var(--painel-fs-body, 13px);
  line-height: 1.5;
  max-width: 52rem;
}

.painel-app .painel-kpi-section + .painel-kpi-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--overview-green) 10%, var(--painel-neutral-line));
}

.painel-app .painel-kpi-band {
  margin-bottom: 12px;
  border-color: color-mix(in srgb, var(--overview-green) 16%, var(--painel-border));
  background: linear-gradient(180deg, #ffffff 0%, #f6faf7 100%);
}

.painel-app .painel-kpi-grid {
  gap: 12px;
}

.painel-app .painel-kpi {
  border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.painel-app .painel-kpi:hover {
  border-color: var(--overview-green-line);
  box-shadow: 0 6px 18px rgba(20, 80, 44, 0.07);
  transform: translateY(-1px);
}

/* Gestão Executiva: layout + AO VIVO */
.painel-app .painel-resumo-layout {
  gap: 16px;
}

.painel-app .painel-side-card--live {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--overview-green) 22%, var(--painel-border));
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
}

.painel-app .painel-side-title-live,
.painel-app .painel-section-title {
  color: var(--overview-green-dark);
}

.painel-app .painel-live-zone-label {
  font-size: var(--painel-fs-micro, 12px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--painel-muted);
  margin: 0 0 8px;
}

/* T.I.: faixa de título infra */
.ti-app .ti-overview-card .painel-section-heading,
.sst-app .sst-panel .painel-section-heading {
  box-shadow: 0 2px 8px rgba(13, 51, 32, 0.15);
}

.ti-app .ti-overview-head-actions .btn {
  border-color: var(--overview-green-line);
}

.ti-app .ti-status-pill.is-ok {
  background: var(--overview-green-soft);
  color: var(--overview-green-dark);
  border-color: var(--overview-green-line);
}

/* Pilhas e acordeões */
.admin-app .admin-overview-stack,
.sst-app .sst-overview-stack,
.ti-app .ti-overview-stack {
  gap: 14px;
}

.sst-app .sst-fold > summary,
.painel-app .atlas-fold > summary {
  font-weight: 800;
  /* Faixa verde (--painel-title-bar): verde-escuro no texto some. O acordeão
     SST de triagem (fundo claro) continua escuro via regra mais específica. */
  color: #fff;
}

.admin-app .admin-rh-foot,
.overview-empty-hint {
  border-color: color-mix(in srgb, var(--overview-green) 18%, var(--painel-border));
  background: linear-gradient(180deg, #fcfdfc 0%, var(--overview-green-light) 100%);
}

.overview-empty-hint {
  margin: 8px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border-style: dashed;
  font-size: var(--painel-fs-body, 13px);
  line-height: 1.45;
  color: var(--painel-muted);
}

@media (max-width: 640px) {
  .overview-page-head {
    padding: 14px 16px 14px 20px;
  }

  .painel-app .painel-tabs {
    border-radius: 12px;
  }

  .painel-app .painel-tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 8px 10px;
  }
}