/* Graphite Note Premium Pass 8
   Focus-state cleanup + chart viewport hardening + compact analytical grid filters.
   Loaded after Pass 7. Presentation only. */

:root {
  --gn-p8-focus: #1769ff;
  --gn-p8-focus-soft: rgba(23, 105, 255, .16);
  --gn-p8-border: #d7e0eb;
  --gn-p8-border-active: #87aef7;
  --gn-p8-muted: #6b7b90;
}

/* --------------------------------------------------------------------------
   1. Mouse click != keyboard focus.
   DevExtreme leaves dx-state-focused on clicked editors/list controls. Pass 1
   intentionally made focus very visible, but for pointer interaction that
   became a persistent double-blue halo. Keep a calm active border for mouse
   users and reserve the full accessibility ring for :focus-visible.
   -------------------------------------------------------------------------- */
.gn-app-shell :where(a, button, input, textarea, select, [tabindex]):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}





/* Keyboard users still get a clear, deliberate ring. */
.gn-app-shell :where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline: 2px solid rgba(23, 105, 255, .78) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px var(--gn-p8-focus-soft) !important;
}

/* Tab-like controls should never keep a box around the active item after a click. */
.gn-app-shell .top-tabs a:focus,
.gn-app-shell .pill-tabs button:focus,
.gn-context-drawer__tabs button:focus {
  outline: none !important;
  box-shadow: none !important;
}

.gn-app-shell .top-tabs a:focus-visible,
.gn-app-shell .pill-tabs button:focus-visible,
.gn-context-drawer__tabs button:focus-visible {
  outline: 2px solid rgba(23, 105, 255, .60) !important;
  outline-offset: -2px !important;
  border-radius: 3px !important;
}

/* Open list: selected row may be highlighted, but no persistent focus rectangle. */




/* Context drawer tabs use the underline as the selected-state signal. */
.gn-context-drawer__tabs button.is-active,
.gn-context-drawer__tabs button[aria-selected="true"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   2. CanvasJS viewport hardening.
   Chart JS now derives its height from the actual .gn-compact-chart host.
   Keep internal CanvasJS layers pinned to that viewport and allow labels a few
   pixels of breathing room instead of clipping against a 500px canvas inside
   a 320/360px host.
   -------------------------------------------------------------------------- */
.gn-app-shell .gn-compact-chart {
  box-sizing: border-box !important;
  padding-bottom: 6px !important;
  overflow: visible !important;
}

.gn-app-shell .gn-compact-chart > .canvasjs-chart-container,
.gn-app-shell .gn-compact-chart .canvasjs-chart-container {
  box-sizing: border-box !important;
  height: calc(100% - 6px) !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.gn-app-shell .gn-chart-card .gn-analytics-chart-stage,
.gn-app-shell .gn-analytics-chart-stage {
  overflow: visible !important;
  padding-bottom: 4px;
}

/* Keep toolbar visually subordinate and inside the chart bounds. */
.gn-app-shell .canvasjs-chart-toolbar {
  top: 6px !important;
  right: 6px !important;
  transform: scale(.88);
  transform-origin: top right;
}

/* --------------------------------------------------------------------------
   3. DevExtreme analytical tables: compact filter/search controls.
   The filter-operation magnifier was visually larger than the cell content.
   Make filter row controls 28px and icons 13px without changing filtering.
   -------------------------------------------------------------------------- */










/* Search panel in grid toolbar should match the same density. */




@media (max-width: 991.98px) {
  .gn-app-shell .gn-compact-chart { padding-bottom: 8px !important; }
}