@posiwise/core-styles 1.0.15 → 1.0.17

package/package.json

@@ -1,11 +1,11 @@
 {
-    "name": "@posiwise/core-styles",
-    "version": "1.0.15",
-    "main": "index.js",
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "author": "",
-    "license": "ISC",
-    "description": ""
+  "name": "@posiwise/core-styles",
+  "version": "1.0.17",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
 }

package/scss/_dynamic-styles.scss

@@ -46,6 +46,25 @@
     --p-autocomplete-focus-border-color: var(--first);
     --p-autocomplete-hover-border-color: var(--first);
 
+    // PrimeNG placeholder color tokens — calibrated 2026-05-21 to design-system
+    // N400 (#a8afbc) for cross-widget placeholder uniformity. PrimeNG's styled-
+    // mode injects a later `:root, :host` block that re-sets
+    // `--p-form-field-placeholder-color: var(--p-surface-500)` (and chains
+    // autocomplete/select/multiselect tokens off it) at equal specificity,
+    // so source order alone loses — `!important` on the custom-property
+    // declaration is the stable lever (CSS vars with !important win across
+    // later equal-specificity redefinitions). Owning the token avoids chasing
+    // per-widget selector specificity (e.g.
+    // `.p-autocomplete-input-chip input::placeholder`). Mirrors the Bootstrap
+    // `.form-control::placeholder` color so all five rendering paths
+    // (Bootstrap input, p-autocomplete chip input, p-multiselect label,
+    // p-select label, p-inputtext) match.
+    --p-form-field-placeholder-color: #a8afbc !important;
+    --p-inputtext-placeholder-color: #a8afbc !important;
+    --p-autocomplete-placeholder-color: #a8afbc !important;
+    --p-select-placeholder-color: #a8afbc !important;
+    --p-multiselect-placeholder-color: #a8afbc !important;
+
     // PrimeNG Checkbox checked CSS variables override
     --p-checkbox-checked-background: var(--first);
     --p-checkbox-checked-border-color: var(--first);
@@ -261,6 +280,478 @@
     .primeng-datatable-container table thead tr th {
         background-color: var(--tabs_bg) !important;
         color: var(--tabs_text) !important;
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        // Convention (2026-05-21): header label + sort icon ALWAYS on one
+        // line, vertically centred in the header cell.
+        white-space: nowrap;
+        vertical-align: middle !important;
+    }
+
+    // Sort icon vertical centring with the header text.
+    .primeng-datatable-container table thead tr th p-sorticon,
+    .primeng-datatable-container table thead tr th .p-sortable-column-icon {
+        vertical-align: middle;
+    }
+
+    // Global focus halo (brand accent) for every PrimeNG input, multiselect,
+    // and select on the platform — was previously scoped to .search-filter
+    // which left ad-hoc filter rows (e.g. newsletter/items) without any
+    // focus affordance. !important defeats the legacy `body .p-inputtext`
+    // focus rule. Codified 2026-05-21.
+    .p-inputtext:enabled:focus,
+    .p-multiselect:focus-within,
+    .p-select:focus-within,
+    .form-control:focus:not([readonly]):not(:disabled) {
+        border-color: var(--first) !important;
+        outline: 0;
+        box-shadow: 0 0 0 3px rgba(24, 104, 225, 0.18) !important;
+    }
+
+    // Some views (newsletter/items, etc.) place their filter row OUTSIDE
+    // the p-table's caption — as a sibling .row above the table — so the
+    // 10px filter→thead gap owned by .p-datatable-header doesn't apply.
+    // Bridge that with a matching margin below any pre-table .row inside
+    // the datatable container.
+    .primeng-datatable-container > .row {
+        margin-bottom: 10px;
+    }
+
+    // PrimeNG p-autocomplete — align with the 36px / N200 widget convention.
+    // Was rendering at 32.64px with a `rgb(128,128,128)` border (its own
+    // PrimeNG default), distinct from p-select / p-multiselect.
+    .p-autocomplete .p-inputtext,
+    p-autocomplete .p-inputtext,
+    .p-autocomplete-input {
+        min-height: 36px;
+        border-color: #e2e5ea !important;
+    }
+
+    // PrimeNG p-datepicker — align input height (was 32.64px) and border
+    // colour (was #C4C4C4) with the platform's 36px / N200 widget convention.
+    .p-datepicker .p-inputtext,
+    p-datepicker .p-inputtext {
+        min-height: 36px;
+        border-color: #e2e5ea !important;
+    }
+
+    // Calendar trigger button next to the p-datepicker input — same 36px
+    // height to keep the input-group flush.
+    .p-datepicker .p-button,
+    p-datepicker .p-button {
+        min-height: 36px;
+    }
+
+    // ngx-daterangepicker buttons (trigger calendar icon next to the input,
+    // + APPLY button inside the dropdown) — make them match the platform's
+    // 36px-tall primary-button convention so they align with adjacent inputs
+    // and read as regular Submit buttons.
+    .ngx-daterangepicker-action {
+        min-height: 36px !important;
+        padding: 0 12px !important;
+        display: inline-flex !important;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px !important;
+        font-size: 13px;
+        font-weight: 500;
+    }
+
+    // Quill rich-text editor (ngx-quill / Snow theme): unify the toolbar +
+    // container bg/border with the platform input convention (white bg,
+    // N200 border, 6px radius split between top/bottom halves).
+    .ql-toolbar.ql-snow,
+    .ql-container.ql-snow {
+        border-color: #e2e5ea !important;
+        background-color: #fff !important;
+    }
+    .ql-toolbar.ql-snow {
+        border-radius: 6px 6px 0 0 !important;
+    }
+    .ql-container.ql-snow {
+        border-radius: 0 0 6px 6px !important;
+    }
+    .ql-editor {
+        background-color: #fff !important;
+    }
+
+    // Global `.form-control` defaults — same as the `form > .form-control`
+    // rule in `custom-bootstrap/_forms.scss`, but unscoped so inputs OUTSIDE
+    // a <form> (date pickers, list filters, ad-hoc widgets) inherit it too.
+    // Codified 2026-05-21 after the newsletter-insight date-range picker was
+    // found rendering with transparent bg + 4.875px radius because it lives
+    // outside a <form>.
+    .form-control {
+        border: 1px solid #e2e5ea !important;
+        border-radius: 6px !important;
+        background-color: #fff !important;
+        min-height: 36px;
+    }
+
+    // Disabled / readonly form-control: distinguishable bg, no focus halo.
+    .form-control:disabled,
+    .form-control[readonly] {
+        background-color: #eceff1 !important;
+    }
+    .form-control[readonly]:focus,
+    .form-control:disabled:focus {
+        border-color: #e2e5ea !important;
+        box-shadow: none !important;
+        outline: 0;
+    }
+
+    // Navbar global Search: match the 6px rounded corners + N200 border the
+    // rest of the platform uses (input-group default zeroes radii between
+    // children — re-apply on the outer edges).
+    .navbar-search-input {
+        .form-control {
+            border-top-left-radius: 6px !important;
+            border-bottom-left-radius: 6px !important;
+            border-top-right-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
+        }
+
+        .input-group-text {
+            border-top-right-radius: 6px !important;
+            border-bottom-right-radius: 6px !important;
+            border-top-left-radius: 0 !important;
+            border-bottom-left-radius: 0 !important;
+        }
+    }
+
+    // Collapsed Action column (Linear/Notion pattern, codified 2026-05-21).
+    // The Action column reserves no horizontal space at rest — header text
+    // is hidden, th + td collapse to 0 width, and the <ul> floats over the
+    // row's right edge on row hover. Soft 80ms exit delay so quick row-to-row
+    // mouse movements don't flicker the strip in/out.
+    //
+    // Covers all `actions-list-{two,three,four}` variants. Per-view local
+    // SCSS should NOT redeclare this — pattern lives in `admin-list-view.md`.
+    .primeng-datatable-container {
+        th[class*='actions-list-'],
+        td[data-head='Action'] {
+            width: 0 !important;
+            min-width: 0 !important;
+            padding: 0 !important;
+            max-width: 0 !important;
+        }
+
+        th[class*='actions-list-'] {
+            font-size: 0 !important;
+            color: transparent !important;
+            // Visually erase the column header text — but keep the bg blue
+            // so the residual ~20px doesn't read as a gap in the blue
+            // header bar. (Updated 2026-05-21 — prior transparent bg
+            // produced a visible gap after DELETED in admin lists.)
+            border-color: transparent !important;
+        }
+
+        td[data-head='Action'] {
+            border-left-color: transparent !important; // hide the visual seam between Action td and prev cell
+            border-right-color: transparent !important; // hide the body right edge of the residual action column
+        }
+
+        // Hide the right border of whatever data column sits immediately
+        // before the action column, so the empty 22px action cell merges
+        // seamlessly into the row instead of reading as a stray column.
+        // (Added 2026-05-21.)
+        td:has(+ td[data-head='Action']) {
+            border-right-color: transparent !important;
+        }
+
+        // Force the action column body cell to actually collapse — a
+        // per-view component-scoped rule (.table-responsive[ng-attr] td)
+        // sets `padding: 6px 10px !important` with equal specificity to
+        // the global rule, so source-order lets it win and the action
+        // td stays ~22px wide. Doubling the attribute selector wins
+        // specificity (1 extra attribute) and forces padding 0 so the
+        // visible "extra column" disappears. (Added 2026-05-21.)
+        td[data-head='Action'][data-head],
+        th[class*='actions-list-'][class*='actions-list-'] {
+            padding: 0 !important;
+            border-width: 0 !important; // collapse the residual 2px from transparent borders
+        }
+
+        td[data-head='Action'] {
+            position: relative;
+            overflow: visible !important;
+        }
+
+        td[data-head='Action'] ul {
+            position: absolute;
+            right: 8px;
+            // Anchor to row's top/bottom (with small inset) so the strip
+            // height tracks the row. Avoids overlapping the pagination
+            // footer when there's only one short row in the table.
+            top: 2px;
+            bottom: 2px;
+            transform: translateX(4px);
+            display: flex;
+            align-items: center;
+            opacity: 0;
+            background: rgba(255, 255, 255, 0.96);
+            padding: 0 6px !important; // no vertical padding — height comes from top/bottom anchors
+            margin: 0 !important;
+            border-radius: 8px;
+            box-shadow: -8px 0 16px -6px rgba(0, 0, 0, 0.08);
+            z-index: 10; // float above the pagination footer
+            transition:
+                opacity 180ms ease 80ms,
+                transform 180ms ease 80ms;
+
+            li {
+                display: inline-flex !important;
+                align-items: center;
+                justify-content: center;
+                width: 34px;
+                height: 34px;
+                border-radius: 6px;
+                margin: 0 2px !important;
+                cursor: pointer;
+                transition:
+                    background-color 120ms ease,
+                    color 120ms ease;
+            }
+
+            li:hover {
+                background-color: #eef0f3;
+            }
+
+            i.fa {
+                font-size: 16px !important;
+                padding: 0 !important;
+                line-height: 1;
+            }
+
+            .edit-icon,
+            .cta1-icon {
+                color: #5a6473 !important;
+            }
+            .delete-icon {
+                color: #c0392b !important;
+            }
+            li:hover .edit-icon,
+            li:hover .cta1-icon {
+                color: #1a1d21 !important;
+            }
+        }
+
+        tr:hover td[data-head='Action'] ul,
+        tr:focus-within td[data-head='Action'] ul {
+            opacity: 1;
+            transform: translateX(0);
+            transition:
+                opacity 120ms ease,
+                transform 120ms ease;
+        }
+    }
+
+    // Active-sort column background: PrimeNG's preset uses its own
+    // hardcoded primary; bind it to --first so the sorted column tracks
+    // the tenant accent (consistent with .p-datatable-thead default bg).
+    .primeng-datatable-container table thead tr th.p-datatable-column-sorted,
+    .primeng-datatable-container table thead tr th[aria-sort='ascending'],
+    .primeng-datatable-container table thead tr th[aria-sort='descending'] {
+        background-color: var(--first) !important;
+    }
+
+    // Canonical body cell font-size — 13px (comfortable read default).
+    // Admin views that need analyst-grade density (products, subscriptions)
+    // override locally to 11px in their component SCSS via the
+    // `.table-responsive { @media (min-width: 767px) { td, th { 11px !important } } }`
+    // block. Codified 2026-05-21.
+    .primeng-datatable-container table tbody tr td {
+        font-size: 13px;
+    }
+
+    // Global row-hover affordance — every admin data table gets the same
+    // "cursor here" highlight. Tracks the mouse as the user scrolls.
+    .primeng-datatable-container table tbody tr {
+        transition: background-color 120ms ease;
+    }
+
+    .primeng-datatable-container table tbody tr:hover {
+        background-color: #eef0f3 !important;
+    }
+
+    // Soft-tint admin-table badges (lifted 2026-05-21 from
+    // subscriptions-list.component.scss per admin-list-view pattern
+    // §B-1/B-3: badges MUST be soft-tinted (light bg + dark ink), never
+    // saturated colour-only fills with white text). Scoped under the
+    // datatable container so non-table badge usages (modals, dashboards,
+    // navbars) keep the saturated Bootstrap globals untouched.
+    // `class*='bg-*'` catches indexed variants emitted by appDynamicBadge
+    // (bg-blue-grey-1, bg-warning-2, …). `!important` matches Bootstrap's
+    // `.bg-*` utility-class specificity.
+    .primeng-datatable-container .badge {
+        font-size: 11px;
+        font-weight: 600;
+        padding: 2px 8px;
+        border-radius: 4px;
+        letter-spacing: 0.01em;
+    }
+
+    .primeng-datatable-container .badge[class*='bg-success'] {
+        background-color: #e6f4ec !important;
+        color: #0f6b3a !important;
+    }
+
+    .primeng-datatable-container .badge[class*='bg-danger'] {
+        background-color: #fbeae8 !important;
+        color: #c0392b !important;
+    }
+
+    .primeng-datatable-container .badge[class*='bg-warning'] {
+        background-color: #fbf1e3 !important;
+        color: #8a5a00 !important;
+    }
+
+    .primeng-datatable-container .badge[class*='bg-blue-grey'] {
+        background-color: #eef0f3 !important;
+        color: #5a6473 !important;
+    }
+
+    // Indexed soft-tint variants for appDynamicBadge categorical
+    // differentiation (e.g. shard name, frontend repo). The bare
+    // `.bg-blue-grey` above stays neutral; the indexed `-1 … -24`
+    // variants emitted by appDynamicBadge each get a distinct hue so
+    // multi-value columns (shard tags, category chips) stay scannable.
+    // HSL ramp: 15° rotation per index, low saturation + high lightness
+    // keeps every variant in the calm soft-tint register per the design
+    // system's "calm under data load" Admin profile. Specificity ties
+    // with the substring rule above; comes after in source order so the
+    // indexed rule wins for `bg-blue-grey-N`.
+    @for $i from 1 through 24 {
+        .primeng-datatable-container .badge.bg-blue-grey-#{$i} {
+            background-color: hsl($i * 15, 18%, 92%) !important;
+            color: hsl($i * 15, 32%, 35%) !important;
+        }
+    }
+
+    // Shape dot per B-2 — accessibility beyond colour alone.
+    .primeng-datatable-container .badge[class*='bg-success']::before,
+    .primeng-datatable-container .badge[class*='bg-danger']::before,
+    .primeng-datatable-container .badge[class*='bg-warning']::before {
+        content: '';
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        margin-right: 6px;
+        border-radius: 50%;
+        background-color: currentColor;
+        vertical-align: middle;
+    }
+
+    // Form-widget unification (2026-05-21): every PrimeNG p-select +
+    // p-multiselect on this platform shares the same border colour and
+    // min-height as text inputs (.form-control = 36px, N200 border, 6px
+    // radius — see custom-bootstrap/_forms.scss). Without this, the dropdowns
+    // are 1.5px taller and use a slightly different gray border, breaking
+    // form alignment when widgets sit side-by-side.
+    .p-select,
+    .p-multiselect {
+        border-color: #e2e5ea !important;
+        min-height: 36px;
+    }
+
+    // PrimeNG p-iconfield wraps the input + leading icon. Platform convention
+    // (2026-05-21): search boxes are tidy, right-aligned, capped at 240px so
+    // they never dominate the row. The input fills the iconfield so the icon
+    // overlays its left padding cleanly.
+    //
+    // EXCLUDE PrimeNG's internal iconfields (multiselect/select panel filter
+    // inputs use this same component — they live inside `.p-*-filter-container`
+    // and must keep their own panel-fitting width). Without this exclusion the
+    // 240px cap + margin-left:auto pushes the internal filter to the right
+    // edge of the panel, leaving it visually broken.
+    p-iconfield:not([class*='filter-container']) {
+        display: block;
+        width: 100%;
+        max-width: 360px;
+        margin-left: auto;
+
+        input,
+        .p-inputtext {
+            width: 100%;
+        }
+    }
+
+    // ── Filter row unification ── platform-wide: every admin filter row
+    // (subscriptions / users / products / faqs / resources …) uses the same
+    // equal-width flex layout + 38px control height so the multi-select /
+    // select / search input no longer have different default heights.
+    .search-filter {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
+        gap: 12px;
+        // Spacing to the table head is now owned by .p-datatable-header
+        // (single source of truth for filter→thead gap). No margin here.
+
+        > div {
+            flex: 1 1 220px;
+            min-width: 0;
+            // Cap each filter column at 360px (was 240px — bumped 2026-05-21
+            // for more comfortable widget width). Tidy analyst-chip row;
+            // prevents a 2-col view from giving each widget 50% of the row.
+            max-width: 360px;
+        }
+
+        .p-inputtext {
+            width: 100%;
+            height: 38px;
+            max-width: none;
+            // N200 line token — unified filter-widget border
+            border: 1px solid #e2e5ea;
+            border-radius: 6px;
+        }
+
+        .p-multiselect,
+        .p-select {
+            width: 100%;
+            height: 38px;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            // N200 line token — unified filter-widget border
+            border: 1px solid #e2e5ea;
+        }
+
+        // Focus state — applied uniformly to multiselect, select, and the
+        // search input. Uses the brand accent (--first) as a spotlight per
+        // doctrine § 2 (accent is for stateful focus, not structural chrome).
+        // :focus-within on the wrapper catches PrimeNG's internal-trigger
+        // focus too. !important defeats the legacy
+        // `body .p-inputtext:enabled:focus:not(.ui-state-error):not(.p-invalid)`
+        // rule whose specificity outranks ours. Codified 2026-05-21.
+        .p-inputtext:enabled:focus,
+        .p-multiselect:focus-within,
+        .p-select:focus-within {
+            border-color: var(--first) !important;
+            outline: 0;
+            box-shadow: 0 0 0 3px rgba(24, 104, 225, 0.18) !important;
+        }
+
+        .p-multiselect-label,
+        .p-select-label {
+            display: flex;
+            align-items: center;
+            padding-block: 0;
+            line-height: 1;
+        }
+    }
+
+    @media (max-width: 720px) {
+        .search-filter {
+            flex-direction: column;
+            gap: 8px;
+
+            > div {
+                flex: 1 1 auto;
+            }
+        }
     }
 
     .analytics {
@@ -417,6 +908,21 @@
         }
 
         .p-autocomplete-input-multiple {
+            // Chip container <ul> was rendering taller than sibling p-multiselect /
+            // p-select widgets: its own vertical padding stacked on top of the inner
+            // input's 36px min-height. Pin the ul to 36px and zero its vertical
+            // padding so the inner input fills it instead of adding to it.
+            min-height: 36px;
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+            align-items: center;
+
+            .p-autocomplete-input,
+            .p-autocomplete-input-chip input,
+            .p-autocomplete-input-chip .p-inputtext {
+                min-height: 0 !important;
+            }
+
             &:hover {
                 border-color: var(--first) !important;
             }
@@ -1051,6 +1557,64 @@ p-datepicker .p-datepicker-dropdown,
     }
 }
 
+// Dropdown overlay panel — option truncation
+// Pattern: factory/patterns/dropdown-option-truncation.md
+// Caps overlay width; truncates each option with ellipsis. Components SHOULD
+// provide an item template that sets [title]="<label>" so the browser's
+// native tooltip reveals the full value on hover (D-3 / D-4).
+.p-select-overlay,
+.p-autocomplete-overlay,
+.p-dropdown-panel {
+    max-width: min(420px, calc(100vw - 32px));
+
+    .p-select-option,
+    .p-autocomplete-option,
+    .p-dropdown-item {
+        display: block;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        // Covers templated item content wrapped in <span> / <div>
+        > * {
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+}
+
+// Multiselect overlay — same width cap, but options keep flex layout so the
+// checkbox and label have a natural gap. Using `display: block` + inline-block
+// children (as we do for select/autocomplete) collapses the checkbox-to-label
+// space. Codified 2026-05-21 after `/admin/tracking/events` Filter-by-users
+// regression.
+.p-multiselect-overlay {
+    max-width: min(420px, calc(100vw - 32px));
+
+    .p-multiselect-option {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        max-width: 100%;
+
+        // The label child truncates; the checkbox keeps its natural size.
+        // `:not(.p-checkbox)` matches both the default text span and any
+        // templated `<span>` wrapper.
+        > *:not(.p-checkbox) {
+            min-width: 0;
+            flex: 1 1 auto;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+
 // PrimeNG Autocomplete option selected (for p-autocomplete components)
 .p-autocomplete-option-selected {
     background-color: var(--first) !important;
@@ -1443,6 +2007,17 @@ p {
 
 .md-drppicker .btn {
     background-color: var(--tabs_bg) !important;
+    // Platform Submit-button convention (2026-05-21): near-square corners,
+    // Bootstrap .btn natural size (~31px tall). Override the library's
+    // line-height: 36px which inflates the button to 45px.
+    border-radius: 2px !important;
+    min-height: 0 !important;
+    height: auto !important;
+    line-height: 1.5 !important;
+    padding: 0.375rem 0.75rem !important;
+    font-size: 13px;
+    font-weight: 500;
+    text-transform: none !important;
 }
 
 .md-drppicker .ranges ul li button.active {

package/scss/custom-bootstrap/_buttons.scss

@@ -17,7 +17,11 @@ button:hover {
 }
 
 .btn {
-    border-radius: 2px;
+    border-radius: 4px;
+}
+
+.p-button {
+    border-radius: 4px;
 }
 
 .btn-circle {

package/scss/custom-bootstrap/_card.scss

@@ -248,7 +248,7 @@
 
 .card {
     background-color: rgb(255 255 255);
-    border: 1px solid rgb(218 220 224) !important;
+    border: 1px solid rgb(226 229 234) !important; // N200 — design-system line token
     border-radius: 8px;
     box-sizing: border-box;
     height: 100%;

package/scss/custom-bootstrap/_forms.scss

@@ -21,8 +21,10 @@ form {
     }
 
     .form-control {
-        border: 1px solid rgb(166 169 174);
-        border-radius: 2px;
+        border: 1px solid #e2e5ea;
+        border-radius: 6px;
+        background-color: #fff; // unified with dropdowns
+        min-height: 36px; // align with p-select / p-multiselect heights
         color: rgb(128 128 128);
 
         /* &::input-placeholder {
@@ -31,21 +33,29 @@ form {
 
         &:placeholder {
             /* Firefox 18- */
-            color: color.adjust($body-bg, $lightness: -20%);
+            color: #a8afbc; // N400 — unified with PrimeNG $placeHolder (lighter than text to read as hint, not value)
         }
 
         &::placeholder {
             /* Firefox 19+ */
-            color: color.adjust($body-bg, $lightness: -20%);
+            color: #a8afbc; // N400 — unified with PrimeNG $placeHolder (lighter than text to read as hint, not value)
+            font-weight: 400;
+            font-style: normal;
         }
 
         /* &:input-placeholder {
             color: color.adjust($body-bg, $lightness: -20%);
         } */
 
-        &:focus {
+        &:focus:not([readonly]):not(:disabled) {
             border-color: rgb(0 0 0);
         }
+        &[readonly]:focus,
+        &:disabled:focus {
+            border-color: #e2e5ea !important;
+            box-shadow: none !important;
+            outline: 0;
+        }
     }
 
     .form-control-position {

package/scss/dashboard/_fixed-navbar.scss

@@ -1,5 +1,5 @@
 .app-sidebar {
-    z-index: 1038; // above navbar (1037) so sidebar header renders on top; below modal-backdrop (1040)
+    z-index: 10000; // above the dashboard header (.navbar-blue is z-index: 9999) so the sidebar header renders on top
 }
 
 .navbar {

package/scss/dashboard/_sidebar-content.scss

@@ -153,7 +153,7 @@
     position: fixed;
     top: 0;
     width: 220px;
-    z-index: 1038;
+    z-index: 10000; // above the dashboard header (.navbar-blue is z-index: 9999); keep both .app-sidebar rules in sync
 
     &.hide-sidebar {
         transform: translate3d(-100%, 0, 0);

package/scss/dashboard/_tabs.scss

@@ -2,7 +2,7 @@
 // Tabs/Navs/Pills
 
 .tab-content {
-    padding: 30px 0 20px;
+    padding: 12px 0 20px;
 }
 
 .p-hidden {
@@ -14,6 +14,7 @@
 
     .nav-link {
         height: 100%;
+        border-radius: 4px 4px 0 0;
 
         &.active {
             background-color: transparent;
@@ -81,7 +82,7 @@
             border: 0;
             padding: 6px !important;
             background: transparent;
-            border-radius: 0;
+            border-radius: 4px 4px 0 0;
             color: map.get($primary, base);
             font-size: 14px;
             font-weight: 400;

package/scss/shared/_prime-ng.scss

@@ -1488,6 +1488,31 @@ body {
         color: $placeHolder;
     } */
 
+    // PrimeNG renders p-select/p-multiSelect placeholders as text nodes inside
+    // .p-placeholder labels (not via the native ::placeholder pseudo) —
+    // unify them explicitly to match $placeHolder.
+    .p-select-label.p-placeholder,
+    .p-multiselect-label.p-placeholder {
+        color: $placeHolder;
+        font-weight: 400;
+        font-style: normal;
+    }
+
+    // p-autoComplete renders a real <input> with a native placeholder attr.
+    // The legacy `body { &::placeholder }` rule above compiles to
+    // body::placeholder (a no-op — body has no placeholder pseudo), so
+    // autocomplete inputs were falling back to browser default until now.
+    // Target every PrimeNG/Bootstrap input placeholder explicitly here.
+    input::placeholder,
+    textarea::placeholder,
+    .p-inputtext::placeholder,
+    .p-autocomplete-input::placeholder {
+        color: $placeHolder;
+        font-weight: 400;
+        font-style: normal;
+        opacity: 1; // override Firefox's default 0.54 so color is honored as-is
+    }
+
     /* PrimeNG 19: Support both old and new class names */
     .ui-inputtext.ng-dirty.ng-invalid,
     .p-inputtext.ng-dirty.ng-invalid {
@@ -2245,49 +2270,67 @@ body {
         }
     }
 
-    /* PrimeNG 19 Accordion - same visual as legacy (gray default, primary active, white content) */
+    /* PrimeNG 19/21 Accordion - Refined Utilitarian (Linear/Attio register):
+       single rounded shell, hairline borders, internal dividers between panels,
+       white surface, calm hover, accent indicator on the active panel.
+       !important on bg/border/padding is required since PrimeNG 21's theme stylesheet
+       loads after our SCSS and matches at the same specificity. */
     .p-accordion {
+        border: 1px solid #e2e5ea !important; /* N200 line */
+        border-radius: 12px !important; /* lg radius (containers) */
+        background-color: #ffffff !important; /* N0 surface */
+        overflow: hidden; /* clip panel hover/active bg to the rounded shell */
+
         .p-accordionpanel {
-            margin-bottom: 2px;
+            margin-bottom: 0;
+            border-bottom: 1px solid #e2e5ea; /* internal hairline divider */
+
+            &:last-of-type {
+                border-bottom: 0;
+            }
 
             > .p-accordionheader {
-                background-color: rgb(239 239 239);
-                border: 1px solid $ng-gray;
-                color: $font-color-main;
-                padding: 0.857em 1em;
+                background-color: #ffffff !important;
+                border: 0 !important;
+                padding: 0.75em 1em !important;
+                transition:
+                    background-color 0.15s ease-out,
+                    box-shadow 0.15s ease-out;
 
                 .p-accordionheader-toggle-icon {
-                    color: $titleBarIcon;
+                    color: #7c8696; /* N500 ink-3 */
+                    transition:
+                        transform 0.2s ease-out,
+                        color 0.15s ease-out;
                 }
             }
 
             &:not(.p-accordionpanel-active):not(.p-disabled) {
                 > .p-accordionheader:hover {
-                    border: 1px solid $ng-gray;
-                    color: $font-color-main;
+                    background-color: #f7f8fa !important; /* N50 bg */
+                    border: 0 !important;
 
                     .p-accordionheader-toggle-icon {
-                        color: $font-color-main;
+                        color: #3d4654; /* N700 */
                     }
                 }
             }
 
             &:not(.p-disabled).p-accordionpanel-active {
                 > .p-accordionheader {
-                    background-color: rgb(239 239 239);
-                    color: rgb(255 255 255);
+                    background-color: #f7f8fa !important; /* N50 to mark open */
+                    box-shadow: inset 2px 0 0 0 var(--first); /* sacred accent edge */
 
                     .p-accordionheader-toggle-icon {
-                        color: rgb(255 255 255);
+                        color: var(--first);
                     }
                 }
 
                 > .p-accordionheader:hover {
-                    background-color: rgb(239 239 239);
-                    color: rgb(255 255 255);
+                    background-color: #f7f8fa !important;
 
                     .p-accordionheader-toggle-icon {
-                        color: rgb(255 255 255);
+                        color: var(--first);
                     }
                 }
 
@@ -2300,14 +2343,15 @@ body {
         .p-accordioncontent {
             max-height: 0 !important;
             overflow: hidden !important;
-            transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+            transition: max-height 0.2s ease-out !important;
         }
 
         .p-accordioncontent-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
+            background-color: #ffffff !important;
+            border: 0 !important;
+            border-top: 1px solid #eef0f3 !important; /* N100 — softer than panel divider */
             color: $font-color-main;
-            padding: 1.171em 1em;
+            padding: 1rem 1.125rem !important;
             box-sizing: border-box;
         }
     }
@@ -2953,7 +2997,7 @@ body {
         .p-datatable-header {
             background: transparent !important;
             border: 0;
-            padding: 0.25em 0.5em;
+            padding: 0.25em 0.5em 10px; // canonical filter→thead gap (2026-05-21)
         }
 
         .p-datatable-thead {
@@ -5093,8 +5137,12 @@ body {
     }
 
     .total-records-count {
-        bottom: -8px;
+        color: #7c8696; /* N500 ink-3 — quiet meta */
         float: left;
+        font-size: 0.9375rem; /* 15px — quiet but readable */
+        font-weight: 400;
+        letter-spacing: 0;
+        padding: 8px 10px;
         position: relative;
         white-space: nowrap;
     }
@@ -5143,6 +5191,23 @@ body {
     color: rgb(255 255 255) !important;
 }
 
+.primeng-datatable-container table thead tr:first-child th:first-child {
+    border-top-left-radius: 4px;
+}
+
+// Apply the right-corner radius to whichever cell visually sits at the
+// right edge: if the last <th> is an actions-list-* (collapsed to 0px),
+// the visible right edge is the previous header cell. Targeting both
+// covers tables with and without the actions column.
+.primeng-datatable-container table thead tr:first-child th:last-child,
+.primeng-datatable-container
+    table
+    thead
+    tr:first-child
+    th:nth-last-child(2):has(+ th[class*='actions-list-']) {
+    border-top-right-radius: 4px;
+}
+
 .analytics {
     padding-bottom: 30px;
 

package/scss/variables/_primeng-variables.scss

@@ -69,8 +69,8 @@ $paginationHover: rgb(234 234 234);
 /* Prime add on button background color  */
 $input-ground-addon: rgb(244 244 244);
 
-/* Placeholder Color  */
-$placeHolder: rgb(102 102 102);
+/* Placeholder Color — design-system N400 (calibrated 2026-05-21 for cross-widget uniformity; N400 keeps hints distinct from real values) */
+$placeHolder: #a8afbc;
 
 /* Hover and not selected button */
 $selectButton: rgb(200 200 200);