/*
 * Graphite Note Variation B - visual consistency pass
 *
 * Loaded after graphite-b.css. Standardizes typography, spacing, flyouts,
 * legacy panels, DevExtreme widgets and chart containers across the AngularJS
 * application without changing behavior, route names or backend contracts.
 */

:root {
  --gnu-font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gnu-font-display: "Manrope", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --gnu-fs-2xs: 10px;
  --gnu-fs-xs: 11px;
  --gnu-fs-sm: 12px;
  --gnu-fs-body: 13px;
  --gnu-fs-md: 14px;
  --gnu-fs-lg: 16px;
  --gnu-fs-xl: 20px;
  --gnu-fs-page: 27px;
  --gnu-line-tight: 1.2;
  --gnu-line-body: 1.48;
}

/* Typography foundation */
.gn-app-shell, .gn-sidebar, .gn-sidebar .dropdown-menu{
  font-family: var(--gnu-font-body) !important;
  font-size: var(--gnu-fs-body);
  line-height: var(--gnu-line-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gn-app-shell button,
.gn-app-shell input,
.gn-app-shell select,
.gn-app-shell textarea,
.gn-app-shell .form-control,
.gn-sidebar button,
.gn-sidebar input,
.gn-sidebar select,
.gn-sidebar textarea {
  font-family: var(--gnu-font-body) !important;
}

.gn-app-shell h1,
.gn-app-shell h2,
.gn-app-shell h3,
.gn-app-shell h4,
.gn-app-shell h5,
.gn-app-shell h6,
.gn-list-title,
.gn-entity-header__title,
.gnb-welcome-title,
.gn-section-title,
.gn-chart-card__title,
.gn-api-panel__header h2,
.gn-result-section-title,
.gn-dialog-title,
.gn-sidebar .notification-list-header > span:first-child {
  font-family: var(--gnu-font-display) !important;
}

.gn-app-shell h1 { font-size: 27px !important; line-height: 1.18 !important; font-weight: 700 !important; letter-spacing: -.035em !important; }
.gn-app-shell h2 { font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.025em !important; }
.gn-app-shell h3 { font-size: 17px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: -.018em !important; }
.gn-app-shell h4 { font-size: 15px !important; line-height: 1.35 !important; font-weight: 700 !important; }
.gn-app-shell h5 { font-size: 14px !important; line-height: 1.4 !important; font-weight: 700 !important; }
.gn-app-shell h6 { font-size: 14px !important; line-height: 1.4 !important; font-weight: 700 !important; }

.gn-app-shell .normal { font-size: 14px !important; line-height: 20px !important; }
.gn-app-shell .small { font-size: 14px !important; line-height: 18px !important; }
.gn-app-shell .extraSmall { font-size: 14px !important; line-height: 16px !important; }

.gn-app-shell .label_title {
  color: var(--gnb-ink) !important;
  font-family: var(--gnu-font-display) !important;
  font-size: 27px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}
.gn-app-shell .title_20 { font-family: var(--gnu-font-display) !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.gn-app-shell .label_breadcrumb { color: var(--gnb-muted) !important; font-size: 14px !important; font-weight: 600 !important; }
.gn-app-shell .label_submenu { font-size: 14px !important; font-weight: 600 !important; }
.gn-app-shell .label_form,
.gn-app-shell .label_form_disabled { font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; }
.gn-app-shell .label_info { font-size: 14px !important; line-height: 14px !important; font-weight: 500 !important; }
.gn-app-shell .label_info_larger,
.gn-app-shell .label_info_larger_16,
.gn-app-shell .label_info_larger_18 { font-size: 14px !important; line-height: 16px !important; font-weight: 500 !important; }
.gn-app-shell p,
.gn-app-shell li,
.gn-app-shell td,
.gn-app-shell th { line-height: var(--gnu-line-body); }

/* Page hierarchy */
.gn-list-title,
.gn-entity-header__title {
  font-size: var(--gnu-fs-page) !important;
  line-height: 1.16 !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
}
.gn-list-description,
.gn-section-subtitle,
.gn-entity-header__kicker,
.gn-breadcrumb,
.gn-chart-card__subtitle,
.gn-api-panel__header p { font-size: 14px !important; line-height: 16px !important; }
.gn-entity-header__kicker { margin-bottom: 5px; font-weight: 700 !important; letter-spacing: .07em !important; }
.gn-section-title,
.gn-chart-card__title { font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.gn-result-section-title {
  margin: 18px 0 8px !important;
  color: var(--gnb-ink) !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}
.gn-app-shell .gn-section-card,
.gn-app-shell .gn-card,
.gn-app-shell .gn-panel,
.gn-app-shell .card,
.gn-app-shell .accountsPage.wrapper,
.gn-app-shell .modelScenario.wrapper { color: var(--gnb-text); font-size: 14px; }

/* Tabs, buttons, forms and DevExtreme controls */
.gn-app-shell .top-tabs a,
.gn-app-shell .nav-tabs .nav-link,
.gn-app-shell .nav-pills .nav-link,
.gn-app-shell .nav-link-edit-scenario {
  font-family: var(--gnu-font-body) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
}
.gn-app-shell .pill-tabs button{ font-family: var(--gnu-font-body) !important; font-size: 14px !important; line-height: 17px !important; font-weight: 600 !important; }
.gn-app-shell .btn, .gn-app-shell .btn_main, .gn-app-shell .gn-primary-action, .gn-app-shell .gn-secondary-action{ font-family: var(--gnu-font-body) !important; font-size: 14px !important; line-height: 18px !important; font-weight: 650 !important; }
.gn-app-shell .form-control, .gn-app-shell textarea{ font-family: var(--gnu-font-body) !important; font-size: 14px !important; line-height: 18px !important; }
.gn-app-shell .dropdown-item{ font-family: var(--gnu-font-body) !important; font-size: 14px !important; line-height: 18px !important; }
.gn-app-shell label, .gn-app-shell .control-label{ color: #405069; font-size: 14px; line-height: 17px; font-weight: 600; }
.gn-app-shell ::placeholder{ color: #9aa7b8 !important; font-size: 14px !important; }

/* Tables and dense data surfaces */
.gn-app-shell table{ font-family: var(--gnu-font-body) !important; font-size: 14px !important; }
.gn-app-shell thead th{ color: #5b6b82 !important; font-size: 14px !important; line-height: 15px !important; font-weight: 700 !important; letter-spacing: .035em !important; text-transform: uppercase; }

.gnb-data-list__header { font-size: 14px !important; }
.gnb-data-list__row { font-size: 14px !important; }
.gnb-data-list__name strong { font-size: 14px !important; }
.gnb-data-list__name small { font-size: 14px !important; }
.gnb-data-list__type,
.gnb-data-list__tags,
.gnb-data-list__updated,
.gnb-data-list__number { font-size: 14px !important; }

/* Dataset summary and profile cards */
.gn-app-shell .datasetSummaryText,
.gn-app-shell .datasetSummaryDate,
.gn-app-shell .datasetSummaryNumber {
  min-height: 20px;
  margin-left: 0 !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  line-height: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .025em;
}
.gn-app-shell .datasetSummaryText { color: #187a5c !important; background: #e9f8f2 !important; }
.gn-app-shell .datasetSummaryDate { color: #9a5a08 !important; background: #fff5df !important; }
.gn-app-shell .datasetSummaryNumber { color: #195cff !important; background: #eaf1ff !important; }
.gn-app-shell .kpiText { font-size: 14px !important; }
.gn-app-shell .kpiNumber { font-size: 19px !important; }

/* Model scenarios and result tabs */
.gn-app-shell .modelScenario.wrapper { min-width: 0; padding-bottom: 64px !important; font-size: 14px !important; }
.gn-app-shell .modelScenarioH2 { font-family: var(--gnu-font-display) !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.gn-app-shell .modelScenarioH3 { font-family: var(--gnu-font-display) !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 700 !important; }
.gn-app-shell .modelScenario.small { color: #53647a !important; font-size: 14px !important; line-height: 19px !important; }
.gn-app-shell .modelScenario.label { margin-bottom: 4px !important; color: var(--gnb-ink) !important; font-size: 14px !important; line-height: 17px !important; font-weight: 700 !important; }
.gn-app-shell .modelScenario.help { margin-top: 3px !important; color: var(--gnb-muted) !important; font-size: 14px !important; line-height: 16px !important; }
.gn-app-shell .stickybar_text { font-size: 14px !important; line-height: 17px !important; }
.gn-app-shell .step-text { font-family: var(--gnu-font-body) !important; font-size: 14px !important; line-height: 16px !important; font-weight: 650 !important; }
.gn-app-shell .gn-model-metric__label { font-size: 14px !important; line-height: 14px !important; font-weight: 700 !important; }
.gn-app-shell .gn-model-metric__value { font-family: var(--gnu-font-display) !important; font-size: 20px !important; line-height: 1 !important; font-weight: 700 !important; }
.gn-app-shell .qNotificationTitle { font-family: var(--gnu-font-display) !important; font-size: 15px !important; font-weight: 700 !important; }
.gn-app-shell .qNotificationText { font-size: 14px !important; line-height: 19px !important; }
.gn-app-shell .qNotificationTip,
.gn-app-shell .qNotificationWarning,
.gn-app-shell .qNotificationError,
.gn-app-shell .qNotificationBook,
.gn-app-shell .qNotificationBookAi { font-size: 14px !important; line-height: 19px !important; }

/* Chart consistency and containment */
.gn-app-shell .visualization, .gn-app-shell .gn-chart-card, .gn-app-shell .gn-scenario-column-card, .gn-app-shell .gn-scenario-column-chart, .gn-app-shell .dxc-chart, .gn-app-shell .canvasjs-chart-container{
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.gn-app-shell .gn-chart-card,
.gn-app-shell .gn-scenario-column-card { overflow: hidden; }
.gn-app-shell .gn-scenario-column-card { padding: 16px !important; border: 1px solid var(--gnb-border) !important; border-radius: 8px; background: #fff; }
.gn-app-shell .gn-scenario-column-chart { width: 100%; overflow: hidden; }
.gn-app-shell .gn-scenario-column-chart > div, .gn-app-shell .gn-scenario-column-chart svg{ width: 100% !important; max-width: 100% !important; }
.gn-app-shell .dxc-chart text,
.gn-app-shell .dxc-legend text,
.gn-app-shell .dxc-tooltip text { font-family: var(--gnu-font-body) !important; }
.gn-app-shell .dxc-arg-elements text,
.gn-app-shell .dxc-val-elements text,
.gn-app-shell .dxc-legend text { fill: #66758b !important; font-size: 14px !important; }
.gn-app-shell .dxc-title text { fill: var(--gnb-ink) !important; font-family: var(--gnu-font-display) !important; font-size: 14px !important; font-weight: 700 !important; }
.gn-app-shell .canvasjs-chart-credit { display: none !important; }
.gn-app-shell .canvasjs-chart-toolbar { font-family: var(--gnu-font-body) !important; }
.gn-app-shell .modelScenario.wrapper > div,
.gn-app-shell .modelScenario.wrapper .row,
.gn-app-shell .modelScenario.wrapper [class*="col-"],
.gn-app-shell .gn-chart-card [class*="col-"] { min-width: 0; }
.gn-app-shell .js-plotly-plot,
.gn-app-shell .plot-container,
.gn-app-shell .svg-container,
.gn-app-shell .main-svg { max-width: 100% !important; box-sizing: border-box !important; }
.gn-app-shell .js-plotly-plot { width: 100% !important; overflow: hidden; }

/* Sidebar and flyouts */
.gn-sidebar .gn-sidebar-brand { font-size: 14px !important; }
.gn-sidebar .q-main-menu-nav-link,
.gn-sidebar .navbar-light .navbar-nav .nav-link { font-size: 14px !important; line-height: 18px !important; }
.gn-sidebar .gn-sidebar-profile-copy strong { font-size: 14px !important; }
.gn-sidebar .gn-sidebar-profile-copy small { font-size: 14px !important; }
.gn-sidebar .q-main-menu-dropdown-item,
.gn-sidebar .dropdown-item { font-size: 14px !important; line-height: 18px !important; }
.gn-sidebar .gn-profile-flyout-name { color: var(--gnb-ink); font-family: var(--gnu-font-display) !important; font-size: 14px !important; line-height: 19px !important; font-weight: 700 !important; }
.gn-sidebar .gn-profile-flyout-role { color: var(--gnb-muted); font-size: 14px !important; line-height: 16px !important; font-weight: 500 !important; }
.gn-sidebar .notification-list-header > span:first-child { color: var(--gnb-ink) !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; }
.gn-sidebar .notification-date-header,
.gn-sidebar .notification-date,
.gn-sidebar .notification-item-header,
.gn-sidebar .notification-item-date,
.gn-sidebar .notification-sender,
.gn-sidebar .clear { font-family: var(--gnu-font-body) !important; }
.gn-sidebar .notification-date-header { font-size: 14px !important; }
.gn-sidebar .notification-date { font-size: 14px !important; font-weight: 700 !important; }
.gn-sidebar .notification-item-header { font-size: 14px !important; line-height: 18px !important; }
.gn-sidebar .notification-item-date,
.gn-sidebar .notification-sender { font-size: 14px !important; line-height: 15px !important; }

/* Modals, notebook/editor and account/admin surfaces */
.gn-app-shell .modal-title, .gn-app-shell .popover-header{ font-family: var(--gnu-font-display) !important; font-size: 15px !important; line-height: 21px !important; font-weight: 700 !important; }
.gn-app-shell .modal-body, .gn-app-shell .popover-body, .gn-app-shell .accountsPage.wrapper, .gn-app-shell .visualization-cell{ font-family: var(--gnu-font-body) !important; font-size: 14px !important; line-height: 19px !important; }
.gn-app-shell .selectDatasetTitle { font-family: var(--gnu-font-display) !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.gn-app-shell .selectDatasetText { font-size: 14px !important; line-height: 19px !important; font-weight: 500 !important; }
.gn-app-shell .notInYourPlan { font-size: 14px !important; line-height: 14px !important; }
.gn-app-shell .planTag { font-size: 14px !important; line-height: 14px !important; }
.gn-app-shell .addNewDataset,
.gn-app-shell .nav-link-edit-scenario,
.gn-app-shell .tileViewName,
.gn-app-shell .tile-view-item-subtitle,
.gn-app-shell .tile-view-item-value { font-family: var(--gnu-font-body) !important; }
.gn-app-shell .addNewDataset { font-size: 14px !important; line-height: 18px !important; }
.gn-app-shell .nav-link-edit-scenario { font-size: 14px !important; line-height: 18px !important; font-weight: 600 !important; }
.gn-app-shell .tileViewName { font-size: 14px !important; line-height: 17px !important; font-weight: 650 !important; }

@media (max-width: 1199.98px) {
  .gn-list-title,
  .gn-entity-header__title,
  .gnb-welcome-title { font-size: 24px !important; }
}
@media (max-width: 767.98px) {
  .gn-list-title,
  .gn-entity-header__title,
  .gnb-welcome-title { font-size: 22px !important; }
  .gn-app-shell h1 { font-size: 22px !important; }
  .gn-app-shell h2 { font-size: 18px !important; }
  .gn-app-shell .gn-scenario-column-card { padding: 12px !important; }
}

/* Dataset summary cards still contain a few legacy inline sizes. Normalize them here. */
.gn-app-shell .custom_dx_tile_summary .tileViewNameCharts {
  color: var(--gnb-ink) !important;
  font-family: var(--gnu-font-display) !important;
  font-size: 14px !important;
  line-height: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}
.gn-app-shell .custom_dx_tile_summary .label_info,
.gn-app-shell .custom_dx_tile_summary .label_info .col-12 {
  color: #53647a !important;
  font-size: 14px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
}
.gn-app-shell .custom_dx_tile_summary .dxc-chart{
  width: 100% !important;
  max-width: 100% !important;
}

/* Confusion matrices and heatmaps should never force a page wider than its card. */
.gn-app-shell .heatmap,
.gn-app-shell .heatmap .plot-container,
.gn-app-shell .heatmap .svg-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}

/* Final cross-application normalization: legacy routes, overlays and old templates. */
html,
body {
  font-family: var(--gnu-font-body) !important;
  font-size: var(--gnu-fs-body) !important;
  line-height: var(--gnu-line-body);
  color: var(--gnb-text);
}

/* DevExtreme commonly portals menus/popups to <body>, outside .gn-app-shell. */
.dropdown-menu, .popover, .tooltip, .modal-content{
  font-family: var(--gnu-font-body) !important;
  font-size: var(--gnu-fs-body) !important;
}
.modal-content .modal-title, .popover .popover-header{
  font-family: var(--gnu-font-display) !important;
  font-size: 15px !important;
  line-height: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
}
.dropdown-menu .dropdown-item, .popover .popover-body{
  font-size: 14px !important;
  line-height: 18px !important;
}

/* Legacy Bootstrap/utility surfaces use the same hierarchy as the new shell. */
.gn-app-shell .card,
.gn-app-shell .card-body,
.gn-app-shell .list-group,
.gn-app-shell .list-group-item,
.gn-app-shell .tab-content,
.gn-app-shell .form-group,
.gn-app-shell .input-group {
  font-family: var(--gnu-font-body) !important;
}
.gn-app-shell .card-title,
.gn-app-shell .panel-title,
.gn-app-shell legend {
  color: var(--gnb-ink) !important;
  font-family: var(--gnu-font-display) !important;
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
}
.gn-app-shell .text-muted { color: var(--gnb-muted) !important; }

/* Training/loading states. */
.gn-app-shell .gn-training-message {
  min-height: 56px;
  height: auto !important;
  padding: 15px 16px !important;
  border: 1px solid #dce7f7;
  border-radius: 7px;
  background: #f7faff !important;
}
.gn-app-shell .gn-training-message__text {
  color: #40536d !important;
  font-family: var(--gnu-font-body) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500;
}

/* Dataset summary cards: remove the last legacy 14px statistic blocks. */
.gn-app-shell .custom_dx_tile_summary .gn-summary-stats,
.gn-app-shell .custom_dx_tile_summary .gn-summary-stats * {
  font-family: var(--gnu-font-body) !important;
  font-size: 14px !important;
  line-height: 16px !important;
  color: #53647a !important;
}
.gn-app-shell .custom_dx_tile_summary .gn-summary-stats > .row,
.gn-app-shell .custom_dx_tile_summary .gn-summary-stats .row {
  min-height: 19px;
}

/* Reusable chart/title typography across old model-result components. */
.gn-app-shell .gn-chart-inline-title {
  color: var(--gnb-ink) !important;
  font-family: var(--gnu-font-display) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
}
.gn-app-shell .gn-prediction-value {
  display: inline-block;
  padding: 3px 7px !important;
  border-radius: 5px;
  background: #eaf1ff !important;
  color: #0e3a8a !important;
  font-family: var(--gnu-font-display) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* Defensive chart sizing. Old chart configs frequently carry fixed pixel widths. */
.gn-app-shell .modelScenario.wrapper, .gn-app-shell .modelScenario.wrapper .visualization, .gn-app-shell .modelScenario.wrapper .js-plotly-plot, .gn-app-shell .modelScenario.wrapper .canvasjs-chart-container, .gn-app-shell .custom_dx_tile_summary, .gn-app-shell .heatmap, .gn-app-shell .visualization-cell{
  min-width: 0 !important;
  max-width: 100% !important;
}
.gn-app-shell .modelScenario.wrapper,
.gn-app-shell .gn-chart-card,
.gn-app-shell .visualization-cell,
.gn-app-shell .heatmap {
  overflow-x: hidden !important;
}
.gn-app-shell .heatmap .js-plotly-plot, .gn-app-shell .heatmap .plot-container, .gn-app-shell .heatmap .svg-container{
  width: 100% !important;
  max-width: 100% !important;
}
.gn-app-shell .modelScenario.wrapper .dxc-chart,
.gn-app-shell .gn-scenario-column-chart .dxc-chart,
.gn-app-shell .custom_dx_tile_summary .dxc-chart {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Keep sticky scenario controls from covering the last row of chart/stat content. */
.gn-app-shell .modelScenario.wrapper {
  padding-bottom: 82px !important;
}

/* Notebook/editor controls should not reintroduce a third text scale. */
.gn-app-shell .visualization-cell, .gn-app-shell .visualization-cell span, .gn-app-shell .new-notebook-wrapper{
  font-size: 14px !important;
  line-height: 18px !important;
}

/* Small-screen safety for chart-heavy scenario/results pages. */
@media (max-width: 1199.98px) {
  .gn-app-shell .modelScenario.wrapper { padding-bottom: 88px !important; }
  .gn-app-shell .gn-prediction-value { font-size: 20px !important; }
}

/* --------------------------------------------------------------------------
   Sidebar utility flyouts: keep Notifications, Settings and Profile on-screen
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .gn-sidebar .gn-sidebar-utilities > .q-main-menu-nav-item {
    position: relative !important;
  }

  /* The utility rail sits at the bottom of the viewport. Flyouts therefore
     open upward, with their bottom edge aligned to the triggering row. */
  .gn-sidebar .gn-sidebar-utilities > .q-main-menu-nav-item > .q-main-menu-dropdown-menu,
  .gn-sidebar .gn-sidebar-utilities > .q-main-menu-nav-item > .dropdown-menu {
    top: auto !important;
    bottom: 0 !important;
    left: calc(100% + 10px) !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    max-height: calc(100vh - 24px) !important;
    overscroll-behavior: contain;
  }

  /* Settings/Profile are compact menus and can scroll if a future permission
     set adds more entries than fit in the current viewport. */
  .gn-sidebar .gn-sidebar-utilities > .q-main-menu-nav-item > .q-main-menu-dropdown-menu:not([aria-labelledby="navbarDropdown1"]),
  .gn-sidebar .gn-sidebar-utilities > .q-main-menu-nav-item > .dropdown-menu:not([aria-labelledby="navbarDropdown1"]) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Notifications already own their vertical scrolling through dx-scroll-view;
     constrain the panel without creating a nested outer scrollbar. */
  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] {
    overflow: hidden !important;
  }

  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notificationContainerLg,
  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notificationContainerSm {
    max-height: calc(100vh - 42px) !important;
  }

  /* Profile card should read as a deliberate flyout, not a clipped continuation
     of the bottom rail. */
  .gn-sidebar .gn-sidebar-utilities > .q-main-menu-nav-item:last-child > .q-main-menu-dropdown-menu {
    min-width: 230px !important;
  }
}

/* --------------------------------------------------------------------------
   Notifications flyout: the legacy notification body is absolutely positioned
   and therefore does not size the Bootstrap dropdown. In the left-rail layout
   that collapses the dropdown to a thin white strip. Make this one flyout a
   normal contained panel while leaving Settings/Profile positioning unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] {
    width: min(430px, calc(100vw - var(--gnb-sidebar) - 28px)) !important;
    min-width: min(430px, calc(100vw - var(--gnb-sidebar) - 28px)) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notificationContainerLg,
  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notificationContainerSm {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notificationContainerLg {
    height: min(413px, calc(100vh - 56px)) !important;
  }

  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notificationContainerSm {
    height: min(200px, calc(100vh - 56px)) !important;
  }

  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notification-list {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notification-list-header {
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--gnb-border) !important;
  }

  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notification-list-items {
    padding-top: 8px !important;
  }

  .gn-sidebar .q-main-menu-dropdown-menu[aria-labelledby="navbarDropdown1"] .notification-item {
    margin-bottom: 8px !important;
    padding: 9px 10px !important;
    border: 1px solid #e6ebf2 !important;
    border-radius: 7px !important;
    background: #fff !important;
  }
}