/*
 * Graphite Note - Premium Interaction Pass 1
 * Interaction polish only: hover/focus/motion/loading/empty/error/dialog states.
 * Keep this file last in the Graphite stylesheet cascade.
 */

:root {
  --gnp-motion-fast: 120ms;
  --gnp-motion-base: 160ms;
  --gnp-motion-slow: 220ms;
  --gnp-ease: cubic-bezier(.2, .7, .2, 1);
  --gnp-focus: rgba(25, 92, 255, .22);
  --gnp-blue: #195cff;
  --gnp-blue-hover: #124bd5;
  --gnp-ink: #172033;
  --gnp-muted: #68758a;
  --gnp-border: #d8e0eb;
  --gnp-border-strong: #b9c6d8;
  --gnp-surface: #ffffff;
  --gnp-surface-hover: #f7f9fc;
  --gnp-danger: #c93444;
  --gnp-danger-soft: #fff5f6;
  --gnp-success: #197a4f;
  --gnp-success-soft: #f2fbf6;
  --gnp-warning: #9a6500;
  --gnp-warning-soft: #fff9eb;
  --gnp-shadow-float: 0 12px 36px rgba(19, 35, 61, .14), 0 2px 8px rgba(19, 35, 61, .08);
}

/* Motion is deliberately restrained. */
.gn-app-shell a, .gn-app-shell button, .gn-app-shell .btn, .gn-app-shell .gn-card, .gn-app-shell .card, .gn-app-shell .tile, .gn-app-shell [class*="tileView"], .gn-app-shell input, .gn-app-shell textarea, .gn-app-shell select{
  transition:
    background-color var(--gnp-motion-base) var(--gnp-ease),
    border-color var(--gnp-motion-base) var(--gnp-ease),
    color var(--gnp-motion-base) var(--gnp-ease),
    box-shadow var(--gnp-motion-base) var(--gnp-ease),
    opacity var(--gnp-motion-base) var(--gnp-ease),
    transform var(--gnp-motion-fast) var(--gnp-ease) !important;
}

/* Buttons should feel responsive, not floaty. */
.gn-app-shell button:not(:disabled):active, .gn-app-shell .btn:not(.disabled):active{
  transform: translateY(1px) !important;
}

.gn-app-shell button:not(:disabled):hover, .gn-app-shell .btn:not(.disabled):hover{
  filter: none;
}

/* Keyboard focus: one system across native and DevExtreme controls. */
.gn-app-shell :where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline: 2px solid rgba(25, 92, 255, .72) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--gnp-focus) !important;
}

/* Inputs gain a subtle premium active state without changing layout. */
.gn-app-shell input:hover, .gn-app-shell textarea:hover, .gn-app-shell select:hover{
  border-color: var(--gnp-border-strong) !important;
}

.gn-app-shell input:focus, .gn-app-shell textarea:focus, .gn-app-shell select:focus{
  border-color: var(--gnp-blue) !important;
}

/* Clickable cards/tiles: visual response only when the element is actually interactive. */
.gn-app-shell :where(.card, .gn-card, .tile, [class*="tileView"])[role="button"]:hover,
.gn-app-shell :where(.card, .gn-card, .tile, [class*="tileView"]).clickable:hover,
.gn-app-shell :where(.card, .gn-card, .tile, [class*="tileView"])[ng-click]:hover {
  border-color: var(--gnp-border-strong) !important;
  background: var(--gnp-surface-hover) !important;
  box-shadow: 0 5px 14px rgba(19, 35, 61, .07) !important;
}

/* Data grids: quiet row hover, stronger selected state. */




/* Tabs have a quick, precise selected-state transition. */
.gn-app-shell .nav-tabs .nav-link, .gn-app-shell [class*="navTab"] a{
  transition: color var(--gnp-motion-base) var(--gnp-ease), border-color var(--gnp-motion-base) var(--gnp-ease), background var(--gnp-motion-base) var(--gnp-ease) !important;
}

/* ------------------------------------------------------------------
   Loading states
   ------------------------------------------------------------------ */
.gn-loading-overlay,
q-loading-indicator #modal {
  position: absolute;
  inset: 0;
  min-height: 96px;
  z-index: 9998;
  cursor: progress;
}
q-loading-indicator #modalBackground {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  background: rgba(248, 250, 253, .78) !important;
  opacity: 1 !important;
  backdrop-filter: blur(1px);
}
q-loading-indicator #modalContent {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
}
q-loading-indicator .spinner {
  position: static !important;
  width: 36px !important;
  height: 36px !important;
  transform: none !important;
  display: grid;
  place-items: center;
}
q-loading-indicator .loader {
  width: 28px !important;
  height: 28px !important;
  border: 2px solid #d7e1ef !important;
  border-top-color: var(--gnp-blue) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  animation: gnp-spin .72s linear infinite !important;
}
q-loading-indicator .loader::before,
q-loading-indicator .loader::after { display: none !important; }
@keyframes gnp-spin { to { transform: rotate(360deg); } }





/* Disabled busy buttons remain readable. */
.gn-app-shell button:disabled, .gn-app-shell .btn.disabled{
  cursor: not-allowed !important;
  opacity: .62 !important;
}

/* ------------------------------------------------------------------
   Empty / no-data states
   ------------------------------------------------------------------ */
.gn-app-shell [class*="empty-state"], .gn-app-shell [class*="emptyState"], .gn-app-shell [class*="no-data"], .gn-app-shell [class*="noData"]{
  color: var(--gnp-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}


/* ------------------------------------------------------------------
   Toasts / notifications
   ------------------------------------------------------------------ */









/* ------------------------------------------------------------------
   Dialogs / popups / errors
   ------------------------------------------------------------------ */







/* Known error popup component. */




/* Confirm popup created by svcUtility. */

.gn-confirm-popup .gn-confirm-copy { color: var(--gnp-ink); }
.gn-confirm-popup .gn-confirm-options { margin-top: 10px; }


/* Overlay background is calm and consistent. */


/* Dropdowns/popovers: premium floating surfaces. */


/* Popup entrance is intentionally very short. DevExtreme may animate transform itself;
   this only smooths opacity when no widget-specific animation is defined. */


/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .gn-app-shell *, .gn-app-shell *::before, .gn-app-shell *::after, q-loading-indicator .loader{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767.98px) {
  
  
}