@visns-studio/visns-components 6.17.1 → 6.20.0

package/src/components/styles/GenericDashboard.module.scss

@@ -1,971 +1,758 @@
-/* New grid container */
+// ============================================================================
+// GenericDashboard — 2026
+// ----------------------------------------------------------------------------
+// Rebuilt from the 2021-era sheet this replaces. What changed and why:
+//
+//   * The old card wore a 1px border, a hard 4px brand-coloured bottom rule and
+//     an underline beneath every title. Three separating devices doing one job,
+//     so a grid of six cards arrived as a grid of six competing boxes. The card
+//     is now one quiet surface with a hairline and a soft shadow, and the
+//     heading is the only thing that separates itself.
+//   * `--dash-*` tokens throughout, each with a fallback, so a host that
+//     declares nothing still renders. Dark mode is a token swap, not a filter.
+//   * Stat tiles follow the figure contract: label, value, optional delta and
+//     sparkline. The value uses PROPORTIONAL figures - tabular-nums gives every
+//     digit the width of a zero, which makes a standalone "121" look loose at
+//     display sizes. Tabular is reserved for the table widget's columns.
+//   * The chart palette is validated, not chosen by eye: six categorical hues
+//     that clear the CVD and normal-vision floors in both modes (light worst
+//     adjacent ΔE 9.2 deutan / 27.6 normal). Slot 1 is the brand green.
+//     Three light-mode hues sit under 3:1 on white, so every chart ships a
+//     legend and direct labels - the relief rule.
+//
+// The class names are unchanged: this is a restyle, and every consumer's
+// dashboard.json keeps working untouched.
+// ============================================================================
+
 .grid {
+    // -- surfaces ---------------------------------------------------------
+    --dash-bg: var(--bg-color, #f5f3ef);
+    --dash-surface: var(--background-color, #fff);
+    --dash-ink: var(--paragraph-color, #2b2b2b);
+    --dash-heading: var(--heading-color, var(--primary-color, #1b3933));
+    --dash-primary: var(--primary-color, #1b3933);
+    --dash-accent: var(--highlight-color, #3cbf7d);
+
+    --dash-line: color-mix(in srgb, var(--dash-ink) 12%, transparent);
+    --dash-muted: color-mix(in srgb, var(--dash-ink) 62%, transparent);
+    --dash-quiet: color-mix(in srgb, var(--dash-ink) 4%, var(--dash-surface));
+    --dash-hover: color-mix(in srgb, var(--dash-primary) 5%, var(--dash-surface));
+
+    --dash-radius: var(--dash-card-radius, 14px);
+    --dash-gap: var(--dash-card-gap, 1rem);
+    --dash-pad: var(--dash-card-padding, 1.25rem);
+
+    // Two stops rather than one: a single large blur reads as a smudge, a
+    // tight contact shadow plus a wide ambient one reads as a raised surface.
+    --dash-shadow:
+        0 1px 2px color-mix(in srgb, var(--dash-primary) 8%, transparent),
+        0 8px 24px -12px color-mix(in srgb, var(--dash-primary) 18%, transparent);
+    --dash-shadow-lift:
+        0 2px 4px color-mix(in srgb, var(--dash-primary) 10%, transparent),
+        0 16px 32px -14px color-mix(in srgb, var(--dash-primary) 26%, transparent);
+
+    // -- status (reserved; never reused as a series colour) ----------------
+    --dash-good: #1f7a47;
+    --dash-warn: #a36a14;
+    --dash-bad: #be3e3e;
+
+    // -- categorical series (validated; see the header note) ---------------
+    --dash-series-1: #1baf7a;
+    --dash-series-2: #eb6834;
+    --dash-series-3: #2a78d6;
+    --dash-series-4: #eda100;
+    --dash-series-5: #4a3aa7;
+    --dash-series-6: #e87ba4;
+
+    --dash-motion: var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
+
+    display: grid;
+    // Twelve columns, because the config vocabulary is thirds and halves and
+    // nothing else divides both. An auto-fit track cannot express "a third":
+    // 1/3 and 1/2 collapse to the same width and the row order drifts with the
+    // viewport.
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: var(--dash-gap);
+    align-items: start;
+    width: 100%;
+    color: var(--dash-ink);
+}
+
+// Dark mode is a set of chosen steps, not an inversion: the series hues below
+// are the same six re-stepped for a dark surface and validated against it.
+// The app ships a single light theme. These dark overrides used to fire
+// straight off the OS setting, which left the app half-dark at night: only 4
+// of 72 stylesheets carry dark rules, so dark surfaces ended up wearing
+// light-theme text. They now apply only when `data-theme="dark"` is opted
+// into explicitly, so the work survives for a real theme toggle later.
+:root[data-theme='dark'] {
+    .grid {
+        --dash-bg: #101312;
+        --dash-surface: #171b1a;
+        --dash-ink: #e6e9e8;
+        --dash-heading: #f2f5f4;
+        --dash-series-1: #199e70;
+        --dash-series-2: #d95926;
+        --dash-series-3: #3987e5;
+        --dash-series-4: #c98500;
+        --dash-series-5: #9085e9;
+        --dash-series-6: #d55181;
+        --dash-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
+        --dash-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.55), 0 16px 32px -14px rgba(0, 0, 0, 0.7);
+    }
+}
+
+:root[data-theme='dark'] .grid {
+    --dash-bg: #101312;
+    --dash-surface: #171b1a;
+    --dash-ink: #e6e9e8;
+    --dash-heading: #f2f5f4;
+    --dash-series-1: #199e70;
+    --dash-series-2: #d95926;
+    --dash-series-3: #3987e5;
+    --dash-series-4: #c98500;
+    --dash-series-5: #9085e9;
+    --dash-series-6: #d55181;
+    --dash-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
+    --dash-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.55), 0 16px 32px -14px rgba(0, 0, 0, 0.7);
+}
+
+// ---------------------------------------------------------------------------
+// Spans. The old sheet set percentage widths on floats; these are column spans
+// on the auto-fit grid, clamped so a "full" widget cannot demand more columns
+// than the viewport actually has.
+// ---------------------------------------------------------------------------
+
+.grid__full { grid-column: span 12; }
+.grid__twothird { grid-column: span 8; }
+.grid__half { grid-column: span 6; }
+.grid__three { grid-column: span 4; }
+
+// Below 1100px a third is too narrow for a table or a chart, so thirds become
+// halves and everything wider becomes full width.
+@media (max-width: 1100px) {
+    .grid__twothird { grid-column: span 12; }
+    .grid__half { grid-column: span 12; }
+    .grid__three { grid-column: span 6; }
+}
+
+@media (max-width: 700px) {
+    .grid__full,
+    .grid__twothird,
+    .grid__half,
+    .grid__three { grid-column: span 12; }
+}
+
+// ---------------------------------------------------------------------------
+// The card
+// ---------------------------------------------------------------------------
+
+.dashwidget,
+.dashwidget--highlight {
+    position: relative;
     display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
+    flex-direction: column;
+    min-width: 0;                       // or a wide table stretches the track
+    background: var(--dash-surface);
+    border: 1px solid var(--dash-line);
+    border-radius: var(--dash-radius);
+    box-shadow: var(--dash-shadow);
+    transition: box-shadow var(--dash-motion), transform var(--dash-motion);
 }
 
-.grid__three {
-    flex: 0 0 calc(33.33% - 0.67rem);
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+.dashwidget:hover,
+.dashwidget--highlight:hover {
+    box-shadow: var(--dash-shadow-lift);
 }
 
-.grid__half {
-    flex: 0 0 calc(50% - 0.5rem);
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
-    padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color), 0.05);
+// The highlighted card. The old one filled itself with the brand green and put
+// white type on it, which made one card shout across the whole grid. Now it
+// keeps the same surface and earns its emphasis from a 3px accent edge and a
+// faint tint - present at a glance, not dominant.
+.dashwidget--highlight {
+    background:
+        linear-gradient(
+            to bottom right,
+            color-mix(in srgb, var(--dash-accent) 8%, var(--dash-surface)),
+            var(--dash-surface) 60%
+        );
+    border-color: color-mix(in srgb, var(--dash-accent) 40%, var(--dash-line));
 }
 
-.grid__full {
-    flex: 0 0 100%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
-    padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+.dashwidget--highlight::before {
+    content: '';
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 3px;
+    border-radius: var(--dash-radius) 0 0 var(--dash-radius);
+    background: var(--dash-accent);
 }
 
-.grid__twothird {
-    flex: 0 0 calc(66.66% - 0.67rem);
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+.widgetItem {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: var(--dash-pad);
+    min-width: 0;
+    height: 100%;
 }
 
-/* The remaining CSS remains largely unchanged */
+// ---------------------------------------------------------------------------
+// Heading
+// ---------------------------------------------------------------------------
+
 .widgetTitle {
-    width: 100%;
-    height: auto;
-    padding: 0;
-    margin-bottom: 0.85rem;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    min-height: 1.5rem;
 }
+
 .widgetTitle h2 {
-    font-size: 1rem;
     margin: 0;
-    padding: 0;
-    line-height: 1;
-    text-transform: capitalize;
-    text-align: left;
-    color: var(--primary-color);
+    // 0.8125rem/600 with a little tracking: a card heading is a label for what
+    // is below it, not a page title competing with the value.
+    font-size: var(--dash-title-size, 0.8125rem);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    line-height: 1.3;
+    color: var(--dash-muted);
+    text-transform: uppercase;
 }
 
-.dashList {
-    width: 100%;
+.autoRefreshControl {
     display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    font-size: 0.875rem;
-
-    li {
-        width: 100%;
-        padding: 0;
-        margin: 0;
-
-        &:first-child {
-            button {
-                border-top-left-radius: var(--br);
-                border-top-right-radius: var(--br);
-            }
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-
-            button {
-                border-bottom-left-radius: var(--br);
-                border-bottom-right-radius: var(--br);
-                border-bottom: 1px solid #dadce0;
-            }
-        }
-
-        a {
-            text-decoration: none;
-
-            &:hover {
-                background: rgba(var(--secondary-rgb), 0.05);
-                transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-            }
-        }
-
-        button {
-            width: 100%;
-            display: block;
-            background: white;
-            border: 1px solid #dadce0;
-            border-bottom: none;
-            outline: none;
-            padding: 0.35rem 1rem;
-            color: var(--paragraph-color);
-            text-align: left;
-            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-            letter-spacing: 0.018em;
-
-            &:hover {
-                background: rgba(var(--secondary-rgb), 0.05);
-                transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-            }
-
-            strong {
-                color: var(--paragraph-color);
-            }
-
-            span {
-                color: rgba(var(--secondary-rgb), 1.1);
-                float: right;
-            }
-        }
-    }
+    align-items: center;
+    font-size: 0.75rem;
+    color: var(--dash-muted);
 }
 
-.dmore {
-    width: 100%;
-    margin: 0.65em 0 0 0;
-    padding: 5px;
+.autoRefreshControl input[type='checkbox'] {
+    inline-size: 14px;
+    block-size: 14px;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    appearance: auto;
+    accent-color: var(--dash-primary);
 }
 
-.dashwidget {
-    // background: var(--primary-color) !important;
-    border-top: 1px solid transparent !important;
-    border-left: 1px solid transparent !important;
-    border-right: 1px solid transparent !important;
-    border-bottom: 2px solid rgba(var(--secondary-rgb), 0.9) !important;
+// ---------------------------------------------------------------------------
+// Stat tile
+// ---------------------------------------------------------------------------
 
-    h2 {
-        color: var(--highlight-color) !important;
-    }
+.widgetNo,
+.widgetNo-alt {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    min-height: 3rem;
+}
 
-    .widgetTitle {
-        padding-bottom: 10px;
-        border-bottom: 2px solid rgba(var(--secondary-rgb), 0.5);
-    }
+.widgetNo span,
+.widgetNo-alt span {
+    // Proportional figures deliberately - see the header note.
+    font-size: var(--dash-stat-size, clamp(2rem, 1.4rem + 2vw, 3rem));
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    color: var(--dash-heading);
+    font-variant-numeric: proportional-nums;
 }
 
-.dashwidget--highlight {
-    background: var(--primary-color) !important;
-    border-top: 1px solid transparent !important;
-    border-left: 1px solid transparent !important;
-    border-right: 1px solid transparent !important;
-    border-bottom: 2px solid rgba(var(--primary-rgb), 0.9) !important;
-
-    h2 {
-        color: var(--tertiary-color) !important;
-    }
+.widgetNo-alt span { color: var(--dash-primary); }
 
-    .widgetTitle {
-        padding-bottom: 10px;
-        border-bottom: 2px solid rgba(var(--tertiary-color-rgb), 0.5);
-    }
+// Optional delta beside the value: signed, against a named period. Colour is
+// direction x whether up is good, so a widget can say a rise is bad.
+.statDelta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.15rem 0.45rem;
+    border-radius: var(--radius-pill, 999px);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: nowrap;
 }
 
-.widgetNo {
-    width: 100%;
-    height: auto;
-    padding: 0 0 2rem 0;
-    box-sizing: border-box;
-
-    span {
-        width: 100%;
-        display: block;
-        text-align: center;
-        font-weight: 400;
-        font-size: 3em;
-        color: var(--primary-color);
-    }
+.statDeltaGood {
+    color: var(--dash-good);
+    background: color-mix(in srgb, var(--dash-good) 12%, transparent);
 }
 
-.widgetNo-alt {
-    width: 100%;
-    height: auto;
-    padding: 0 0 2rem 0;
-    box-sizing: border-box;
-
-    span {
-        width: 100%;
-        display: block;
-        text-align: center;
-        font-weight: 400;
-        font-size: 3em;
-        color: var(--tertiary-color);
-    }
+.statDeltaBad {
+    color: var(--dash-bad);
+    background: color-mix(in srgb, var(--dash-bad) 12%, transparent);
 }
 
-.widgetLink {
-    width: 100%;
-    display: block;
-
-    .btn {
-        width: max-content;
-        margin: 0 auto;
-        display: block;
-        padding: 0.25em 3em;
-        background: none;
-        border-color: rgba(var(--primary-rgb), 0.05);
-        border-radius: 5px;
-
-        &:hover {
-            background: none;
-            border-color: rgba(var(--primary-rgb), 0.5);
-        }
-    }
-
-    .btn-alt {
-        width: max-content;
-        margin: 0 auto;
-        display: block;
-        padding: 0.25em 3em;
-        background: #00294a;
-        border-color: rgba(var(--tertiary-color-rgb), 0.05);
-        color: #fff;
-        border-radius: 5px;
-
-        &:hover {
-            background: #00294a;
-            color: var(--tertiary-color);
-            border-color: rgba(var(--tertiary-color-rgb), 0.5);
-            color: #fff;
-        }
-    }
+.statDeltaFlat {
+    color: var(--dash-muted);
+    background: var(--dash-quiet);
 }
 
-.filter-container {
-    padding: 1rem;
+.statPeriod {
+    font-size: 0.75rem;
+    color: var(--dash-muted);
 }
 
-.filter-header {
-    text-align: left;
-    margin-bottom: 1rem;
-
-    h3 {
-        font-size: 1.25rem;
-        font-weight: 600;
-        color: #333;
-        margin: 0;
-    }
+.statTrend {
+    display: block;
+    width: 100%;
+    height: 34px;
+    margin-top: 0.25rem;
+    overflow: visible;
 }
 
-.filter-fields {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem; // Gap between fields
-    align-items: flex-end; // Align fields vertically
-}
+// ---------------------------------------------------------------------------
+// List widget
+// ---------------------------------------------------------------------------
 
-.filter-field {
-    flex: 1; // Ensures equal spacing for each field
+.dashList {
     display: flex;
     flex-direction: column;
-    min-width: 200px; // Sets a minimum width for smaller screens
-
-    label {
-        font-size: 0.875rem;
-        font-weight: 600;
-        margin-bottom: 0.5rem;
-        color: #555;
-    }
-
-    input,
-    select {
-        border: 1px solid #dadce0;
-        border-radius: 5px;
-        padding: 0.5rem 0.75rem;
-        font-size: 0.875rem;
-        color: #333;
-        outline: none;
-        background-color: #f9f9f9;
-        width: 100%; // Ensures full width within the container
-
-        &:focus {
-            border-color: #007bff;
-            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); // Focus effect
-        }
-    }
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
-.filter-field-highlight {
-    flex: 1; // Ensures equal spacing for each field
+.dashList > li {
     display: flex;
-    flex-direction: column;
-    min-width: 200px; // Sets a minimum width for smaller screens
-
-    label {
-        font-size: 0.875rem;
-        font-weight: 600;
-        margin-bottom: 0.5rem;
-        color: var(--tertiary-color);
-    }
-
-    input,
-    select {
-        border: 1px solid #dadce0;
-        border-radius: 5px;
-        padding: 0.5rem 0.75rem;
-        font-size: 0.875rem;
-        color: #333;
-        outline: none;
-        background-color: #f9f9f9;
-        width: 100%; // Ensures full width within the container
-
-        &:focus {
-            border-color: #007bff;
-            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); // Focus effect
-        }
-    }
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin: 0;
+    padding: 0.6rem 0.5rem;
+    border-radius: var(--radius-sm, 6px);
+    border-bottom: 1px solid var(--dash-line);
+    font-size: 0.875rem;
+    line-height: 1.4;
+    transition: background var(--dash-motion);
 }
 
-.filter-actions {
-    display: flex;
-    gap: 0.75rem; // Gap between buttons
-
-    .btn {
-        padding: 0.5rem 1rem;
-        border-radius: 5px;
-        font-size: 0.875rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        cursor: pointer;
-        transition: background-color 0.2s;
-        height: 51px;
-
-        &.btn-primary {
-            background-color: var(--primary-color);
-            color: var(--tertiary-color);
-            border: none;
-
-            &:hover {
-                background-color: #0056b3;
-            }
-        }
-
-        &.btn-secondary {
-            background-color: #f8f9fa;
-            color: #333;
-            border: 1px solid #ccc;
-
-            &:hover {
-                background-color: #e2e6ea;
-            }
-        }
-    }
-}
+.dashList > li:last-child { border-bottom: 0; }
 
-.table-scroll {
-    overflow-x: auto;
-    overflow-y: hidden;
-    width: 100%;
-    display: block;
-}
+.dashList > li:hover { background: var(--dash-hover); }
 
-.table-container {
-    margin-top: 20px;
-    border: 1px solid #dadce0;
-    border-radius: 8px;
-    overflow: hidden;
-    width: 100%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
+// The host styles bare `a`/`button` inside lists - borders, a pill radius, a
+// fixed height - so every row arrived as an outlined chip. Restated here
+// rather than inherited, the same reasoning as the vault and sms modules.
+.dashList a { display: block; width: 100%; }
 
-.table-container table {
+.dashList button {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.75rem;
     width: 100%;
-    border-collapse: collapse;
-    text-align: left;
-    background-color: #ffffff;
 }
 
-.table-container th {
-    background-color: #f6f8fa;
-    color: #333;
-    font-weight: bold;
-    padding: 12px 15px;
-    border-bottom: 1px solid #dadce0;
-    text-transform: capitalize;
-    font-size: 14px;
-}
-
-.table-container td {
-    padding: 10px 15px;
-    border-bottom: 1px solid #eaeaea;
-    font-size: 13px;
-    color: #555;
-    text-align: center;
-    vertical-align: middle;
-    max-width: 200px;
-    word-wrap: break-word;
-}
-
-.table-container th {
-    text-align: center;
-}
-
-.table-container tbody tr:hover {
-    background-color: #f9f9f9;
+.dashList strong {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
 }
 
-.table-container tbody tr:nth-child(even) {
-    background-color: #f7f7f7;
+// The date/meta at the end of a row: fixed width, quiet, and tabular so a
+// column of them lines up.
+.dashList button > span {
+    flex: 0 0 auto;
+    color: var(--dash-muted);
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
 }
 
-.table-container th:first-child,
-.table-container td:first-child {
+.dashList a,
+.dashList button {
+    min-width: 0;
+    max-width: 100%;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-weight: 500;
     text-align: left;
-    font-weight: bold;
-    padding-left: 20px;
-    width: 15%;
-    min-width: 120px;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
 }
 
-// Template column styling
-.table-container th:nth-child(2),
-.table-container td:nth-child(2) {
-    width: 20%;
-    min-width: 140px;
-}
+.dashList a:hover { color: var(--dash-primary); text-decoration: underline; }
 
-// Processed At column styling  
-.table-container th:nth-child(3),
-.table-container td:nth-child(3) {
-    width: 20%;
-    min-width: 160px;
-    font-family: monospace;
-    font-size: 12px;
+.dmore {
+    align-self: flex-start;
+    margin-top: 0.5rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--dash-primary);
+    text-decoration: none;
 }
 
-// Status column styling
-.table-container th:nth-child(4),
-.table-container td:nth-child(4) {
-    width: 20%;
-    min-width: 180px;
-}
+.dmore:hover { text-decoration: underline; }
 
-// File size column styling
-.table-container th:nth-child(5),
-.table-container td:nth-child(5) {
-    width: 15%;
-    min-width: 100px;
-}
+// ---------------------------------------------------------------------------
+// Table widget
+// ---------------------------------------------------------------------------
 
-// Actions column styling
-.table-container th:nth-child(6),
-.table-container td:nth-child(6) {
-    width: 15%;
-    min-width: 120px;
-    text-align: center;
-}
+.table-container { min-width: 0; }
 
-.table-container td:last-child {
-    border-right: none;
+.table-scroll {
+    overflow-x: auto;
+    // The card must never make the page scroll sideways; a wide table scrolls
+    // inside its own container instead.
+    max-width: 100%;
+    border-radius: var(--radius-sm, 6px);
 }
 
-.table-container th:last-child {
-    border-right: none;
+.table-scroll table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8125rem;
+    // Columns of numbers DO get tabular figures, so they align vertically.
+    font-variant-numeric: tabular-nums;
+}
+
+.table-scroll th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 0.5rem 0.75rem;
+    background: var(--dash-quiet);
+    border-bottom: 1px solid var(--dash-line);
+    color: var(--dash-muted);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-align: left;
+    text-transform: uppercase;
+    white-space: nowrap;
 }
 
-// Additional status column styling
-.table-container td:nth-child(4) {
-    font-style: italic;
-    color: #666;
+.table-scroll td {
+    padding: 0.55rem 0.75rem;
+    border-bottom: 1px solid var(--dash-line);
+    color: var(--dash-ink);
 }
 
-// Additional file size column styling  
-.table-container td:nth-child(5) {
-    font-family: monospace;
-    color: #888;
-    text-align: right;
-    padding-right: 20px;
-}
+.table-scroll tbody tr:last-child td { border-bottom: 0; }
+.table-scroll tbody tr:hover td { background: var(--dash-hover); }
 
-// Additional actions column styling
-.table-container td:nth-child(6) {
-    text-align: center;
-    padding: 8px;
-}
+// ---------------------------------------------------------------------------
+// Buttons
+// ---------------------------------------------------------------------------
 
-// Improve responsive behavior
-@media (max-width: 768px) {
-    .table-container {
-        font-size: 12px;
-    }
-    
-    .table-container th,
-    .table-container td {
-        padding: 8px 10px;
-    }
-    
-    .table-container td {
-        max-width: 120px;
-    }
-}
+.widgetLink { margin-top: auto; padding-top: 0.5rem; }
 
-// Indicates that the widget is in edit mode with a glowing dashed border.
-.editModeWidget {
-    border: 2px dashed var(--primary-color);
-    box-shadow: 0 0 10px var(--primary-color);
-}
-
-// Global modal styling improvements (for Popup component modals)
-:global(.modalwrap) {
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    width: 100vw !important;
-    height: 100vh !important;
-    background: rgba(var(--dark-rgb, 0, 0, 0), 0.75) !important;
-    backdrop-filter: blur(6px) !important;
-    z-index: 10000 !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    padding: 20px !important;
-    box-sizing: border-box !important;
-    
-    .modal {
-        background: var(--background-color, #ffffff) !important;
-        border-radius: 16px !important;
-        box-shadow: 0 25px 80px rgba(var(--dark-rgb, 0, 0, 0), 0.4) !important;
-        max-width: 95vw !important;
-        max-height: 90vh !important;
-        width: 1200px !important;
-        display: flex !important;
-        flex-direction: column !important;
-        overflow: hidden !important;
-        animation: modalFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        margin: 0 !important;
-        position: relative !important;
-        border: 1px solid rgba(var(--primary-rgb, 0, 123, 255), 0.1) !important;
-    }
+.btn,
+.btn-alt,
+.btn-primary,
+.btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    height: 34px;
+    padding: 0 0.9rem;
+    border: 1px solid var(--dash-line);
+    border-radius: var(--btn-br, 8px);
+    background: var(--dash-surface);
+    color: var(--dash-primary);
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1;
+    text-transform: none;          // was uppercase; a button is not a label
+    cursor: pointer;
+    transition: background var(--dash-motion), border-color var(--dash-motion);
 }
 
-:global(.modal__header) {
-    background: linear-gradient(135deg, var(--primary-color, #007bff) 0%, var(--secondary-color, #6c757d) 100%) !important;
-    color: var(--light-color, #ffffff) !important;
-    padding: 24px 28px !important;
-    border-radius: 16px 16px 0 0 !important;
-    display: flex !important;
-    justify-content: space-between !important;
-    align-items: center !important;
-    border-bottom: 1px solid rgba(var(--light-rgb, 255, 255, 255), 0.1) !important;
-    
-    h1 {
-        margin: 0 !important;
-        font-size: 20px !important;
-        font-weight: 600 !important;
-        color: var(--light-color, #ffffff) !important;
-        text-shadow: 0 1px 2px rgba(var(--dark-rgb, 0, 0, 0), 0.1) !important;
-    }
+.btn:hover,
+.btn-alt:hover,
+.btn-secondary:hover {
+    background: var(--dash-hover);
+    border-color: color-mix(in srgb, var(--dash-primary) 35%, var(--dash-line));
 }
 
-:global(.modal__close) {
-    background: rgba(var(--light-rgb, 255, 255, 255), 0.2) !important;
-    border: none !important;
-    color: var(--light-color, #ffffff) !important;
-    width: 32px !important;
-    height: 32px !important;
-    border-radius: 50% !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    cursor: pointer !important;
-    transition: background-color 0.2s !important;
-    
-    &:hover {
-        background: rgba(var(--light-rgb, 255, 255, 255), 0.3) !important;
-    }
+.btn-primary {
+    background: var(--dash-primary);
+    border-color: var(--dash-primary);
+    color: #fff;
 }
 
-:global(.modal__content) {
-    max-height: 70vh !important;
-    overflow-y: auto !important;
-    padding: 25px !important;
-    flex: 1 !important;
-    
-    .table-container {
-        margin-top: 0 !important;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-        
-        table {
-            font-size: 13px !important;
-        }
-        
-        th {
-            background: var(--item-color, #f8f9fa) !important;
-            color: var(--paragraph-color, #333) !important;
-            font-weight: 600 !important;
-            padding: 12px 15px !important;
-            font-size: 12px !important;
-            text-transform: uppercase !important;
-            letter-spacing: 0.5px !important;
-            border-bottom: 1px solid rgba(var(--primary-rgb, 0, 123, 255), 0.1) !important;
-        }
-        
-        td {
-            padding: 12px 15px !important;
-            vertical-align: middle !important;
-            color: var(--paragraph-color, #555) !important;
-            border-bottom: 1px solid rgba(var(--item-color-rgb, 234, 236, 240), 0.5) !important;
-        }
-        
-        tbody tr {
-            transition: background-color 0.15s ease !important;
-            
-            &:hover {
-                background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.05) !important;
-            }
-        }
-    }
+.btn-primary:hover {
+    background: color-mix(in srgb, #000 10%, var(--dash-primary));
 }
 
-@keyframes modalFadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.9) translateY(-20px);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1) translateY(0);
-    }
+.btn:focus-visible,
+.btn-alt:focus-visible,
+.btn-primary:focus-visible,
+.btn-secondary:focus-visible {
+    outline: 2px solid var(--dash-accent);
+    outline-offset: 2px;
 }
 
-// Responsive modal behavior
-@media (max-width: 768px) {
-    .modalwrap {
-        padding: 10px;
-        
-        .modal {
-            width: 100%;
-            max-height: 95vh;
-            
-            .modal__header {
-                padding: 15px 20px;
-                
-                h1 {
-                    font-size: 18px;
-                }
-            }
-            
-            .modal__content {
-                padding: 20px;
-                
-                .table-container {
-                    font-size: 12px;
-                    
-                    th, td {
-                        padding: 8px 10px;
-                    }
-                }
-            }
-        }
-    }
-}
+// ---------------------------------------------------------------------------
+// Filters
+// ---------------------------------------------------------------------------
 
-// Container for the edit mode toggle button.
-.editButtonContainer {
-    position: fixed;
-    bottom: 1rem;
-    right: 1rem;
-    z-index: 1000; // Ensures the button stays on top of other elements
+.filter-container {
+    padding: 0.75rem;
+    background: var(--dash-quiet);
+    border: 1px solid var(--dash-line);
+    border-radius: var(--radius-sm, 8px);
 }
 
-.editButtonContainer .btn {
-    padding: 0.5rem 1rem;
-    background: var(--primary-color);
-    color: var(--tertiary-color);
-    border: none;
-    border-radius: var(--br);
-    font-size: 0.875rem;
+.filter-header {
+    margin-bottom: 0.5rem;
+    color: var(--dash-muted);
+    font-size: 0.6875rem;
     font-weight: 600;
+    letter-spacing: 0.04em;
     text-transform: uppercase;
-    cursor: pointer;
-    transition: background-color 0.25s ease;
-}
-
-.editButtonContainer .btn:hover {
-    background-color: var(--secondary-color);
 }
 
-// Normal edit mode style for non-highlighted widgets
-.editModeWidgetNormal {
-    border: 2px dashed var(--primary-color);
-    box-shadow: 0 0 10px var(--primary-color);
-
-    // Use the default resize tools positioning for normal widgets.
-    .resizeTools {
-        top: -5px;
-        right: 0px;
-    }
-}
-
-// Edit mode style for highlighted widgets (using a contrasting color)
-.editModeWidgetHighlight {
-    border: 2px dashed var(--secondary-color);
-    box-shadow: 0 0 10px var(--secondary-color);
-
-    // Position resize tools further up to avoid blending with the background.
-    .resizeTools {
-        top: -5px; // Adjust this value as needed
-        right: 0px;
-    }
-}
-
-// Resizing tool container (common styling)
-.resizeTools {
-    position: absolute;
+// One row of controls above the chart, wrapping - not a stacked column.
+.filter-fields {
     display: flex;
-    gap: 5px;
-
-    button {
-        background: var(--primary-color);
-        color: var(--tertiary-color);
-        border: none;
-        border-radius: 3px;
-        padding: 0.25rem 0.5rem;
-        cursor: pointer;
-        font-size: 0.75rem;
-        transition: background-color 0.2s;
-
-        &:hover {
-            background-color: rgba(var(--primary-rgb), 0.8);
-        }
-    }
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0.5rem;
 }
 
-// Override the resize button for highlighted widgets
-.editModeWidgetHighlight .resizeTools button {
-    background: var(--tertiary-color); // Use a contrasting background
-    color: var(--primary-color); // Ensure the text is legible
-
-    &:hover {
-        background-color: rgba(var(--tertiary-color-rgb), 0.8);
-    }
+.filter-field,
+.filter-field-highlight {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 8rem;
+    flex: 1 1 8rem;
+    font-size: 0.75rem;
+    color: var(--dash-muted);
 }
 
-.widgetItem {
-    position: relative;
+.filter-field input,
+.filter-field select,
+.filter-field-highlight input,
+.filter-field-highlight select {
+    height: 34px;
+    padding: 0 0.6rem;
+    border: 1px solid var(--dash-line);
+    border-radius: var(--radius-sm, 6px);
+    background: var(--dash-surface);
+    color: var(--dash-ink);
+    font-family: inherit;
+    font-size: 0.8125rem;
 }
 
-/* Styles for the Add Widget Popup */
-.addWidgetSelect {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 1rem;
-    border: 1px solid #dadce0;
-    border-radius: 5px;
-    font-size: 1rem;
+.filter-field input:focus,
+.filter-field select:focus,
+.filter-field-highlight input:focus,
+.filter-field-highlight select:focus {
+    outline: 2px solid var(--dash-accent);
+    outline-offset: 1px;
 }
 
-.addWidgetButton {
-    width: 100%;
-    padding: 10px;
-    background: var(--primary-color);
-    color: var(--tertiary-color);
-    border: none;
-    border-radius: 5px;
-    font-size: 1rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    cursor: pointer;
-    transition: background-color 0.25s ease;
+.filter-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: flex-end;
 }
 
-.addWidgetButton:hover {
-    background: var(--secondary-color);
-}
+// ---------------------------------------------------------------------------
+// Empty & loading
+// ---------------------------------------------------------------------------
 
+.noData,
 .noWidgetsMessage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 6rem;
+    padding: 1.5rem 1rem;
+    color: var(--dash-muted);
+    font-size: 0.875rem;
     text-align: center;
-    font-size: 1rem;
-    color: #888;
-    padding: 20px;
-}
-
-.noData {
-    text-align: center;
-    font-size: 1rem;
-    color: #888;
-    padding: 20px;
-}
-
-/* ---------------------------------------------------------------------------
-   Loading skeletons
-   Neutral greys only (no brand colours) so every tenant gets a safe default.
-   Keyframes are uniquely prefixed to avoid colliding with host app globals.
---------------------------------------------------------------------------- */
-@keyframes visns-dash-skeleton-sweep {
-    0% {
-        background-position: 150% 0;
-    }
-    100% {
-        background-position: -150% 0;
-    }
 }
 
-.skeleton {
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.skeletonBlock {
-    display: block;
-    box-sizing: border-box;
-    border-radius: var(--br, 5px);
-    background-color: rgba(0, 0, 0, 0.06);
-    background-image: linear-gradient(
+.noWidgetsMessage {
+    grid-column: 1 / -1;
+    background: var(--dash-surface);
+    border: 1px dashed var(--dash-line);
+    border-radius: var(--dash-radius);
+}
+
+// A shimmer that respects reduced-motion, which the old one did not.
+.skeleton,
+.skeletonBlock,
+.skeletonButton,
+.skeletonCircle,
+.skeletonCounterValue,
+.skeletonListRow,
+.skeletonStrip,
+.skeletonTableHeader,
+.skeletonTableRow {
+    background: linear-gradient(
         90deg,
-        rgba(0, 0, 0, 0) 0%,
-        rgba(0, 0, 0, 0.05) 50%,
-        rgba(0, 0, 0, 0) 100%
+        var(--dash-quiet) 25%,
+        color-mix(in srgb, var(--dash-ink) 8%, var(--dash-surface)) 37%,
+        var(--dash-quiet) 63%
     );
-    background-repeat: no-repeat;
-    background-size: 150% 100%;
-    animation: visns-dash-skeleton-sweep 1.4s ease-in-out infinite;
-}
-
-/* Counter: matches .widgetNo (2rem bottom padding, 3em value) */
-.skeletonCounter {
-    width: 100%;
-    padding: 0 0 2rem 0;
-    box-sizing: border-box;
+    background-size: 400% 100%;
+    animation: dashShimmer 1.4s ease-in-out infinite;
+    border-radius: var(--radius-sm, 6px);
 }
 
-.skeletonCounterValue {
-    width: 55%;
-    max-width: 220px;
-    height: 3.6rem;
-    margin: 0 auto;
+@keyframes dashShimmer {
+    0% { background-position: 100% 50%; }
+    100% { background-position: 0 50%; }
 }
 
-/* Counter button: matches .widgetLink .btn */
-.skeletonButtonRow {
-    width: 100%;
-    display: block;
+@media (prefers-reduced-motion: reduce) {
+    .skeleton,
+    .skeletonBlock,
+    .skeletonButton,
+    .skeletonCircle,
+    .skeletonCounterValue,
+    .skeletonListRow,
+    .skeletonStrip,
+    .skeletonTableHeader,
+    .skeletonTableRow {
+        animation: none;
+    }
 }
 
-.skeletonButton {
-    width: 180px;
-    max-width: 100%;
-    height: 34px;
-    margin: 0 auto;
-}
+.skeleton { min-height: 1rem; }
+.skeletonBlock { height: 1rem; }
+.skeletonButton { height: 34px; width: 8rem; }
+.skeletonCircle { width: 9rem; height: 9rem; border-radius: 50%; margin: 0 auto; }
+.skeletonCounter { display: flex; flex-direction: column; gap: 0.75rem; }
+.skeletonCounterValue { height: 3rem; width: 60%; }
+.skeletonList { display: flex; flex-direction: column; gap: 0.5rem; }
+.skeletonListRow { height: 2.25rem; }
+.skeletonTable { display: flex; flex-direction: column; gap: 0.4rem; }
+.skeletonTableHeader { height: 2rem; }
+.skeletonTableRow { height: 1.75rem; }
+.skeletonTimeline { display: flex; flex-direction: column; gap: 0.75rem; }
+.skeletonGeneric { display: flex; flex-direction: column; gap: 0.75rem; }
+.skeletonButtonRow { display: flex; gap: 0.5rem; }
+.skeletonChart { display: flex; align-items: flex-end; gap: 0.5rem; height: 12rem; }
+.skeletonChartStrips { display: flex; align-items: flex-end; gap: 0.5rem; width: 100%; height: 100%; }
+.skeletonStrip { flex: 1; }
+
+// ---------------------------------------------------------------------------
+// Edit mode
+// ---------------------------------------------------------------------------
 
-/* Charts: the wrapper takes widget.height (or the 600px chart default) inline */
-.skeletonChart {
-    width: 100%;
+.editButtonContainer {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: 20px 0;
+    gap: 0.5rem;
+    margin-bottom: var(--dash-gap);
 }
 
-.skeletonChartStrips {
-    align-items: flex-start;
-    gap: 14px;
+.addWidgetSelect,
+.addWidgetButton {
+    height: 34px;
+    padding: 0 0.75rem;
+    border: 1px solid var(--dash-line);
+    border-radius: var(--btn-br, 8px);
+    background: var(--dash-surface);
+    color: var(--dash-ink);
+    font-family: inherit;
+    font-size: 0.8125rem;
+    cursor: pointer;
 }
 
-.skeletonStrip {
-    height: 16px;
-    min-height: 16px;
+.editModeWidget,
+.editModeWidgetNormal,
+.editModeWidgetHighlight {
+    outline: 2px dashed color-mix(in srgb, var(--dash-primary) 35%, transparent);
+    outline-offset: 3px;
+    border-radius: var(--dash-radius);
 }
 
-.skeletonCircle {
-    width: 60%;
-    max-width: 260px;
-    aspect-ratio: 1 / 1;
-    border-radius: 50%;
+.editModeWidgetHighlight {
+    outline-color: color-mix(in srgb, var(--dash-accent) 60%, transparent);
 }
 
-/* Table: header 44px / rows 38px, matching .table-container th and td */
-.skeletonTable {
-    width: 100%;
+.widgetTools {
     display: flex;
-    flex-direction: column;
-    gap: 1px;
-    box-sizing: border-box;
-    border: 1px solid #dadce0;
-    border-radius: var(--br, 5px);
-    overflow: hidden;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--dash-line);
 }
 
-.skeletonTableHeader {
-    width: 100%;
-    height: 44px;
-    border-radius: 0;
+.resizeTools {
+    display: flex;
+    gap: 0.25rem;
 }
 
-.skeletonTableRow {
-    width: 100%;
-    height: 38px;
-    border-radius: 0;
+.resizeTools button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid var(--dash-line);
+    border-radius: var(--radius-sm, 6px);
+    background: var(--dash-surface);
+    color: var(--dash-muted);
+    cursor: pointer;
+    transition: background var(--dash-motion), color var(--dash-motion);
 }
 
-/* List: rows sized like .dashList li button */
-.skeletonList {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    font-size: 0.875rem;
+.resizeTools button:hover {
+    background: var(--dash-hover);
+    color: var(--dash-primary);
 }
 
-.skeletonListRow {
-    width: 100%;
-    height: 30px;
-    border-radius: 0;
-
-    &:first-child {
-        border-top-left-radius: var(--br, 5px);
-        border-top-right-radius: var(--br, 5px);
-    }
+// ---------------------------------------------------------------------------
+// Modal
+// ---------------------------------------------------------------------------
 
-    &:last-child {
-        border-bottom-left-radius: var(--br, 5px);
-        border-bottom-right-radius: var(--br, 5px);
-    }
+.modalwrap {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    background: color-mix(in srgb, #000 55%, transparent);
+    backdrop-filter: blur(2px);
 }
 
-.skeletonTimeline {
-    width: 100%;
+.modal {
+    width: min(720px, 100%);
+    max-height: 85vh;
+    overflow: auto;
+    background: var(--dash-surface);
+    border-radius: var(--dash-radius);
+    box-shadow: var(--dash-shadow-lift);
 }
 
-.skeletonGeneric {
-    width: 100%;
-    height: 120px;
+.modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--dash-line);
+    font-weight: 600;
+    color: var(--dash-heading);
 }
 
-/* Keep the shape, drop the motion */
-@media (prefers-reduced-motion: reduce) {
-    .skeletonBlock {
-        animation: none;
-    }
-}
+.modal__content { padding: 1.25rem; }