/* Graphite Note — interaction/layout correction pass
   Loaded last. Fixes DevExtreme wizard tile placement and makes Home KPI cards
   behave like the interactive cards on the Graphite Note website. */

:root {
  --gnif-ink: #07162c;
  --gnif-blue: #195cff;
  --gnif-cyan: #46d7ff;
  --gnif-line: #dbe3ef;
  --gnif-muted: #627087;
}

/* --------------------------------------------------------------------------
   Creation wizard grids

   DevExtreme TileView normally owns tile placement with inline coordinates.
   In the creation popups that legacy layout can cascade items diagonally.
   For these two pickers only, the scroll content becomes an ordinary CSS grid.
   Tile click/selection behavior remains DevExtreme-owned.
   -------------------------------------------------------------------------- */
.gn-tile-grid--datasetType #tileView .dx-scrollable-content,
.gn-tile-grid--ModelsType #tileView .dx-scrollable-content,
.gn-tile-grid--datasetType #tileView .dx-scrollview-content,
.gn-tile-grid--ModelsType #tileView .dx-scrollview-content {
  position: relative !important;
  display: grid !important;
  align-items: stretch !important;
  align-content: start !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}

.gn-tile-grid--datasetType #tileView .dx-scrollable-content,
.gn-tile-grid--datasetType #tileView .dx-scrollview-content {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.gn-tile-grid--ModelsType #tileView .dx-scrollable-content,
.gn-tile-grid--ModelsType #tileView .dx-scrollview-content {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.gn-tile-grid--datasetType #tileView .dx-tile,
.gn-tile-grid--ModelsType #tileView .dx-tile {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

.gn-tile-grid--datasetType #tileView .dx-tile {
  height: 280px !important;
  min-height: 280px !important;
}

.gn-tile-grid--ModelsType #tileView .dx-tile {
  height: 365px !important;
  min-height: 365px !important;
}

/* Hover lift must not replace DevExtreme's positioning transform; tiles are now
   position-neutral, so a dedicated content lift is safe and predictable. */
.gn-tile-grid--datasetType #tileView .dx-tile:hover,
.gn-tile-grid--ModelsType #tileView .dx-tile:hover {
  transform: none !important;
}

.gn-tile-grid--datasetType #tileView .dx-tile:hover .gn-asset-card,
.gn-tile-grid--ModelsType #tileView .dx-tile:hover .gn-asset-card {
  transform: translateY(-3px);
}

.gn-tile-grid--datasetType #tileView .gn-asset-card,
.gn-tile-grid--ModelsType #tileView .gn-asset-card {
  transition: transform .2s cubic-bezier(.2,.8,.2,1) !important;
}

/* Keep TileView's own wrapper from manufacturing horizontal overflow. */
.gn-tile-grid--datasetType #tileView,
.gn-tile-grid--ModelsType #tileView,
.gn-tile-grid--datasetType #tileView .dx-scrollable-wrapper,
.gn-tile-grid--ModelsType #tileView .dx-scrollable-wrapper,
.gn-tile-grid--datasetType #tileView .dx-scrollable-container,
.gn-tile-grid--ModelsType #tileView .dx-scrollable-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* --------------------------------------------------------------------------
   Home KPI cards: the whole card is now the target, not only the tiny arrow.
   -------------------------------------------------------------------------- */
.gn-stat-card--interactive:not(.is-disabled) {
  cursor: pointer !important;
  position: relative;
  isolation: isolate;
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease !important;
}

.gn-stat-card--interactive:not(.is-disabled)::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 3px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(90deg, var(--gnif-blue), var(--gnif-cyan));
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.gn-stat-card--interactive:not(.is-disabled):hover {
  transform: translateY(-3px) !important;
  border-color: #abc6ee !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(15,49,91,.10), 0 4px 12px rgba(25,92,255,.05) !important;
}

.gn-stat-card--interactive:not(.is-disabled):hover::after,
.gn-stat-card--interactive:not(.is-disabled):focus-visible::after {
  opacity: 1;
}

.gn-stat-card--interactive:not(.is-disabled):hover .gn-stat-card__arrow {
  color: var(--gnif-blue) !important;
  transform: translateX(3px);
}

.gn-stat-card--interactive .gn-stat-card__arrow {
  transition: color .18s ease, transform .18s ease !important;
}

.gn-stat-card--interactive:not(.is-disabled):focus-visible {
  outline: 2px solid rgba(25,92,255,.62) !important;
  outline-offset: 3px !important;
  border-color: #9dbded !important;
}

.gn-stat-card--interactive.is-disabled {
  cursor: default !important;
}

/* Nested icon/arrow links are visual affordances; the parent card now owns the
   navigation hit area. They still remain valid anchors for compatibility. */
.gn-stat-card--interactive .gn-stat-card__icon,
.gn-stat-card--interactive .gn-stat-card__arrow {
  position: relative;
  z-index: 2;
}

@media (max-width: 1500px) {
  .gn-tile-grid--ModelsType #tileView .dx-scrollable-content,
  .gn-tile-grid--ModelsType #tileView .dx-scrollview-content {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1260px) {
  .gn-tile-grid--datasetType #tileView .dx-scrollable-content,
  .gn-tile-grid--datasetType #tileView .dx-scrollview-content,
  .gn-tile-grid--ModelsType #tileView .dx-scrollable-content,
  .gn-tile-grid--ModelsType #tileView .dx-scrollview-content {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .gn-tile-grid--datasetType #tileView .dx-scrollable-content,
  .gn-tile-grid--datasetType #tileView .dx-scrollview-content,
  .gn-tile-grid--ModelsType #tileView .dx-scrollable-content,
  .gn-tile-grid--ModelsType #tileView .dx-scrollview-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gn-stat-card--interactive,
  .gn-stat-card--interactive .gn-stat-card__arrow,
  .gn-tile-grid--datasetType #tileView .gn-asset-card,
  .gn-tile-grid--ModelsType #tileView .gn-asset-card {
    transition: none !important;
  }
  .gn-stat-card--interactive:not(.is-disabled):hover,
  .gn-tile-grid--datasetType #tileView .dx-tile:hover .gn-asset-card,
  .gn-tile-grid--ModelsType #tileView .dx-tile:hover .gn-asset-card {
    transform: none !important;
  }
}