@keenmate/pure-admin-core 2.7.1 → 2.8.0

package/dist/css/main.css

@@ -16823,25 +16823,31 @@ code {
 /* ========================================
    KPI · Terminal grid
    Bloomberg-style dense panel: mono numbers, status pills, inline SVG
-   sparklines, ▲▼ deltas, segmented view-mode toggle (VALUE/Δ%/TREND).
+   sparklines, ▲▼ deltas, optional segmented tab strip for swapping
+   the body content (different tile sets / grids per tab).
    Shared chrome (header, live, footer, detail popover, spark-dot) is in
    _kpi-base.scss.
    ======================================== */
-/* ----- View-mode toggle (segmented button group) ------------------------ */
+/* ----- Tab strip (segmented button group) ------------------------------
+   Generalised tabs — each `.pa-kpi-terminal__tab` carries a `data-tab`
+   slug that matches a `.pa-kpi-terminal__pane[data-tab="…"]` in the body.
+   JS toggles `.is-active` on the clicked tab + matching pane; tabs and
+   panes are otherwise independent so each pane can hold a completely
+   different grid (different tile count, different grid modifier). */
 .pa-kpi-terminal__controls {
   display: inline-flex;
   align-items: center;
   gap: 1.6rem;
 }
 
-.pa-kpi-terminal__viewtoggle {
+.pa-kpi-terminal__tabs {
   display: inline-flex;
   border: 1px solid var(--pa-border-color);
   border-radius: 0.4rem;
   overflow: hidden;
 }
 
-.pa-kpi-terminal__viewbtn {
+.pa-kpi-terminal__tab {
   background: transparent;
   border: 0;
   color: var(--pa-text-color-2);
@@ -16853,14 +16859,22 @@ code {
   cursor: pointer;
   transition: background-color 0.1s ease-out, color 0.1s ease-out;
 }
-.pa-kpi-terminal__viewbtn:hover {
+.pa-kpi-terminal__tab:hover {
   color: var(--pa-text-color-1);
 }
-.pa-kpi-terminal__viewbtn.is-active {
+.pa-kpi-terminal__tab.is-active {
   background: var(--pa-text-color-1);
   color: var(--pa-card-bg);
 }
 
+/* ----- Pane visibility ------------------------------------------------- */
+.pa-kpi-terminal__pane {
+  display: none;
+}
+.pa-kpi-terminal__pane.is-active {
+  display: block;
+}
+
 /* ----- Grid + tile borders ----------------------------------------------
    Hairline 1px borders between tiles, no gap. Last-row/last-column
    borders suppressed via :nth-last-child / :nth-child selectors. */
@@ -16956,17 +16970,16 @@ code {
   margin-bottom: 0.8rem;
 }
 
-/* ----- Big value with 3-mode swap --------------------------------------
-   Author renders three .pa-kpi-tile__value siblings (data-mode="value" /
-   "delta" / "trend"); the active mode is selected via the
-   .pa-kpi-terminal[data-view="X"] attribute. JS toggles that attribute
-   when the segmented control is clicked. */
+/* ----- Big value -------------------------------------------------------
+   One value per tile — sentiment colour set via `--very-positive` /
+   `--positive` / `--neutral` / `--negative` / `--very-negative` modifier
+   on the value element. */
 .pa-kpi-tile__values {
   margin-bottom: 0.4rem;
 }
 
 .pa-kpi-tile__value {
-  display: none;
+  display: inline-flex;
   align-items: baseline;
   gap: 0.3rem;
   font-family: var(--base-font-family-mono);
@@ -16988,12 +17001,6 @@ code {
   color: var(--pa-very-negative);
 }
 
-.pa-kpi-terminal[data-view=value] .pa-kpi-tile__value[data-mode=value],
-.pa-kpi-terminal[data-view=delta] .pa-kpi-tile__value[data-mode=delta],
-.pa-kpi-terminal[data-view=trend] .pa-kpi-tile__value[data-mode=trend] {
-  display: inline-flex;
-}
-
 .pa-kpi-tile__num {
   font-size: 3.8rem;
   font-weight: 700;
@@ -17078,7 +17085,16 @@ code {
    scanning rather than per-tile depth — no view-mode toggle, no status
    pills. Container queries collapse 4-col → 2-row → 3-row as the card
    narrows.
+
+   Row template uses local SCSS variables for the four column widths
+   (`$spark-col-label`, `$spark-col-chart`, `$spark-col-value`,
+   `$spark-col-delta`) so all responsive overrides reference the same
+   widths — change one and every breakpoint follows. The `--no-delta`
+   modifier drops the rightmost column; the other three are load-bearing
+   (a sparkline list without label, chart, or value is a different
+   design).
    ======================================== */
+/* Per-column track widths — referenced from every template selector. */
 /* Card is a query container so rows react to *card* width, not viewport. */
 .pa-kpi-spark-list {
   container-type: inline-size;
@@ -17101,6 +17117,18 @@ code {
   border-bottom: 0;
 }
 
+/* Modifier: --no-delta — drops the rightmost column. label · chart ·
+   value only. Useful when the chart's slope already conveys direction
+   and the delta would be redundant. Hides the delta element and shrinks
+   the row template to 3 columns. */
+.pa-kpi-spark-list--no-delta .pa-kpi-spark-row {
+  grid-template-columns: minmax(14rem, 28%) minmax(10rem, 1fr) minmax(8rem, 18%);
+}
+
+.pa-kpi-spark-list--no-delta .pa-kpi-spark-row__delta {
+  display: none;
+}
+
 /* Mid-narrow card (1×3 page-grid + 45% column): stack to 2 rows.
    Label/value/delta on top, full-width chart below. Default order is
    value-above-chart; use .pa-kpi-spark-list--chart-first to flip. */
@@ -17152,6 +17180,16 @@ code {
   .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__delta {
     align-self: baseline;
   }
+  /* --no-delta at mid-narrow: 2-row layout, top row is label+value only. */
+  .pa-kpi-spark-list--no-delta .pa-kpi-spark-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "label value" "chart chart";
+  }
+  /* --no-delta + --chart-first: 3-row single-column stack. */
+  .pa-kpi-spark-list--no-delta.pa-kpi-spark-list--chart-first .pa-kpi-spark-row {
+    grid-template-columns: 1fr;
+    grid-template-areas: "label" "chart" "value";
+  }
 }
 /* Very narrow card (~280–360px, 25% page-grid stress test): force the
    chart-first 3-row layout regardless of modifier. */
@@ -17180,6 +17218,11 @@ code {
     grid-area: delta;
     align-self: baseline;
   }
+  /* --no-delta at very-narrow: 3-row single-column stack (no delta cell). */
+  .pa-kpi-spark-list--no-delta .pa-kpi-spark-row {
+    grid-template-columns: 1fr;
+    grid-template-areas: "label" "chart" "value";
+  }
 }
 /* ----- Cell typography -------------------------------------------------- */
 .pa-kpi-spark-row__label {
@@ -17284,43 +17327,86 @@ code {
    Goal-oriented progress bars. Each KPI shows label · value, a bar with a
    target tick, and a 0 · tgt scale below. Bar fill = value/target * 100%,
    capped visually so overshoots are signalled by colour, not overflow.
-   ======================================== */
-.pa-kpi-gauge-list {
-  container-type: inline-size;
-}
 
+   Layout is a cell-min-driven `auto-fit` grid — cells stay at least
+   `--pa-kpi-gauge-cell-min` wide, the grid fits as many columns as the
+   container allows, and the responsive cascade is intrinsic to the grid
+   template (no `@container` queries). `--max-N` cap modifiers cap the
+   column count at N while still collapsing below the cell-min × N
+   threshold. Same pattern as `_kpi-editorial-minimal.scss`.
+   ======================================== */
 .pa-kpi-gauge-list__body {
   padding: 0;
 }
 
-/* 2-column internal grid by default; collapses to 1-col when card narrows. */
+/* ----- Grid + hairline rules -------------------------------------------
+   Cell-min-driven responsive layout. Override `--pa-kpi-gauge-cell-min`
+   per instance to change density (smaller min → more columns at the same
+   container width).
+
+   `gap: 1px` over `background: var(--pa-border-color)` with each tile
+   painting `background: var(--pa-card-bg)` on top — only the gap shows
+   through, giving single-pixel hairlines on every interior boundary
+   regardless of column count. The card's outer border supplies the
+   perimeter. Replaces the previous per-tile `border-right` +
+   `border-bottom` + nth-child suppression machinery, which only worked
+   for the hardcoded 2-col layout. */
 .pa-kpi-gauge-list__grid {
   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--pa-kpi-gauge-cell-min, 20rem), 1fr));
+  gap: 1px;
+  background: var(--pa-border-color);
+}
+
+/* Modifier: force exactly 2 columns regardless of cell-min or container
+   width. For placements wanting a deterministic 2×N layout. */
+.pa-kpi-gauge-list__grid--2col {
   grid-template-columns: repeat(2, 1fr);
 }
 
-@container (max-width: 600px) {
-  .pa-kpi-gauge-list__grid {
-    grid-template-columns: 1fr;
-  }
+/* Cap-at-N modifiers: combine auto-fit with a ceiling on the column
+   count. Cells stay at least --pa-kpi-gauge-cell-min wide, but the grid
+   never exceeds N columns even when the container is wide enough to fit
+   more. Below the cell-min × N threshold the grid still collapses
+   responsively — these modifiers cap the maximum, not the minimum.
+
+   How the calc reads: each track's effective min is
+     max(cell-min, (container − total-gap) / N)
+   On a wide container the calc wins (so tracks grow, you stay at N).
+   On a narrow container cell-min wins (so the grid collapses).
+
+   Pick the cap so your item count divides into clean rows. */
+.pa-kpi-gauge-list__grid--max-2 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), (100% - 1px) / 2), 1fr));
+}
+
+.pa-kpi-gauge-list__grid--max-3 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), (100% - 2px) / 3), 1fr));
 }
+
+.pa-kpi-gauge-list__grid--max-4 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), (100% - 3px) / 4), 1fr));
+}
+
+.pa-kpi-gauge-list__grid--max-5 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), (100% - 4px) / 5), 1fr));
+}
+
+.pa-kpi-gauge-list__grid--max-6 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-gauge-cell-min, 20rem), (100% - 5px) / 6), 1fr));
+}
+
 /* ----- Gauge tile (label/value head · bar · 0/tgt scale) ---------------- */
 .pa-kpi-gauge {
   position: relative;
+  background: var(--pa-card-bg);
   padding: 1.6rem 2rem;
-  border-bottom: 1px solid var(--pa-border-color);
-  border-right: 1px solid var(--pa-border-color);
+  min-width: 0;
   /* Per-tile bar colour cascade — modifiers below set the var, the fill
      reads it. Cleaner than per-modifier-per-element rules; host apps can
      override at the tile level via inline style="--pa-kpi-bar-color: …". */
   --pa-kpi-bar-color: var(--pa-positive);
 }
-.pa-kpi-gauge:nth-child(2n) {
-  border-right: 0;
-}
-.pa-kpi-gauge:nth-last-child(-n+2) {
-  border-bottom: 0;
-}
 .pa-kpi-gauge--positive {
   --pa-kpi-bar-color: var(--pa-positive);
 }
@@ -17334,17 +17420,6 @@ code {
   --pa-kpi-bar-color: color-mix(in srgb, var(--pa-text-color-1) 70%, transparent);
 }
 
-@container (max-width: 600px) {
-  .pa-kpi-gauge {
-    border-right: 0;
-  }
-  .pa-kpi-gauge:nth-last-child(-n+2) {
-    border-bottom: 1px solid var(--pa-border-color);
-  }
-  .pa-kpi-gauge:last-child {
-    border-bottom: 0;
-  }
-}
 /* ----- Head: label left, value right (baseline-aligned) ----------------- */
 .pa-kpi-gauge__head {
   display: flex;
@@ -17442,13 +17517,29 @@ code {
   padding: 1.6rem;
 }
 
-/* ----- Layout: hero left, rail right ------------------------------------ */
+/* ----- Layout: hero left, rail right ------------------------------------
+   Default split is 1:1 (50% hero / 50% rail). Modifiers below shift the
+   weight to the hero, which is the more common "executive dashboard"
+   shape — one big headline, supporting tiles compressed into a narrower
+   rail. Pick a modifier per instance; the markup stays unchanged. */
 .pa-kpi-hero-list__layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.4rem;
 }
 
+/* Hero 2/3, rail 1/3. */
+.pa-kpi-hero-list__layout--hero-2-3 {
+  grid-template-columns: 2fr 1fr;
+}
+
+/* Hero 3/4, rail 1/4 — hero-dominant; rail is a thin sidebar. */
+.pa-kpi-hero-list__layout--hero-3-4 {
+  grid-template-columns: 3fr 1fr;
+}
+
+/* Narrow card → stack to single column. Overrides any --hero-N-M modifier
+   that lives on the same element. */
 @container (max-width: 700px) {
   .pa-kpi-hero-list__layout {
     grid-template-columns: 1fr;
@@ -17660,23 +17751,33 @@ code {
 /* ========================================
    KPI · Bento layout
    Magazine-style asymmetric tile sizing with sparklines as soft background
-   fills behind the values. 6 tiles arranged on a 6-col × 3-row grid
+   fills behind the values. Default 6-tile layout on a 6-col × 3-row grid
    (hero left-half × 2 rows, two stacked right-half × 2 rows, three equal
-   tiles bottom row). Tile placement by source order via :nth-child.
+   tiles bottom row). Tile placement is by source order via :nth-child, so
+   markup stays identical across layout modifiers.
+
+   Layout modifiers (below) swap `grid-template-areas` to provide
+   alternative compositions:
+     · default (no modifier) — 6 tiles, hero on the left
+     · `--hero-right`         — 6 tiles, mirror of default (hero on right)
+     · `--5-tile`             — 5 tiles, hero + 4 supporting
+   Row height is a CSS variable (`--pa-kpi-bento-row-height`, default
+   `12rem`) so authors can dial tile height per instance.
    ======================================== */
 .pa-kpi-bento {
   container-type: inline-size;
+  --pa-kpi-bento-row-height: 12rem;
 }
 
 .pa-kpi-bento__body {
   padding: 1.6rem;
 }
 
-/* ----- Bento grid ------------------------------------------------------- */
+/* ----- Bento grid (default: 6 tiles, hero on left) ---------------------- */
 .pa-kpi-bento__grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: 12rem 12rem 12rem;
+  grid-template-rows: repeat(3, var(--pa-kpi-bento-row-height));
   grid-template-areas: "hero hero hero a    a    a" "hero hero hero b    b    b" "c    c    d    d    e    e";
   gap: 1rem;
 }
@@ -17699,8 +17800,27 @@ code {
   grid-area: e;
 }
 
-/* Narrow card → stack everything single column. Hero modifier still
-   bumps the value font-size so it reads as the headline. */
+/* Modifier: --hero-right — mirror of default. Hero on the right half,
+   two stacked tiles on the left of rows 1-2, three equal tiles below.
+   Same 6-tile contract as default; only the template flips. Source
+   order stays unchanged (1st = hero, 2nd = a, …). */
+.pa-kpi-bento__grid--hero-right {
+  grid-template-areas: "a    a    a    hero hero hero" "b    b    b    hero hero hero" "c    c    d    d    e    e";
+}
+
+/* Modifier: --5-tile — hero + 4 supporting. Hero spans the left half ×
+   2 rows, two stacked tiles on the right (rows 1-2), two equal halves on
+   the bottom row. Requires exactly 5 tiles — a 6th tile (if present)
+   would be auto-placed in a new row and break the layout. */
+.pa-kpi-bento__grid--5-tile {
+  grid-template-areas: "hero hero hero a    a    a" "hero hero hero b    b    b" "c    c    c    d    d    d";
+}
+
+/* Narrow card → stack everything single column. Resets `grid-area: auto`
+   on every tile so the same markup works regardless of which layout
+   modifier the grid carries (the @container override sets
+   `grid-template-areas: none` and the `grid-area: auto` on nth-child
+   together neutralise any modifier's template). */
 @container (max-width: 700px) {
   .pa-kpi-bento__grid {
     grid-template-columns: 1fr;
@@ -17867,12 +17987,20 @@ code {
 
 /* ========================================
    KPI · Numeric strip (densest)
-   Tabular "spreadsheet-style" table card with metric/now/prev/Δ%/vs target
-   columns — most data per pixel, no chart chrome. Each row is its own
-   grid sharing the same column template so cells align across rows
+   Tabular "spreadsheet-style" table card with metric / now / prev / Δ% /
+   target columns — most data per pixel, no chart chrome. Each row is its
+   own grid sharing the same column template so cells align across rows
    without needing subgrid. Wide-only by design — no responsive collapse;
    narrow placements should use Comparison gauges instead.
+
+   Column contract: `metric` + `now` are always present; `prev`, `delta`,
+   and `target` are independently optional via toggle modifiers on the
+   strip (`--no-prev`, `--no-delta`, `--no-target`). Modifiers compose, so
+   the visible column count ranges from 2 (all three optional columns
+   dropped) to 5 (none dropped). Each combination has its own template
+   selector below so the grid tracks always match the visible cell count.
    ======================================== */
+/* Per-column track widths — referenced from every template selector. */
 .pa-kpi-strip__body {
   padding: 0;
 }
@@ -17881,7 +18009,7 @@ code {
 .pa-kpi-strip__row,
 .pa-kpi-strip__head-row {
   display: grid;
-  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); /* target (bar + pct stacked) */
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
   column-gap: 1.6rem;
   align-items: center;
   position: relative;
@@ -18018,16 +18146,76 @@ code {
   line-height: 1;
 }
 
-/* ----- --no-prev: 4-col layout (metric / now / Δ% / target) -------------
-   Useful for narrow placements; markup omits the prev cells. */
+/* ----- Toggle modifiers ------------------------------------------------
+   `--no-prev`, `--no-delta`, `--no-target` are independently composable.
+   Each hides its column's cells (data + header) and the matching template
+   selector below adjusts `grid-template-columns` to the visible cell
+   count, so source order (metric, now, prev, delta, target) is preserved
+   and the remaining cells slot into the right tracks.
+
+   `metric` and `now` are mandatory — no toggle drops them. If a strip
+   doesn't need a focal value, it's a different design (use comparison
+   gauges or editorial-minimal). */
+.pa-kpi-strip--no-prev .pa-kpi-strip__prev,
+.pa-kpi-strip--no-prev .pa-kpi-strip__head--prev {
+  display: none;
+}
+
+.pa-kpi-strip--no-delta .pa-kpi-strip__delta,
+.pa-kpi-strip--no-delta .pa-kpi-strip__head--delta {
+  display: none;
+}
+
+.pa-kpi-strip--no-target .pa-kpi-strip__target,
+.pa-kpi-strip--no-target .pa-kpi-strip__head--target {
+  display: none;
+}
+
+/* ----- Grid templates per visible-column combination -------------------
+   8 combos (1 default + 3 single-drops + 3 double-drops + 1 triple-drop).
+   Each lists the visible columns in source order with their declared
+   `$strip-col-*` width. */
+/* 4-col: one optional column dropped */
 .pa-kpi-strip--no-prev .pa-kpi-strip__row,
 .pa-kpi-strip--no-prev .pa-kpi-strip__head-row {
   grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.6fr);
 }
 
+.pa-kpi-strip--no-delta .pa-kpi-strip__row,
+.pa-kpi-strip--no-delta .pa-kpi-strip__head-row {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.6fr);
+}
+
+.pa-kpi-strip--no-target .pa-kpi-strip__row,
+.pa-kpi-strip--no-target .pa-kpi-strip__head-row {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
+}
+
+/* 3-col: two optional columns dropped */
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-delta .pa-kpi-strip__row,
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-delta .pa-kpi-strip__head-row {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.6fr);
+}
+
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-target .pa-kpi-strip__row,
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-target .pa-kpi-strip__head-row {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr);
+}
+
+.pa-kpi-strip--no-delta.pa-kpi-strip--no-target .pa-kpi-strip__row,
+.pa-kpi-strip--no-delta.pa-kpi-strip--no-target .pa-kpi-strip__head-row {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr);
+}
+
+/* 2-col: all three optional columns dropped (metric + now only) */
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-delta.pa-kpi-strip--no-target .pa-kpi-strip__row,
+.pa-kpi-strip--no-prev.pa-kpi-strip--no-delta.pa-kpi-strip--no-target .pa-kpi-strip__head-row {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
+}
+
 /* ========================================
    KPI · Editorial minimal
-   Six KPIs in a 2×3 / 3×2 grid with hairline rules between cells,
+   KPI tiles in a responsive grid with hairline rules between cells,
    generous space, and an extra-light-weight number as the focal point per
    tile. No charts, no pills — the design's whole identity is the thin
    numeral. Renders as a table card (zero card-body padding) so hairlines
@@ -18038,38 +18226,74 @@ code {
 }
 
 /* ----- Grid + hairline rules -------------------------------------------
+   Cell-min-driven responsive layout: cells stay at least
+   --pa-kpi-edit-cell-min wide; the grid fits as many columns as the
+   container allows. No @container queries — `auto-fit + minmax` handles
+   the cascade intrinsically. Override the min per instance to change
+   density (smaller min → more columns at the same container width).
+
    `gap: 1px` over `background: var(--pa-border-color)` with each tile
-   painting `background: var(--pa-card-bg)` on top. Only the gap shows
-   through, giving perfect single-pixel hairlines on every interior
-   boundary (vertical and horizontal) for free, regardless of column
-   count. The card's outer border supplies the perimeter. */
+   painting `background: var(--pa-card-bg)` on top — only the gap shows
+   through, giving single-pixel hairlines on every interior boundary
+   regardless of column count. The card's outer border supplies the
+   perimeter. */
 .pa-kpi-edit__grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(var(--pa-kpi-edit-cell-min, 14rem), 1fr));
   gap: 1px;
   background: var(--pa-border-color);
-  container-type: inline-size;
 }
 
-@container (max-width: 640px) {
-  .pa-kpi-edit__grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@container (max-width: 360px) {
-  .pa-kpi-edit__grid {
-    grid-template-columns: 1fr;
-  }
-}
-/* Modifier: force 2-col regardless of card width. For placements wanting
-   a deterministic 2×N layout (e.g. 4 tiles as clean 2×2) instead of
-   relying on the container query to land in the right bucket. */
+/* Modifier: force exactly 2 columns regardless of cell-min or container
+   width. For placements wanting a deterministic 2×N layout (e.g. 4 tiles
+   as a clean 2×2 even when the container is wide enough for more). */
 .pa-kpi-edit__grid--2col {
   grid-template-columns: repeat(2, 1fr);
 }
 
-/* ----- Tile (editorial spacing leans on the 2.4rem padding) ------------- */
+/* Cap-at-N modifiers: combine auto-fit with a ceiling on the column
+   count. Cells stay at least --pa-kpi-edit-cell-min wide, but the grid
+   never exceeds N columns even when the container is wide enough to fit
+   more. Below the cell-min × N threshold the grid still collapses
+   responsively — these modifiers cap the maximum, not the minimum.
+
+   How the calc reads: each track's effective min is
+     max(cell-min, (container − total-gap) / N)
+   On a wide container the calc wins (so tracks grow, you stay at N).
+   On a narrow container cell-min wins (so the grid collapses).
+
+   Why this matters for the gray-void edge case: `auto-fit` keeps as many
+   tracks as fit the container, then only collapses tracks empty across
+   the *whole* grid. With 6 items at 4-col auto-fit, tracks 1–4 all have
+   row-1 items, so row 2's tracks 3–4 stay (and show the gap background).
+   Capping at 3 makes 6 items pack 3×2 cleanly. Pick the cap so your item
+   count divides into clean rows. */
+.pa-kpi-edit__grid--max-2 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), (100% - 1px) / 2), 1fr));
+}
+
+.pa-kpi-edit__grid--max-3 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), (100% - 2px) / 3), 1fr));
+}
+
+.pa-kpi-edit__grid--max-4 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), (100% - 3px) / 4), 1fr));
+}
+
+.pa-kpi-edit__grid--max-5 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), (100% - 4px) / 5), 1fr));
+}
+
+.pa-kpi-edit__grid--max-6 {
+  grid-template-columns: repeat(auto-fit, minmax(max(var(--pa-kpi-edit-cell-min, 14rem), (100% - 5px) / 6), 1fr));
+}
+
+/* ----- Tile (editorial spacing leans on the 2.4rem padding) -------------
+   Per-cell container: the value's `cqi`-based font-size scales with
+   *this* tile's width, not the whole grid's. Keeps typography legible as
+   the grid packs more cells into the same row. */
 .pa-kpi-edit__tile {
+  container-type: inline-size;
   background: var(--pa-card-bg);
   padding: 2.4rem 2rem;
   display: flex;
@@ -18101,11 +18325,13 @@ code {
      "monospace at low contrast".
    - font-weight: 200 (extra-light). 300 was tested first but didn't read
      distinctly enough as "light" against the body's 400 default.
-   - clamp() lets the number shrink in narrow 25% page-grid cells without
-     manual breakpoints. */
+   - clamp() lets the number shrink in narrow cells without manual
+     breakpoints. `cqi` measures per-cell (tile is a container) so the
+     value tracks each cell's actual width as the grid packs more
+     columns into a wider container. */
 .pa-kpi-edit__value {
   font-family: var(--base-font-family);
-  font-size: clamp(3.2rem, 18cqi, 5.6rem);
+  font-size: clamp(3.2rem, 22cqi, 5.6rem);
   font-weight: 200;
   letter-spacing: -0.02em;
   line-height: 1;
@@ -19062,3 +19288,314 @@ html.pa-font-base-12 {
 .text-end {
   text-align: end;
 }
+
+/* Pure Admin Visual Framework - Core Styles */
+:root,
+.pa-mode-light,
+.pa-mode-dark {
+  --pa-text-strong: color-mix(in srgb, var(--pa-text-color-1) 85%, transparent);
+  --pa-text-secondary: color-mix(in srgb, var(--pa-text-color-1) 70%, transparent);
+  --pa-text-tertiary: color-mix(in srgb, var(--pa-text-color-1) 55%, transparent);
+  --pa-surface-hover: color-mix(in srgb, var(--pa-text-color-1) 4%, transparent);
+  --pa-surface-track: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
+}
+
+:root {
+  --base-accent-color: #007bff;
+  --base-accent-color-hover: rgb(51, 149.4, 255);
+  --base-accent-color-active: rgb(102, 175.8, 255);
+  --base-accent-color-light: rgba(0, 123, 255, 0.05);
+  --base-accent-color-light-hover: rgba(0, 123, 255, 0.12);
+  --base-text-color-1: #2c3e50;
+  --base-text-color-2: #6c757d;
+  --base-text-color-3: #7a8a99;
+  --base-text-color-4: #a3b1bf;
+  --base-text-color-on-accent: #ffffff;
+  --base-main-bg: #ffffff;
+  --base-page-bg: #f8f9fa;
+  --base-subtle-bg: #e9ecef;
+  --base-inverse-bg: #2c3e50;
+  --base-overlay-bg: rgba(0, 0, 0, 0.5);
+  --base-shadow-color: rgba(0, 0, 0, 0.15);
+  --base-hover-bg: #e9ecef;
+  --base-active-bg: rgb(218.2368421053, 223.25, 228.2631578947);
+  --base-disabled-bg: #e9ecef;
+  --base-elevated-bg: #f5f5f5;
+  --base-surface-1: #ffffff;
+  --base-surface-2: #f8f9fa;
+  --base-surface-3: #e9ecef;
+  --base-surface-inverse: #2c3e50;
+  --base-primary-bg: #ffffff;
+  --base-primary-bg-hover: rgb(242.25, 242.25, 242.25);
+  --base-border-color: #e1e5e9;
+  --base-border: 1px solid #e1e5e9;
+  --base-input-bg: #ffffff;
+  --base-input-color: #495057;
+  --base-input-border: 1px solid #ced4da;
+  --base-input-border-hover: 1px solid #b8bfc6;
+  --base-input-border-focus: 1px solid #007bff;
+  --base-input-placeholder-color: #a3b1bf;
+  --base-input-bg-disabled: rgba(255, 255, 255, 0.5);
+  --base-input-size-xs-height: 3.1;
+  --base-input-size-sm-height: 3.3;
+  --base-input-size-md-height: 3.5;
+  --base-input-size-lg-height: 3.8;
+  --base-input-size-xl-height: 4.1;
+  --base-dropdown-bg: #ffffff;
+  --base-dropdown-border: 1px solid #e1e5e9;
+  --base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  --base-tooltip-bg: #2c3e50;
+  --base-tooltip-text-color: #ffffff;
+  --base-success-color: #22c55e;
+  --base-success-color-hover: rgb(26.4935064935, 153.5064935065, 73.2467532468);
+  --base-success-bg-light: rgba(34, 197, 94, 0.1);
+  --base-success-bg-subtle: rgba(34, 197, 94, 0.08);
+  --base-success-border: rgba(34, 197, 94, 0.2);
+  --base-success-text: #155724;
+  --base-success-text-light: #d4edda;
+  --base-text-on-success: #ffffff;
+  --base-danger-color: #ef4444;
+  --base-danger-color-hover: rgb(234.9802955665, 21.0197044335, 21.0197044335);
+  --base-danger-bg-light: rgba(239, 68, 68, 0.1);
+  --base-danger-bg-subtle: rgba(239, 68, 68, 0.08);
+  --base-danger-border: rgba(239, 68, 68, 0.2);
+  --base-danger-text: #721c24;
+  --base-danger-text-light: #f8d7da;
+  --base-text-on-danger: #ffffff;
+  --base-warning-color: #f97316;
+  --base-warning-color-hover: rgb(214.4769874477, 91.129707113, 5.5230125523);
+  --base-warning-bg-light: rgba(249, 115, 22, 0.1);
+  --base-warning-bg-subtle: rgba(249, 115, 22, 0.08);
+  --base-warning-border: rgba(249, 115, 22, 0.2);
+  --base-warning-text: #856404;
+  --base-warning-text-light: #fff3cd;
+  --base-text-on-warning: #212529;
+  --base-info-color: #17a2b8;
+  --base-info-color-hover: rgb(17.3333333333, 122.0869565217, 138.6666666667);
+  --base-info-bg-light: rgba(23, 162, 184, 0.1);
+  --base-info-bg-subtle: rgba(23, 162, 184, 0.08);
+  --base-info-border: rgba(23, 162, 184, 0.2);
+  --base-info-text: #0c5460;
+  --base-info-text-light: #d1ecf1;
+  --base-text-on-info: #ffffff;
+  --base-hover-overlay: rgba(0, 0, 0, 0.04);
+  --base-active-overlay: rgba(0, 0, 0, 0.08);
+  --base-focus-ring-color: #007bff;
+  --base-focus-ring-width: 3px;
+  --base-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+  --base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+  --base-font-size-2xs: 1;
+  --base-font-size-xs: 1.2;
+  --base-font-size-sm: 1.4;
+  --base-font-size-base: 1.6;
+  --base-font-size-lg: 1.8;
+  --base-font-size-xl: 2;
+  --base-font-size-2xl: 2.4;
+  --base-font-weight-normal: 400;
+  --base-font-weight-medium: 500;
+  --base-font-weight-semibold: 600;
+  --base-font-weight-bold: 700;
+  --base-line-height-tight: 1.25;
+  --base-line-height-normal: 1.5;
+  --base-line-height-relaxed: 1.75;
+  --base-border-radius-sm: 0.4;
+  --base-border-radius-md: 0.6;
+  --base-border-radius-lg: 0.8;
+  --pa-main-bg: #f8f9fa;
+  --pa-page-bg: #f8f9fa;
+  --pa-subtle-bg: #ffffff;
+  --pa-text-color-1: #2c3e50;
+  --pa-text-color-2: #6c757d;
+  --pa-accent: #007bff;
+  --pa-accent-hover: rgba(0, 123, 255, 0.12);
+  --pa-accent-light: color-mix(in srgb, var(--pa-accent) 5%, transparent);
+  --pa-link-color: var(--pa-accent);
+  --pa-link-color-hover: color-mix(in srgb, var(--pa-link-color), currentColor 50%);
+  --pa-link-color-visited: var(--pa-link-color);
+  --pa-border-color: #e1e5e9;
+  --pa-success: #22c55e;
+  --pa-warning: #f97316;
+  --pa-danger: #ef4444;
+  --pa-info: #17a2b8;
+  --pa-very-positive: #16a34a;
+  --pa-positive: var(--pa-success);
+  --pa-neutral: #9ca3af;
+  --pa-negative: var(--pa-danger);
+  --pa-very-negative: #dc2626;
+  --pa-chart-trendline-height: 3rem;
+  --pa-chart-trendline-stroke: 2.1;
+  --pa-detail-bg: rgba(15, 17, 21, 0.97);
+  --pa-detail-text: #ffffff;
+  --pa-detail-row-label: rgba(255, 255, 255, 0.75);
+  --pa-detail-title: rgba(255, 255, 255, 0.55);
+  --pa-detail-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.55);
+  --pa-header-bg: #ffffff;
+  --pa-header-border-color: #e1e5e9;
+  --pa-header-text: #2c3e50;
+  --pa-header-text-secondary: #6c757d;
+  --pa-header-profile-name-color: #2c3e50;
+  --pa-sidebar-bg: #f8f9fa;
+  --pa-sidebar-text: #2c3e50;
+  --pa-sidebar-text-secondary: #6c757d;
+  --pa-sidebar-submenu-bg: #e9ecef;
+  --pa-sidebar-submenu-hover-bg: rgb(218.2368421053, 223.25, 228.2631578947);
+  --pa-sidebar-submenu-active-bg: rgb(203.4736842105, 210.5, 217.5263157895);
+  --pa-sidebar-submenu-active-text: #2c3e50;
+  --pa-footer-bg: #ffffff;
+  --pa-footer-border-color: #e1e5e9;
+  --pa-btn-primary-bg: #007bff;
+  --pa-btn-primary-bg-hover: rgb(51, 149.4, 255);
+  --pa-btn-primary-bg-light: color-mix(in srgb, var(--pa-btn-primary-bg) 5%, transparent);
+  --pa-btn-primary-text: #ffffff;
+  --pa-btn-secondary-bg: #6c757d;
+  --pa-btn-secondary-bg-hover: #545b62;
+  --pa-btn-secondary-text: #ffffff;
+  --pa-btn-secondary-outline-color: var(--pa-btn-secondary-bg);
+  --pa-btn-success-bg: var(--pa-success);
+  --pa-btn-success-bg-hover: rgb(26.4935064935, 153.5064935065, 73.2467532468);
+  --pa-btn-success-text: #ffffff;
+  --pa-btn-danger-bg: var(--pa-danger);
+  --pa-btn-danger-bg-hover: rgb(234.9802955665, 21.0197044335, 21.0197044335);
+  --pa-btn-danger-text: #ffffff;
+  --pa-btn-warning-bg: var(--pa-warning);
+  --pa-btn-warning-bg-hover: rgb(214.4769874477, 91.129707113, 5.5230125523);
+  --pa-btn-warning-text: #212529;
+  --pa-btn-info-bg: var(--pa-info);
+  --pa-btn-info-bg-hover: rgb(17.3333333333, 122.0869565217, 138.6666666667);
+  --pa-btn-info-text: #ffffff;
+  --pa-btn-light-bg: #f8f9fa;
+  --pa-btn-light-bg-hover: #e9ecef;
+  --pa-btn-light-text: #2c3e50;
+  --pa-btn-dark-bg: #343a40;
+  --pa-btn-dark-bg-hover: #1d2124;
+  --pa-btn-dark-text: #ffffff;
+  --pa-success-bg: var(--pa-success);
+  --pa-success-bg-hover: rgb(26.4935064935, 153.5064935065, 73.2467532468);
+  --pa-success-bg-light: color-mix(in srgb, var(--pa-success) 10%, transparent);
+  --pa-success-bg-subtle: color-mix(in srgb, var(--pa-success) 8%, transparent);
+  --pa-success-border: color-mix(in srgb, var(--pa-success) 20%, transparent);
+  --pa-success-text: #155724;
+  --pa-success-text-light: #d4edda;
+  --pa-danger-bg: var(--pa-danger);
+  --pa-danger-bg-hover: rgb(234.9802955665, 21.0197044335, 21.0197044335);
+  --pa-danger-bg-light: color-mix(in srgb, var(--pa-danger) 10%, transparent);
+  --pa-danger-bg-subtle: color-mix(in srgb, var(--pa-danger) 8%, transparent);
+  --pa-danger-border: color-mix(in srgb, var(--pa-danger) 20%, transparent);
+  --pa-danger-text: #721c24;
+  --pa-danger-text-light: #f8d7da;
+  --pa-warning-bg: var(--pa-warning);
+  --pa-warning-bg-hover: rgb(214.4769874477, 91.129707113, 5.5230125523);
+  --pa-warning-bg-light: color-mix(in srgb, var(--pa-warning) 10%, transparent);
+  --pa-warning-bg-subtle: color-mix(in srgb, var(--pa-warning) 8%, transparent);
+  --pa-warning-border: color-mix(in srgb, var(--pa-warning) 20%, transparent);
+  --pa-warning-text: #856404;
+  --pa-warning-text-light: #fff3cd;
+  --pa-info-bg: var(--pa-info);
+  --pa-info-bg-hover: rgb(17.3333333333, 122.0869565217, 138.6666666667);
+  --pa-info-bg-light: color-mix(in srgb, var(--pa-info) 10%, transparent);
+  --pa-info-bg-subtle: color-mix(in srgb, var(--pa-info) 8%, transparent);
+  --pa-info-border: color-mix(in srgb, var(--pa-info) 20%, transparent);
+  --pa-info-text: #0c5460;
+  --pa-info-text-light: #d1ecf1;
+  --pa-card-bg: #ffffff;
+  --pa-card-header-bg: #f8f9fa;
+  --pa-card-footer-bg: #ffffff;
+  --pa-card-tabs-bg: #f8f9fa;
+  --pa-input-bg: #ffffff;
+  --pa-input-border: #ced4da;
+  --pa-input-text: #495057;
+  --pa-input-focus-border-color: #007bff;
+  --pa-select-focus-border-color: #007bff;
+  --pa-textarea-focus-border-color: #007bff;
+  --pa-checkbox-border-color: #e1e5e9;
+  --pa-checkbox-border-color-hover: #007bff;
+  --pa-checkbox-border-color-checked: #007bff;
+  --pa-checkbox-bg: #ffffff;
+  --pa-checkbox-bg-checked: #007bff;
+  --pa-checkbox-bg-indeterminate: #007bff;
+  --pa-checkbox-checkmark-color: white;
+  --pa-checkbox-focus-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+  --pa-input-group-prepend-bg: #6c757d;
+  --pa-input-group-prepend-text: #6c757d;
+  --pa-input-group-append-bg: #6c757d;
+  --pa-input-group-append-text: #6c757d;
+  --pa-table-bg: #ffffff;
+  --pa-table-header-bg: #f8f9fa;
+  --pa-table-stripe: #f8f9fa;
+  --pa-table-hover-bg: #f8f9fa;
+  --pa-table-hover-accent-color: #007bff;
+  --pa-modal-overlay-bg: rgba(0, 0, 0, 0.5);
+  --pa-modal-content-bg: #ffffff;
+  --pa-badge-success-bg: #d4edda;
+  --pa-badge-success-text: #155724;
+  --pa-badge-warning-bg: #fff3cd;
+  --pa-badge-warning-text: #856404;
+  --pa-badge-info-bg: #d1ecf1;
+  --pa-badge-info-text: #0c5460;
+  --pa-badge-danger-bg: #f8d7da;
+  --pa-badge-danger-text: #721c24;
+  --pa-composite-badge-icon-bg: #6c757d;
+  --pa-composite-badge-label-bg: #e9ecef;
+  --pa-composite-badge-label-text: #2c3e50;
+  --pa-composite-badge-label-hover-bg: #e9ecef;
+  --pa-tooltip-bg: #2c3e50;
+  --pa-tooltip-text: #ffffff;
+  --pa-popover-content-bg: #ffffff;
+  --pa-popover-text-light: #ffffff;
+  --pa-popover-text-dark: #000000;
+  --pa-loader-overlay-bg: rgba(255, 255, 255, 0.8);
+  --pa-profile-overlay-bg: rgba(0, 0, 0, 0.3);
+  --pa-detail-panel-overlay-bg: rgba(0, 0, 0, 0.3);
+  --pa-detail-panel-selected-bg: rgba(0, 123, 255, 0.08);
+  --pa-detail-panel-z-index: 4500;
+  --pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.5);
+  --pa-command-palette-item-hover-bg: rgba(0, 123, 255, 0.05);
+  --pa-command-palette-item-active-bg: rgba(0, 123, 255, 0.1);
+  --pa-command-palette-highlight-bg: rgba(0, 123, 255, 0.2);
+  --pa-command-palette-highlight-text: #007bff;
+  --pa-command-palette-key-bg: #ffffff;
+  --pa-command-palette-key-text: #2c3e50;
+  --pa-command-palette-key-font-size: 1.2rem;
+  --pa-command-palette-key-font-weight: 600;
+  --pa-multiselect-dropdown-bg: #ffffff;
+  --pa-multiselect-dropdown-border: #e1e5e9;
+  --pa-multiselect-dropdown-text: #2c3e50;
+  --pa-multiselect-hint-bg: #f8f9fa;
+  --pa-multiselect-hint-border: #e1e5e9;
+  --pa-multiselect-option-hover-bg: #f8f9fa;
+  --pa-multiselect-pill-bg: rgba(0, 123, 255, 0.05);
+  --pa-multiselect-pill-border: #007bff;
+  --pa-color-1: transparent;
+  --pa-color-2: transparent;
+  --pa-color-3: transparent;
+  --pa-color-4: transparent;
+  --pa-color-5: transparent;
+  --pa-color-6: transparent;
+  --pa-color-7: transparent;
+  --pa-color-8: transparent;
+  --pa-color-9: transparent;
+  --pa-color-1-text: #ffffff;
+  --pa-color-2-text: #ffffff;
+  --pa-color-3-text: #ffffff;
+  --pa-color-4-text: #ffffff;
+  --pa-color-5-text: #ffffff;
+  --pa-color-6-text: #ffffff;
+  --pa-color-7-text: #ffffff;
+  --pa-color-8-text: #ffffff;
+  --pa-color-9-text: #ffffff;
+  --pa-border-radius-sm: 2px;
+  --pa-border-radius: 4px;
+  --pa-border-radius-lg: 8px;
+  --pa-alert-success-text: color-mix(in srgb, var(--pa-success-bg) 60%, black);
+  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) 15%, transparent);
+  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) 30%, transparent);
+  --pa-alert-danger-text: color-mix(in srgb, var(--pa-danger-bg) 60%, black);
+  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) 15%, transparent);
+  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) 30%, transparent);
+  --pa-alert-warning-text: color-mix(in srgb, var(--pa-warning-bg) 60%, black);
+  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) 15%, transparent);
+  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) 30%, transparent);
+  --pa-alert-info-text: color-mix(in srgb, var(--pa-info-bg) 60%, black);
+  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) 15%, transparent);
+  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 30%, transparent);
+}