@sava-info-systems/api-maker-with-extensions 2.2.1 → 3.0.0

package/dist/assets/primeng-theme/primeng-theme-overrides.scss

@@ -4,7 +4,16 @@
     padding: .3rem .75rem;
 }
 .p-datatable .p-datatable-thead > tr > th {
-    background-color: #2b2b2b;
+    // brand-tinted dark navy header, a touch lighter than rows
+    background-color: #1b2636;
+    border-bottom: 1px solid rgba(97, 175, 239, 0.15);
+}
+// Scrollable datatable sticky header/footer — brand navy (was grey #3b3b3b).
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1b2636 !important;
 }
 .p-treenode-label { width: 100%; }
 .p-tree, .p-tree .p-tree-container .p-treenode .p-treenode-content { padding: 0; }
@@ -13,18 +22,88 @@ p-progressSpinner {
     position: absolute;
     top: 0;
     left: 0;
-    background: rgba(32, 32, 32, .75);
+    // Flat navy glass loading overlay (no gradient).
+    background-color: rgba(8, 12, 18, 0.72);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
     width: 100%;
     height: 100%;
     z-index: 2;
 }
+// Branded spinner: replace primeng's rotating SVG with the API Maker rocket
+// mark (pulsing, stays upright) inside a rotating brand blue->green ring.
+p-progressSpinner .p-progress-spinner-svg { display: none !important; }
 p-progressSpinner .p-progress-spinner {
     position: absolute;
-    top: calc(50% - 2rem);
-    left: calc(50% - 2rem);
+    top: 50%;
+    left: 50%;
+    width: 56px !important;
+    height: 56px !important;
+    transform: translate(-50%, -50%);
+
+    // Rotating brand ring — a fixed 56px square so it stays a perfect circle
+    // regardless of the host element's aspect ratio. Centred about its own
+    // midpoint so rotation has no wobble.
+    // Complete brand ring via a conic-gradient (full 360° circle, no border gaps),
+    // masked in the centre to leave a 3px-thick ring. Rotates for the loading motion.
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 56px;
+        height: 56px;
+        box-sizing: border-box;
+        border-radius: 50%;
+        background: conic-gradient(
+            from 0deg,
+            rgba(97, 175, 239, 0.18) 0deg,
+            rgba(97, 175, 239, 0.18) 90deg,
+            #61AFEF 200deg,
+            #3DBE79 320deg,
+            rgba(97, 175, 239, 0.18) 360deg
+        );
+        // carve out the centre so the gradient reads as a 3px ring (full circle)
+        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
+        mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
+        transform-origin: 50% 50%;
+        animation: am-spin 0.9s linear infinite;
+    }
+    // API Maker rocket mark, gently pulsing in the centre.
+    // Dark theme (default): use the dark-mode rocket SVG (lighter body/wings so it pops on dark).
+    &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 30px;
+        height: 30px;
+        transform: translate(-50%, -50%);
+        background: url("/assets/images/logo/store_logo-dark.svg") center / contain no-repeat;
+        filter: drop-shadow(0 0 6px rgba(97, 175, 239, 0.4));
+        animation: am-pulse 1.2s ease-in-out infinite;
+    }
+}
+// Light theme: the original (darker) rocket reads well on the light spinner centre.
+html.LIGHT p-progressSpinner .p-progress-spinner::after {
+    background: url("/assets/images/logo/store_logo-light.svg") center / contain no-repeat !important;
+    filter: drop-shadow(0 0 5px rgba(12, 83, 164, 0.30));
+}
+@keyframes am-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
+@keyframes am-pulse {
+    /* keep the centring translate; only the scale changes */
+    0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.75; }
+    50%      { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
 }
 .p-tabview .p-tabview-panels { padding: 0; }
-.p-tabview .p-tabview-nav { margin-bottom: 0; }
+// New UI standard: brand-blue tinted tab strip underline (was flat grey #4f4f4f).
+.p-tabview .p-tabview-nav {
+    margin-bottom: 0;
+    border-color: rgba(97, 175, 239, 0.18) !important;
+}
 .p-tabview .p-tabview-nav li .p-tabview-nav-link { padding: .4rem .75rem; background: transparent; }
 
 .p-tabview .p-tabview-nav li .p-tabview-nav-link,
@@ -33,69 +112,663 @@ p-progressSpinner .p-progress-spinner {
 .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
     background: #4e4e4e;
 }
+// Kill the theme's red/maroon focus ring on a pressed/focused tab header —
+// replace with a subtle brand-blue ring (same pattern as the datatable rows
+// and confirm-dialog buttons above).
+.p-tabview .p-tabview-nav li .p-tabview-nav-link:focus,
+.p-tabview .p-tabview-nav li .p-tabview-nav-link:focus-visible,
+.p-tabview .p-tabview-nav li .p-tabview-nav-link.p-focus,
+.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link:focus {
+    outline: none !important;
+    box-shadow: inset 0 0 0 0.12rem rgba(97, 175, 239, 0.5) !important;
+}
 .p-dialog .p-dialog-footer,
-.p-dialog .p-dialog-header { padding: .5rem; }
+// Match the bootstrap .modal-header height (padding .25rem .5rem + line-height 1.5rem).
+.p-dialog .p-dialog-header { padding: .25rem .5rem !important; line-height: 1.5rem; }
 .p-dialog .p-dialog-content { padding: 0 1rem; }
-.p-confirm-dialog-reject { background-color: #1d1d1d; }
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(2n) { background-color: rgba(255, 255, 255, 0.03); }
-.p-datatable .p-datatable-tbody > tr { background: #303030; }
+// Dialog title — proper modal-title size (was oversized from the theme default).
+.p-dialog .p-dialog-title { font-size: 1.05rem !important; font-weight: 700 !important; }
+// Confirm buttons — fixed 30px height (matches the standard modal buttons).
+.p-confirm-dialog .p-dialog-footer .p-button {
+    height: 30px !important;
+    padding: 0 0.6rem !important;
+    font-size: 0.875rem !important;
+    line-height: 1 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+}
+.p-confirm-dialog .p-dialog-footer .p-button .p-button-icon { font-size: 0.875rem !important; }
+
+// New UI standard: brand-navy dialog (was flat grey #3b3b3b).
+.p-dialog .p-dialog-content,
+.p-dialog .p-dialog-footer {
+    background: #141c29 !important;
+    color: #d7dae0 !important;
+}
+// Footer top divider — brand-blue hairline (was the leftover grey #4f4f4f from theme.css).
+.p-dialog .p-dialog-footer { border-top: 1px solid rgba(97, 175, 239, 0.18) !important; }
+.p-dialog .p-dialog-header {
+    background-color: #1b2636 !important;
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
+    border-bottom: 1px solid rgba(97, 175, 239, 0.18) !important;
+    color: #ffffff !important;
+}
+// Standard modal radius (matches Bootstrap .modal-content; cards in this app are square,
+// so keep the dialog to the conventional subtle 0.3rem rather than an exaggerated round).
+.p-dialog { border: 1px solid rgba(97, 175, 239, 0.20) !important; border-radius: 0.3rem !important; overflow: hidden; }
+.p-dialog .p-dialog-header { border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }
+.p-dialog .p-dialog-footer { border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }
+// Confirm "No" (reject) = neutral dark navy; "Yes" (accept) = brand blue->green (was maroon).
+.p-confirm-dialog-reject {
+    background-color: #1c2839 !important;
+    background-image: linear-gradient(180deg, #20293a 0%, #161f2d 100%) !important;
+    border: 1px solid rgba(97, 175, 239, 0.25) !important;
+    color: #d7dae0 !important;
+}
+// Kill the theme's red/maroon focus ring on the auto-focused reject/accept buttons — use brand (or none).
+.p-confirm-dialog-reject:focus,
+.p-confirm-dialog-reject.p-focus,
+.p-confirm-dialog-reject:enabled:focus {
+    border: 1px solid rgba(97, 175, 239, 0.45) !important;
+    box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.25) !important;
+    outline: 0 none !important;
+}
+.p-confirm-dialog-accept {
+    background-color: #0C53A4 !important;
+    background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
+    border: 1px solid rgba(97, 175, 239, 0.45) !important;
+    color: #ffffff !important;
+}
+.p-confirm-dialog-accept:enabled:hover,
+.p-confirm-dialog-accept:enabled:focus,
+.p-confirm-dialog-accept:enabled:active,
+.p-confirm-dialog-accept:focus,
+.p-confirm-dialog-accept.p-focus {
+    background-image: linear-gradient(135deg, #1565c9 0%, #0e8576 55%, #00a84d 100%) !important;
+    border: 1px solid rgba(97, 175, 239, 0.6) !important;
+    box-shadow: 0 0 0 0.2rem rgba(97, 175, 239, 0.30) !important;
+    outline: 0 none !important;
+}
+// ===== Confirm dialog — polished alert layout =====
+// Content: comfortable padding, icon + message aligned on a single centred row.
+.p-confirm-dialog .p-dialog-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.35rem 1.5rem !important;
+}
+// Warning icon rendered as a soft amber "caution badge" (circular halo) rather than
+// a bare glyph — gives the alert a clearer, more finished affordance.
+.p-confirm-dialog .p-confirm-dialog-icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    margin: 0 !important;
+    color: #ffc84a !important;              // brand-amber caution
+    border-radius: 50%;
+    background: radial-gradient(circle at 50% 50%, rgba(240, 165, 0, 0.22) 0%, rgba(240, 165, 0, 0.08) 70%, transparent 100%);
+    border: 1px solid rgba(240, 165, 0, 0.35);
+    box-shadow: 0 0 12px rgba(240, 165, 0, 0.20), inset 0 0 6px rgba(240, 165, 0, 0.15);
+}
+// Center the glyph itself inside the badge. The pi-exclamation-triangle glyph carries
+// internal top/bottom padding in its em box that makes it sit high; line-height:1 on the
+// ::before (the actual icon char) + flex-centering pins it to the true optical center.
+.p-confirm-dialog .p-confirm-dialog-icon::before {
+    display: block;
+    line-height: 1 !important;
+    font-size: 1.5rem !important;
+    margin-bottom: 5px;
+}
+// Message text — left aligned next to the badge, comfortable size/leading.
+// (Overrides the global .dialog-text `margin:30px; text-align:center` used by callers so
+//  the icon+message read as one tidy row instead of a large centred block.)
+.p-confirm-dialog .p-confirm-dialog-message {
+    margin: 0 !important;
+    line-height: 1.5;
+    font-size: 0.95rem;
+    color: #dfe4ec !important;
+}
+.p-confirm-dialog .p-confirm-dialog-message .dialog-text {
+    margin: 0 !important;
+    text-align: left !important;
+}
+// Optional inline leading icon inside the message (e.g. pi-trash for delete confirmations).
+// Sits just before the text, tinted the danger red so it reinforces the destructive action.
+.p-confirm-dialog .p-confirm-dialog-message .confirm-msg-icon {
+    margin-right: 0.5rem;
+    font-size: 0.95rem;
+    vertical-align: -1px;
+    color: #ff7b72 !important;
+}
+// The emphasised (danger) phrase within the message — keep it distinct but on-brand.
+.p-confirm-dialog .p-confirm-dialog-message .text-danger {
+    color: #ff7b72 !important;
+    font-weight: 700;
+}
+
+// Footer — a touch more breathing room and a consistent gap between No / Yes.
+.p-confirm-dialog .p-dialog-footer {
+    padding: 0.6rem 0.85rem !important;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+.p-confirm-dialog .p-dialog-footer .p-button { margin: 0 !important; }
+// New UI standard: brand-tinted dark navy for grids/tables (matches inputs, cards, tiles).
+// Selection/hover use brand blue instead of the legacy maroon from theme.css.
+.p-datatable { background: #10161f; }
+// Caption/header area (holds toolbar dropdowns etc.) — brand navy instead of the legacy
+// grey #3b3b3b from theme.css, so a control inside it doesn't read as a dark border band.
+.p-datatable .p-datatable-header {
+    background: #131b27;
+    color: #c6ccd6;
+    border: 0 none;
+    border-bottom: 1px solid rgba(97, 175, 239, 0.15);
+}
+.p-datatable .p-datatable-tbody > tr { background: #131b27; color: #c6ccd6; transition: background-color .12s ease; }
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(2n) { background-color: #18222f; }
+// Hover (incl. selectable rows) — brand blue->green gradient wash.
+.p-datatable .p-datatable-tbody > tr:not(.p-highlight):hover,
+.p-datatable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):hover {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
+    background-color: #1d2a3d !important;
+    color: #ffffff !important;
+}
+// Kill the maroon focus outline on rows (replace with a brand-blue ring).
+.p-datatable .p-datatable-tbody > tr:focus {
+    outline: 0.15rem solid rgba(97, 175, 239, 0.5) !important;
+    outline-offset: -0.15rem !important;
+}
+.p-treetable .p-treetable-tbody > tr:focus {
+    outline: 0.15rem solid rgba(97, 175, 239, 0.5) !important;
+    outline-offset: -0.15rem !important;
+}
+// Hoverable-rows variant also defaults to maroon in theme.css.
+.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
+    background-color: #1d2a3d !important;
+    color: #ffffff !important;
+}
+// Selected row — brand blue->green gradient + left accent. Beats theme.css maroon, incl. striped-even.
+.p-datatable .p-datatable-tbody > tr.p-highlight,
+.p-datatable .p-datatable-tbody > tr.p-selectable-row.p-highlight,
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight,
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd).p-highlight {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
+    background-color: #16273d !important;
+    color: #ffffff !important;
+    box-shadow: none !important;
+}
 .p-datatable .p-datatable-tbody > tr > td {
-    border-top: 0.5px solid #4b4b4b;
+    border-top: 0.5px solid rgba(97, 175, 239, 0.12);
     border-bottom: 0;
     border-left: 0;
     border-right: 0;
 }
 
-// Tooltip settings
-.p-tooltip.p-tooltip-right .p-tooltip-arrow { border-right-color: #e3b70f;}
-.p-tooltip.p-tooltip-left .p-tooltip-arrow { border-left-color: #e3b70f;}
-.p-tooltip.p-tooltip-top .p-tooltip-arrow { border-top-color: #e3b70f;}
-.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #e3b70f;}
-.p-tooltip .p-tooltip-text { background: #e3b70f; color: #070707; padding: .25rem .75rem; }
+// Tooltip settings — New UI standard: brand-tinted dark navy (was bright gold #e3b70f).
+$tooltip-bg: #16273d;
+.p-tooltip.p-tooltip-right .p-tooltip-arrow { border-right-color: $tooltip-bg;}
+.p-tooltip.p-tooltip-left .p-tooltip-arrow { border-left-color: $tooltip-bg;}
+.p-tooltip.p-tooltip-top .p-tooltip-arrow { border-top-color: $tooltip-bg;}
+.p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: $tooltip-bg;}
+.p-tooltip .p-tooltip-text {
+    background-color: $tooltip-bg;
+    background-image: linear-gradient(135deg, #1b3553 0%, #133024 100%);
+    color: #e6ebf2;
+    border: 1px solid rgba(97, 175, 239, 0.35);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
+    padding: .25rem .75rem;
+}
 
-// Switch
-.p-inputswitch .p-inputswitch-slider::before { height: .7rem; margin-top: -0.36rem; border-radius: 2px; }
-.p-inputswitch { height: 1rem; }
-.p-inputswitch .p-inputswitch-slider { background: #2b2b2b; }
-.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #000; }
+// ===== Switch (p-inputSwitch) — brand pill: off = navy track + light round knob, on = brand
+//       blue->green track + white knob, focus = brand-blue ring. Was grey/maroon. =====
+.p-inputswitch { width: 2.5rem; height: 1.25rem; }
+.p-inputswitch .p-inputswitch-slider {
+    background: #1a2738 !important;
+    border: 1px solid rgba(97, 175, 239, 0.30);
+    border-radius: 1rem !important;            // pill track
+}
+// Round knob, vertically centred, sized to the track (off state = light slate so it's visible on navy).
+.p-inputswitch .p-inputswitch-slider::before {
+    width: 0.9rem; height: 0.9rem;
+    left: 0.18rem; top: 50%; margin-top: -0.45rem;
+    border-radius: 50% !important;
+    background: #c7d2e0 !important;
+    transition: transform 0.15s ease, background 0.15s ease;
+}
+.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #22324a !important; }
+.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
+.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
+    background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
+    background-color: #0C53A4 !important;
+    border-color: rgba(97, 175, 239, 0.5);
+}
+// On state — white knob slid to the right.
+.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before {
+    background: #ffffff !important;
+    transform: translateX(1.25rem);
+}
+.p-inputswitch.p-focus .p-inputswitch-slider {
+    box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.35) !important;
+    outline: 0 none !important;
+}
 
 .mt-2px { margin-top: 2px; }
 
 // Dropdown size related changes
 .p-inputtext { font-size: 14px; padding: .25rem .5rem; }
+// New UI standard: brand navy fill + brand-blue border on primeng text inputs (e.g. p-tree-filter).
+// Beats theme.css greys (#4f4f4f) and maroon focus (#8a0000/#7a0000).
+.p-inputtext:not(.p-dropdown-label) {
+    background-color: #16202e !important;
+    background-image: linear-gradient(160deg, #1c2a3d 0%, #141e2c 100%) !important;
+    border: 1px solid rgba(97, 175, 239, 0.28) !important;
+    color: #d7dae0 !important;
+}
+.p-inputtext:not(.p-dropdown-label):enabled:hover {
+    border-color: rgba(97, 175, 239, 0.45) !important;
+}
+.p-inputtext:not(.p-dropdown-label):enabled:focus {
+    border-color: rgba(97, 175, 239, 0.7) !important;
+    box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.30) !important;
+    outline: 0 none !important;
+}
+.p-inputtext::placeholder { color: #6f7c8c !important; }
 .p-component.p-overlay { z-index: 1100 !important; }
 .p-dropdown-panel .p-dropdown-header { padding: 0.3rem 0.3rem; }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item { padding: .25rem 1rem; }
 ol, ul, dl { margin-bottom: 0; }
-.p-dropdown .p-dropdown-trigger { background-color: #404040; }
-.p-dropdown { border: none; background: #404040; }
+// New UI standard: brand-tinted navy gradient for dropdowns (color-only, matches .form-control).
+.p-dropdown .p-dropdown-trigger { background-color: transparent !important; }
+// Dropdown control fill — brand navy gradient. Covers plain, compound .p-input-filled (same element),
+// descendant .p-input-filled, hover/focus — to beat theme.css #2e2e2e / #404040 / #4f4f4f.
+.p-dropdown,
+.p-dropdown.p-input-filled,
+.p-dropdown.p-input-filled:not(.p-disabled):hover,
+.p-input-filled .p-dropdown,
+.p-input-filled .p-dropdown:not(.p-disabled):hover {
+    // Subtle brand-blue hairline border (matches .form-control) — a touch brighter than card edges.
+    border: 1px solid rgba(97, 175, 239, 0.28) !important;
+    background-color: #1a2738 !important;
+    background-image: linear-gradient(160deg, #1c2a3d 0%, #141e2c 100%) !important;
+}
+// Focus — brand-blue border, matching .form-control:focus.
+.p-dropdown.p-input-filled:not(.p-disabled).p-focus,
+.p-input-filled .p-dropdown:not(.p-disabled).p-focus,
+.p-dropdown:not(.p-disabled).p-focus {
+    border: 1px solid rgba(97, 175, 239, 0.55) !important;
+    background-color: #1a2738 !important;
+    background-image: linear-gradient(160deg, #1c2a3d 0%, #141e2c 100%) !important;
+    box-shadow: 0 0 0 0.2rem rgba(97, 175, 239, 0.35) !important;
+}
+// The inner label/input never shows its own grey fill.
+.p-dropdown .p-dropdown-label,
+.p-dropdown.p-input-filled .p-dropdown-label,
+.p-dropdown .p-inputtext { background: transparent !important; }
+// Selected-value text must match the .form-control font-size + colour (was a faint theme.css grey
+// at a different size, so dropdowns looked inconsistent next to plain inputs).
+.p-dropdown .p-dropdown-label {
+    color: #d7dae0 !important;
+    font-size: 0.875rem !important;
+    line-height: 1.5 !important;
+}
+.p-dropdown .p-dropdown-label.p-placeholder { color: #6f7c8c !important; }
+// Dropdown items in the panel — same size for consistency.
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item { font-size: 0.875rem !important; }
 
-.p-tabview .p-tabview-panels { background: #303030; }
+html.DARK .p-tabview .p-tabview-panels { background: #141c29; }
+html.LIGHT .p-tabview .p-tabview-panels { background: #ffffff; color: #2b3340; }
 
 .p-input-small-dropdown {
     .p-inputtext { padding: 0 0.5rem; }
 }
 
+// ===== API dropdown (api-testing filter-section) — aligned columns =====
+// Styled globally (panel is appendTo="body"). Method + category are fixed-width columns and
+// the name has a min-width, so every column (method | [CATEGORY] | name | path) lines up.
+.api-dd-panel {
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(97, 175, 239, 0.22);
+}
+/* filter box — give it room, round it and add a brand focus ring */
+.api-dd-panel .p-dropdown-header { padding: 0.6rem 0.75rem 0.5rem; }
+.api-dd-panel .p-dropdown-filter-container { width: 100%; }
+.api-dd-panel .p-dropdown-filter-container .p-dropdown-filter {
+    border-radius: 0.4rem;
+    padding: 0.45rem 2.25rem 0.45rem 0.75rem;
+}
+.api-dd-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
+    right: 0.85rem; color: var(--brand-secondary, #61AFEF);
+}
+.api-dd-panel .p-dropdown-items { padding: 0.25rem; }
+.api-dd-panel .p-dropdown-items .p-dropdown-item {
+    padding: 0.4rem 0.65rem !important;
+    border-radius: 0.35rem;
+    margin-bottom: 1px;
+}
+.api-dd-panel .p-dropdown-items .p-dropdown-item > span {
+    display: flex; align-items: center; gap: 0.6rem; width: 100%;
+}
+/* method column (GET/POST/PUT/DELETE) — rendered as a small badge for scannability */
+.api-dd-panel .p-dropdown-items .p-dropdown-item .get,
+.api-dd-panel .p-dropdown-items .p-dropdown-item .post,
+.api-dd-panel .p-dropdown-items .p-dropdown-item .put,
+.api-dd-panel .p-dropdown-items .p-dropdown-item .delete {
+    flex: 0 0 56px; width: 56px; margin: 0 !important;
+    text-align: center;
+    font-size: 0.6875rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.04em;
+    padding: 0.15rem 0;
+    border-radius: 0.25rem;
+    border: 1px solid currentColor;
+    text-transform: uppercase;
+}
+.api-dd-panel .p-dropdown-items .p-dropdown-item .get    { background: rgba(47, 179, 106, 0.14); }
+.api-dd-panel .p-dropdown-items .p-dropdown-item .post   { background: rgba(224, 168, 0, 0.14); }
+.api-dd-panel .p-dropdown-items .p-dropdown-item .put    { background: rgba(97, 175, 239, 0.14); }
+.api-dd-panel .p-dropdown-items .p-dropdown-item .delete { background: rgba(231, 76, 60, 0.14); }
+/* keep the badge's semantic colour even on the highlighted/hover row
+   (the generic rule above forces white text on .p-highlight) */
+.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .get,
+.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .get    { color: var(--accent-success) !important; background: rgba(47, 179, 106, 0.22); }
+.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .post,
+.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .post   { color: var(--accent-warning) !important; background: rgba(224, 168, 0, 0.22); }
+.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .put,
+.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .put    { color: var(--brand-secondary) !important; background: rgba(97, 175, 239, 0.22); }
+.api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .delete,
+.api-dd-panel .p-dropdown-items .p-dropdown-item:hover .delete { color: var(--accent-error) !important; background: rgba(231, 76, 60, 0.22); }
+/* [CATEGORY] column — rendered as a small chip; SCHEMA vs GEN colour-coded */
+.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat {
+    flex: 0 0 76px; width: 76px !important; margin: 0;
+    display: inline-flex; align-items: center; justify-content: center;
+    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em;
+    text-transform: uppercase;
+    padding: 0.12rem 0.3rem;
+    border-radius: 0.25rem;
+    border: 1px solid;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* SCHEMA = brand-blue, GEN = teal/green — distinct at a glance */
+.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat[data-cat="SCHEMA"] {
+    color: #7fb6ec; border-color: rgba(127, 182, 236, 0.45); background: rgba(97, 175, 239, 0.12);
+}
+.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat[data-cat="GEN"] {
+    color: #3fc99a; border-color: rgba(63, 201, 154, 0.45); background: rgba(47, 179, 106, 0.12);
+}
+/* any other category — neutral slate chip */
+.api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat:not([data-cat="SCHEMA"]):not([data-cat="GEN"]) {
+    color: #9aa7b8; border-color: rgba(154, 167, 184, 0.35); background: rgba(154, 167, 184, 0.10);
+}
+/* name column — min-width so short names still push the path to a common column */
+.api-dd-panel .p-dropdown-items .p-dropdown-item > span > span:not([class]):not([style]) {
+    flex: 0 0 auto; min-width: 240px; font-weight: 500;
+}
+/* path — muted, fills remaining space, truncates if very long */
+.api-dd-panel .p-dropdown-items .p-dropdown-item .text-muted {
+    flex: 1 1 auto; margin: 0 !important;
+    font-size: 0.8125rem; opacity: 0.8;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+// ===== API dropdown — SELECTED item (the closed control's label) =====
+// The selectedItem template renders inside .p-dropdown-label; without this it
+// collapses to inline text ("SCHEMAGet all"). Give it the same badge/chip treatment.
+.api-dd-control .p-dropdown-label {
+    display: flex !important; align-items: center; gap: 0.6rem;
+    overflow: hidden;
+}
+.api-dd-control .p-dropdown-label > span {
+    display: flex; align-items: center; gap: 0.6rem; width: 100%; overflow: hidden;
+}
+/* method badge — colour set with !important to beat the global .p-dropdown-label colour */
+.api-dd-control .p-dropdown-label .get,
+.api-dd-control .p-dropdown-label .post,
+.api-dd-control .p-dropdown-label .put,
+.api-dd-control .p-dropdown-label .delete {
+    flex: 0 0 auto; margin: 0 !important;
+    font-size: 0.6875rem !important; font-weight: 700 !important;
+    letter-spacing: 0.04em; text-transform: uppercase;
+    padding: 0.15rem 0.45rem; border-radius: 0.25rem; border: 1px solid currentColor;
+}
+.api-dd-control .p-dropdown-label .get    { color: var(--accent-success) !important; background: rgba(47, 179, 106, 0.14); }
+.api-dd-control .p-dropdown-label .post   { color: var(--accent-warning) !important; background: rgba(224, 168, 0, 0.14); }
+.api-dd-control .p-dropdown-label .put    { color: var(--brand-secondary) !important; background: rgba(97, 175, 239, 0.14); }
+.api-dd-control .p-dropdown-label .delete { color: var(--accent-error) !important; background: rgba(231, 76, 60, 0.14); }
+/* category chip */
+.api-dd-control .p-dropdown-label .api-cat {
+    flex: 0 0 auto; width: auto !important; margin: 0;
+    display: inline-flex; align-items: center; justify-content: center;
+    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
+    padding: 0.12rem 0.4rem; border-radius: 0.25rem; border: 1px solid;
+}
+.api-dd-control .p-dropdown-label .api-cat[data-cat="SCHEMA"] {
+    color: #7fb6ec !important; border-color: rgba(127, 182, 236, 0.45); background: rgba(97, 175, 239, 0.12);
+}
+.api-dd-control .p-dropdown-label .api-cat[data-cat="GEN"] {
+    color: #3fc99a !important; border-color: rgba(63, 201, 154, 0.45); background: rgba(47, 179, 106, 0.12);
+}
+.api-dd-control .p-dropdown-label .api-cat:not([data-cat="SCHEMA"]):not([data-cat="GEN"]) {
+    color: #9aa7b8 !important; border-color: rgba(154, 167, 184, 0.35); background: rgba(154, 167, 184, 0.10);
+}
+/* name — don't let it crowd the path; path muted and ellipsised */
+.api-dd-control .p-dropdown-label > span > span:not([class]):not([style]) {
+    flex: 0 0 auto; font-weight: 500; white-space: nowrap;
+}
+.api-dd-control .p-dropdown-label .text-muted {
+    flex: 1 1 auto; margin: 0 !important;
+    font-size: 0.8125rem; opacity: 0.8;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+// ===== Timezone dropdown — zone name on the left, offset chip on the right =====
+// Styled globally (the panel is appendTo="body", so component styles can't reach it).
+.tz-row {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 0.75rem; width: 100%;
+}
+.tz-row__zone { font-size: 0.875rem; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tz-row__offset {
+    flex: 0 0 auto;
+    font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 600;
+    color: #6fdcaa;
+    padding: 1px 7px; border-radius: 10px;
+    background: rgba(0, 137, 63, 0.14); border: 1px solid rgba(0, 137, 63, 0.30);
+}
+// roomier items in the timezone panel
+.tz-dropdown-panel .p-dropdown-items .p-dropdown-item { padding: 0.45rem 0.85rem !important; }
+.tz-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight .tz-row__offset {
+    color: #ffffff; background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35);
+}
+
+html.LIGHT {
+    .tz-row__offset { color: #1d8a4e; background: rgba(0, 137, 63, 0.10); border-color: rgba(0, 137, 63, 0.28); }
+    .tz-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight .tz-row__offset {
+        color: #ffffff; background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.45);
+    }
+}
+
+.p-multiselect-sm {
+    .p-multiselect-label { padding: 0.25rem 0.5rem; }
+}
+
 p-dropdown.text-secondary {
     .p-dropdown-label {
         color: #7A8288;
     }
 }
 
+// Paginator footer — brand-navy surface + brand-blue controls (was flat grey).
+.p-paginator {
+    background: #141c29 !important;
+    border-top: 1px solid rgba(97, 175, 239, 0.18) !important;
+    color: #9aa6b5 !important;
+}
 .p-paginator .p-paginator-pages .p-paginator-page { color: #cecece; }
 
-.p-paginator .p-paginator-first, .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last,
+.p-paginator .p-paginator-first, .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last {
+    color: #9ec3e8 !important;
+    border-radius: 6px;
+}
 .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { color: #ffffff; }
+.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    color: #ffffff !important;
+    background: rgba(12, 83, 164, 0.22) !important;
+}
+// Active page = brand-blue fill.
+.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #0C53A4 !important;
+    color: #ffffff !important;
+    border-color: #0C53A4 !important;
+}
+// Rows-per-page dropdown — brand navy + brand-blue border.
+.p-paginator .p-dropdown {
+    background: #16202e !important;
+    border: 1px solid rgba(97, 175, 239, 0.30) !important;
+}
+.p-paginator .p-dropdown .p-dropdown-label { color: #d6e2f2 !important; }
+.p-paginator .p-dropdown .p-dropdown-trigger { color: #9ec3e8 !important; }
+.p-paginator .p-dropdown:not(.p-disabled):hover { border-color: rgba(97, 175, 239, 0.55) !important; }
 
 p-paginator {
     .p-paginator .p-dropdown .p-dropdown-label { padding-top: 8px; }
 }
 
 .p-button.p-button-text { color: #ffffff; }
+// NOTE: the :hover here is superseded by the brand-blue-tint rule below
+// (`.p-button.p-button-text:enabled:hover { ... !important }`), which is the
+// effective style. Kept harmless; do not rely on this grey value.
 .p-button.p-button-text:enabled:hover { background: #606060; color: #ffffff; }
-.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { color: white; }
-.p-datepicker table td.p-datepicker-today>span { background: #525252; color: #ffffff; }
+
+// Text / plain / rounded buttons (e.g. p-table row toggler chevron) — transparent, no maroon fill.
+// The theme's base .p-button bg is maroon (#790109); text/plain buttons must stay see-through.
+.p-button.p-button-text,
+.p-button.p-button-plain,
+.p-button.p-button-rounded.p-button-text,
+.p-row-toggler.p-button {
+    background: transparent !important;
+    background-color: transparent !important;
+    background-image: none !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    color: #61AFEF !important;
+}
+.p-button.p-button-text:enabled:hover,
+.p-button.p-button-plain:enabled:hover,
+.p-row-toggler.p-button:enabled:hover {
+    background: rgba(97, 175, 239, 0.14) !important;
+    color: #ffffff !important;
+    border-color: transparent !important;
+}
+.p-button.p-button-plain { color: #9fb3cc !important; }
+// ===== Calendar / date picker — brand navy panel + brand-blue accents (was grey/maroon) =====
+.p-datepicker:not(.p-datepicker-inline),
+.p-datepicker {
+    background: #141c29 !important;
+    color: #d7dae0 !important;
+    border: 1px solid rgba(97, 175, 239, 0.20) !important;
+    border-radius: 10px !important;
+    // Size the panel to its calendar grid, not the (full-width) input it is
+    // appended next to — PrimeNG otherwise stretches the panel to match the
+    // trigger width via an inline min-width.
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: 19rem !important;
+}
+// ---- Compact sizing (theme-agnostic): the base theme.css cells (2.5rem, font 1rem,
+//      .5rem padding everywhere) make the panel oversized. Tighten it up. ----
+.p-datepicker { padding: 0.25rem !important; }
+.p-datepicker .p-datepicker-header { padding: 0.35rem 0.5rem !important; }
+.p-datepicker .p-datepicker-header .p-datepicker-prev,
+.p-datepicker .p-datepicker-header .p-datepicker-next { width: 1.75rem !important; height: 1.75rem !important; }
+.p-datepicker table { font-size: 0.85rem !important; margin: 0.25rem 0 !important; }
+.p-datepicker table th { padding: 0.2rem !important; }
+.p-datepicker table th > span { width: 2rem !important; height: 1.6rem !important; }
+.p-datepicker table td { padding: 0.1rem !important; }
+.p-datepicker table td > span { width: 2rem !important; height: 2rem !important; }
+.p-datepicker .p-datepicker-buttonbar { padding: 0.35rem 0.5rem !important; }
+.p-datepicker .p-datepicker-buttonbar .p-button { padding: 0.25rem 0.5rem !important; font-size: 0.8rem !important; }
+.p-datepicker .p-datepicker-header {
+    background: #1b2636 !important;
+    color: #ffffff !important;
+    border-bottom: 1px solid rgba(97, 175, 239, 0.18) !important;
+}
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month,
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year { color: #ffffff !important; }
+.p-datepicker .p-datepicker-header .p-datepicker-prev,
+.p-datepicker .p-datepicker-header .p-datepicker-next { color: #9fb3cc !important; }
+.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+    color: #ffffff !important; background: rgba(97, 175, 239, 0.12) !important;
+}
+.p-datepicker table th > span { color: #9fb3cc !important; }
+.p-datepicker table td > span { color: #d7dae0 !important; border-radius: 7px !important; }
+.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    color: #ffffff !important; background: rgba(97, 175, 239, 0.15) !important;
+}
+.p-datepicker table td.p-datepicker-today > span {
+    background: rgba(97, 175, 239, 0.18) !important; color: #ffffff !important;
+    border: 1px solid rgba(97, 175, 239, 0.35) !important;
+}
+.p-datepicker table td > span.p-highlight {
+    background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
+    color: #ffffff !important;
+}
+.p-datepicker .p-datepicker-buttonbar { border-top: 1px solid rgba(97, 175, 239, 0.15) !important; }
+.p-datepicker .p-datepicker-buttonbar .p-button.p-button-text { color: #61AFEF !important; }
+// The calendar input's trigger icon button — brand blue->green (was maroon primary).
+.p-calendar .p-datepicker-trigger.p-button {
+    background-color: #0C53A4 !important;
+    background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
+    border: 1px solid rgba(97, 175, 239, 0.45) !important;
+    color: #ffffff !important;
+}
+.p-calendar .p-datepicker-trigger.p-button:enabled:hover { filter: brightness(1.08); }
+
+// Calendar input text must match the normal form inputs (0.875rem / .form-control),
+// not the theme's larger 1rem .p-inputtext.
+.p-calendar .p-inputtext { font-size: 0.875rem !important; }
+
+// ---- Time picker (the HH:MM AM/PM spinner under the calendar) ----
+// Base theme.css leaves it with oversized 0.5rem padding everywhere; tighten + brand it.
+.p-datepicker .p-timepicker {
+    padding: 0.4rem 0.5rem !important;
+    border-top: 1px solid rgba(97, 175, 239, 0.15) !important;
+    gap: 0.25rem;
+}
+.p-datepicker .p-timepicker span { font-size: 0.9rem !important; color: #d7dae0 !important; }
+.p-datepicker .p-timepicker > div { padding: 0 0.25rem !important; }
+.p-datepicker .p-timepicker button {
+    width: 1.75rem !important; height: 1.75rem !important;
+    color: #9fb3cc !important; border-radius: 7px !important;
+}
+.p-datepicker .p-timepicker button:enabled:hover {
+    color: #ffffff !important; background: rgba(97, 175, 239, 0.15) !important;
+}
+
+// ===== Log-table summary chips — brand-tinted by category (was loud red/orange/blue/grey) =====
+// Recolour the Bootstrap contextual classes ONLY when applied to a p-chip, keeping the
+// per-category distinction but in a calm brand palette. Text/remove-icon kept readable.
+.p-chip {
+    border-radius: 14px;
+    .p-chip-text { color: inherit; }
+    .p-chip-remove-icon { color: inherit; opacity: 0.7; }
+    .p-chip-remove-icon:hover { opacity: 1; }
+}
+.p-chip.bg-danger  { background-color: #0C53A4 !important; color: #ffffff !important; }   // instances -> brand blue
+.p-chip.bg-warning { background-color: #0a7d6f !important; color: #ffffff !important; }   // databases -> teal
+.p-chip.bg-info    { background-color: #1d8a4e !important; color: #ffffff !important; }   // collections -> green
+.p-chip.bg-light   { background-color: #2a3a4f !important; color: #dbe4f0 !important; }   // apis -> slate
+.p-chip.bg-danger.text-dark,
+.p-chip.bg-warning.text-dark,
+.p-chip.bg-info.text-dark { color: #ffffff !important; }
+.p-chip.bg-light.text-dark { color: #dbe4f0 !important; }
 
 p-tree {
     p-checkbox {
@@ -110,7 +783,15 @@ p-table {
     }
 }
 
-.p-splitter { background-color: #303030; }
+// New UI standard: brand navy splitter + brand-tinted gutter/handle (was grey #3b3b3b / #4f4f4f).
+.p-splitter {
+    background: #141c29 !important;
+    border: 1px solid rgba(97, 175, 239, 0.18) !important;
+    color: #c6ccd6 !important;
+}
+.p-splitter .p-splitter-gutter { background: rgba(97, 175, 239, 0.06) !important; }
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(97, 175, 239, 0.35) !important; }
+.p-splitter .p-splitter-gutter-resizing { background: linear-gradient(135deg, #0C53A4, #00893F) !important; }
 
 .p-component.p-overlay {
     box-shadow: var(--mdc-dialog-container-elevation,0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12));
@@ -126,5 +807,719 @@ p-checkbox {
 }
 
 .p-button { padding: 0.25rem 0.5rem; }
-.p-tree { background: #303030; border: none; }
-.p-checkbox .p-checkbox-box { background: #212121; }
+// brand-tinted dark navy tree background + subtle hover/selected states
+.p-tree { background: #141c29; border: none; }
+// Tree checkbox nodes (events-tree, custom-api-tree, web-socket-events-tree, etc.) render
+// <td style="width:24px"><p-checkbox></td><td>{{label}}</td> with no gap — checkbox sits
+// flush against the label. Add breathing room without touching per-component markup.
+.p-tree .p-treenode-content td:has(> .p-checkbox) {
+    padding-right: 8px;
+}
+// Striped rows for p-tree (like the grids/tables) — at EVERY nesting level.
+// PrimeNG renders each row as <p-treenode> ... > .p-treenode-content. nth-of-type on the
+// <p-treenode> wrapper alternates within each sibling group (top-level AND nested children).
+p-treenode:nth-of-type(even) > .p-treenode > .p-treenode-content:not(.p-highlight) {
+    background-color: #18222f !important;
+}
+p-treenode:nth-of-type(odd) > .p-treenode > .p-treenode-content:not(.p-highlight) {
+    background-color: transparent !important;
+}
+// Full-specificity selectors to beat theme.css ( .p-tree .p-tree-container .p-treenode .p-treenode-content... )
+// Hover (selectable node) — was maroon #610000.
+.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover,
+.p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
+    background-color: #1d2a3d !important;
+    color: #ffffff !important;
+}
+// Selected node — was maroon #750008.
+.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
+    background-color: #16273d !important;
+    color: #ffffff !important;
+    box-shadow: none !important;
+}
+.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
+.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff !important; }
+// Focus ring — was maroon #8a0000.
+.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    box-shadow: inset 0 0 0 0.15rem rgba(97, 175, 239, 0.5) !important;
+}
+
+// TreeTable (e.g. Custom APIs list): brand-tinted dark navy rows/header,
+// brand-blue selection/hover instead of the legacy maroon.
+.p-treetable .p-treetable-thead > tr > th {
+    background: #1b2636;
+    color: #c6ccd6;
+    border-color: rgba(97, 175, 239, 0.15);
+}
+.p-treetable .p-treetable-tbody > tr { background: #141c29; color: #c6ccd6; }
+// kill maroon focus rings on tree togglers
+.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus,
+.p-tree .p-tree-toggler:focus { box-shadow: 0 0 0 1px rgba(97, 175, 239, 0.5) !important; }
+.p-treetable .p-treetable-tbody > tr.p-highlight,
+.p-treetable .p-treetable-tbody > tr.p-selectable-row.p-highlight {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
+    background-color: #16273d !important;
+    color: #ffffff !important;
+    box-shadow: none !important;
+}
+.p-treetable .p-treetable-tbody > tr:not(.p-highlight):hover,
+.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover,
+.p-treetable .p-treetable-tbody > tr.p-selectable-row:not(.p-highlight):hover {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
+    background-color: #1d2a3d !important;
+    color: #ffffff !important;
+}
+// ---- New UI standard: brand-tint checkboxes, tabs, dropdown panels (was red/grey) ----
+
+// Checkbox: unchecked = dark navy; checked = brand blue->green gradient (was maroon #790109).
+.p-checkbox .p-checkbox-box {
+    background: #16202e !important;
+    border: 1px solid rgba(97, 175, 239, 0.30) !important;
+}
+.p-checkbox .p-checkbox-box.p-highlight,
+.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover,
+.p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+    border-color: rgba(97, 175, 239, 0.6) !important;
+    background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
+    background-color: #0C53A4 !important;
+    color: #ffffff !important;
+}
+// Kill the theme's dark-red focus ring (#8a0000) — use a brand-blue ring +
+// hover border instead (matches the datatable/tab focus treatment).
+.p-checkbox .p-checkbox-box.p-focus {
+    outline: 0 none !important;
+    box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.35) !important;
+    border-color: rgba(97, 175, 239, 0.6) !important;
+}
+.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    border-color: rgba(97, 175, 239, 0.6) !important;
+}
+
+// Dropdown overlay panel + header + items (was grey #3b3b3b / maroon selection).
+.p-dropdown-panel { background: #131c29 !important; border: 1px solid rgba(97, 175, 239, 0.20) !important; }
+.p-dropdown-panel .p-dropdown-header { background: #1b2636 !important; border-bottom: 1px solid rgba(97, 175, 239, 0.15) !important; }
+// Dropdown filter (search) input — brand navy, brand-blue border + focus (was grey + red focus).
+.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    background-color: #16202e !important;
+    background-image: linear-gradient(160deg, #1c2a3d 0%, #141e2c 100%) !important;
+    border: 1px solid rgba(97, 175, 239, 0.30) !important;
+    color: #d7dae0 !important;
+}
+.p-dropdown-panel .p-dropdown-header .p-dropdown-filter:focus,
+.p-dropdown-panel .p-dropdown-header .p-dropdown-filter:enabled:focus {
+    border-color: rgba(97, 175, 239, 0.7) !important;
+    box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.30) !important;
+    outline: 0 none !important;
+}
+.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon { color: #61AFEF !important; }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { background: #1b2636 !important; }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
+    background-color: #16273d !important;
+    color: #ffffff !important;
+}
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.22) 0%, rgba(0, 137, 63, 0.14) 100%) !important;
+    background-color: #1d2a3d !important;
+    color: #ffffff !important;
+}
+
+// Tabview nav (Header / params tabs): dark navy, selected = brand-tinted with brand-blue accent.
+.p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    background: #131c29 !important;
+    border-color: #1f2c3e #1f2c3e rgba(97, 175, 239, 0.25) #1f2c3e !important;
+    color: #9aa6b5 !important;
+}
+.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1d2a3d !important;
+    border-color: rgba(97, 175, 239, 0.25) !important;
+    color: #d7dae0 !important;
+}
+.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background-image: linear-gradient(180deg, rgba(12, 83, 164, 0.30) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
+    background-color: #16273d !important;
+    border-color: rgba(97, 175, 239, 0.35) rgba(97, 175, 239, 0.35) transparent rgba(97, 175, 239, 0.35) !important;
+    color: #ffffff !important;
+    //box-shadow: inset 0 2px 0 #61AFEF !important;
+}
+.p-tabview .p-tabview-nav-btn.p-link { background: #131c29 !important; color: #9aa6b5 !important; }
+
+// ===== Radio button — unchecked dark navy; checked = brand blue dot (was maroon #790109). =====
+.p-radiobutton .p-radiobutton-box {
+    background: #16202e !important;
+    border: 1px solid rgba(97, 175, 239, 0.30) !important;
+}
+.p-radiobutton .p-radiobutton-box.p-highlight,
+.p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box.p-highlight:hover,
+.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
+    border-color: rgba(97, 175, 239, 0.65) !important;
+    background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
+    background-color: #0C53A4 !important;
+}
+.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { background-color: #ffffff !important; }
+.p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box:not(.p-highlight):hover { border-color: rgba(97, 175, 239, 0.5) !important; }
+.p-radiobutton .p-radiobutton-box:focus, .p-radiobutton .p-radiobutton-box.p-focus {
+    box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.30) !important; outline: 0 none !important;
+}
+
+// ===== MultiSelect — match the dropdown treatment (control, panel, items, checkboxes). =====
+.p-multiselect {
+    background: #141c29 !important;
+    border: 1px solid rgba(97, 175, 239, 0.30) !important;
+    border-radius: 6px;
+}
+.p-multiselect:not(.p-disabled):hover { border-color: rgba(97, 175, 239, 0.5) !important; }
+.p-multiselect:not(.p-disabled).p-focus { border-color: rgba(97, 175, 239, 0.85) !important; box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.25) !important; }
+.p-multiselect .p-multiselect-label { color: #d7dae0 !important; }
+.p-multiselect .p-multiselect-trigger { color: #9fb3cc !important; }
+.p-multiselect-panel { background: #131c29 !important; border: 1px solid rgba(97, 175, 239, 0.20) !important; }
+.p-multiselect-panel .p-multiselect-header { background: #1b2636 !important; border-bottom: 1px solid rgba(97, 175, 239, 0.15) !important; }
+.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    background: #141c29 !important; border: 1px solid rgba(97, 175, 239, 0.35) !important; color: #d7dae0 !important;
+}
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item { color: #d7dae0 !important; }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(97, 175, 239, 0.12) !important; color: #ffffff !important;
+}
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
+    background-color: #16273d !important; color: #ffffff !important;
+}
+// chips inside the multiselect label
+.p-multiselect .p-multiselect-token {
+    background: rgba(12, 83, 164, 0.30) !important; color: #e7edf5 !important; border: 1px solid rgba(97, 175, 239, 0.30);
+}
+
+// ===== AutoComplete — control + panel + selection (was grey/maroon). =====
+.p-autocomplete .p-inputtext { background: #141c29 !important; border: 1px solid rgba(97, 175, 239, 0.30) !important; color: #d7dae0 !important; }
+.p-autocomplete .p-inputtext:enabled:focus { border-color: rgba(97, 175, 239, 0.85) !important; box-shadow: 0 0 0 0.15rem rgba(97, 175, 239, 0.25) !important; }
+.p-autocomplete-panel { background: #131c29 !important; border: 1px solid rgba(97, 175, 239, 0.20) !important; }
+.p-autocomplete-panel .p-autocomplete-item { color: #d7dae0 !important; }
+.p-autocomplete-panel .p-autocomplete-item:not(.p-highlight):hover { background: rgba(97, 175, 239, 0.12) !important; color: #ffffff !important; }
+.p-autocomplete-panel .p-autocomplete-item.p-highlight {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important;
+    background-color: #16273d !important; color: #ffffff !important;
+}
+
+// ===== ProgressBar — brand blue->green gradient fill (was flat default). =====
+.p-progressbar { background: #16202e !important; border: 1px solid rgba(97, 175, 239, 0.18) !important; border-radius: 6px; }
+.p-progressbar .p-progressbar-value {
+    background-color: #0C53A4 !important;
+    background-image: linear-gradient(90deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
+}
+.p-progressbar .p-progressbar-label { color: #ffffff !important; font-weight: 600; }
+
+// ===== FileUpload — brand buttons + brand-navy content (was grey + maroon primary). =====
+.p-fileupload .p-fileupload-buttonbar {
+    background: #1b2636 !important; border: 1px solid rgba(97, 175, 239, 0.18) !important;
+    border-bottom: 0 !important;
+}
+.p-fileupload .p-fileupload-content { background: #141c29 !important; border: 1px solid rgba(97, 175, 239, 0.18) !important; color: #d7dae0 !important; }
+.p-fileupload .p-fileupload-buttonbar .p-button {
+    background-color: #0C53A4 !important;
+    background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
+    border: 1px solid rgba(97, 175, 239, 0.45) !important; color: #ffffff !important;
+}
+.p-fileupload .p-fileupload-buttonbar .p-button:enabled:hover { filter: brightness(1.08); }
+.p-fileupload .p-fileupload-row > div { color: #d7dae0 !important; }
+
+// ===== Column filter (inline) — its input follows the brand inputtext; menu/overlay = dropdown panel. =====
+.p-columnfilter .p-column-filter-menu-button,
+.p-columnfilter .p-column-filter-clear-button { color: #9fb3cc !important; }
+.p-columnfilter .p-column-filter-menu-button:hover { background: rgba(97, 175, 239, 0.12) !important; color: #ffffff !important; }
+.p-column-filter-overlay { background: #131c29 !important; border: 1px solid rgba(97, 175, 239, 0.20) !important; color: #d7dae0 !important; }
+.p-column-filter-overlay .p-column-filter-row-item:not(.p-highlight):hover { background: rgba(97, 175, 239, 0.12) !important; }
+.p-column-filter-overlay .p-column-filter-row-item.p-highlight {
+    background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.45) 0%, rgba(0, 137, 63, 0.28) 100%) !important; color: #ffffff !important;
+}
+
+// ===== Sortable column — kill the theme's maroon hover/sorted/focus states,
+// use brand-blue tints instead. =====
+.p-datatable .p-sortable-column:not(.p-highlight):hover,
+.p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(12, 83, 164, 0.22) !important;
+    color: #ffffff !important;
+}
+.p-datatable .p-sortable-column.p-highlight,
+.p-treetable .p-sortable-column.p-highlight {
+    background: rgba(12, 83, 164, 0.30) !important;
+    color: #ffffff !important;
+}
+.p-datatable .p-sortable-column.p-highlight:hover,
+.p-treetable .p-sortable-column.p-highlight:hover {
+    background: rgba(12, 83, 164, 0.38) !important;
+}
+.p-datatable .p-sortable-column:focus,
+.p-treetable .p-sortable-column:focus {
+    box-shadow: inset 0 0 0 0.15rem rgba(97, 175, 239, 0.35) !important;
+    outline: 0 none !important;
+}
+
+// ===== Sort icon — neutral, brand-blue when active (was theme default). =====
+.p-sortable-column .p-sortable-column-icon { color: #7f93ad !important; }
+.p-sortable-column.p-highlight .p-sortable-column-icon,
+.p-sortable-column .p-sortable-column-icon.pi-sort-amount-up-alt,
+.p-sortable-column .p-sortable-column-icon.pi-sort-amount-down { color: #61AFEF !important; }
+
+// =====================================================================
+// LIGHT THEME — PrimeNG component overrides (white surfaces + brand accents).
+// =====================================================================
+html.LIGHT {
+    // Base text color for primeng components (theme.css defaults them to grey #b0b0b0 — too faint on white).
+    .p-component, .p-inputtext, .p-dropdown, .p-dropdown-label, .p-dropdown-item,
+    .p-treenode-content, .p-datatable, .p-treetable, .p-multiselect, .p-listbox,
+    .p-checkbox-label, .p-tabview, .p-paginator, .p-tree { color: #2b3340; }
+
+    // Paginator footer — light surface + brand-blue controls (was flat grey).
+    .p-paginator {
+        background: #f3f7fc !important;
+        border-top: 1px solid rgba(12, 83, 164, 0.18) !important;
+        color: #4a5563 !important;
+    }
+    .p-paginator .p-paginator-first, .p-paginator .p-paginator-prev,
+    .p-paginator .p-paginator-next, .p-paginator .p-paginator-last { color: #0C53A4 !important; }
+    .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+    .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+    .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+    .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover,
+    .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+        color: #0C53A4 !important;
+        background: rgba(12, 83, 164, 0.10) !important;
+    }
+    .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+        background: #0C53A4 !important;
+        color: #ffffff !important;
+        border-color: #0C53A4 !important;
+    }
+    .p-paginator .p-dropdown {
+        background: #ffffff !important;
+        border: 1px solid rgba(12, 83, 164, 0.25) !important;
+    }
+    .p-paginator .p-dropdown .p-dropdown-label { color: #2b3340 !important; }
+    .p-paginator .p-dropdown .p-dropdown-trigger { color: #0C53A4 !important; }
+    .p-paginator .p-dropdown:not(.p-disabled):hover { border-color: rgba(12, 83, 164, 0.5) !important; }
+    .p-component .p-disabled, .p-disabled { color: #9aa3b0; }
+
+    // ===== Calendar / date picker — light brand panel (was grey/maroon) =====
+    .p-datepicker:not(.p-datepicker-inline),
+    .p-datepicker {
+        background: #ffffff !important;
+        color: #2b3340 !important;
+        border: 1px solid rgba(12, 83, 164, 0.20) !important;
+    }
+    .p-datepicker .p-datepicker-header {
+        background: #f3f7fc !important;
+        color: #14233a !important;
+        border-bottom: 1px solid rgba(12, 83, 164, 0.15) !important;
+    }
+    .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month,
+    .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year { color: #14233a !important; }
+    .p-datepicker .p-datepicker-header .p-datepicker-prev,
+    .p-datepicker .p-datepicker-header .p-datepicker-next { color: #5a6a82 !important; }
+    .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+    .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+        color: #0C53A4 !important; background: rgba(12, 83, 164, 0.08) !important;
+    }
+    .p-datepicker table th > span { color: #5a6a82 !important; }
+    .p-datepicker table td > span { color: #2b3340 !important; }
+    .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+        color: #14233a !important; background: rgba(12, 83, 164, 0.08) !important;
+    }
+    .p-datepicker table td.p-datepicker-today > span {
+        background: rgba(12, 83, 164, 0.10) !important; color: #0C53A4 !important;
+        border: 1px solid rgba(12, 83, 164, 0.30) !important;
+    }
+    .p-datepicker table td > span.p-highlight {
+        background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
+        color: #ffffff !important;
+    }
+    .p-datepicker .p-datepicker-buttonbar { border-top: 1px solid rgba(12, 83, 164, 0.12) !important; }
+    .p-datepicker .p-datepicker-buttonbar .p-button.p-button-text { color: #0C53A4 !important; }
+    .p-calendar .p-datepicker-trigger.p-button {
+        background-color: #0C53A4 !important;
+        background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
+        border: 1px solid rgba(12, 83, 164, 0.45) !important;
+        color: #ffffff !important;
+    }
+    // Time picker (light) — tighter padding + brand accents on white.
+    .p-datepicker .p-timepicker {
+        border-top: 1px solid rgba(12, 83, 164, 0.12) !important;
+    }
+    .p-datepicker .p-timepicker span { color: #14233a !important; }
+    .p-datepicker .p-timepicker button { color: #5a6a82 !important; }
+    .p-datepicker .p-timepicker button:enabled:hover {
+        color: #0C53A4 !important; background: rgba(12, 83, 164, 0.08) !important;
+    }
+
+    // ===== Log-table summary chips — light brand-tinted by category =====
+    .p-chip.bg-danger  { background-color: #0C53A4 !important; color: #ffffff !important; }   // instances
+    .p-chip.bg-warning { background-color: #0a7d6f !important; color: #ffffff !important; }   // databases
+    .p-chip.bg-info    { background-color: #1d8a4e !important; color: #ffffff !important; }   // collections
+    .p-chip.bg-light   { background-color: #e7eef7 !important; color: #243446 !important; border: 1px solid rgba(12, 83, 164, 0.18); }  // apis
+    .p-chip.bg-danger.text-dark,
+    .p-chip.bg-warning.text-dark,
+    .p-chip.bg-info.text-dark { color: #ffffff !important; }
+    .p-chip.bg-light.text-dark { color: #243446 !important; }
+
+    // Grids / tables
+    .p-datatable { background: #ffffff; }
+    // Caption/header area — light brand tint instead of the legacy dark grey from theme.css,
+    // so a dropdown inside the caption no longer sits on a dark band (double-border look).
+    .p-datatable .p-datatable-header {
+        background: #f3f7fc;
+        color: #1b2330;
+        border: 0 none;
+        border-bottom: 1px solid rgba(12, 83, 164, 0.15);
+    }
+    .p-datatable .p-datatable-thead > tr > th { background-color: #eef3fa !important; color: #1b2330; border-bottom: 1px solid rgba(12, 83, 164, 0.15); }
+    .p-datatable .p-datatable-tbody > tr { background: #ffffff; color: #2b3340; }
+    .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) { background-color: #f3f7fc; }
+    .p-datatable .p-datatable-tbody > tr > td { border-top: 0.5px solid rgba(12, 83, 164, 0.10); }
+    .p-datatable .p-datatable-tbody > tr.p-highlight,
+    .p-datatable .p-datatable-tbody > tr.p-selectable-row.p-highlight,
+    .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight,
+    .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd).p-highlight {
+        background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
+        background-color: #dbe8fa !important; color: #0b2e5c !important; box-shadow: none !important;
+    }
+    .p-datatable .p-datatable-tbody > tr:not(.p-highlight):hover,
+    .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
+        background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.08) 0%, rgba(0, 137, 63, 0.05) 100%) !important;
+        background-color: #eef4fb !important; color: #14233a !important;
+    }
+    .p-datatable .p-datatable-tbody > tr:focus { outline: 0.15rem solid rgba(12, 83, 164, 0.4) !important; outline-offset: -0.15rem !important; }
+
+    // TreeTable
+    .p-treetable .p-treetable-thead > tr > th { background: #eef3fa !important; color: #1b2330; border-color: rgba(12,83,164,0.15); }
+    .p-treetable .p-treetable-tbody > tr { background: #ffffff; color: #2b3340; }
+    .p-treetable .p-treetable-tbody > tr.p-highlight {
+        background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
+        background-color: #dbe8fa !important; color: #0b2e5c !important; box-shadow: none !important;
+    }
+    .p-treetable .p-treetable-tbody > tr:not(.p-highlight):hover { background-color: #eef4fb !important; color: #14233a !important; }
+
+    // Tree
+    .p-tree { background: #ffffff; color: #2b3340; }
+    .p-tree .p-treenode-content { color: #2b3340 !important; }
+    p-treenode:nth-of-type(even) > .p-treenode > .p-treenode-content:not(.p-highlight) { background-color: #f3f7fc !important; }
+    p-treenode:nth-of-type(odd) > .p-treenode > .p-treenode-content:not(.p-highlight) { background-color: transparent !important; }
+    .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover,
+    .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover {
+        background-color: #eef4fb !important; color: #14233a !important;
+    }
+    .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+        background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
+        background-color: #dbe8fa !important; color: #0b2e5c !important; box-shadow: none !important;
+    }
+
+    // Dropdown control + panel
+    .p-dropdown, .p-dropdown.p-input-filled, .p-input-filled .p-dropdown,
+    .p-dropdown.p-input-filled:not(.p-disabled):hover,
+    .p-input-filled .p-dropdown:not(.p-disabled):hover,
+    .p-dropdown.p-input-filled:not(.p-disabled).p-focus,
+    .p-input-filled .p-dropdown:not(.p-disabled).p-focus,
+    .p-dropdown:not(.p-disabled).p-focus {
+        background: #ffffff !important; background-image: none !important;
+        border: 1px solid rgba(12, 83, 164, 0.25) !important;
+        color: #2b3340 !important;
+    }
+    .p-dropdown .p-dropdown-label { color: #2b3340 !important; }
+    // Lighter overlay shadow in light mode (the global Material-elevation
+    // shadow was too heavy a halo on the white panels).
+    .p-component.p-overlay {
+        box-shadow: 0 6px 18px rgba(12, 30, 60, 0.12) !important;
+    }
+    .p-dropdown-panel { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.20) !important; }
+    .p-dropdown-panel .p-dropdown-header { background: #eef3fa !important; }
+    .p-dropdown-panel .p-dropdown-items .p-dropdown-item { color: #2b3340; }
+    .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+        background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.16) 0%, rgba(0, 137, 63, 0.10) 100%) !important;
+        background-color: #eaf1fb !important; color: #14233a !important;
+    }
+    .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+        background-color: #eef4fb !important; color: #14233a !important;
+    }
+    .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+        background: #ffffff !important; background-image: none !important;
+        border: 1px solid rgba(12, 83, 164, 0.25) !important; color: #2b3340 !important;
+    }
+
+    // p-inputtext
+    .p-inputtext:not(.p-dropdown-label) {
+        background: #ffffff !important; background-image: none !important;
+        border: 1px solid rgba(12, 83, 164, 0.25) !important; color: #2b3340 !important;
+    }
+    .p-inputtext:not(.p-dropdown-label):enabled:focus {
+        border-color: rgba(12, 83, 164, 0.6) !important; box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.18) !important;
+    }
+
+    // Checkbox — white box + brand-blue border; brand gradient + white check when selected.
+    .p-checkbox .p-checkbox-box {
+        background: #ffffff !important;
+        border: 1px solid rgba(12, 83, 164, 0.35) !important;
+        color: #ffffff !important;
+    }
+    .p-checkbox .p-checkbox-box.p-highlight,
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover,
+    .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+        background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
+        background-color: #0C53A4 !important;
+        border-color: rgba(12, 83, 164, 0.9) !important;
+    }
+    .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon { color: #ffffff !important; }
+    // Brand-blue focus ring (not the theme's dark-red) + hover border.
+    .p-checkbox .p-checkbox-box.p-focus {
+        outline: 0 none !important;
+        box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.30) !important;
+        border-color: rgba(12, 83, 164, 0.6) !important;
+    }
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+        border-color: rgba(12, 83, 164, 0.6) !important;
+    }
+
+    // InputSwitch (light) — light track + brand-blue knob (off), brand gradient + white knob (on).
+    .p-inputswitch .p-inputswitch-slider { background: #d4dce6 !important; border: 1px solid rgba(12, 83, 164, 0.25); }
+    .p-inputswitch .p-inputswitch-slider::before { background: #ffffff !important; }
+    .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { background: #c6d1de !important; }
+    .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
+    .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
+        background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important; background-color: #0C53A4 !important;
+    }
+    .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before { background: #ffffff !important; }
+
+    // Tabview — consistent brand-blue borders (match dropdown/input @ 0.25 / 0.18).
+    .p-tabview .p-tabview-nav { border-color: rgba(12, 83, 164, 0.18) !important; }
+    .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+        background: #f3f7fc !important; color: #4a5563 !important;
+        border: 1px solid rgba(12, 83, 164, 0.18) !important;
+        border-bottom-color: rgba(12, 83, 164, 0.18) !important;
+    }
+    .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+        background: #e6eef9 !important; border-color: rgba(12, 83, 164, 0.30) !important; color: #0C53A4 !important;
+    }
+    .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+        background-image: linear-gradient(180deg, rgba(12,83,164,0.14) 0%, rgba(0,137,63,0.08) 100%) !important;
+        background-color: #eaf1fb !important; color: #0C53A4 !important;
+        border: 1px solid rgba(12, 83, 164, 0.30) !important;
+        border-bottom-color: transparent !important;
+        //box-shadow: inset 0 2px 0 #0C53A4 !important;
+    }
+    // dropdown trigger seam: keep the trigger border-less so the control reads as one bordered box
+    .p-dropdown .p-dropdown-trigger { border: 0 none !important; }
+
+    // Splitter
+    .p-splitter { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.18) !important; }
+
+    // Tooltip
+    .p-tooltip .p-tooltip-text { background-color: #1b2636 !important; background-image: linear-gradient(135deg, #1b3553 0%, #133024 100%) !important; color: #fff !important; }
+
+    // Toast (light glass) — white glass + per-severity accent gradient + colored icon/progress bar.
+    .p-toast .p-toast-message {
+        background: rgba(255, 255, 255, 0.92) !important;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(12, 83, 164, 0.22) !important;
+        border-left-width: 4px !important;
+        border-radius: 10px;
+        box-shadow: 0 8px 24px rgba(12, 30, 60, 0.14) !important;
+        color: #2b3340 !important;
+    }
+    .p-toast .p-toast-summary { color: #14233a !important; }
+    .p-toast .p-toast-detail { color: #3a4452 !important; }
+    .p-toast .p-toast-icon-close { color: #4a5563 !important; }
+    // per-severity: left accent border + icon + progress bar
+    .p-toast .p-toast-message-info { border-left-color: #0C53A4 !important; background-image: linear-gradient(135deg, rgba(12,83,164,0.10) 0%, rgba(255,255,255,0) 60%) !important; }
+    .p-toast .p-toast-message-info .p-toast-message-icon { color: #0C53A4 !important; }
+    .p-toast .p-toast-message-success { border-left-color: #00893F !important; background-image: linear-gradient(135deg, rgba(0,137,63,0.10) 0%, rgba(255,255,255,0) 60%) !important; }
+    .p-toast .p-toast-message-success .p-toast-message-icon { color: #00893F !important; }
+    .p-toast .p-toast-message-warn { border-left-color: #d99a07 !important; background-image: linear-gradient(135deg, rgba(217,154,7,0.12) 0%, rgba(255,255,255,0) 60%) !important; }
+    .p-toast .p-toast-message-warn .p-toast-message-icon { color: #d99a07 !important; }
+    .p-toast .p-toast-message-error { border-left-color: #DC2626 !important; background-image: linear-gradient(135deg, rgba(220,38,38,0.10) 0%, rgba(255,255,255,0) 60%) !important; }
+    .p-toast .p-toast-message-error .p-toast-message-icon { color: #DC2626 !important; }
+
+    // Confirm dialog
+    .p-dialog .p-dialog-content, .p-dialog .p-dialog-footer { background: #ffffff !important; color: #2b3340 !important; }
+    .p-dialog .p-dialog-footer { border-top: 1px solid rgba(12, 83, 164, 0.15) !important; }
+    .p-dialog .p-dialog-header { background-color: #eef3fa !important; background-image: linear-gradient(90deg, rgba(12,83,164,0.12) 0%, rgba(0,137,63,0.08) 100%) !important; color: #14233a !important; border-bottom: 1px solid rgba(12,83,164,0.18) !important; }
+    .p-confirm-dialog-reject {
+        background: #e3eaf3 !important;
+        background-image: linear-gradient(180deg, #eef2f7 0%, #dde5ef 100%) !important;
+        color: #1b2330 !important;
+        border: 1px solid rgba(12, 83, 164, 0.35) !important;
+    }
+    .p-confirm-dialog-reject:hover, .p-confirm-dialog-reject:focus {
+        background-image: linear-gradient(180deg, #e3eaf3 0%, #d2ddec 100%) !important;
+        border-color: rgba(12, 83, 164, 0.5) !important;
+        color: #14233a !important;
+    }
+    // Kill the theme's red focus ring on the auto-focused reject button (light).
+    .p-confirm-dialog-reject:focus, .p-confirm-dialog-reject.p-focus, .p-confirm-dialog-reject:enabled:focus {
+        box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.20) !important;
+        outline: 0 none !important;
+    }
+    // No-button label + icon must be dark/visible on the light neutral bg (high specificity to beat primeng/white-flip).
+    .p-confirm-dialog .p-confirm-dialog-reject.p-button,
+    .p-confirm-dialog .p-confirm-dialog-reject .p-button-label,
+    .p-confirm-dialog .p-confirm-dialog-reject .p-button-icon,
+    .p-confirm-dialog .p-confirm-dialog-reject span.p-button-icon,
+    .p-confirm-dialog .p-confirm-dialog-reject i,
+    button.p-confirm-dialog-reject .p-button-icon,
+    button.p-confirm-dialog-reject i { color: #1b2330 !important; }
+    .p-confirm-dialog-accept { background-color: #0C53A4 !important; background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important; color: #fff !important; border: 1px solid rgba(12,83,164,0.45) !important; }
+    // Warning icon — deeper amber for contrast on the white dialog.
+    .p-confirm-dialog .p-confirm-dialog-icon { color: #d99a07 !important; filter: drop-shadow(0 0 5px rgba(217, 154, 7, 0.35)); }
+
+    // progress spinner overlay
+    // Light loading overlay — flat translucent white (no gradient). The logo
+    // rocket spinner (defined globally above) carries over.
+    p-progressSpinner {
+        background-color: rgba(255, 255, 255, 0.6) !important;
+        backdrop-filter: blur(2px) !important;
+        -webkit-backdrop-filter: blur(2px) !important;
+    }
+
+    // ===== Radio button (light) — white box, brand-blue checked dot. =====
+    .p-radiobutton .p-radiobutton-box { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.30) !important; }
+    .p-radiobutton .p-radiobutton-box.p-highlight,
+    .p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box.p-highlight:hover {
+        border-color: rgba(12, 83, 164, 0.6) !important;
+        background-image: linear-gradient(135deg, #0C53A4 0%, #00893F 100%) !important;
+        background-color: #0C53A4 !important;
+    }
+    .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { background-color: #ffffff !important; }
+    .p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box:not(.p-highlight):hover { border-color: rgba(12, 83, 164, 0.5) !important; }
+
+    // ===== MultiSelect (light) — white control + panel, brand selection. =====
+    .p-multiselect { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.30) !important; }
+    .p-multiselect:not(.p-disabled):hover { border-color: rgba(12, 83, 164, 0.5) !important; }
+    .p-multiselect:not(.p-disabled).p-focus { border-color: rgba(12, 83, 164, 0.7) !important; box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.18) !important; }
+    .p-multiselect .p-multiselect-label { color: #2b3340 !important; }
+    .p-multiselect .p-multiselect-trigger { color: #5a6a82 !important; }
+    .p-multiselect-panel { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.20) !important; }
+    .p-multiselect-panel .p-multiselect-header { background: #eef3fa !important; border-bottom: 1px solid rgba(12, 83, 164, 0.15) !important; }
+    .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.30) !important; color: #2b3340 !important; }
+    .p-multiselect-panel .p-multiselect-items .p-multiselect-item { color: #2b3340 !important; }
+    .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { background: rgba(12, 83, 164, 0.08) !important; color: #14233a !important; }
+    .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+        background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
+        background-color: #dbe8fa !important; color: #0b2e5c !important;
+    }
+    .p-multiselect .p-multiselect-token { background: rgba(12, 83, 164, 0.12) !important; color: #14233a !important; border: 1px solid rgba(12, 83, 164, 0.25); }
+
+    // ===== AutoComplete (light). =====
+    .p-autocomplete .p-inputtext { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.30) !important; color: #2b3340 !important; }
+    .p-autocomplete .p-inputtext:enabled:focus { border-color: rgba(12, 83, 164, 0.7) !important; box-shadow: 0 0 0 0.15rem rgba(12, 83, 164, 0.18) !important; }
+    .p-autocomplete-panel { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.20) !important; }
+    .p-autocomplete-panel .p-autocomplete-item { color: #2b3340 !important; }
+    .p-autocomplete-panel .p-autocomplete-item:not(.p-highlight):hover { background: rgba(12, 83, 164, 0.08) !important; color: #14233a !important; }
+    .p-autocomplete-panel .p-autocomplete-item.p-highlight {
+        background-image: linear-gradient(90deg, rgba(12, 83, 164, 0.28) 0%, rgba(0, 137, 63, 0.18) 100%) !important;
+        background-color: #dbe8fa !important; color: #0b2e5c !important;
+    }
+
+    // ===== ProgressBar (light) — light track, brand gradient fill. =====
+    .p-progressbar { background: #e6eef8 !important; border: 1px solid rgba(12, 83, 164, 0.15) !important; }
+    .p-progressbar .p-progressbar-value {
+        background-color: #0C53A4 !important;
+        background-image: linear-gradient(90deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
+    }
+    .p-progressbar .p-progressbar-label { color: #ffffff !important; }
+
+    // ===== FileUpload (light). =====
+    .p-fileupload .p-fileupload-buttonbar { border-bottom: 0 !important; }
+    .p-fileupload .p-fileupload-content { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.15) !important; color: #2b3340 !important; }
+    .p-fileupload .p-fileupload-buttonbar .p-button {
+        background-color: #0C53A4 !important;
+        background-image: linear-gradient(135deg, #0C53A4 0%, #0a6a5f 55%, #00893F 100%) !important;
+        border: 1px solid rgba(12, 83, 164, 0.45) !important; color: #ffffff !important;
+    }
+    .p-fileupload .p-fileupload-row > div { color: #2b3340 !important; }
+
+    // ===== Column filter (light). =====
+    .p-columnfilter .p-column-filter-menu-button, .p-columnfilter .p-column-filter-clear-button { color: #5a6a82 !important; }
+    .p-columnfilter .p-column-filter-menu-button:hover { background: rgba(12, 83, 164, 0.08) !important; color: #0C53A4 !important; }
+    .p-column-filter-overlay { background: #ffffff !important; border: 1px solid rgba(12, 83, 164, 0.20) !important; color: #2b3340 !important; }
+
+    // ===== Sortable column (light) — brand-blue tints, no maroon. =====
+    .p-datatable .p-sortable-column:not(.p-highlight):hover,
+    .p-treetable .p-sortable-column:not(.p-highlight):hover {
+        background: rgba(12, 83, 164, 0.10) !important;
+        color: #14233a !important;
+    }
+    .p-datatable .p-sortable-column.p-highlight,
+    .p-treetable .p-sortable-column.p-highlight {
+        background: rgba(12, 83, 164, 0.14) !important;
+        color: #0C53A4 !important;
+    }
+    .p-datatable .p-sortable-column.p-highlight:hover,
+    .p-treetable .p-sortable-column.p-highlight:hover {
+        background: rgba(12, 83, 164, 0.20) !important;
+    }
+    .p-datatable .p-sortable-column:focus,
+    .p-treetable .p-sortable-column:focus {
+        box-shadow: inset 0 0 0 0.15rem rgba(12, 83, 164, 0.30) !important;
+        outline: 0 none !important;
+    }
+
+    // ===== Sort icon (light). =====
+    .p-sortable-column .p-sortable-column-icon { color: #7488a3 !important; }
+    .p-sortable-column.p-highlight .p-sortable-column-icon { color: #0C53A4 !important; }
+
+    // ===== Text/plain/rounded buttons (row toggler) — transparent, brand-blue (light). =====
+    .p-button.p-button-text,
+    .p-button.p-button-plain,
+    .p-button.p-button-rounded.p-button-text,
+    .p-row-toggler.p-button {
+        background: transparent !important; background-image: none !important;
+        border-color: transparent !important; box-shadow: none !important; color: #0C53A4 !important;
+    }
+    .p-button.p-button-text:enabled:hover,
+    .p-button.p-button-plain:enabled:hover,
+    .p-row-toggler.p-button:enabled:hover {
+        background: rgba(12, 83, 164, 0.10) !important; color: #0C53A4 !important;
+    }
+    .p-button.p-button-plain { color: #5a6a82 !important; }
+
+    // ===== API dropdown popup (light) — softer frame + lighter badge tints =====
+    .api-dd-panel {
+        box-shadow: 0 10px 28px rgba(12, 30, 60, 0.14) !important;
+        border: 1px solid rgba(12, 83, 164, 0.18) !important;
+    }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item .get    { background: rgba(38, 180, 127, 0.12); }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item .post   { background: rgba(255, 180, 0, 0.14); }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item .put    { background: rgba(9, 123, 237, 0.12); }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item .delete { background: rgba(237, 75, 72, 0.12); }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .get,
+    .api-dd-panel .p-dropdown-items .p-dropdown-item:hover .get    { background: rgba(38, 180, 127, 0.18); }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .post,
+    .api-dd-panel .p-dropdown-items .p-dropdown-item:hover .post   { background: rgba(255, 180, 0, 0.20); }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .put,
+    .api-dd-panel .p-dropdown-items .p-dropdown-item:hover .put    { background: rgba(9, 123, 237, 0.18); }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item.p-highlight .delete,
+    .api-dd-panel .p-dropdown-items .p-dropdown-item:hover .delete { background: rgba(237, 75, 72, 0.18); }
+    // category chips — darker text on the white panel
+    .api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat[data-cat="SCHEMA"] {
+        color: #0C53A4; border-color: rgba(12, 83, 164, 0.35); background: rgba(12, 83, 164, 0.08);
+    }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat[data-cat="GEN"] {
+        color: #00893F; border-color: rgba(0, 137, 63, 0.35); background: rgba(0, 137, 63, 0.08);
+    }
+    .api-dd-panel .p-dropdown-items .p-dropdown-item .api-cat:not([data-cat="SCHEMA"]):not([data-cat="GEN"]) {
+        color: #5a6a82; border-color: rgba(90, 106, 130, 0.30); background: rgba(90, 106, 130, 0.08);
+    }
+    // selected control (closed dropdown label) — chips + badges on the white control
+    .api-dd-control .p-dropdown-label .get    { color: #00893F !important; }
+    .api-dd-control .p-dropdown-label .post   { color: #c98a00 !important; }
+    .api-dd-control .p-dropdown-label .put    { color: #0C53A4 !important; }
+    .api-dd-control .p-dropdown-label .delete { color: #d9534f !important; }
+    .api-dd-control .p-dropdown-label .api-cat[data-cat="SCHEMA"] {
+        color: #0C53A4 !important; border-color: rgba(12, 83, 164, 0.35); background: rgba(12, 83, 164, 0.08);
+    }
+    .api-dd-control .p-dropdown-label .api-cat[data-cat="GEN"] {
+        color: #00893F !important; border-color: rgba(0, 137, 63, 0.35); background: rgba(0, 137, 63, 0.08);
+    }
+    .api-dd-control .p-dropdown-label .api-cat:not([data-cat="SCHEMA"]):not([data-cat="GEN"]) {
+        color: #5a6a82 !important; border-color: rgba(90, 106, 130, 0.30); background: rgba(90, 106, 130, 0.08);
+    }
+}