/* =============================================================================
 * dashboard-layout.css — grid + drag affordances for customizable dashboards
 *
 * Pairs with assets/js/dashboard-layout.js. Colors come from the existing
 * --axm-* theme variables, so light and dark both inherit the studio palette
 * with no extra styling.
 *
 * Layout contract: a zone is a 12-column CSS Grid and each widget declares its
 * span through data-w="1".."12". Spans are expressed as static rules rather
 * than calc() because `grid-column: span calc(...)` is not dependably
 * supported. On tablet each span doubles (a 12-column grid behaving like 6
 * columns) and on mobile everything goes full width, so the mobile stack always
 * matches the logical desktop order.
 * ========================================================================== */

/* Font standardization — match the app's global type so the dashboard renders
   identically to the studio. The primary app font is "Urbanist" (declared on
   body in assets/css/style.css); this import keeps the font available here
   because command-center pages do not load style.css themselves. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

.axm-dash-zone,
.axm-dash-widget {
  font-family: "Urbanist", sans-serif;
}

.axm-dash-zone {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--axm-dash-gap, 1rem);
  align-items: start;
}

.axm-dash-widget {
  grid-column: 1 / -1; /* default for a widget with no data-w */
  min-width: 0; /* lets charts shrink instead of forcing horizontal overflow */
}

.axm-dash-widget[data-w="1"] { grid-column: span 1; }
.axm-dash-widget[data-w="2"] { grid-column: span 2; }
.axm-dash-widget[data-w="3"] { grid-column: span 3; }
.axm-dash-widget[data-w="4"] { grid-column: span 4; }
.axm-dash-widget[data-w="5"] { grid-column: span 5; }
.axm-dash-widget[data-w="6"] { grid-column: span 6; }
.axm-dash-widget[data-w="7"] { grid-column: span 7; }
.axm-dash-widget[data-w="8"] { grid-column: span 8; }
.axm-dash-widget[data-w="9"] { grid-column: span 9; }
.axm-dash-widget[data-w="10"] { grid-column: span 10; }
.axm-dash-widget[data-w="11"] { grid-column: span 11; }
.axm-dash-widget[data-w="12"] { grid-column: span 12; }

/* Tablet: double each span so the 12-column grid reads as 6 columns. */
@media (max-width: 991.98px) {
  .axm-dash-widget[data-w="1"] { grid-column: span 2; }
  .axm-dash-widget[data-w="2"] { grid-column: span 4; }
  .axm-dash-widget[data-w="3"] { grid-column: span 6; }
  .axm-dash-widget[data-w="4"] { grid-column: span 8; }
  .axm-dash-widget[data-w="5"] { grid-column: span 10; }
  .axm-dash-widget[data-w="6"],
  .axm-dash-widget[data-w="7"],
  .axm-dash-widget[data-w="8"],
  .axm-dash-widget[data-w="9"],
  .axm-dash-widget[data-w="10"],
  .axm-dash-widget[data-w="11"],
  .axm-dash-widget[data-w="12"] { grid-column: span 12; }
}

/* Mobile: single column, saved order preserved. */
@media (max-width: 767.98px) {
  .axm-dash-zone {
    grid-template-columns: minmax(0, 1fr);
  }

  .axm-dash-widget,
  .axm-dash-widget[data-w] {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
 * Drag handle
 * ------------------------------------------------------------------------ */

.axm-dash-widget {
  position: relative;
}

.axm-dash-handle {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--axm-text-muted, #9aa3af);
  opacity: 0;
  cursor: grab;
  touch-action: none; /* pointer events only; stops the browser panning instead */
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.axm-dash-widget:hover > .axm-dash-handle,
.axm-dash-widget:focus-within > .axm-dash-handle,
.axm-dash-handle:focus-visible {
  opacity: 1;
}

.axm-dash-handle:hover {
  background: var(--axm-dropdown-hover, rgba(255, 255, 255, 0.06));
  color: var(--axm-text, #8c9299);
}

.axm-dash-handle:focus-visible {
  outline: 2px solid var(--axm-accent, #6ea8fe);
  outline-offset: 1px;
}

.axm-dash-handle svg {
  width: 0.875rem;
  height: 0.875rem;
  pointer-events: none;
}

/* Touch devices never fire hover, so keep the handle permanently visible. */
@media (hover: none) {
  .axm-dash-handle {
    opacity: 0.75;
  }
}

/* ---------------------------------------------------------------------------
 * Drag feedback
 * ------------------------------------------------------------------------ */

/* The lifted copy that follows the pointer. */
.axm-dash-ghost {
  position: fixed;
  z-index: 1080;
  margin: 0;
  pointer-events: none;
  opacity: 0.95;
  border-radius: 0.5rem;
  box-shadow: var(--axm-shadow, 0 8px 24px rgba(0, 0, 0, 0.45)),
    0 0 0 1px var(--axm-accent, #6ea8fe);
  transform: scale(1.015);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  will-change: transform, top, left;
}

/* The gap left behind, showing where the widget will land. */
.axm-dash-widget.axm-dash-placeholder {
  border-radius: 0.5rem;
  border: 1px dashed var(--axm-accent, #6ea8fe);
  background: rgba(110, 168, 254, 0.08);
}

.axm-dash-widget.axm-dash-placeholder > * {
  visibility: hidden;
}

/* Non-dragged widgets slide to their new slot instead of jumping. */
.axm-dash-widget.axm-dash-shifting {
  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Settling animation once the widget is dropped into place. */
.axm-dash-widget.axm-dash-settled {
  animation: axm-dash-settle 0.22s ease-out;
}

@keyframes axm-dash-settle {
  from {
    transform: scale(1.012);
  }
  to {
    transform: scale(1);
  }
}

/* While a drag is in flight, suppress text selection across the zone. */
.axm-dash-dragging,
.axm-dash-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.axm-dash-dragging .axm-dash-handle {
  cursor: grabbing;
}

/* Keyboard reordering target, so the moved widget stays visible. */
.axm-dash-widget.axm-dash-keyboard-active {
  box-shadow: 0 0 0 2px var(--axm-accent, #6ea8fe);
  border-radius: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Save status pill (non-intrusive; replaces alert()/toast dependencies)
 * ------------------------------------------------------------------------ */

.axm-dash-status {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1085;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--axm-border, #33404f);
  border-radius: 0.5rem;
  background: var(--axm-surface, #1a222c);
  color: var(--axm-text, #8c9299);
  font-size: 0.8125rem;
  line-height: 1.3;
  box-shadow: var(--axm-shadow, 0 8px 24px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.axm-dash-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.axm-dash-status.is-error {
  border-color: #a13a45;
  color: #f1b0b7;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .axm-dash-ghost,
  .axm-dash-widget.axm-dash-shifting,
  .axm-dash-widget.axm-dash-settled,
  .axm-dash-status {
    transition: none;
    animation: none;
  }
}