/*
 * Graphite Note - Multi-Class Insights + surface correction pass 31
 * Loaded last. Visual-only except for chart layout fixes wired in source JS.
 */

/* --------------------------------------------------------------------------
   1. Corrected whole-app borderless surfaces
   -------------------------------------------------------------------------- */
:root {
  --gn31-page: #f5f7fa;
  --gn31-surface: #fff;
  --gn31-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 8px 24px rgba(15, 23, 42, .05);
  --gn31-shadow-compact: 0 1px 2px rgba(15, 23, 42, .025), 0 5px 16px rgba(15, 23, 42, .04);
}

.gn-app-shell .gn-app-main,
.gn-app-shell .gn-app-content,
.gn-app-shell .gn-page-content,
.gn-app-shell .gn-app-container,
.gn-app-shell .content-wrapper,
.gn-app-shell .main-content {
  background-color: var(--gn31-page) !important;
}

/* Explicit legacy selectors intentionally override older high-specificity passes. */
.gn-app-shell .accountsPage.wrapper,
.gn-app-shell .modelScenario.wrapper,
.gn-app-shell .gn-section-card,
.gn-app-shell .gn-card,
.gn-app-shell .gn-panel,
.gn-app-shell .gn-chart-card,
.gn-app-shell .gn-predict-panel,
.gn-app-shell .gn-api-panel,
.gn-app-shell .gn-result-card,
.gn-app-shell .gn-report-card,
.gn-app-shell .gn-analytics-card,
.gn-app-shell .gn-decision-summary,
.gn-app-shell .gn-model-business-card,
.gn-app-shell .gn-regression-fit-card,
.gn-app-shell .gn-regression-training-card,
.gn-app-shell .gn-regression-hyperparams-card,
.gn-app-shell .gn-multiclass-fit-card,
.gn-app-shell .gn-multiclass-training-card,
.gn-app-shell .gn-multiclass-hyperparams-card,
.gn-app-shell .gn-multiclass-confusion-card,
.gn-app-shell .q-notebook-wrapper,
.gn-app-shell .notebook-wrapper,
.gn-app-shell .notebook-container {
  background: var(--gn31-surface) !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--gn31-shadow) !important;
}

.gn-app-shell .accountsPage.wrapper::before,
.gn-app-shell .gn-section-card::before,
.gn-app-shell .modelScenario.wrapper::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Dense supporting cards should remain calmer than primary surfaces. */
.gn-app-shell .gn-kpi-card,
.gn-app-shell .gn-model-business-card,
.gn-app-shell .custom_dx_tile_summary,
.gn-app-shell .gn-context-object-card {
  border: 0 !important;
  box-shadow: var(--gn31-shadow-compact) !important;
}

/* Form controls keep boundaries so they remain obvious controls. */
.gn-app-shell .accountsPage.wrapper input,
.gn-app-shell .accountsPage.wrapper textarea,
.gn-app-shell .accountsPage.wrapper select,
.gn-app-shell .modelScenario.wrapper input,
.gn-app-shell .modelScenario.wrapper textarea,
.gn-app-shell .dx-texteditor,
.gn-app-shell .dx-dropdowneditor {
  border-color: #cbd8e7 !important;
}

/* Semantic top borders remain meaningful status encodings. */
.gn-app-shell .gn-accuracy-panel--correct,
.gn-app-shell .gn-multiclass-accuracy-panel--correct { border-top: 3px solid #2ab58a !important; }
.gn-app-shell .gn-accuracy-panel--incorrect,
.gn-app-shell .gn-multiclass-accuracy-panel--incorrect { border-top: 3px solid #df6570 !important; }

/* --------------------------------------------------------------------------
   2. Multi-class Key Drivers
   -------------------------------------------------------------------------- */
.gn-app-shell .gn-multiclass-evidence-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
}
.gn-app-shell .gn-multiclass-evidence-item {
  position: relative;
  display: block;
  margin: 0;
  padding: 8px 10px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.gn-app-shell .gn-multiclass-evidence-item:hover { background: #f7faff; border-color: #e2eaf5; }
.gn-app-shell .gn-multiclass-evidence-radio { position: absolute; opacity: 0; pointer-events: none; }
.gn-app-shell .gn-multiclass-evidence-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.gn-app-shell .gn-multiclass-evidence-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #edf2f8;
  color: #66809e;
  font-size: 11px;
  font-weight: 700;
}
.gn-app-shell .gn-multiclass-evidence-item--top .gn-multiclass-evidence-rank { background: #e8f1ff; color: #3269bd; }
.gn-app-shell .gn-multiclass-evidence-radio:checked + .gn-multiclass-evidence-row .gn-multiclass-evidence-rank {
  background: #165dff;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(22, 93, 255, .10);
}
.gn-app-shell .gn-multiclass-evidence-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #12233b;
  font-size: 14px;
  font-weight: 600;
}
.gn-app-shell .gn-multiclass-evidence-value { color: #10213b; font-size: 12.5px; font-weight: 700; }
.gn-app-shell .gn-multiclass-evidence-item .gn-evidence-track {
  margin: 7px 0 0 33px;
  width: calc(100% - 33px);
  height: 7px;
}

/* --------------------------------------------------------------------------
   3. Multi-class Accuracy Overview / confusion matrix
   -------------------------------------------------------------------------- */
.gn-app-shell .gn-multiclass-accuracy-overview { padding: 2px 8px 12px; }
.gn-app-shell .gn-multiclass-confusion-card {
  position: relative;
  margin: 0 16px 14px;
  padding: 14px 14px 8px;
}
.gn-app-shell .gn-multiclass-confusion-chart { width: 100%; min-height: 390px; }
.gn-app-shell .gn-multiclass-accuracy-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 16px;
}
.gn-app-shell .gn-multiclass-accuracy-panel {
  min-width: 0;
  padding: 18px;
  border: 0;
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--gn31-shadow-compact);
}
.gn-app-shell .gn-multiclass-accuracy-panel .gn-result-section-title { margin-bottom: 4px !important; }
.gn-app-shell .gn-multiclass-accuracy-metrics {
  margin: 14px 16px 0;
  padding: 18px;
  border: 0;
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--gn31-shadow-compact);
}
.gn-app-shell .gn-multiclass-accuracy-metrics .gn-accuracy-metric-list { width: min(100%, 920px); }

/* --------------------------------------------------------------------------
   4. Multi-class Model Fit
   -------------------------------------------------------------------------- */
.gn-app-shell .gn-multiclass-fit-card {
  position: relative;
  padding: 14px 16px 8px;
}
.gn-app-shell .gn-multiclass-fit-chart {
  position: relative;
  min-height: 320px;
  border-radius: 8px;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   5. Multi-class Training Results
   -------------------------------------------------------------------------- */
.gn-app-shell .gn-multiclass-training-card { padding: 18px; }
.gn-app-shell .gn-multiclass-training-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.gn-app-shell .gn-multiclass-training-card__eyebrow {
  margin-bottom: 4px;
  color: #7086a1;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gn-app-shell .gn-multiclass-training-card h3 { margin: 0 0 5px; color: #10213b; font-size: 18px !important; }
.gn-app-shell .gn-multiclass-training-card p { margin: 0; color: #657a94; font-size: 13px; }
.gn-app-shell .gn-multiclass-training-card__selected {
  min-width: 190px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f3f7fd;
  text-align: right;
}
.gn-app-shell .gn-multiclass-training-card__selected span {
  display: block;
  color: #71869f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.gn-app-shell .gn-multiclass-training-card__selected strong { display: block; margin-top: 3px; color: #154c96; font-size: 14px; }
.gn-app-shell .gn-multiclass-training-table { margin-bottom: 0; }
.gn-app-shell .gn-multiclass-training-table thead th {
  border-top: 0;
  border-bottom: 1px solid #dfe7f1;
  color: #61758e;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.gn-app-shell .gn-multiclass-training-table tbody td {
  border-top: 1px solid #edf1f5;
  color: #405873;
  font-size: 12.5px;
  vertical-align: middle;
}
.gn-app-shell .gn-multiclass-training-table__selected { background: #f3f7fd !important; box-shadow: inset 3px 0 0 #195cff; }
.gn-app-shell .gn-multiclass-hyperparams-card { margin-top: 2px; padding: 16px 18px; }
.gn-app-shell .gn-multiclass-hyperparams-card .CodeMirror { border: 1px solid #e0e7f0; border-radius: 8px; }

/* --------------------------------------------------------------------------
   6. Regression follow-up fixes from visual QA
   -------------------------------------------------------------------------- */
/* CanvasJS tooltips must position within the chart instead of appearing detached. */
.gn-app-shell .gn-regression-fit-chart,
.gn-app-shell .gn-regression-fit-chart .canvasjs-chart-container {
  position: relative !important;
  overflow: visible !important;
}
.gn-app-shell .gn-regression-fit-chart .canvasjs-chart-tooltip {
  z-index: 50 !important;
  pointer-events: none !important;
  border-radius: 6px !important;
  box-shadow: 0 7px 22px rgba(15, 34, 64, .13) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .gn-app-shell .gn-multiclass-accuracy-panels { grid-template-columns: 1fr; }
  .gn-app-shell .gn-multiclass-training-card__header { flex-direction: column; }
  .gn-app-shell .gn-multiclass-training-card__selected { min-width: 0; width: 100%; text-align: left; }
}