/*
 * Graphite Note Variation B — Version 1 + Version 2 hybrid pass
 * Website DNA + Decision Intelligence product surfaces.
 * Loaded last. Visual-only: no API, routing, model, dataset or permission logic.
 */

:root {
  --gn12-navy: #001129;
  --gn12-navy-2: #071b38;
  --gn12-blue: #195cff;
  --gn12-cyan: #46d7ff;
  --gn12-green: #35d49a;
  --gn12-violet: #876dff;
  --gn12-ink: #07162c;
  --gn12-muted: #627087;
  --gn12-line: #dbe3ef;
  --gn12-line-strong: #c9d7e8;
  --gn12-paper: #f7f9fc;
  --gn12-soft-blue: #eef4fb;
  --gn12-white: #fff;
  --gn12-danger: #d92d3d;
  --gn12-shadow-soft: 0 8px 24px rgba(15, 49, 91, .045);
  --gn12-shadow-hover: 0 18px 44px rgba(15, 49, 91, .10), 0 4px 14px rgba(25, 92, 255, .05);
}

/* --------------------------------------------------------------------------
   1. Website hierarchy in the product shell
   -------------------------------------------------------------------------- */

.gn-app-shell {
  color: var(--gn12-ink);
}

.gn-app-shell h1,
.gn-app-shell .gn-page-title,
.gn-app-shell .gn-entity-title,
.gn-app-shell .gnb-welcome-title {
  color: var(--gn12-ink) !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
}

.gn-app-shell h2,
.gn-app-shell .gn-section-title,
.gn-app-shell .accountsPageH3,
.gn-app-shell .modelScenarioH2 {
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
}

.gn-app-shell .entity-type,
.gn-app-shell .page-label,
.gn-app-shell .model-label,
.gn-app-shell .dataset-label,
.gn-app-shell .notebook-label,
.gn-app-shell .gn-page-eyebrow,
.gn-app-shell .gn-welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #526886 !important;
  font-size: 14px !important;
  line-height: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

.gn-app-shell .entity-type::before,
.gn-app-shell .page-label::before,
.gn-app-shell .model-label::before,
.gn-app-shell .dataset-label::before,
.gn-app-shell .notebook-label::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gn12-blue), var(--gn12-cyan));
}

.gn-app-shell .gn-section-subtitle,
.gn-app-shell .small,
.gn-app-shell .help,
.gn-app-shell .text-muted {
  color: var(--gn12-muted) !important;
}

/* Website-like separators: quiet lines, less card-inside-card feeling. */
.gn-app-shell .top-tabs,
.gn-app-shell .nav-tabs,
.gn-app-shell .gn-list-toolbar,
.gn-app-shell .gnb-data-list__header {
  border-color: var(--gn12-line) !important;
}

.gn-app-shell .top-tabs,
.gn-app-shell .nav-tabs {
  margin-bottom: 8px !important;
}

/* --------------------------------------------------------------------------
   2. Calm operational surfaces — fewer, stronger containers
   -------------------------------------------------------------------------- */

.gn-app-shell .accountsPage.wrapper,
.gn-app-shell .modelScenario.wrapper,
.gn-app-shell .gn-section-card,
.gn-app-shell .gn-panel,
.gn-app-shell .gn-card,
.gn-app-shell .gn-predict-panel,
.gn-app-shell .gn-api-panel {
  border-color: var(--gn12-line) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: none !important;
}

.gn-app-shell .accountsPage.wrapper,
.gn-app-shell .gn-section-card {
  position: relative;
  overflow: hidden;
}

.gn-app-shell .accountsPage.wrapper > h2,
.gn-app-shell .accountsPage.wrapper > h3,
.gn-app-shell .accountsPage.wrapper .accountsPageH3 {
  color: var(--gn12-ink) !important;
}

/* Very subtle website card accent; not every card needs a shadow. */
.gn-app-shell .accountsPage.wrapper::before,
.gn-app-shell .gn-section-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(25,92,255,.36), rgba(70,215,255,.26), transparent 68%);
}

/* Settings forms feel like enterprise work surfaces, not floating SaaS cards. */
.gn-app-shell .accountsPage.wrapper input, .gn-app-shell .accountsPage.wrapper textarea{
  border-color: #cbd8e7 !important;
}

.gn-app-shell .accountsPage.wrapper input:focus, .gn-app-shell .accountsPage.wrapper textarea:focus{
  border-color: #8fb5f4 !important;
  box-shadow: 0 0 0 3px rgba(25,92,255,.08) !important;
}

/* --------------------------------------------------------------------------
   3. Interactive cards borrow the website's premium hover language
   -------------------------------------------------------------------------- */

.gn-app-shell .gn-stat-card--interactive,
.gn-app-shell .gn-picker-card,
.gn-app-shell .custom_dx_tile.pointer,
.gn-app-shell .tileViewItem.pointer,
.gn-app-shell .notebook-card,
.gn-app-shell .dataset-card,
.gn-app-shell .model-card {
  border-color: var(--gn12-line) !important;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.gn-app-shell .gn-stat-card--interactive:hover,
.gn-app-shell .gn-picker-card:hover,
.gn-app-shell .custom_dx_tile.pointer:hover,
.gn-app-shell .tileViewItem.pointer:hover,
.gn-app-shell .notebook-card:hover,
.gn-app-shell .dataset-card:hover,
.gn-app-shell .model-card:hover {
  transform: translateY(-3px) !important;
  border-color: #b5c8e4 !important;
  box-shadow: var(--gn12-shadow-hover) !important;
}

.gn-app-shell .gn-picker-card::after,
.gn-app-shell .gn-stat-card--interactive::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: -98px;
  right: -98px;
  border-radius: 50%;
  background: var(--gn12-cyan);
  opacity: .055;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.gn-app-shell .gn-picker-card:hover::after,
.gn-app-shell .gn-stat-card--interactive:hover::after {
  opacity: .10;
  transform: scale(1.12);
}

/* Home assistant: keep it operational but explicitly connect it to Report/Predict/Decide. */
.gn-app-shell .gnb-ai-assistant__identity::after {
  content: "REPORT  ·  PREDICT  ·  DECIDE";
  display: block;
  margin-top: 5px;
  color: #72ddff;
  font-size: 14px;
  line-height: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.gn-app-shell .gnb-ai-assistant {
  border-color: #294a6b !important;
  box-shadow: 0 12px 30px rgba(0,17,41,.10) !important;
}

.gn-app-shell .gnb-ai-assistant:hover {
  border-color: #3a628b !important;
}

/* --------------------------------------------------------------------------
   4. Selective Decision Intelligence surfaces
   AI / generated interpretation is visually distinct from normal operations.
   -------------------------------------------------------------------------- */

.gn-app-shell .actionable-insights-bgr,
.gn-app-shell .gn-decision-surface {
  position: relative;
  overflow: hidden;
  padding: 22px 24px !important;
  border: 1px solid #284968 !important;
  border-radius: 14px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 84% 4%, rgba(24,71,130,.78), transparent 34%),
    linear-gradient(145deg, #071b38 0%, #001129 72%) !important;
  box-shadow: 0 16px 38px rgba(0,17,41,.11) !important;
}

.gn-app-shell .actionable-insights-bgr::after,
.gn-app-shell .gn-decision-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  background-image:
    linear-gradient(rgba(70,215,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,215,255,.16) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent 12%, black 100%);
}

.gn-app-shell .actionable-insights-bgr > *,
.gn-app-shell .gn-decision-surface > * {
  position: relative;
  z-index: 1;
}

.gn-app-shell .gn-decision-surface::before {
  content: "GRAPHITE NOTE AI · MODEL OVERVIEW";
  display: block;
  margin-bottom: 13px;
  color: var(--gn12-cyan);
  font-size: 14px;
  line-height: 14px;
  font-weight: 800;
  letter-spacing: .12em;
}

.gn-app-shell .actionable-insights-bgr h1,
.gn-app-shell .actionable-insights-bgr h2,
.gn-app-shell .actionable-insights-bgr h3,
.gn-app-shell .actionable-insights-bgr h4,
.gn-app-shell .actionable-insights-bgr h5,
.gn-app-shell .actionable-insights-bgr h6,
.gn-app-shell .gn-decision-surface h1,
.gn-app-shell .gn-decision-surface h2,
.gn-app-shell .gn-decision-surface h3,
.gn-app-shell .gn-decision-surface h4,
.gn-app-shell .gn-decision-surface h5,
.gn-app-shell .gn-decision-surface h6,
.gn-app-shell .actionable-insights-bgr strong,
.gn-app-shell .gn-decision-surface strong {
  color: #fff !important;
}

.gn-app-shell .actionable-insights-bgr p,
.gn-app-shell .actionable-insights-bgr li,
.gn-app-shell .actionable-insights-bgr span,
.gn-app-shell .actionable-insights-content,
.gn-app-shell .actionable-insights-content p,
.gn-app-shell .actionable-insights-content li,
.gn-app-shell .gn-decision-surface p,
.gn-app-shell .gn-decision-surface li,
.gn-app-shell .gn-decision-surface span,
.gn-app-shell .gn-decision-surface .normal {
  color: #c5d4e5 !important;
}

.gn-app-shell .actionable-insights-bgr a,
.gn-app-shell .gn-decision-surface a {
  color: var(--gn12-cyan) !important;
  font-weight: 700 !important;
}

.gn-app-shell .actionable-insights-bgr mark,
.gn-app-shell .actionable-insights-bgr .blueShaded,
.gn-app-shell .gn-decision-surface mark,
.gn-app-shell .gn-decision-surface .blueShaded {
  color: #eafcff !important;
  background: rgba(70,215,255,.12) !important;
  border-radius: 3px;
  padding: 1px 4px;
}

.gn-app-shell .actionable-insights-bgr .gn-ai-badge,
.gn-app-shell .gn-decision-surface .gn-ai-badge {
  color: #dffaff !important;
  border-color: rgba(70,215,255,.30) !important;
  background: rgba(70,215,255,.08) !important;
  box-shadow: none !important;
}

.gn-app-shell .actionable-insights-bgr .actionable-insights-content,
.gn-app-shell .gn-decision-surface .actionable-insights-content {
  border-left-color: var(--gn12-cyan) !important;
}

/* --------------------------------------------------------------------------
   5. Model performance becomes a disciplined analytical workspace
   -------------------------------------------------------------------------- */

.gn-app-shell binary-overview,
.gn-app-shell multiclass-overview,
.gn-app-shell regression-overview,
.gn-app-shell bayesian-overview,
.gn-app-shell feature-importance,
.gn-app-shell feature-importance2,
.gn-app-shell feature-importance-regression,
.gn-app-shell feature-impact,
.gn-app-shell feature-impact-regression,
.gn-app-shell fit,
.gn-app-shell fit2,
.gn-app-shell fit-regression,
.gn-app-shell confusion-matrix,
.gn-app-shell confusion-matrix2,
.gn-app-shell model-metrics,
.gn-app-shell model-metrics2,
.gn-app-shell model-metrics-regression {
  display: block;
  min-width: 0;
}

/* Overview KPI strips: same website metric language across supervised models. */
.gn-app-shell binary-overview > .ml-2 > .col-12.row,
.gn-app-shell multiclass-overview > .ml-2 > .col-12.row,
.gn-app-shell regression-overview > .ml-2 > .ml-2.mt-2 > .col-12.row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 !important;
  padding: 0 14px !important;
}

.gn-app-shell binary-overview > .ml-2 > .col-12.row > .col-2.border,
.gn-app-shell multiclass-overview > .ml-2 > .col-12.row > .col-2.border,
.gn-app-shell regression-overview > .ml-2 > .ml-2.mt-2 > .col-12.row > .col-2.border {
  position: relative;
  width: auto !important;
  max-width: none !important;
  min-height: 74px;
  margin: 0 !important;
  padding: 11px 13px !important;
  overflow: hidden;
  border: 1px solid var(--gn12-line) !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(0,17,41,.025) !important;
}

.gn-app-shell binary-overview > .ml-2 > .col-12.row > .col-2.border::before,
.gn-app-shell multiclass-overview > .ml-2 > .col-12.row > .col-2.border::before,
.gn-app-shell regression-overview > .ml-2 > .ml-2.mt-2 > .col-12.row > .col-2.border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gn12-blue), var(--gn12-cyan));
  opacity: .66;
}

.gn-app-shell binary-overview .col-2.border .small,
.gn-app-shell multiclass-overview .col-2.border .small,
.gn-app-shell regression-overview .col-2.border .small {
  color: #63758b !important;
  font-size: 14px !important;
  line-height: 14px !important;
  font-weight: 700 !important;
}

.gn-app-shell binary-overview .col-2.border h5,
.gn-app-shell multiclass-overview .col-2.border h5,
.gn-app-shell regression-overview .col-2.border h5 {
  margin: 4px 0 0 !important;
  color: var(--gn12-ink) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 17px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
}

/* Key Drivers / Impact / Fit / metrics sit on a clean white analytical surface. */
.gn-app-shell feature-importance,
.gn-app-shell feature-importance2,
.gn-app-shell feature-importance-regression,
.gn-app-shell feature-impact,
.gn-app-shell feature-impact-regression,
.gn-app-shell fit,
.gn-app-shell fit2,
.gn-app-shell fit-regression,
.gn-app-shell confusion-matrix,
.gn-app-shell confusion-matrix2,
.gn-app-shell model-metrics,
.gn-app-shell model-metrics2,
.gn-app-shell model-metrics-regression {
  margin-top: 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--gn12-line);
  border-radius: 12px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 6px 20px rgba(15,49,91,.035);
}

.gn-app-shell feature-importance .border-left,
.gn-app-shell feature-importance2 .border-left,
.gn-app-shell feature-importance-regression .border-left {
  border-left-color: var(--gn12-line) !important;
}

.gn-app-shell feature-importance .table,
.gn-app-shell feature-importance2 .table,
.gn-app-shell feature-importance-regression .table {
  margin-bottom: 0;
}

/* Analytical explainer notes use a white report surface, matching the website's study content. */
.gn-app-shell q-notifications .q-notifications,
.gn-app-shell .q-notifications,
.gn-app-shell .gn-model-note,
.gn-app-shell .gn-chart-note {
  border-color: var(--gn12-line) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   6. Dataset summary / notebook tiles use the same card grammar
   -------------------------------------------------------------------------- */

.gn-app-shell .custom_dx_tile_summary,
.gn-app-shell .notebook-row,
.gn-app-shell .notebookRow,
.gn-app-shell .showRowBorder {
  position: relative;
  overflow: hidden;
  border-color: var(--gn12-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.gn-app-shell .custom_dx_tile_summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gn12-blue), var(--gn12-cyan));
  opacity: .44;
}

.gn-app-shell .custom_dx_tile_summary:hover,
.gn-app-shell .notebook-row:hover,
.gn-app-shell .notebookRow:hover,
.gn-app-shell .showRowBorder:hover {
  border-color: #b9cce5 !important;
  box-shadow: 0 12px 28px rgba(15,49,91,.07) !important;
}

/* List pages: first column carries hierarchy, utility metadata recedes. */
.gn-app-shell .gnb-data-list__name strong {
  color: var(--gn12-ink) !important;
  font-weight: 700 !important;
}

.gn-app-shell .gnb-data-list__name small,
.gn-app-shell .gnb-data-list__type,
.gn-app-shell .gnb-data-list__updated {
  color: #6f7f93 !important;
}

.gn-app-shell .tileViewNoTag {
  opacity: .72;
}

/* --------------------------------------------------------------------------
   7. Responsive enterprise behavior
   -------------------------------------------------------------------------- */

@media (max-width: 1440px) {
  .gn-app-shell binary-overview > .ml-2 > .col-12.row,
  .gn-app-shell multiclass-overview > .ml-2 > .col-12.row,
  .gn-app-shell regression-overview > .ml-2 > .ml-2.mt-2 > .col-12.row {
    grid-template-columns: repeat(5, minmax(138px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px !important;
  }

  .gn-app-shell .actionable-insights-bgr,
  .gn-app-shell .gn-decision-surface {
    padding: 20px !important;
  }
}

@media (max-width: 1199.98px) {
  .gn-app-shell binary-overview > .ml-2 > .col-12.row,
  .gn-app-shell multiclass-overview > .ml-2 > .col-12.row,
  .gn-app-shell regression-overview > .ml-2 > .ml-2.mt-2 > .col-12.row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
}

@media (max-width: 767.98px) {
  .gn-app-shell binary-overview > .ml-2 > .col-12.row,
  .gn-app-shell multiclass-overview > .ml-2 > .col-12.row,
  .gn-app-shell regression-overview > .ml-2 > .ml-2.mt-2 > .col-12.row {
    grid-template-columns: 1fr;
  }

  .gn-app-shell .actionable-insights-bgr,
  .gn-app-shell .gn-decision-surface,
  .gn-app-shell feature-importance,
  .gn-app-shell feature-importance2,
  .gn-app-shell feature-importance-regression,
  .gn-app-shell feature-impact,
  .gn-app-shell feature-impact-regression,
  .gn-app-shell fit,
  .gn-app-shell fit2,
  .gn-app-shell fit-regression,
  .gn-app-shell confusion-matrix,
  .gn-app-shell confusion-matrix2,
  .gn-app-shell model-metrics,
  .gn-app-shell model-metrics2,
  .gn-app-shell model-metrics-regression {
    padding: 14px !important;
    border-radius: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gn-app-shell .gn-stat-card--interactive,
  .gn-app-shell .gn-picker-card,
  .gn-app-shell .custom_dx_tile.pointer,
  .gn-app-shell .tileViewItem.pointer,
  .gn-app-shell .notebook-card,
  .gn-app-shell .dataset-card,
  .gn-app-shell .model-card {
    transition: none !important;
  }

  .gn-app-shell .gn-stat-card--interactive:hover,
  .gn-app-shell .gn-picker-card:hover,
  .gn-app-shell .custom_dx_tile.pointer:hover,
  .gn-app-shell .tileViewItem.pointer:hover,
  .gn-app-shell .notebook-card:hover,
  .gn-app-shell .dataset-card:hover,
  .gn-app-shell .model-card:hover {
    transform: none !important;
  }
}