/*
 * Graphite Note - Enterprise Decision Intelligence design-system pass
 *
 * Final visual contract loaded after every existing Graphite stylesheet.
 * Visual-only: no routing, controllers, API, permissions, model or data logic.
 *
 * Goals:
 * - one font everywhere: Inter
 * - compact, predictable typography and spacing
 * - consistent cards, borders, radii, buttons, tabs, forms and tables
 * - restrained shadows and blue usage
 * - analytical-console density at laptop and desktop widths
 * - compact navigation that stays in document flow and never covers content
 */

:root {
  /* Force legacy Graphite variables onto one type family. */
  --primary_font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --menu_font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gn-display-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gnu-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gnu-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gne-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gne-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Typography ladder. */
  --gne-fs-meta: 10.5px;
  --gne-fs-label: 11px;
  --gne-fs-small: 12px;
  --gne-fs-body: 13px;
  --gne-fs-body-lg: 14px;
  --gne-fs-card-title: 15px;
  --gne-fs-section-title: 17px;
  --gne-fs-page-title: 22px;
  --gne-fs-kpi: 18px;

  /* Operational surfaces. */
  --gne-canvas: #f7f9fc;
  --gne-surface: #ffffff;
  --gne-surface-subtle: #f8fafc;
  --gne-text: #07162c;
  --gne-text-2: #334155;
  --gne-muted: #64748b;
  --gne-muted-2: #8a98aa;
  --gne-line: #dbe3ef;
  --gne-line-soft: #e8edf4;
  --gne-line-strong: #c5d0df;
  --gne-blue: #195cff;
  --gne-blue-hover: #0f4dde;
  --gne-blue-soft: #eef4ff;
  --gne-danger: #d92d3d;
  --gne-danger-hover: #b92333;
  --gne-danger-soft: #fff4f5;
  --gne-success: #14804a;
  --gne-success-soft: #edf9f2;
  --gne-warning: #946200;
  --gne-warning-soft: #fff8e6;

  /* Geometry and rhythm. */
  --gne-radius-sm: 4px;
  --gne-radius: 6px;
  --gne-radius-lg: 8px;
  --gne-control-h: 34px;
  --gne-control-h-compact: 28px;
  --gne-space-1: 4px;
  --gne-space-2: 8px;
  --gne-space-3: 12px;
  --gne-space-4: 16px;
  --gne-space-5: 20px;
  --gne-space-6: 24px;

  /* Shadows are for floating surfaces only. */
  --gne-shadow-float: 0 12px 30px rgba(7, 22, 44, .12);
  --gne-focus: 0 0 0 3px rgba(25, 92, 255, .16);
}

/* --------------------------------------------------------------------------
   One font contract, including portaled DevExtreme surfaces
   -------------------------------------------------------------------------- */

html, body, .gn-app-shell, .gn-sidebar, .dropdown-menu, .popover, .tooltip, .modal-content{
  font-family: var(--gne-font) !important;
}

body {
  color: var(--gne-text-2);
  font-size: var(--gne-fs-body);
  line-height: 1.45;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chart engines inherit the same visual language where CSS can reach them. */
.gn-app-shell svg text, .gn-app-shell .dxc-title text, .gn-app-shell .dxc-legend text, .gn-app-shell .dxc-axis text, .gn-app-shell .main-svg text{
  font-family: var(--gne-font) !important;
}

/* Do not overwrite icon-font glyphs. */
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-icons-two-tone,
/* Material icon classes declare their own font in material-icons.css and must
   remain later in specificity than normal text. */
.material-icons { font-family: "Material Icons" !important; }
.material-icons-outlined { font-family: "Material Icons Outlined" !important; }
.material-icons-round { font-family: "Material Icons Round" !important; }
.material-icons-sharp { font-family: "Material Icons Sharp" !important; }
.material-icons-two-tone { font-family: "Material Icons Two Tone" !important; }

/* --------------------------------------------------------------------------
   Typography hierarchy
   -------------------------------------------------------------------------- */

.gn-app-shell {
  font-size: var(--gne-fs-body) !important;
  line-height: 1.45 !important;
  color: var(--gne-text-2) !important;
}

.gn-app-shell h1,
.gn-app-shell .gn-page-title,
.gn-app-shell .gn-entity-title,
.gn-app-shell .gn-entity-header__title,
.gn-app-shell .gn-list-title,
.gn-app-shell .gnb-welcome-title,
.gn-app-shell .title_30 {
  margin-top: 0;
  color: var(--gne-text) !important;
  font-family: var(--gne-font) !important;
  font-size: var(--gne-fs-page-title) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
}

.gn-app-shell h2,
.gn-app-shell .title_20,
.gn-app-shell .modelScenarioH2,
.gn-app-shell .selectDatasetTitle,
.gn-app-shell .gn-api-panel__header h2,
.gn-app-shell .accountsPageH2 {
  color: var(--gne-text) !important;
  font-family: var(--gne-font) !important;
  font-size: var(--gne-fs-section-title) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}

.gn-app-shell h3,
.gn-app-shell .card-title,
.gn-app-shell .panel-title,
.gn-app-shell legend,
.gn-app-shell .modelScenarioH3,
.gn-app-shell .gn-chart-card__title,
.gn-app-shell .gn-assistant-empty h3,
.gn-app-shell .accountsPageH3 {
  color: var(--gne-text) !important;
  font-family: var(--gne-font) !important;
  font-size: var(--gne-fs-card-title) !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
}

.gn-app-shell h4 { font-size: var(--gne-fs-body-lg) !important; line-height: 1.4 !important; font-weight: 650 !important; }
.gn-app-shell h5 { font-size: var(--gne-fs-body) !important; line-height: 1.45 !important; font-weight: 650 !important; }
.gn-app-shell h6 { font-size: var(--gne-fs-small) !important; line-height: 1.45 !important; font-weight: 650 !important; }

.gn-app-shell p, .gn-app-shell li, .gn-app-shell td, .gn-app-shell dd, .gn-app-shell .normal{
  font-size: var(--gne-fs-body) !important;
  line-height: 1.45 !important;
}

.gn-app-shell small,
.gn-app-shell .small,
.gn-app-shell .text-sm,
.gn-app-shell .help,
.gn-app-shell .form-text,
.gn-app-shell .help-block {
  font-size: var(--gne-fs-small) !important;
  line-height: 1.45 !important;
}

.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,
.gn-app-shell .label_breadcrumb,
.gn-app-shell .extraSmall,
.gn-app-shell .text-xs,
.gn-app-shell .gn-assistant-eyebrow {
  font-size: var(--gne-fs-meta) !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
  letter-spacing: .06em !important;
}

.gn-app-shell label, .gn-app-shell .control-label, .gn-app-shell .accountsPage.label{
  color: var(--gne-text-2) !important;
  font-size: var(--gne-fs-small) !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

/* Numeric output remains prominent, but never billboard-sized. */
.gn-app-shell .kpiNumber,
.gn-app-shell .gn-model-metric__value,
.gn-app-shell .gn-stat-card__value,
.gn-app-shell .gn-prediction-value,
.gn-app-shell .tile-view-item-value {
  color: var(--gne-text) !important;
  font-family: var(--gne-font) !important;
  font-size: var(--gne-fs-kpi) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums;
}

/* IDs and technical identifiers read differently from prose. */
.gn-app-shell code,
.gn-app-shell pre,
.gn-app-shell .dataset-id,
.gn-app-shell .model-id,
.gn-app-shell .task-id,
.gn-app-shell .api-key,
.gn-app-shell .technical-id {
  font-family: var(--gne-mono) !important;
  font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   Canvas and density
   -------------------------------------------------------------------------- */

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

/* Preserve the Graphite analytical grid, but make it materially quieter. */
.gn-app-main {
  background-image:
    linear-gradient(rgba(12, 70, 155, .014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 70, 155, .014) 1px, transparent 1px) !important;
  background-size: 58px 58px, 58px 58px !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: repeat, repeat !important;
  padding: 20px 22px 44px !important;
}

.gn-app-container {
  width: 100% !important;
  max-width: 1680px !important;
  margin: 0 auto !important;
}

/* Section rhythm should be consistent, not route-specific. */
.gn-app-shell .gnb-welcome-header,
.gn-app-shell .gn-entity-header,
.gn-app-shell .gn-list-header,
.gn-app-shell .page-header,
.gn-app-shell .model-header,
.gn-app-shell .dataset-header {
  margin-bottom: var(--gne-space-4) !important;
}

/* --------------------------------------------------------------------------
   Operational surfaces: fewer rounded boxes, almost no card shadows
   -------------------------------------------------------------------------- */

.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 .custom_dx_tile_summary,
.gn-app-shell .q-notebook-wrapper,
.gn-app-shell .notebook-wrapper,
.gn-app-shell .notebook-container,
.gn-app-shell .gn-assistant-page {
  border: 1px solid var(--gne-line) !important;
  border-radius: var(--gne-radius) !important;
  background: var(--gne-surface) !important;
  box-shadow: none !important;
}

.gn-app-shell .gn-section-card,
.gn-app-shell .gn-card,
.gn-app-shell .gn-panel,
.gn-app-shell .card-body,
.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 {
  padding: var(--gne-space-4) !important;
}

/* Nested surfaces should not create card-inside-card visual noise. */
.gn-app-shell .gn-section-card .gn-card,
.gn-app-shell .gn-section-card .card,
.gn-app-shell .gn-panel .gn-card,
.gn-app-shell .gn-panel .card {
  border-color: var(--gne-line-soft) !important;
  border-radius: var(--gne-radius-sm) !important;
  box-shadow: none !important;
}

/* Floating UI is allowed to float. */
.dropdown-menu, .popover, .modal-content, .gn-sidebar .q-main-menu-dropdown-menu{
  border-color: var(--gne-line) !important;
  border-radius: var(--gne-radius-lg) !important;
  box-shadow: var(--gne-shadow-float) !important;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.gn-app-shell button, .gn-app-shell .btn, .gn-app-shell .btn_main, .gn-app-shell .gn-primary-action, .gn-app-shell .gn-secondary-action{
  min-height: var(--gne-control-h) !important;
  border-radius: var(--gne-radius) !important;
  font-family: var(--gne-font) !important;
  font-size: var(--gne-fs-small) !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}



.gn-app-shell .btn-sm, .gn-app-shell .btn-compact, .gn-app-shell .icon-button{
  min-height: var(--gne-control-h-compact) !important;
}

/* Primary: blue is reserved for the action that advances the workflow. */
.gn-app-shell .btn-primary, .gn-app-shell .btn_main, .gn-app-shell .gn-primary-action{
  border: 1px solid var(--gne-blue) !important;
  background: var(--gne-blue) !important;
  color: #fff !important;
}

.gn-app-shell .btn-primary, .gn-app-shell .btn_main, .gn-app-shell .gn-primary-action{
  color: #fff !important;
}

.gn-app-shell .btn-primary:hover, .gn-app-shell .btn_main:hover, .gn-app-shell .gn-primary-action:hover{
  border-color: var(--gne-blue-hover) !important;
  background: var(--gne-blue-hover) !important;
}

/* Secondary: visible, neutral and predictable. */
.gn-app-shell .btn-secondary, .gn-app-shell .gn-secondary-action{
  border: 1px solid var(--gne-line-strong) !important;
  background: #fff !important;
  color: var(--gne-text) !important;
}

.gn-app-shell .btn-secondary, .gn-app-shell .gn-secondary-action{
  color: var(--gne-text) !important;
}

.gn-app-shell .btn-secondary:hover, .gn-app-shell .gn-secondary-action:hover{
  border-color: #9db3d3 !important;
  background: #f7faff !important;
  color: var(--gne-blue) !important;
}

/* Destructive controls are always visually explicit. */
.gn-app-shell .btn-delete, .gn-app-shell .btn-danger{
  border: 1px solid var(--gne-danger) !important;
  background: var(--gne-danger) !important;
  color: #fff !important;
}



.gn-app-shell .btn-delete:hover, .gn-app-shell .btn-danger:hover{
  border-color: var(--gne-danger-hover) !important;
  background: var(--gne-danger-hover) !important;
}

.gn-app-shell button:disabled, .gn-app-shell .btn.disabled{
  opacity: .52 !important;
  box-shadow: none !important;
}

.gn-app-shell button:focus-visible, .gn-app-shell .btn:focus-visible, .gn-app-shell a:focus-visible{
  outline: 2px solid rgba(25, 92, 255, .72) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.gn-app-shell .form-control, .gn-app-shell input:not([type="checkbox"]):not([type="radio"]), .gn-app-shell select{
  min-height: var(--gne-control-h) !important;
  border-radius: var(--gne-radius) !important;
}

.gn-app-shell .form-control, .gn-app-shell input, .gn-app-shell select, .gn-app-shell textarea{
  font-family: var(--gne-font) !important;
  font-size: 14px !important;
  line-height: 18px !important;
}

.gn-app-shell .form-control{
  border-color: var(--gne-line-strong) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.gn-app-shell textarea.form-control, .gn-app-shell textarea{
  min-height: 82px;
  resize: vertical;
}

.gn-app-shell .form-group{
  margin-bottom: var(--gne-space-3);
}

.gn-app-shell .form-control:focus{
  border-color: #7ea4e8 !important;
  box-shadow: var(--gne-focus) !important;
  outline: none !important;
}

.gn-app-shell ::placeholder {
  color: var(--gne-muted-2) !important;
  font-size: var(--gne-fs-small) !important;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Tabs and segmented navigation
   -------------------------------------------------------------------------- */

.gn-app-shell .top-tabs,
.gn-app-shell .nav-tabs {
  min-height: 36px;
  border-bottom: 1px solid var(--gne-line) !important;
  gap: 0 !important;
}

.gn-app-shell .top-tabs a,
.gn-app-shell .nav-tabs .nav-link,
.gn-app-shell .nav-link-edit-scenario {
  min-height: 36px !important;
  padding: 8px 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #53647a !important;
  font-family: var(--gne-font) !important;
  font-size: var(--gne-fs-small) !important;
  line-height: 19px !important;
  font-weight: 550 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

.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(--gne-text) !important;
  background: #f8fafc !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(--gne-blue) !important;
  font-weight: 650 !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--gne-blue) !important;
}

/* Secondary tabs can stay segmented, but compact and quiet. */
.gn-app-shell .pill-tabs,
.gn-app-shell .performance-subtabs,
.gn-app-shell .model-performance-tabs {
  gap: 4px !important;
}

.gn-app-shell .pill-tabs button, .gn-app-shell .performance-subtabs .btn, .gn-app-shell .model-performance-tabs .btn{
  min-height: 30px !important;
  padding: 5px 9px !important;
  border: 1px solid var(--gne-line) !important;
  border-radius: var(--gne-radius-sm) !important;
  background: #fff !important;
  color: #52647c !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.gn-app-shell .pill-tabs button.active, .gn-app-shell .pill-tabs button.selected, .gn-app-shell .pill-tabs button.is-active, .gn-app-shell .pill-tabs button[aria-selected="true"], .gn-app-shell .performance-subtabs .btn.active, .gn-app-shell .model-performance-tabs .btn.active{
  border-color: #9eb9ea !important;
  background: var(--gne-blue-soft) !important;
  color: var(--gne-blue) !important;
}

/* --------------------------------------------------------------------------
   Tables and data grids
   -------------------------------------------------------------------------- */

.gn-app-shell table{
  color: var(--gne-text-2) !important;
  font-family: var(--gne-font) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border-color: var(--gne-line) !important;
  border-radius: var(--gne-radius) !important;
  box-shadow: none !important;
}

.gn-app-shell thead th, .gn-app-shell .gnb-data-list__header{
  color: #52647c !important;
  font-size: var(--gne-fs-meta) !important;
  line-height: 15px !important;
  font-weight: 650 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase;
}

.gn-app-shell table > tbody > tr > td{
  min-height: 34px;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  border-color: var(--gne-line-soft) !important;
}

.gn-app-shell table > thead > tr > th{
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  border-color: var(--gne-line) !important;
  background: #fafbfd !important;
}

.gn-app-shell tbody tr:hover > td, .gn-app-shell .gnb-data-list__row:hover{
  background: #f8fbff !important;
}

.gn-app-shell table a{
  color: #245ec7;
}

/* --------------------------------------------------------------------------
   Metadata, status and utility information
   -------------------------------------------------------------------------- */

.gn-app-shell .entitySettingsMetadataRow {
  min-height: 30px;
  align-items: center !important;
}

.gn-app-shell .entitySettingsMetadataLabel {
  flex-basis: 102px !important;
  margin: 0 8px 0 0 !important;
  color: var(--gne-muted) !important;
  font-size: var(--gne-fs-small) !important;
  line-height: 18px !important;
  font-weight: 500 !important;
}

.gn-app-shell .entitySettingsMetadataValue {
  margin-bottom: 0 !important;
  color: var(--gne-text) !important;
  font-size: var(--gne-fs-body) !important;
  line-height: 18px !important;
  font-weight: 600 !important;
}

.gn-app-shell .gn-status-pill,
.gn-app-shell .gnb-row-status,
.gn-app-shell .metric-badge,
.gn-app-shell .rfm-business-context__badge,
.gn-app-shell .gn-assistant-scope-badge,
.gn-app-shell .gn-ai-badge {
  min-height: 20px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 14px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.gn-app-shell .gn-status-pill--success,
.gn-app-shell .gnb-row-status--ready {
  border-color: #b9e3ca !important;
  background: var(--gne-success-soft) !important;
  color: var(--gne-success) !important;
}

.gn-app-shell .gn-status-pill--danger {
  border-color: #f2c1c8 !important;
  background: var(--gne-danger-soft) !important;
  color: var(--gne-danger) !important;
}

.gn-app-shell .gn-status-pill--training,
.gn-app-shell .gn-status-pill--pending {
  border-color: #d7c894 !important;
  background: var(--gne-warning-soft) !important;
  color: var(--gne-warning) !important;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.gn-sidebar .gn-sidebar-brand {
  font-family: var(--gne-font) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -.015em !important;
}

.gn-sidebar .navbar-light .navbar-nav .nav-link,
.gn-sidebar .q-main-menu-nav-link {
  min-height: 36px !important;
  padding: 7px 9px !important;
  border-radius: var(--gne-radius) !important;
  font-family: var(--gne-font) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 550 !important;
}

.gn-sidebar .gn-sidebar-profile-copy strong { font-size: 14px !important; line-height: 16px !important; }
.gn-sidebar .gn-sidebar-profile-copy small { font-size: 14px !important; line-height: 14px !important; }
.gn-sidebar .dropdown-item { font-family: var(--gne-font) !important; font-size: 14px !important; line-height: 18px !important; }

/* Sidebar is navigation chrome, not a floating card. */
.navigation-wrap.gn-sidebar,
.navigation-wrap.gn-sidebar.scroll-on,
.navigation-wrap.gn-sidebar.start-style {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Assistant: keep it operational, not oversized
   -------------------------------------------------------------------------- */

.gn-app-shell .gn-assistant-sidebar__header { padding: 14px 13px 12px !important; }
.gn-app-shell .gn-assistant-sidebar h1 { font-size: 16px !important; line-height: 21px !important; }
.gn-app-shell .gn-assistant-chat__header { min-height: 56px !important; padding: 10px 14px !important; }
.gn-app-shell .gn-assistant-chat__identity h2 { font-size: 14px !important; line-height: 18px !important; }
.gn-app-shell .gn-assistant-chat__identity p { font-size: 14px !important; }
.gn-app-shell .gn-assistant-messages { padding: 18px max(18px, 6%) !important; }
.gn-app-shell .gn-assistant-message { border-radius: var(--gne-radius) !important; box-shadow: none !important; }
.gn-app-shell .gn-assistant-suggestions button { min-height: 30px !important; }

/* --------------------------------------------------------------------------
   DevExtreme overlays / popups
   -------------------------------------------------------------------------- */

.dropdown-menu, .popover, .modal-content{
  font-size: 14px !important;
}

.modal-content .modal-title, .popover .popover-header{
  color: var(--gne-text) !important;
  font-family: var(--gne-font) !important;
  font-size: var(--gne-fs-card-title) !important;
  line-height: 20px !important;
  font-weight: 650 !important;
}

/* --------------------------------------------------------------------------
   Responsive shell and route-safe compact navigation

   Existing cascade bug: graphite-b.css reserved top space for a fixed 58px
   mobile header, then graphite-b-final.css loaded later and reset gn-app-main.
   The final contract uses a sticky IN-FLOW header. Expanded navigation grows
   the header and pushes content down, so no route can be covered by the menu.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1440px) {
  :root { --gnb-sidebar: 196px; }
  .gn-app-main { padding: 18px 18px 40px !important; }
}

@media (max-width: 991.98px) {
  :root { --gnb-sidebar: 0px; }

  .gn-app-shell {
    margin-left: 0 !important;
  }

  .navigation-wrap.gn-sidebar,
  .navigation-wrap.gn-sidebar.scroll-on,
  .navigation-wrap.gn-sidebar.start-style {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    overflow: visible !important;
    z-index: 1100;
  }

  .gn-sidebar .gn-sidebar-navbar {
    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    padding: 8px 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .gn-sidebar .gn-sidebar-brand {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .gn-sidebar .navbar-toggler {
    display: block !important;
    min-height: 36px !important;
    margin-left: auto !important;
    border-color: rgba(255,255,255,.20) !important;
    border-radius: var(--gne-radius) !important;
  }

  .gn-sidebar .gn-sidebar-collapse {
    position: static !important;
    display: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 10px 0 4px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .gn-sidebar .gn-sidebar-collapse.show {
    display: flex !important;
  }

  .gn-sidebar .gn-sidebar-utilities {
    margin-top: 8px !important;
  }

  .gn-sidebar .q-main-menu-dropdown-menu,
  .gn-sidebar .dropdown-menu {
    position: static !important;
    width: 100% !important;
    margin-top: 4px !important;
    box-shadow: none !important;
  }

  .gn-app-main {
    padding: 16px 14px 36px !important;
  }

  /* Route tabs scroll horizontally instead of wrapping into multiple rows. */
  .gn-app-shell .top-tabs,
  .gn-app-shell .nav-tabs,
  .gn-app-shell .pill-tabs,
  .gn-app-shell .performance-subtabs,
  .gn-app-shell .model-performance-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .gn-app-shell .top-tabs > *,
  .gn-app-shell .nav-tabs > *,
  .gn-app-shell .pill-tabs > *,
  .gn-app-shell .performance-subtabs > *,
  .gn-app-shell .model-performance-tabs > * {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 767.98px) {
  .gn-app-main { padding: 14px 12px 32px !important; }

  .gn-app-shell h1,
  .gn-app-shell .gn-page-title,
  .gn-app-shell .gn-entity-title,
  .gn-app-shell .gn-entity-header__title,
  .gn-app-shell .gn-list-title,
  .gn-app-shell .gnb-welcome-title {
    font-size: 20px !important;
  }

  .gn-app-shell .gn-section-card,
  .gn-app-shell .gn-card,
  .gn-app-shell .gn-panel,
  .gn-app-shell .card-body,
  .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 {
    padding: 13px !important;
  }

  .gn-app-shell .gn-assistant-page {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Print: remove chrome effects
   -------------------------------------------------------------------------- */

@media print {
  .gn-app-main { background-image: none !important; background: #fff !important; }
  .gn-app-shell .gn-card,
  .gn-app-shell .gn-panel,
  .gn-app-shell .card,
  .gn-app-shell .gn-section-card { box-shadow: none !important; }
}