/*
 * NableU maintainer note
 * Purpose: Shows the temporary long-hold dashboard movement state. Ordinary
 * dashboard presentation stays uncluttered until a person starts moving a panel.
 */

.expression-layout-panel {
  position: relative;
}

.expression-layout-panel.is-expression-hold-pending {
  user-select: none;
  -webkit-user-select: none;
}

.dashboard-widget-grid[data-expression-dragging="true"] {
  isolation: isolate;
}

.dashboard-widget-grid[data-expression-dragging="true"] > .expression-layout-panel:not(.is-expression-dragging) {
  opacity: 0.72;
}

.expression-layout-panel.is-expression-dragging {
  z-index: 10;
  cursor: grabbing !important;
  touch-action: none;
  opacity: 0.28;
  transform: none;
  box-shadow: none;
  outline: 2px dashed var(--accent) !important;
  outline-offset: 3px;
}

.expression-layout-panel.is-expression-dragging::after {
  content: "Drop here";
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
}

.expression-drag-ghost {
  position: fixed !important;
  z-index: 10000 !important;
  box-sizing: border-box;
  margin: 0 !important;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing !important;
  opacity: 0.98;
  transform: scale(1.025);
  transform-origin: center;
  box-shadow: 0 0.9rem 2rem rgba(8, 43, 85, 0.34);
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px;
  transition: none !important;
}

.expression-drag-ghost::after {
  content: "Moving";
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
}

:root[data-theme="high-contrast"] .dashboard-widget-grid[data-expression-dragging="true"] > .expression-layout-panel:not(.is-expression-dragging) {
  opacity: 1;
}

:root[data-theme="high-contrast"] .expression-layout-panel.is-expression-dragging {
  box-shadow: none;
  opacity: 1;
  outline: 4px dashed #00ffff !important;
}

:root[data-theme="high-contrast"] .expression-layout-panel.is-expression-dragging::after,
:root[data-theme="high-contrast"] .expression-drag-ghost::after {
  border-color: #00ffff;
  background: #000000;
  color: #ffffff;
}

:root[data-theme="high-contrast"] .expression-drag-ghost {
  opacity: 1;
  box-shadow: none;
  outline: 4px solid #00ffff !important;
}

@media (prefers-reduced-motion: no-preference) {
  .dashboard-widget-grid > .expression-layout-panel {
    transition: opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .expression-layout-panel.is-expression-dragging,
  .expression-drag-ghost {
    transform: none;
  }
}

@media (max-width: 720px) {
  .dashboard-screen > .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-screen > .section-heading > button {
    align-self: flex-start;
  }
}