/*
 * Graphite Note Variation B - brand surface pass
 *
 * Website-aligned workspace texture and interaction polish for Home, Dataset,
 * Model and Notebook surfaces. Loaded after graphite-b-final.css.
 * Visual-only: no routing, permissions, API, model or data behavior changes.
 */

:root {
  --gns-navy: #001129;
  --gns-navy-2: #092341;
  --gns-blue: #195cff;
  --gns-cyan: #46d7ff;
  --gns-green: #35d49a;
  --gns-ink: #07162c;
  --gns-muted: #627087;
  --gns-paper: #f8fafc;
  --gns-line: #dbe3ef;
  --gns-line-soft: #e9eef5;
}

/* --------------------------------------------------------------------------
   Website-derived analytical canvas
   The website uses a 58px technical grid with a very low effective opacity.
   Keep it behind the workspace only; cards, tables and editors remain clean.
   -------------------------------------------------------------------------- */

.gn-app-main,
.gn-app-content,
.gn-page-content {
  background-color: var(--gns-paper) !important;
}

.gn-app-main {
  background-image:
    radial-gradient(circle at 88% 2%, rgba(70, 215, 255, .065), transparent 28%),
    radial-gradient(circle at 64% 0%, rgba(25, 92, 255, .035), transparent 24%),
    linear-gradient(rgba(12, 70, 155, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 70, 155, .024) 1px, transparent 1px) !important;
  background-size: auto, auto, 58px 58px, 58px 58px !important;
  background-position: top right, top center, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat !important;
}

/* Keep operational surfaces opaque so the grid reads as a workspace texture,
   never as noise through forms, tables or charts. */
.gn-app-shell .gn-section-card, .gn-app-shell .gn-card, .gn-app-shell .gn-panel, .gn-app-shell .card, .gn-app-shell .modelScenario.wrapper, .gn-app-shell .accountsPage.wrapper, .gn-app-shell .gn-chart-card, .gn-app-shell .gn-predict-panel, .gn-app-shell .gn-api-panel, .gn-app-shell .dx-pivotgrid, .gn-app-shell .custom_dx_tile_summary, .gn-app-shell .q-notebook-wrapper, .gn-app-shell q-notebook, .gn-app-shell .notebook-wrapper, .gn-app-shell .notebook-container{
  background-color: #fff !important;
}

/* --------------------------------------------------------------------------
   Website-like hierarchy: quiet eyebrow, strong title, restrained copy
   -------------------------------------------------------------------------- */

.gn-app-shell .gn-page-eyebrow,
.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 {
  color: #526886 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
}

.gn-app-shell h1,
.gn-app-shell .gn-page-title,
.gn-app-shell .gn-entity-title,
.gn-app-shell .gnb-welcome-title {
  color: var(--gns-ink) !important;
  letter-spacing: -.035em !important;
}

/* --------------------------------------------------------------------------
   Primary tabs: website navigation language, not pill-heavy SaaS chrome
   -------------------------------------------------------------------------- */

.gn-app-shell .top-tabs,
.gn-app-shell .nav-tabs {
  border-bottom-color: var(--gns-line) !important;
}

.gn-app-shell .top-tabs a,
.gn-app-shell .nav-tabs .nav-link,
.gn-app-shell .nav-link-edit-scenario {
  position: relative;
  min-height: 38px;
  padding-left: 11px !important;
  padding-right: 11px !important;
  color: #465972 !important;
  border-color: transparent !important;
  border-radius: 6px 6px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .16s ease, background-color .16s ease;
}

.gn-app-shell .top-tabs a:hover,
.gn-app-shell .nav-tabs .nav-link:hover,
.gn-app-shell .nav-link-edit-scenario:hover {
  color: var(--gns-ink) !important;
  background: rgba(255, 255, 255, .62) !important;
}

.gn-app-shell .top-tabs a.active,
.gn-app-shell .top-tabs .active > a,
.gn-app-shell .nav-tabs .nav-link.active,
.gn-app-shell .nav-link-edit-scenario.active,
.gn-app-shell .nav-link-edit-scenario.active-scenario {
  color: var(--gns-blue) !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: inset 0 -2px 0 var(--gns-blue) !important;
}

/* Secondary result/profile tabs mirror the website's compact selected tabs. */
.gn-app-shell .pill-tabs,
.gn-app-shell .performance-subtabs,
.gn-app-shell .model-performance-tabs {
  gap: 6px !important;
}

.gn-app-shell .pill-tabs button,
.gn-app-shell .performance-subtabs .btn,
.gn-app-shell .model-performance-tabs .btn,
.gn-app-shell .dx-tabs .dx-tab {
  min-height: 31px;
  border: 1px solid var(--gns-line) !important;
  border-radius: 7px !important;
  color: #52647c !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: none !important;
}

.gn-app-shell .pill-tabs button.active,
.gn-app-shell .pill-tabs button.selected,
.gn-app-shell .performance-subtabs .btn.active,
.gn-app-shell .model-performance-tabs .btn.active,
.gn-app-shell .dx-tabs .dx-tab-selected {
  color: #fff !important;
  border-color: #173b64 !important;
  background: linear-gradient(145deg, var(--gns-navy-2), var(--gns-navy)) !important;
  box-shadow: 0 5px 14px rgba(0, 17, 41, .10) !important;
}

/* --------------------------------------------------------------------------
   Home: turn Graphite AI into the product's single website-style dark callout
   -------------------------------------------------------------------------- */

.gnb-ai-assistant {
  position: relative;
  overflow: hidden;
  border-color: #244766 !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 84% 18%, rgba(70, 215, 255, .16), transparent 30%),
    linear-gradient(145deg, rgba(13, 39, 70, .98), rgba(0, 17, 41, .99)) !important;
  box-shadow: 0 12px 30px rgba(0, 17, 41, .08) !important;
}

.gnb-ai-assistant::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(70, 215, 255, .15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 215, 255, .15) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(90deg, transparent 20%, black 100%);
}

.gnb-ai-assistant > * {
  position: relative;
  z-index: 1;
}

.gnb-ai-assistant__identity strong,
.gnb-ai-assistant__identity span:not(.gn-ai-card__icon) {
  color: #fff !important;
}

.gnb-ai-assistant__identity span:not(.gn-ai-card__icon) {
  color: #aebed2 !important;
}

.gnb-ai-assistant .gn-ai-card__icon {
  color: var(--gns-cyan) !important;
  border-color: rgba(70, 215, 255, .22) !important;
  background: rgba(70, 215, 255, .10) !important;
}

.gnb-ai-assistant .gn-ai-prompt {
  border-color: rgba(207, 224, 255, .80) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
}

.gnb-ai-assistant .gn-ai-prompt button {
  border-color: var(--gns-cyan) !important;
  background: linear-gradient(90deg, var(--gns-blue), #087cf0) !important;
}

/* Dashboard/stat cards: slight website-style top accent with no extra visual
   weight. This gives Home a brand signature without adding more boxes. */
.gnb-stat-grid .gn-stat-card {
  position: relative;
  overflow: hidden;
}

.gnb-stat-grid .gn-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: .58;
  background: linear-gradient(90deg, var(--gns-blue), var(--gns-cyan), transparent 78%);
}

/* --------------------------------------------------------------------------
   Dataset / Model / Notebook list pages: dense rows with website card behavior
   -------------------------------------------------------------------------- */

.gnb-data-list,
.gnb-data-list__body,
.gn-recent-list {
  background: #fff !important;
}

.gnb-data-list__row {
  position: relative;
  transition: background-color .14s ease, box-shadow .14s ease;
}

.gnb-data-list__row:hover {
  background: linear-gradient(90deg, #f7fbff 0%, #fff 66%) !important;
  box-shadow: inset 2px 0 0 var(--gns-blue) !important;
}

.gnb-data-list__row.selected,
.gnb-data-list__row.is-selected {
  background: linear-gradient(90deg, #eef6ff 0%, #fff 72%) !important;
  box-shadow: inset 3px 0 0 var(--gns-blue) !important;
}

/* Legacy card/grid views used in selectors and notebook dialogs inherit the
   same blue/cyan top-edge language as the website's model cards. */
.gn-app-shell .custom_dx_tile,
.gn-app-shell .tileViewItem,
.gn-app-shell .model-card,
.gn-app-shell .dataset-card,
.gn-app-shell .notebook-card {
  position: relative;
  overflow: hidden;
}

.gn-app-shell .custom_dx_tile::before,
.gn-app-shell .tileViewItem::before,
.gn-app-shell .model-card::before,
.gn-app-shell .dataset-card::before,
.gn-app-shell .notebook-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, var(--gns-blue), var(--gns-cyan));
  transition: opacity .16s ease;
}

.gn-app-shell .custom_dx_tile:hover::before,
.gn-app-shell .tileViewItem:hover::before,
.gn-app-shell .model-card:hover::before,
.gn-app-shell .dataset-card:hover::before,
.gn-app-shell .notebook-card:hover::before {
  opacity: .72;
}

/* --------------------------------------------------------------------------
   Dataset detail: profile cards and data views stay crisp over the grid
   -------------------------------------------------------------------------- */

.gn-app-shell .custom_dx_tile_summary {
  border-color: #d8e2ee !important;
  box-shadow: 0 8px 22px rgba(0, 17, 41, .035) !important;
}

.gn-app-shell .custom_dx_tile_summary:hover {
  border-color: #bfd2e9 !important;
}





/* --------------------------------------------------------------------------
   Models: website-like analytical cards and AI/insight signals
   -------------------------------------------------------------------------- */

.gn-app-shell .gn-model-metric,
.gn-app-shell .gn-chart-card {
  border-color: #d7e2ee !important;
}

.gn-app-shell .gn-model-metric {
  position: relative;
  overflow: hidden;
}

.gn-app-shell .gn-model-metric::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  opacity: .45;
  background: linear-gradient(90deg, var(--gns-blue), var(--gns-cyan), transparent 82%);
}

.gn-app-shell .gn-ai-badge {
  color: #dffaff !important;
  border: 1px solid rgba(70, 215, 255, .28) !important;
  background: linear-gradient(145deg, #0c2b50, var(--gns-navy)) !important;
  box-shadow: 0 7px 20px rgba(0, 17, 41, .10) !important;
}

.gn-app-shell .actionable-insights-content {
  border-left: 2px solid rgba(70, 215, 255, .68);
  padding-left: 14px;
}

/* --------------------------------------------------------------------------
   Notebook workspace: white storytelling canvas with subtle branded rows
   -------------------------------------------------------------------------- */

.gn-app-shell q-notebook,
.gn-app-shell .qNotebook,
.gn-app-shell .notebook-wrapper,
.gn-app-shell .notebook-container {
  border-radius: 9px;
}

.gn-app-shell .showRowBorder,
.gn-app-shell .notebook-row,
.gn-app-shell .notebookRow {
  border-color: var(--gns-line-soft) !important;
  background: rgba(255, 255, 255, .97) !important;
}

.gn-app-shell .showRowOptions:hover,
.gn-app-shell .notebook-row:hover,
.gn-app-shell .notebookRow:hover {
  border-color: #c8d9ed !important;
  box-shadow: inset 2px 0 0 rgba(25, 92, 255, .72) !important;
}

/* --------------------------------------------------------------------------
   Buttons and focus: reserve cyan for signal, blue for action
   -------------------------------------------------------------------------- */

.gn-app-shell .btn-primary,
.gn-app-shell .btn_main,
.gn-app-shell .gn-primary-action,
.gn-app-shell .dx-button-mode-contained.dx-button-default {
  border-color: var(--gns-blue) !important;
  background: linear-gradient(180deg, #2365ff, #195cff) !important;
  box-shadow: 0 5px 14px rgba(25, 92, 255, .14) !important;
}

.gn-app-shell .btn-primary:hover,
.gn-app-shell .btn_main:hover,
.gn-app-shell .gn-primary-action:hover,
.gn-app-shell .dx-button-mode-contained.dx-button-default:hover {
  background: linear-gradient(180deg, #1658ec, #0f4dde) !important;
}

.gn-app-shell a:focus-visible,
.gn-app-shell button:focus-visible,
.gn-app-shell input:focus-visible,
.gn-app-shell textarea:focus-visible,
.gn-app-shell select:focus-visible {
  outline: 2px solid rgba(70, 215, 255, .92) !important;
  outline-offset: 2px !important;
}

/* Keep small screens calm: texture remains, glow is reduced. */
@media (max-width: 991.98px) {
  .gn-app-main {
    background-image:
      linear-gradient(rgba(12, 70, 155, .018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(12, 70, 155, .018) 1px, transparent 1px) !important;
    background-size: 58px 58px, 58px 58px !important;
  }

  .gnb-ai-assistant::before {
    display: none;
  }
}