/* ==========================================================================
   Dashboard editor — the edit-mode surface: layout preset picker, the
   draggable widget catalogue, and the removal bin.
   ========================================================================== */
.dashboard-editor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.dashboard-editor.hidden {
  display: none;
}

.dashboard-editor__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dashboard-editor__group--grow {
  flex: 1;
  min-width: 260px;
}

.dashboard-editor__title {
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
}

.dashboard-editor__hint {
  font-size: var(--font-size-small);
  color: var(--color-text-faint);
}

/* == layout preset picker == */
.dashboard-editor__layouts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.layout-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.layout-option:hover {
  border-color: var(--color-border-strong);
}

.layout-option.is-active {
  border-color: var(--color-primary-green);
  background-color: var(--tint-green-10);
  box-shadow: var(--shadow-glow-green);
}

.layout-option__thumb {
  display: grid;
  gap: 2px;
  width: 48px;
  height: 34px;
}

.layout-option__cell {
  background-color: var(--color-border-strong);
  border-radius: 2px;
}

.layout-option.is-active .layout-option__cell {
  background-color: var(--color-primary-green);
}

.layout-option__thumb--stack {
  grid-template-columns: 1fr;
}

.layout-option__thumb--split {
  grid-template-columns: 1fr 1fr;
}

.layout-option__thumb--triptych {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.layout-option__thumb--triptych .layout-option__cell:first-child {
  grid-column: 1 / -1;
}

.layout-option__thumb--hero {
  grid-template-rows: 1.3fr 1fr;
}

.layout-option__thumb--grid {
  grid-template-columns: 1fr;
}

.layout-option__thumb--grid .layout-option__cell {
  background-image: linear-gradient(var(--color-surface) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-surface) 1px, transparent 1px);
  background-size: 10px 9px;
}

.layout-option__name {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-primary-dark);
}

/* == widget catalogue == */
.dashboard-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
  min-height: 88px;
}

.dashboard-catalog.is-drop-target {
  border-color: var(--color-danger);
  background-color: var(--tint-danger-10);
}

.catalog-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.catalog-card:hover {
  border-color: var(--color-primary-green);
  box-shadow: var(--shadow-xs);
}

.catalog-card--dragging {
  opacity: 0.5;
}

.catalog-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: var(--tint-green-16);
  color: var(--color-primary-dark);
}

.catalog-card__icon-svg {
  width: 17px;
  height: 17px;
}

.catalog-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.catalog-card__title {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.catalog-card__desc {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-card__add {
  margin-left: auto;
  color: var(--color-text-faint);
}

.dashboard-catalog__empty {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
  font-size: var(--font-size-small);
  color: var(--color-text-faint);
}

.dashboard-catalog__empty.hidden {
  display: none;
}

/* == removal bin == */
.dashboard-bin {
  display: none;
  position: sticky;
  bottom: var(--space-4);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  box-shadow: var(--shadow-md);
}

.dashboard-home--editing .dashboard-bin {
  display: flex;
}

.dashboard-bin.is-drop-target {
  border-color: var(--color-danger);
  border-style: solid;
  background-color: var(--tint-danger-10);
  color: var(--color-danger);
}

.dashboard-bin__icon {
  width: 18px;
  height: 18px;
}