/* ==========================================================================
   Dashboard home — the board shell, layout presets and drop sections.
   Widget cards live in dashboard_widget.css; the edit-mode catalogue,
   layout picker and bin live in dashboard_editor.css.
   ========================================================================== */
.dashboard-home {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-10);
}

.dashboard-home__customise {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* == board: layout presets arrange the sections == */
.dashboard-board {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.dashboard-board--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dashboard-board--triptych {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "hero hero"
    "primary secondary";
}

.dashboard-board--triptych [data-section="hero"] {
  grid-area: hero;
}

.dashboard-board--triptych [data-section="primary"] {
  grid-area: primary;
}

.dashboard-board--triptych [data-section="secondary"] {
  grid-area: secondary;
}

/* == section == */
.dashboard-board__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 120px;
  padding: var(--space-2);
  border: 1px dashed transparent;
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.dashboard-board__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.dashboard-board__section-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-board__section-hint {
  font-size: var(--font-size-small);
  color: var(--color-text-faint);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* A section's widgets, in a grid of a known number of columns.
   The count is explicit — it used to be `auto-fill` over a minimum width, which
   meant nothing knew how many columns a section actually had. A widget set to
   Medium spans two columns and Large spans three (see dashboard_widget.css), so
   in a one-column section — which Stack is entirely, and which every column of
   Split and Triptych is — a widget spanned columns that were not there. The grid
   invented them, and the cards ran over each other and out of the section. That
   is what the Long/Stack layout was doing.

   With the count declared, a widget can be held to it: the rule below makes a
   widget full-width by default, and only the sections that really do have more
   than one column let the sizes mean anything. */
.dashboard-board__widgets {
  --widget-columns: 1;
  flex: 1;
  display: grid;
  gap: var(--space-4);
  grid-auto-flow: dense;
  grid-template-columns: repeat(var(--widget-columns), minmax(0, 1fr));
  align-content: start;
}

/* The safe default: a widget fills its section's row whatever size it is set to.
   Everything below widens it, never past the columns that exist. */
.dashboard-board__widgets .dashboard-widget {
  grid-column: 1 / -1;
}

/* The dense sections — the whole point of which is that widgets pack. */
.dashboard-board--grid .dashboard-board__widgets,
.dashboard-board--hero [data-section="body"] .dashboard-board__widgets,
.dashboard-board--triptych [data-section="hero"] .dashboard-board__widgets {
  --widget-columns: 3;
}

/* `:where()` so these carry no more weight than the class they name, and the
   narrow-screen rules at the foot of this file can still override them. */
:where(
  .dashboard-board--grid,
  .dashboard-board--hero [data-section="body"],
  .dashboard-board--triptych [data-section="hero"]
) .dashboard-board__widgets .dashboard-widget--small {
  grid-column: span 1;
}

:where(
  .dashboard-board--grid,
  .dashboard-board--hero [data-section="body"],
  .dashboard-board--triptych [data-section="hero"]
) .dashboard-board__widgets .dashboard-widget--medium {
  grid-column: span 2;
}

/* Large is the full width of the section rather than a span of three, so it
   still fits once the count drops on a narrower screen. */
:where(
  .dashboard-board--grid,
  .dashboard-board--hero [data-section="body"],
  .dashboard-board--triptych [data-section="hero"]
) .dashboard-board__widgets .dashboard-widget--large {
  grid-column: 1 / -1;
}

/* The spotlight is two columns: wide enough for a pair of small widgets, and
   anything bigger takes the row. */
.dashboard-board--hero [data-section="spotlight"] .dashboard-board__widgets {
  --widget-columns: 2;
}

:where(.dashboard-board--hero [data-section="spotlight"]) .dashboard-board__widgets .dashboard-widget--small {
  grid-column: span 1;
}

.dashboard-board__section-empty {
  display: none;
  grid-column: 1 / -1;
  padding: var(--space-6) var(--space-3);
  text-align: center;
  font-size: var(--font-size-small);
  color: var(--color-text-faint);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* == edit mode == */
.dashboard-home--editing .dashboard-board__section {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-sunken);
}

.dashboard-home--editing .dashboard-board__section-hint {
  opacity: 1;
}

.dashboard-home--editing .dashboard-board__section-empty:only-child {
  display: block;
}

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

/* == responsive == */

/* Three columns of widgets need the room for three. Below that the dense
   sections drop to two, and the spans above follow because Medium is two
   columns and Large is the whole row. */
@media (max-width: 1200px) {
  .dashboard-board--grid .dashboard-board__widgets,
  .dashboard-board--hero [data-section="body"] .dashboard-board__widgets,
  .dashboard-board--triptych [data-section="hero"] .dashboard-board__widgets {
    --widget-columns: 2;
  }
}

@media (max-width: 900px) {
  .dashboard-board--split,
  .dashboard-board--triptych {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .dashboard-board--triptych [data-section] {
    grid-area: auto;
  }

  /* One column everywhere, and every widget across it — a two-column span in a
     one-column grid is what put the cards on top of each other in the first
     place. Two class names, so this outweighs the `:where()`-scoped size rules
     above without having to repeat their selectors. */
  .dashboard-board .dashboard-board__widgets {
    --widget-columns: 1;
  }

  .dashboard-board__widgets .dashboard-widget {
    grid-column: 1 / -1;
  }
}