/* ─────────────────────────────────────────────────────────────────────────
   Magic UI bento layouts

   Overview screens built from tiles of different sizes on one grid: a
   dashboard home, a record's 360° page, an admin overview. The size of a
   tile says how much it matters; the grid keeps every edge aligned.

   .ms-bento                       the grid (4 columns; 2 under 1100px; 1 under 640px)
     .is-overview                  rows size to their content (the Northwind overview)
     > .w-2 .w-3 .w-4, .h-2 .h-3   spans, on any cell: a .ms-bento-tile or a .ms-card
     .ms-bento-tile                a tile
       .ms-bento-head              eyebrow label + an optional action
       .ms-bento-kpi               the tile's number (proportional figures)
       .ms-bento-delta             signed change vs a named period (.is-up .is-down; good/bad via .is-good .is-bad)
       .ms-bento-foot              pinned to the bottom of the tile
     .is-feature                   the one tile per view that leads (accent wash)
     .is-quiet                     supporting tiles with no frame

   Rules (see docs/10-bento-layouts.md):
   · One feature tile per view, at most. Everything else is a plain tile.
   · A tile holds one idea: a number, a short list, a chart, a record.
   · Tiles never scroll the page sideways; long lists scroll inside the tile.
   · Order tiles by what people check first, top-left to bottom-right.
   ───────────────────────────────────────────────────────────────────────── */

.ms-bento {
  display: grid; grid-template-columns: repeat(var(--bento-cols, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--bento-row, 132px), auto); grid-auto-flow: dense; gap: var(--bento-gap, 12px);
}
.ms-bento.is-overview { grid-auto-rows: auto; grid-auto-flow: row; }
.ms-bento-tile {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding: var(--card-pad, 18px); border-radius: var(--radius-card, var(--r-3xl)); border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--elevation-card, none);
}
.ms-bento > .w-2 { grid-column: span 2; } .ms-bento > .w-3 { grid-column: span 3; } .ms-bento > .w-4 { grid-column: span 4; }
.ms-bento > .h-2 { grid-row: span 2; } .ms-bento > .h-3 { grid-row: span 3; }
.ms-bento-tile.is-feature { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ms-bento-tile.is-quiet { background: transparent; border-style: dashed; }
a.ms-bento-tile, button.ms-bento-tile { color: inherit; text-align: left; cursor: pointer; transition: box-shadow var(--t-base) ease, border-color var(--t-base) ease; }
a.ms-bento-tile:hover, button.ms-bento-tile:hover { border-color: var(--border-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }

.ms-bento-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.ms-bento-label { flex: 1; min-width: 0; font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-bento-head > svg { color: var(--dim); flex: none; }
/* The number: proportional figures at this size (tabular digits look loose). */
.ms-bento-kpi { font-size: 28px; font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1.1; color: var(--text); }
.ms-bento-kpi small { font-size: 14px; font-weight: var(--fw-bold); color: var(--dim); letter-spacing: 0; margin-left: 4px; }
.ms-bento-tile.is-feature .ms-bento-kpi { font-size: 40px; }
.ms-bento-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--dim); }
.ms-bento-delta.is-good { color: var(--success); } .ms-bento-delta.is-bad { color: var(--danger); }
.ms-bento-delta span { color: var(--dim); font-weight: var(--fw-medium); }
.ms-bento-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); color: var(--dim); }
.ms-bento-scroll { flex: 1; min-height: 0; overflow: auto; margin: 0 -6px; padding: 0 6px; }
.ms-bento-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ms-bento-list li { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r-sm); font-size: var(--fs-base); min-width: 0; }
.ms-bento-list li:hover { background: var(--surface-2); }
.ms-bento-list .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-bento-list .meta { flex: none; font-size: var(--fs-sm); color: var(--dim); font-variant-numeric: tabular-nums; }

/* Sparkline slot: a 12-point trend, the last point in the accent. */
.ms-spark { width: 100%; height: 44px; display: block; overflow: visible; }

@media (max-width: 1100px) {
  .ms-bento { --bento-cols: 2; }
  .ms-bento > .w-3, .ms-bento > .w-4 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .ms-bento { --bento-cols: 1; grid-auto-rows: auto; }
  .ms-bento > .w-2, .ms-bento > .w-3, .ms-bento > .w-4 { grid-column: auto; }
  .ms-bento > .h-2, .ms-bento > .h-3 { grid-row: auto; }
}