/*
 * NableU maintainer note
 * Purpose: Presents dashboard layout-expression controls without changing the
 * meaning or authority of the underlying dashboard widgets.
 */

.expression-layout-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.85rem;
  background: var(--surface-soft);
  color: var(--text-main);
}

.expression-layout-toolbar-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.expression-layout-toolbar-copy > span {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.expression-layout-toolbar-actions,
.expression-panel-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

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

.expression-layout-grid,
.dashboard-widget-grid.expression-layout-editing {
  isolation: isolate;
}

.dashboard-widget-grid.expression-layout-editing > .expression-layout-panel {
  outline: 2px dashed var(--border-strong);
  outline-offset: -2px;
  cursor: grab;
}

.dashboard-widget-grid.expression-layout-editing > .expression-layout-panel.is-expression-locked {
  cursor: default;
  outline-style: solid;
}

.expression-panel-tools {
  margin: 0 0 0.7rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
}

.expression-panel-tools[hidden],
.expression-panel-lock-badge[hidden] {
  display: none !important;
}

.expression-panel-tools button,
.expression-layout-toolbar button {
  min-height: 2.25rem;
}

.expression-panel-lock-badge {
  float: right;
  margin: 0 0 0.4rem 0.6rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: var(--chip-surface);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 700;
}

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

.expression-layout-panel.is-expression-dragging {
  z-index: 10;
  cursor: grabbing !important;
  touch-action: none;
  opacity: 0.9;
  transform: scale(1.015);
  box-shadow: 0 0.9rem 2rem rgba(8, 43, 85, 0.18);
  outline: 3px solid var(--accent) !important;
}

.expression-layout-panel.is-expression-locked {
  border-color: var(--border-strong);
}

:root[data-theme="high-contrast"] .expression-layout-toolbar,
:root[data-theme="high-contrast"] .expression-panel-tools,
:root[data-theme="high-contrast"] .expression-panel-lock-badge {
  border-color: var(--border-strong);
}

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

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

@media (max-width: 720px) {
  .expression-layout-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .expression-layout-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expression-layout-toolbar-actions button[data-expression-done] {
    grid-column: 1 / -1;
  }

  .expression-panel-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expression-panel-tools [data-expression-panel-lock] {
    grid-column: 1 / -1;
  }
}