/* Final cartoon pass for the Graficos and Panorama de Questoes pages. */

#page-graficos .page-header,
#page-panorama_questoes .pq-header,
#page-panorama_erradas .pq-header,
#page-listas_exercicios .pq-header {
  position: relative !important;
  overflow: hidden !important;
  padding: 20px 22px !important;
  margin-bottom: 22px !important;
  background:
    radial-gradient(circle at 2px 2px, rgba(17, 17, 17, .10) 1px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(135deg, var(--egg-paper) 0%, #e4f5ff 100%) !important;
  border: 5px solid var(--egg-line) !important;
  border-radius: 24px !important;
  box-shadow: 8px 8px 0 var(--egg-line) !important;
}

#page-graficos .page-header::after,
#page-panorama_questoes .pq-header::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  width: 92px !important;
  height: 40px !important;
  background:
    linear-gradient(90deg, var(--egg-blue) 0 16px, transparent 16px 22px, var(--egg-green) 22px 42px, transparent 42px 48px, var(--egg-yellow) 48px 72px, transparent 72px) bottom / 100% 30px no-repeat,
    linear-gradient(var(--egg-line), var(--egg-line)) bottom / 100% 4px no-repeat !important;
  border: 3px solid var(--egg-line) !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 rgba(17, 17, 17, .18) !important;
  pointer-events: none !important;
}

#page-graficos .page-title,
#page-panorama_questoes .page-title,
#page-panorama_erradas .page-title,
#page-listas_exercicios .page-title {
  color: var(--egg-ink) !important;
  line-height: .95 !important;
  text-shadow: 3px 3px 0 #fff3b4, 5px 5px 0 rgba(17, 17, 17, .12) !important;
}

#page-graficos .page-subtitle,
#page-panorama_questoes .page-subtitle,
#page-panorama_erradas .page-subtitle,
#page-listas_exercicios .page-subtitle {
  color: var(--egg-muted) !important;
  font-weight: 900 !important;
}

#page-graficos .graph-shell,
#page-graficos .graph-content {
  display: grid !important;
  gap: 18px !important;
}

#page-graficos .graph-tabs,
#page-panorama_questoes .hub-tabs,
#page-panorama_erradas .hub-tabs,
#page-listas_exercicios .hub-tabs,
#page-panorama_questoes .pq-period-tabs {
  background: var(--egg-paper-2) !important;
  border: 4px solid var(--egg-line) !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 var(--egg-line) !important;
}

#page-graficos .graph-tabs {
  width: fit-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

#page-graficos .graph-tab-btn,
#page-panorama_questoes .hub-tabs .tab,
#page-panorama_erradas .hub-tabs .tab,
#page-listas_exercicios .hub-tabs .tab,
#page-panorama_questoes .pq-period-btn {
  min-height: 38px !important;
  background: #fffef7 !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  color: var(--egg-ink) !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

#page-graficos .graph-tab-btn.active,
#page-graficos .graph-tab-btn:hover,
#page-panorama_questoes .hub-tabs .tab.active,
#page-panorama_questoes .hub-tabs .tab:hover,
#page-panorama_erradas .hub-tabs .tab.active,
#page-panorama_erradas .hub-tabs .tab:hover,
#page-listas_exercicios .hub-tabs .tab.active,
#page-listas_exercicios .hub-tabs .tab:hover,
#page-panorama_questoes .pq-period-btn.active,
#page-panorama_questoes .pq-period-btn:hover {
  background: var(--egg-yellow) !important;
  border-color: var(--egg-line) !important;
  color: #111 !important;
}

#page-graficos .graph-toolbar,
#page-panorama_questoes .pq-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 14px !important;
  background: #dff0ff !important;
  border: 4px solid var(--egg-line) !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 rgba(17, 17, 17, .20) !important;
}

#page-graficos .graph-model-control,
#page-graficos .graph-mode-control,
#page-panorama_questoes .pq-select-label,
#page-panorama_erradas .pq-select-label,
#page-listas_exercicios .pq-select-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--egg-ink) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#page-graficos .graph-model-control select,
#page-graficos .graph-mode-control select,
#page-panorama_questoes .pq-select-label select,
#page-panorama_erradas .pq-select-label select,
#page-listas_exercicios .pq-select-label select,
#page-listas_exercicios .pq-list-create select,
#page-listas_exercicios .pq-list-create input,
#page-listas_exercicios .pq-list-search {
  min-height: 40px !important;
  background: #fffef7 !important;
  border: 3px solid var(--egg-line) !important;
  border-radius: 13px !important;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .18) !important;
  color: var(--egg-ink) !important;
  font-weight: 900 !important;
}

#page-graficos .graph-count,
#page-panorama_questoes .pq-card-meta,
#page-panorama_erradas .pq-card-meta,
#page-listas_exercicios .pq-card-meta {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  background: var(--egg-yellow) !important;
  border: 3px solid var(--egg-line) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .18) !important;
  color: #111 !important;
  font-weight: 900 !important;
}

#page-graficos .graph-chart-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 20px !important;
}

#page-graficos .graph-card-wide {
  grid-column: 1 / -1 !important;
}

#page-graficos .graph-card,
#page-panorama_questoes .pq-overview-card,
#page-panorama_questoes .pq-subject-card,
#page-panorama_erradas .pq-wrong-panel,
#page-listas_exercicios .pq-list-manager,
#page-listas_exercicios .pq-list-detail {
  overflow: hidden !important;
  background: var(--egg-paper) !important;
  border: 5px solid var(--egg-line) !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 var(--egg-line) !important;
}

#page-graficos .graph-card-header,
#page-panorama_questoes .pq-overview-card .card-header,
#page-panorama_questoes .pq-subject-card .card-header,
#page-panorama_erradas .card-header,
#page-listas_exercicios .card-header {
  min-height: 58px !important;
  padding: 14px 18px !important;
  background:
    radial-gradient(circle at 2px 2px, rgba(17, 17, 17, .08) 1px, transparent 1.6px) 0 0 / 12px 12px,
    #fff2b3 !important;
  border-bottom: 4px solid var(--egg-line) !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#page-graficos .graph-card-header h3,
#page-panorama_questoes .card-header h3,
#page-panorama_erradas .card-header h3,
#page-listas_exercicios .card-header h3,
#page-panorama_questoes .pq-section-title h2,
#page-panorama_erradas .pq-section-title h2 {
  color: var(--egg-ink) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-shadow: 2px 2px 0 #fff3b4 !important;
}

#page-graficos .chart-container,
#page-panorama_questoes .pq-chart-wrap {
  min-height: 290px !important;
  padding: 14px !important;
  background:
    linear-gradient(rgba(17, 17, 17, .06) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(17, 17, 17, .06) 1px, transparent 1px) 0 0 / 34px 34px,
    #fffef7 !important;
  border: 4px solid var(--egg-line) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 0 0 4px rgba(255, 215, 46, .22), 4px 4px 0 rgba(17, 17, 17, .16) !important;
}

#page-graficos .chart-container {
  height: 330px !important;
}

#page-panorama_questoes .pq-chart-wrap {
  height: 220px !important;
}

#page-panorama_questoes .pq-chart-wrap-lg {
  height: 290px !important;
}

#page-graficos .graph-section-title,
#page-panorama_questoes .pq-section-title {
  grid-column: 1 / -1 !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 9px 14px !important;
  background: var(--egg-yellow) !important;
  border: 4px solid var(--egg-line) !important;
  border-radius: 15px !important;
  box-shadow: 4px 4px 0 var(--egg-line) !important;
  color: #111 !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
}

#page-panorama_questoes .pq-stats-grid .stat-card {
  --pq-stat-color: var(--egg-blue);
  border: 5px solid var(--egg-line) !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 var(--egg-line) !important;
}

#page-panorama_questoes .pq-stats-grid .stat-card:nth-child(1) { --pq-stat-color: var(--egg-blue); }
#page-panorama_questoes .pq-stats-grid .stat-card:nth-child(2) { --pq-stat-color: var(--egg-green); }
#page-panorama_questoes .pq-stats-grid .stat-card:nth-child(3) { --pq-stat-color: var(--egg-red); }
#page-panorama_questoes .pq-stats-grid .stat-card:nth-child(4) { --pq-stat-color: var(--egg-yellow); }
#page-panorama_questoes .pq-stats-grid .stat-card:nth-child(5) { --pq-stat-color: #c5f4d0; }
#page-panorama_questoes .pq-stats-grid .stat-card:nth-child(6) { --pq-stat-color: #ffd6df; }

#page-panorama_questoes .pq-stats-grid .stat-card::before {
  background: var(--pq-stat-color) !important;
  width: 12px !important;
}

#page-panorama_questoes .pq-stats-grid .stat-icon {
  background: var(--pq-stat-color) !important;
  border-width: 4px !important;
}

#page-panorama_questoes .pq-overview-copy,
#page-panorama_questoes .pq-subject-stats span,
#page-panorama_erradas .pq-wrong-filters,
#page-panorama_erradas .pq-wrong-question,
#page-panorama_erradas .pq-wrong-alt,
#page-listas_exercicios .pq-list-card {
  background: var(--egg-paper-2) !important;
  border: 4px solid var(--egg-line) !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 rgba(17, 17, 17, .18) !important;
  color: var(--egg-ink) !important;
}

#page-panorama_questoes .pq-overview-copy {
  display: grid !important;
  align-content: center !important;
  background: #dff0ff !important;
}

#page-panorama_questoes .pq-overview-copy strong,
#page-panorama_questoes .pq-subject-stats strong {
  color: var(--egg-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  text-shadow: 2px 2px 0 #fff3b4 !important;
}

#page-panorama_questoes .pq-overview-copy span,
#page-panorama_questoes .pq-subject-stats span,
#page-panorama_questoes .pq-section-title span {
  color: var(--egg-muted) !important;
  font-weight: 900 !important;
}

#page-panorama_erradas .pq-wrong-question-top {
  background: #fff2b3 !important;
  border-bottom: 4px solid var(--egg-line) !important;
}

#page-panorama_erradas .pq-wrong-alt span {
  background: var(--egg-yellow) !important;
  border: 3px solid var(--egg-line) !important;
  color: #111 !important;
  box-shadow: 2px 2px 0 rgba(17, 17, 17, .18) !important;
}

#page-panorama_erradas .pq-wrong-entry,
#page-listas_exercicios .pq-list-pagination button {
  background: #fffef7 !important;
  border: 3px solid var(--egg-line) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .18) !important;
  color: var(--egg-ink) !important;
  font-weight: 900 !important;
}

#page-panorama_erradas .pq-wrong-entry.active,
#page-panorama_erradas .pq-wrong-entry:hover,
#page-listas_exercicios .pq-list-card.active,
#page-listas_exercicios .pq-list-card:hover {
  background: var(--egg-yellow) !important;
  color: #111 !important;
}

@media (max-width: 760px) {
  #page-graficos .page-header::after,
  #page-panorama_questoes .pq-header::after {
    display: none !important;
  }

  #page-graficos .graph-toolbar,
  #page-panorama_questoes .pq-controls {
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  #page-graficos .graph-model-control,
  #page-graficos .graph-model-control select,
  #page-graficos .graph-mode-control,
  #page-graficos .graph-mode-control select,
  #page-graficos .graph-count {
    width: 100% !important;
  }

  #page-graficos .graph-chart-grid,
  #page-panorama_questoes .pq-subject-grid {
    grid-template-columns: 1fr !important;
  }

  #page-graficos .chart-container,
  #page-panorama_questoes .pq-chart-wrap,
  #page-panorama_questoes .pq-chart-wrap-lg {
    height: 260px !important;
    min-height: 260px !important;
  }
}