/* Sistema global de superfícies:
   branco como base; cor apenas como detalhe funcional. */
.prototype-body {
  --surface-white: #fffefa;
  --detail-control: #b9d2df;
  --detail-data: #7896a6;
  --detail-content: #c9c4ba;
  --detail-success: #8fd3a8;
  --detail-danger: #efa2bd;
  --detail-current: var(--yellow);
}

:where(.screen:not([data-screen="desempenho"]):not([data-screen$="-legacy"])) .test-card {
  background: var(--surface-white) !important;
  box-shadow:
    inset 0 6px 0 var(--detail-content),
    5px 5px 0 var(--ink) !important;
}

/* Resumos e estatísticas: uma única família azul. */
:is(
  .notice-summary,
  .bank-summary,
  .lists-summary,
  .xray-scope-strip,
  .sim-summary-strip,
  .red-summary-strip,
  .rev-summary-strip,
  .anno-summary-strip,
  .graphx-context-strip,
  .timex-summary-strip,
  .crx-summary,
  .arx-summary,
  .fbx-summary,
  .admx-summary
) {
  background: var(--surface-white) !important;
  box-shadow:
    inset 0 6px 0 var(--detail-data),
    4px 4px 0 var(--ink) !important;
}

:is(
  .errors-metric,
  .sim-history-metrics > div,
  .red-history-metrics > div,
  .graphx-toolbar-count,
  .graphx-toolbar-period,
  .admx-metric,
  .list-preview-metrics > div
) {
  background: var(--surface-white) !important;
  box-shadow: inset 0 5px 0 var(--detail-data) !important;
}

[data-screen="dashboard"] :is(
  .weekly-card-compact,
  .two-column-layout > .padded-card,
  .stack > .padded-card
) {
  box-shadow:
    inset 0 6px 0 var(--detail-data),
    5px 5px 0 var(--ink) !important;
}

/* Controles, filtros, criação e formulários: detalhe azul-claro. */
:is(
  .errors-controls,
  .errors-filter-panel,
  .bank-filter-panel,
  .bank-list-panel,
  .list-generator-panel,
  .list-create-bar,
  .xray-filter-panel,
  .sim-register-card,
  .sim-models-card,
  .sim-history-toolbar,
  .red-register-card,
  .red-history-toolbar,
  .rev-create-card,
  .rev-plans-toolbar,
  .anno-create-card,
  .anno-axis-card,
  .anno-library-toolbar,
  .anno-library-filters,
  .graphx-toolbar,
  .timex-new-subject-card,
  .crx-editor,
  .arx-upload,
  .cfgx-nav,
  .fbx-form,
  .admx-system,
  .admx-notices
) {
  background: var(--surface-white) !important;
  box-shadow:
    inset 0 6px 0 var(--detail-control),
    5px 5px 0 var(--ink) !important;
}

:is(
  .errors-controls,
  .errors-filter-panel,
  .bank-filter-panel,
  .bank-list-panel,
  .list-generator-panel,
  .list-create-bar,
  .xray-filter-panel,
  .sim-register-card,
  .sim-models-card,
  .sim-history-toolbar,
  .red-register-card,
  .red-history-toolbar,
  .rev-create-card,
  .rev-plans-toolbar,
  .anno-create-card,
  .anno-axis-card,
  .anno-library-toolbar,
  .graphx-toolbar,
  .timex-new-subject-card,
  .crx-editor,
  .arx-upload,
  .cfgx-nav,
  .fbx-form,
  .admx-system,
  .admx-notices
) :is(input, select, textarea) {
  background: #fff !important;
}

/* Conteúdo e resultados: detalhe neutro para não competir com os dados. */
:is(
  .notice-card,
  .question-card,
  .bank-question-item,
  .list-preview-panel,
  .lists-manager,
  .list-selected-detail,
  .xray-distribution-card,
  .xray-incidence-card,
  .xray-detail-card,
  .sim-history-list,
  .sim-history-detail,
  .red-history-list,
  .red-history-detail,
  .rev-plan-card,
  .anno-repertory-card,
  .graphx-main-card,
  .graphx-subject-card,
  .graphx-comparison-card,
  .timex-subject-card,
  .timex-history-card,
  .crx-board,
  .crx-load,
  .arx-browser,
  .cfgx-section,
  .fbx-guide,
  .fbx-history,
  .admx-activity,
  .admx-feedbacks,
  .admx-report,
  .admx-pdf,
  .admx-permissions
) {
  background: var(--surface-white) !important;
  box-shadow:
    inset 0 6px 0 var(--detail-content),
    5px 5px 0 var(--ink) !important;
}

/* Informações novas/em andamento usam azul, sem preencher o card inteiro. */
[data-screen="avisos"] .notice-card.is-new,
[data-screen="dashboard"] .session-card,
[data-screen="banco"] .bank-progress {
  background: var(--surface-white) !important;
  box-shadow:
    inset 0 6px 0 var(--detail-control),
    5px 5px 0 var(--ink) !important;
}

[data-screen="dashboard"] .dashboard-actions .test-card {
  box-shadow:
    inset 0 6px 0 var(--detail-control),
    4px 4px 0 var(--ink) !important;
}

/* Atual/agora recebe amarelo somente no detalhe. */
:is(
  [data-screen="dashboard"] .inline-card,
  .timex-active-card,
  .crx-today,
  .rev-plan-featured
) {
  background: var(--surface-white) !important;
  box-shadow:
    inset 0 6px 0 var(--detail-current),
    5px 5px 0 var(--ink) !important;
}

/* O hub de erros usa rosa somente como identificação da família. */
[data-screen="erros"] :is(
  .errors-metric,
  .error-question-card,
  .errors-distribution,
  .errors-recurring
) {
  background: var(--surface-white) !important;
  box-shadow:
    inset 0 6px 0 var(--detail-danger),
    5px 5px 0 var(--ink) !important;
}

/* Componentes menores continuam sem elevação, mas seguem a mesma paleta. */
:is(
  .sim-history-metrics > div,
  .red-history-metrics > div,
  .red-competence-card,
  .arx-folder,
  .arx-file
) {
  background: var(--surface-white) !important;
  box-shadow: inset 0 4px 0 var(--detail-data) !important;
}

/* Seleção é azul; amarelo fica apenas para CTA e hoje/agora. */
:is(
  .sim-mode-tabs,
  .red-mode-tabs,
  .anno-mode-tabs,
  .graphx-mode-tabs
) {
  background: var(--surface-white) !important;
}

:is(
  .sim-mode-tabs,
  .red-mode-tabs,
  .anno-mode-tabs,
  .graphx-mode-tabs
) > button.is-active,
.xray-year-options > button.is-active,
.xray-detail-tabs > button.is-active,
.list-strategy.is-selected,
.list-distribution.is-selected,
.sim-model-list > button.is-selected,
.sim-history-list > button.is-selected,
.red-history-list > button.is-selected,
.rev-status-tabs > button.is-active,
.anno-axis-list > button.is-active,
.anno-library-filters > button.is-active,
.graphx-record-list > .is-current,
.timex-history-tabs > button.is-active,
.cfgx-nav button.is-active,
.cfgx-nav nav a.is-active,
.fbx-history-filters > button.is-active,
.admx-tabs > button.is-active {
  background: #e3eef3 !important;
}

.screen:not([data-screen$="-legacy"]) .outline-action {
  background: var(--surface-white) !important;
}

.screen:not([data-screen$="-legacy"]) .outline-action:hover {
  background: #e3eef3 !important;
}

.admx-maintenance-views {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: #edf4f7;
}

.admx-maintenance-views > div {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
}

.admx-maintenance-views > div + div {
  border-left: 1px solid var(--ink);
}

.admx-maintenance-views span {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admx-maintenance-views strong {
  font-size: 28px;
  line-height: 1;
}

.admx-maintenance-views small {
  color: var(--muted);
  font-size: 8px;
}

.admx-system-metrics-note {
  display: block;
  margin-top: -7px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}