/*
 * Gráficos cartoon Egghead
 * Mesmos dados e rótulos, com leitura mais curta, formas amigáveis e hierarquia consistente.
 */
:root {
  --cartoon-ink: #27313a;
  --cartoon-surface: #fffaf1;
  --cartoon-surface-2: #f5f0e7;
  --cartoon-grid: #d8d6d0;
  --cartoon-purple: #8d79d6;
  --cartoon-purple-soft: #e9e3ff;
  --cartoon-blue: #69b9dc;
  --cartoon-blue-soft: #dff4fc;
  --cartoon-green: #62c58e;
  --cartoon-green-soft: #ddf5e7;
  --cartoon-coral: #ed8177;
  --cartoon-coral-soft: #fde2de;
  --cartoon-yellow: #edc34f;
  --cartoon-yellow-soft: #fff1b9;
  --cartoon-badge: #f5f0e7;
  --cartoon-shadow: #27313a;
}

html[data-egghead-theme="dark"] {
  --cartoon-ink: #d8d4cc;
  --cartoon-surface: #27292e;
  --cartoon-surface-2: #30333a;
  --cartoon-grid: #50545d;
  --cartoon-purple: #a89bdf;
  --cartoon-purple-soft: #3b3650;
  --cartoon-blue: #79b9d2;
  --cartoon-blue-soft: #2d414a;
  --cartoon-green: #70c492;
  --cartoon-green-soft: #2b4335;
  --cartoon-coral: #db8b83;
  --cartoon-coral-soft: #493535;
  --cartoon-yellow: #dfba4d;
  --cartoon-yellow-soft: #453d27;
  --cartoon-badge: #ded8ce;
  --cartoon-shadow: #111216;
}

/* Hub Gráficos — navegação e resumo */
[data-screen="graficos"] .graphx-mode-tabs {
  gap: 10px !important;
  padding: 10px !important;
  border: 2px solid var(--cartoon-ink) !important;
  border-radius: 18px !important;
  background: var(--cartoon-surface-2) !important;
  box-shadow: 4px 4px 0 var(--cartoon-shadow) !important;
}

[data-screen="graficos"] .graphx-mode-tabs > button {
  min-height: 64px !important;
  gap: 10px !important;
  padding: 9px 11px !important;
  border: 2px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-screen="graficos"] .graphx-mode-tabs > button:hover {
  border-color: var(--cartoon-ink) !important;
  background: var(--cartoon-blue-soft) !important;
  transform: translateY(-2px);
}

[data-screen="graficos"] .graphx-mode-tabs > button.is-active {
  color: #2b281f !important;
  border-color: var(--cartoon-ink) !important;
  background: var(--cartoon-yellow) !important;
  box-shadow: 3px 3px 0 var(--cartoon-shadow) !important;
}

[data-screen="graficos"] .graphx-mode-tabs > button > span,
[data-screen="graficos"] .graphx-subject-index {
  display: grid;
  width: 34px !important;
  height: 34px !important;
  place-items: center;
  border: 2px solid var(--cartoon-ink) !important;
  border-radius: 50% !important;
  background: var(--cartoon-purple-soft) !important;
  color: var(--cartoon-ink) !important;
  box-shadow: 2px 2px 0 var(--cartoon-shadow) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
}

[data-screen="graficos"] .graphx-mode-tabs > button.is-active > span {
  color: #2b281f !important;
  background: var(--cartoon-badge) !important;
}

[data-screen="graficos"] .graphx-toolbar {
  min-height: 82px !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  box-shadow: 3px 3px 0 var(--cartoon-shadow) !important;
}

[data-screen="graficos"] .graphx-toolbar-count {
  min-height: 49px;
  justify-content: center;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  background: var(--cartoon-blue-soft) !important;
  box-shadow: inset 0 0 0 2px var(--cartoon-blue);
}

[data-screen="graficos"] .graphx-context-strip {
  gap: 10px !important;
  padding: 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-screen="graficos"] .graphx-context-strip > div {
  min-height: 76px !important;
  border: 2px solid var(--cartoon-ink) !important;
  border-radius: 15px !important;
  padding: 13px 15px !important;
  background: var(--cartoon-surface) !important;
  box-shadow: 3px 3px 0 var(--cartoon-shadow);
}

[data-screen="graficos"] .graphx-context-strip > div:nth-child(2) { background: var(--cartoon-purple-soft) !important; }
[data-screen="graficos"] .graphx-context-strip > div:nth-child(3) { background: var(--cartoon-blue-soft) !important; }
[data-screen="graficos"] .graphx-context-strip > div:nth-child(4) { background: var(--cartoon-green-soft) !important; }
[data-screen="graficos"] .graphx-context-strip strong { font-size: 17px !important; }

/* Cartões e curvas */
[data-screen="graficos"] :is(.graphx-main-card, .graphx-subject-card, .graphx-comparison-card, .graph-live-empty) {
  border: 2px solid var(--cartoon-ink) !important;
  border-radius: 20px !important;
  background: var(--cartoon-surface) !important;
  box-shadow: 5px 5px 0 var(--cartoon-shadow) !important;
}

[data-screen="graficos"] :is(.graphx-card-heading, .graphx-subject-heading, .graphx-comparison-heading) {
  min-height: 72px !important;
  padding: 15px 18px !important;
  border-bottom: 2px solid var(--cartoon-ink) !important;
  background: var(--cartoon-surface-2) !important;
}

[data-screen="graficos"] .graphx-main-layout {
  grid-template-columns: minmax(0, 1fr) minmax(210px, .28fr) !important;
}

[data-screen="graficos"] .graph-live-main-chart {
  padding: 10px 14px 4px 12px !important;
}

[data-screen="graficos"] .graph-live-chart {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  min-height: 224px !important;
}

[data-screen="graficos"] .graph-live-y {
  min-height: 190px !important;
  padding: 20px 7px 24px 0 !important;
  color: var(--legacy-chart-muted) !important;
  font-size: 9px !important;
}

[data-screen="graficos"] .graph-live-plot {
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cartoon-purple-soft) 56%, transparent), transparent 76%);
}

[data-screen="graficos"] .graph-live-plot svg {
  height: 190px !important;
  overflow: visible;
}

[data-screen="graficos"] .graphx-grid-lines line {
  stroke: var(--cartoon-grid) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 3 9 !important;
  stroke-linecap: round;
}

[data-screen="graficos"] .graph-live-area {
  fill: color-mix(in srgb, var(--cartoon-purple) 18%, transparent) !important;
}

[data-screen="graficos"] .graphx-main-line {
  fill: none !important;
  stroke: var(--chart-color, var(--cartoon-purple)) !important;
  stroke-width: 7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(2px 3px 0 color-mix(in srgb, var(--cartoon-shadow) 42%, transparent)) !important;
}

[data-screen="graficos"] .graphx-points circle {
  fill: var(--cartoon-surface) !important;
  stroke: var(--chart-color, var(--cartoon-purple)) !important;
  stroke-width: 4 !important;
}

[data-screen="graficos"] .graphx-points circle.is-last {
  fill: var(--cartoon-yellow) !important;
  stroke: var(--cartoon-ink) !important;
  stroke-width: 4 !important;
}

[data-screen="graficos"] .graphx-value-bubble rect {
  fill: var(--cartoon-yellow);
  stroke: var(--cartoon-ink);
  stroke-width: 1.5;
}

[data-screen="graficos"] .graphx-value-bubble text {
  fill: #2b281f !important;
  font-size: 9px;
  font-weight: 950;
  text-anchor: middle;
}

[data-screen="graficos"] .graph-live-x {
  gap: 8px !important;
  padding: 1px 4px 0;
  color: var(--legacy-chart-muted) !important;
  font-size: 8px !important;
}

[data-screen="graficos"] .graphx-record-list {
  gap: 7px !important;
  padding: 12px !important;
  border-left: 2px dashed var(--cartoon-grid) !important;
  background: transparent !important;
}

[data-screen="graficos"] .graphx-record-list > div {
  min-height: 48px !important;
  border: 1.5px solid var(--cartoon-grid) !important;
  border-radius: 12px !important;
  padding: 7px !important;
  background: var(--cartoon-surface-2) !important;
}

[data-screen="graficos"] .graphx-record-list > div.is-current {
  border: 2px solid var(--cartoon-ink) !important;
  background: var(--cartoon-yellow-soft) !important;
  box-shadow: 2px 2px 0 var(--cartoon-shadow) !important;
}

[data-screen="graficos"] .graphx-record-list > div > span {
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--cartoon-blue-soft) !important;
}

[data-screen="graficos"] .graph-live-main-footer {
  gap: 10px !important;
  padding: 10px 14px 13px !important;
  border-top: 2px solid var(--cartoon-ink) !important;
  background: var(--cartoon-surface-2) !important;
}

[data-screen="graficos"] .graph-live-main-footer > div {
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 12px;
  padding: 9px 12px !important;
  background: var(--cartoon-blue-soft);
}

[data-screen="graficos"] .graph-live-main-footer > div:first-child { background: var(--cartoon-green-soft); }

[data-screen="graficos"] .graphx-subject-section { margin-top: 27px !important; }
[data-screen="graficos"] .graphx-subject-grid { gap: 15px !important; }
[data-screen="graficos"] .graphx-subject-card:nth-child(4n + 1) { --chart-color: var(--cartoon-purple); }
[data-screen="graficos"] .graphx-subject-card:nth-child(4n + 2) { --chart-color: var(--cartoon-blue); }
[data-screen="graficos"] .graphx-subject-card:nth-child(4n + 3) { --chart-color: var(--cartoon-green); }
[data-screen="graficos"] .graphx-subject-card:nth-child(4n + 4) { --chart-color: var(--cartoon-coral); }

[data-screen="graficos"] .graph-live-card .graph-live-chart {
  min-height: 190px !important;
  padding: 4px 13px 11px !important;
}

[data-screen="graficos"] .graph-live-card .graph-live-plot svg,
[data-screen="graficos"] .graph-live-card .graph-live-y {
  height: 164px !important;
  min-height: 164px !important;
}

/* Tabela: leitura em faixas, sem grade pesada. */
[data-screen="graficos"] .graph-live-table-scroll { padding: 8px 12px 14px; }
[data-screen="graficos"] .graph-live-table { border-collapse: separate; }
[data-screen="graficos"] .graph-live-table > div {
  min-height: 48px !important;
  margin-top: 5px;
  border: 0 !important;
  border-radius: 11px;
  background: var(--cartoon-surface-2);
}

[data-screen="graficos"] .graph-live-table > div:first-child {
  color: #2b281f;
  background: var(--cartoon-yellow) !important;
}

[data-screen="graficos"] .graph-live-table :is(span, b) { border-left: 1px dashed var(--cartoon-grid) !important; }

/* Desempenho — barras, curva e distribuição. */
[data-screen="desempenho"] .performance-combo-chart {
  min-height: 272px !important;
  padding: 12px 4px 20px !important;
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cartoon-blue-soft) 60%, transparent), transparent 78%);
}

[data-screen="desempenho"] .performance-combo-chart::before {
  background: repeating-linear-gradient(to bottom, transparent 0 60px, var(--cartoon-grid) 60px 62px) !important;
  opacity: .7;
}

[data-screen="desempenho"] .performance-bars span {
  border: 2px solid var(--cartoon-ink) !important;
  border-bottom: 0 !important;
  border-radius: 13px 13px 5px 5px !important;
  background: var(--cartoon-blue) !important;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--cartoon-shadow) 55%, transparent) !important;
  opacity: 1 !important;
}

[data-screen="desempenho"] .performance-combo-chart .trend {
  stroke: var(--cartoon-purple) !important;
  stroke-width: 6 !important;
  filter: drop-shadow(2px 3px 0 color-mix(in srgb, var(--cartoon-shadow) 40%, transparent)) !important;
}

[data-screen="desempenho"] .trend-points circle {
  fill: var(--cartoon-yellow) !important;
  stroke: var(--cartoon-ink) !important;
  stroke-width: 3 !important;
}

:is(.performance-goal-track, .performance-ranking i, .hit-error-days i, .error-causes i, .xray-incidence-list i, .xray-detail-table i) {
  height: 12px !important;
  border: 2px solid var(--cartoon-ink) !important;
  border-radius: 999px !important;
  background: var(--cartoon-surface-2) !important;
  box-shadow: none !important;
}

:is(.performance-goal-track i, .performance-ranking i b, .hit-error-days i b, .xray-incidence-list i b, .xray-detail-table i b) {
  border-radius: inherit !important;
  background: var(--cartoon-purple) !important;
}

.hit-error-total {
  gap: 5px;
  padding: 5px;
  border: 2px solid var(--cartoon-ink) !important;
  border-radius: 17px !important;
  background: var(--cartoon-surface-2) !important;
  box-shadow: 3px 3px 0 var(--cartoon-shadow) !important;
}

.hit-error-total .hit-segment {
  border-radius: 12px !important;
  background: var(--cartoon-green-soft) !important;
  color: var(--cartoon-green) !important;
}

.hit-error-total .error-segment {
  border-radius: 12px !important;
  background: var(--cartoon-coral-soft) !important;
  color: var(--cartoon-coral) !important;
}

/* Erros e Raio X */
.error-causes { gap: 11px !important; }
.error-causes > div { gap: 6px !important; }
.error-causes i { height: 13px !important; }
.error-causes b {
  border: 0 !important;
  border-radius: inherit;
  background: var(--cartoon-coral) !important;
}

.xray-donut {
  border: 3px solid var(--cartoon-ink) !important;
  background: conic-gradient(
    var(--cartoon-purple) 0 24%,
    var(--cartoon-green) 24% 45%,
    var(--cartoon-blue) 45% 63%,
    var(--cartoon-coral) 63% 79%,
    var(--cartoon-yellow) 79% 100%
  ) !important;
  box-shadow: 6px 7px 0 var(--cartoon-shadow) !important;
  transform: rotate(-2deg);
}

.xray-donut::after {
  border: 3px solid var(--cartoon-ink) !important;
  background: var(--cartoon-surface) !important;
  box-shadow: none !important;
}

.xray-donut > div { transform: rotate(2deg); }
.xray-legend i { width: 13px !important; height: 13px !important; border: 2px solid var(--cartoon-ink) !important; border-radius: 5px !important; }
.xray-legend .tone-1 { background: var(--cartoon-purple) !important; }
.xray-legend .tone-2 { background: var(--cartoon-green) !important; }
.xray-legend .tone-3 { background: var(--cartoon-blue) !important; }
.xray-legend .tone-4 { background: var(--cartoon-coral) !important; }
.xray-legend .tone-5 { background: var(--cartoon-yellow) !important; }

/* Cronograma e administração */
.crx-load-bars > div > i {
  border: 2px solid var(--cartoon-ink) !important;
  border-radius: 12px 12px 5px 5px !important;
  background: var(--cartoon-surface-2) !important;
}

.crx-load-bars b {
  border: 0 !important;
  border-radius: 9px 9px 3px 3px !important;
  background: var(--cartoon-purple) !important;
}

.crx-load-bars .is-today b { background: var(--cartoon-green) !important; }

.admx-chart-area,
.admin-bars {
  border-color: var(--cartoon-grid) !important;
  background-image: repeating-linear-gradient(to bottom, transparent 0 51px, var(--cartoon-grid) 51px 53px) !important;
}

.admx-chart-area > i b,
.admin-bars div {
  border: 2px solid var(--cartoon-ink) !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 3px 3px !important;
  background: var(--cartoon-purple) !important;
  box-shadow: 2px 2px 0 var(--cartoon-shadow) !important;
}

.admx-chart-area > i.today b,
.admin-bars div.current { background: var(--cartoon-green) !important; }

.admx-chart-area polyline {
  stroke: var(--cartoon-purple) !important;
  stroke-width: 5 !important;
  filter: drop-shadow(2px 2px 0 color-mix(in srgb, var(--cartoon-shadow) 40%, transparent)) !important;
}

.admx-chart-area polyline.secondary { stroke: var(--cartoon-green) !important; }

@media (max-width: 900px) {
  [data-screen="graficos"] .graphx-main-layout { grid-template-columns: 1fr !important; }
  [data-screen="graficos"] .graphx-record-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 2px dashed var(--cartoon-grid) !important;
    border-left: 0 !important;
  }
}

@media (max-width: 700px) {
  [data-screen="graficos"] .graphx-mode-tabs { grid-template-columns: 1fr !important; }
  [data-screen="graficos"] .graphx-mode-tabs > button { min-height: 58px !important; }
  [data-screen="graficos"] .graphx-context-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-screen="graficos"] .graphx-context-strip > div { min-height: 70px !important; }
  [data-screen="graficos"] .graphx-record-list { grid-template-columns: 1fr; }
  [data-screen="graficos"] .graph-live-chart { grid-template-columns: 34px minmax(0, 1fr) !important; }
  [data-screen="graficos"] .graphx-main-line { stroke-width: 6 !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-screen="graficos"] .graphx-mode-tabs > button { transition: none !important; }
}