/* ─────────────────────────────────────────────────────────────────────────────
WebsitePanel Portal — site stylesheet
Loaded after Bootstrap 5.3 so selectors inherit / override Bootstrap tokens.
Themeing model: Bootstrap 5.3 `data-bs-theme` on . Everything here
reads from Bootstrap CSS variables (`--bs-*`) so both themes get styled
automatically. Never hard-code colors in component rules — always use
tokens so the dark/light split stays in one place.
───────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────────
ASPnix brand palette
Aligned with aspnix.com's modern dark theme. Primary is sky-blue
(#38bdf8 dark / #0ea5e9 light), success is green-500 (#22c55e), cyan
(#06b6d4) is the gradient partner used on CTAs. Keeps the Server agent
+ Enterprise Server landing pages and the Portal visually consistent.
The text-emphasis / bg-subtle / border-subtle tokens are the ones Bootstrap
uses for .text-*-emphasis, .bg-*-subtle, and .border-*-subtle utilities —
alerts, badges, callouts. Tokens track Tailwind's sky/green scales so
contrast ratios stay sensible in both themes.
───────────────────────────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
--bs-primary: #0ea5e9;
--bs-primary-rgb: 14, 165, 233;
--bs-primary-text-emphasis: #0c4a6e;
--bs-primary-bg-subtle: #e0f2fe;
--bs-primary-border-subtle: #bae6fd;
--bs-success: #22c55e;
--bs-success-rgb: 34, 197, 94;
--bs-success-text-emphasis: #14532d;
--bs-success-bg-subtle: #dcfce7;
--bs-success-border-subtle: #86efac;
--bs-link-color: #0ea5e9;
--bs-link-color-rgb: 14, 165, 233;
--bs-link-hover-color: #0284c7;
--bs-link-hover-color-rgb: 2, 132, 199;
/* ──────────────────────────────────────────────────────────────────────
Warm paper neutrals — matches aspnix.com's light theme. Body is cream
(#fdfbf7), surface is a deeper warm beige (#f5f2ec), borders are warm
taupe (#e5e1d8), body text is navy-tinted near-black (#1a1a2e) rather
than Bootstrap's neutral grey, so the page reads as editorial paper
rather than web-default flat white. Cards get an explicit #ffffff
override below so they pop up from the cream body like paper on a
table.
Hierarchy: body (#fdfbf7, lightest) < tertiary (#faf7f2, page wrap
and table heads) < secondary (#f5f2ec, deepest surface — dropdowns,
modals, inputs).
────────────────────────────────────────────────────────────────────── */
--bs-body-bg: #fdfbf7;
--bs-body-bg-rgb: 253, 251, 247;
--bs-body-color: #1a1a2e;
--bs-body-color-rgb: 26, 26, 46;
--bs-emphasis-color: #09090b;
--bs-emphasis-color-rgb: 9, 9, 11;
--bs-secondary-color: #6b7280;
--bs-secondary-color-rgb: 107, 114, 128;
--bs-secondary-bg: #f5f2ec;
--bs-secondary-bg-rgb: 245, 242, 236;
--bs-tertiary-color: rgba(26, 26, 46, .55);
--bs-tertiary-color-rgb: 26, 26, 46;
--bs-tertiary-bg: #faf7f2;
--bs-tertiary-bg-rgb: 250, 247, 242;
--bs-border-color: #e5e1d8;
--bs-border-color-translucent: rgba(26, 26, 46, .08);
}
/* Light theme: paper-on-table effect. Cards and accordion items stay pure
white so they lift above the cream body. Dark-theme card rules below
still apply for .card in dark mode (translucent white over navy). */
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .accordion-item {
--bs-card-bg: #ffffff;
--bs-accordion-bg: #ffffff;
}
[data-bs-theme="dark"] {
--bs-primary: #38bdf8;
--bs-primary-rgb: 56, 189, 248;
--bs-primary-text-emphasis: #7dd3fc;
--bs-primary-bg-subtle: #082f49;
--bs-primary-border-subtle: #075985;
--bs-success: #22c55e;
--bs-success-rgb: 34, 197, 94;
--bs-success-text-emphasis: #86efac;
--bs-success-bg-subtle: #14291a;
--bs-success-border-subtle: #166534;
--bs-link-color: #7dd3fc;
--bs-link-color-rgb: 125, 211, 252;
--bs-link-hover-color: #bae6fd;
--bs-link-hover-color-rgb: 186, 230, 253;
/* ──────────────────────────────────────────────────────────────────────
ASPnix near-black ambient — replaces Bootstrap's default dark grey
palette so the portal matches aspnix.com and the refreshed Server/ES
landing pages.
Hierarchy: tertiary (#09090b, deepest — outer page wrap / side
gutters) < body (#111113, lifted middle content column) < secondary
(#18181b, dropdowns/modals/inputs). The content column reads as a
slightly-raised panel against the near-black side gutters, like a
document on a dark table. Cards and elevated surfaces use
translucent white so the middle column's tone reads through,
matching the glassy treatment on the Server/ES pages. Border colour
stays translucent white so 1px frames feel like edges of glass
rather than hard grey rules.
────────────────────────────────────────────────────────────────────── */
--bs-body-bg: #111113;
--bs-body-bg-rgb: 17, 17, 19;
--bs-body-color: #fafafa;
--bs-body-color-rgb: 250, 250, 250;
--bs-emphasis-color: #ffffff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: #a1a1aa;
--bs-secondary-color-rgb: 161, 161, 170;
--bs-secondary-bg: #18181b;
--bs-secondary-bg-rgb: 24, 24, 27;
--bs-tertiary-color: rgba(250, 250, 250, .55);
--bs-tertiary-color-rgb: 250, 250, 250;
--bs-tertiary-bg: #09090b;
--bs-tertiary-bg-rgb: 9, 9, 11;
--bs-border-color: rgba(255, 255, 255, .08);
--bs-border-color-translucent: rgba(255, 255, 255, .08);
}
/* ─────────────────────────────────────────────────────────────────────────────
Brand-tinted ambient — dual radial glows pulled straight from the Server/ES
landing pages (sky-blue at the top, cyan at the bottom). Fixed-attachment
so the glows stay anchored to the viewport while the user scrolls long
pages. Light theme keeps Bootstrap's flat white — the glow only fires in
dark mode where it actually shows.
───────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] body {
background-image:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(56, 189, 248, .10) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 110%, rgba(6, 182, 212, .07) 0%, transparent 60%);
background-attachment: fixed;
background-repeat: no-repeat;
}
/* ─────────────────────────────────────────────────────────────────────────────
Glassy elevated surfaces — dark theme only.
Cards, modals, dropdowns, the off-canvas drawer, and the navbar all use
translucent white over the ambient near-black + a faint backdrop blur,
mirroring the `.card` treatment on the Server/ES landing pages. Solid
fallbacks in --bs-* tokens above keep things readable when
backdrop-filter is unavailable (older Safari, embedded webviews).
───────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .list-group {
--bs-card-bg: rgba(255, 255, 255, .03);
--bs-card-cap-bg: rgba(255, 255, 255, .02);
--bs-accordion-bg: rgba(255, 255, 255, .03);
--bs-list-group-bg: rgba(255, 255, 255, .03);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Flatten list-groups nested inside cards. The card already provides the
translucent lift; if the inner list-group keeps its own translucent bg
the two alpha layers stack and the inner region reads visibly lighter
than a bare card-body (Hosting Spaces vs empty Account Notes). */
[data-bs-theme="dark"] .card .list-group,
[data-bs-theme="dark"] .card-body > .list-group {
--bs-list-group-bg: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas {
--bs-dropdown-bg: #18181b;
--bs-modal-bg: #18181b;
--bs-offcanvas-bg: #18181b;
border-color: rgba(255, 255, 255, .08);
}
/* Form controls — slightly lifted from the near-black body so input
affordance stays visible. Default Bootstrap pulls --bs-form-control-bg
from --bs-body-bg, which would make inputs identical to the page bg. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
background-color: #18181b;
border-color: rgba(255, 255, 255, .12);
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
background-color: rgba(255, 255, 255, .03);
}
/* Card hover lifts the border to sky-blue, matching the landing-page
.card:hover effect. */
[data-bs-theme="dark"] .card:hover {
border-color: rgba(56, 189, 248, .25);
}
/* ─────────────────────────────────────────────────────────────────────────────
Base typography & layout
Bootstrap 5 is designed around a 16px root; don't scale it. Form heights,
button padding, table cell padding all inherit from rem and shrinking the
root makes thumb targets on phones too small.
───────────────────────────────────────────────────────────────────────── */
body {
/* Smooth the theme flip — skip when the OS asks us to reduce motion. */
transition: background-color .2s ease, color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
body, .card, .table, .navbar, .dropdown-menu, .form-control, .form-select, .btn {
transition: none !important;
}
}
/* ─────────────────────────────────────────────────────────────────────────────
Theme-aware scrollbar
Firefox uses `scrollbar-color`; Chromium uses `::-webkit-scrollbar-*`.
───────────────────────────────────────────────────────────────────────── */
html {
scrollbar-color: var(--bs-secondary-bg) transparent;
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--bs-secondary-bg);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--bs-tertiary-color);
background-clip: padding-box;
}
/* ─────────────────────────────────────────────────────────────────────────────
Popovers
───────────────────────────────────────────────────────────────────────── */
.popover {
max-width: 750px;
}
.popover-sm {
max-width: 250px;
}
.popover-md {
max-width: 325px;
}
/* ─────────────────────────────────────────────────────────────────────────────
Switches — flexbox layout puts the slider and label on one row with a
consistent gap. Bootstrap's default uses padding-left + a negative
margin-left on the input which mis-renders when the parent container
strips that padding (which we used to do, leaving label and slider
stacked or overlapping).
───────────────────────────────────────────────────────────────────────── */
.form-switch.form-check {
display: flex;
align-items: center;
gap: 0.5em;
padding-left: 0;
min-height: 0;
}
.form-switch .form-check-input {
margin: 0;
flex-shrink: 0;
}
.form-switch .form-check-label {
cursor: pointer;
}
/* ─────────────────────────────────────────────────────────────────────────────
Dismissible alerts with reduced padding (py-2) — the default close button
uses 1.25rem padding which makes the X overflow a tightly-padded alert.
Shrink it to fit and pin to the vertical center of the alert.
───────────────────────────────────────────────────────────────────────── */
.alert.py-2.alert-dismissible {
padding-right: 2.5rem;
}
.alert.py-2.alert-dismissible .btn-close {
padding: 0;
width: 0.75em;
height: 0.75em;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
}
/* ─────────────────────────────────────────────────────────────────────────────
Dashboard service-icon hover
───────────────────────────────────────────────────────────────────────── */
.hover-bg {
transition: background-color .15s ease, transform .15s ease;
}
.hover-bg:hover {
background-color: var(--bs-tertiary-bg);
transform: translateY(-1px);
}
/* ─────────────────────────────────────────────────────────────────────────────
Tables — theme-aware modernization
Bootstrap 5.3's `.table-light` hard-codes a pale grey which looks wrong in
dark mode. We drop that class sitewide and style `.table thead` here using
Bootstrap tokens so headers adapt to the active theme automatically.
───────────────────────────────────────────────────────────────────────── */
.table {
--bs-table-border-color: var(--bs-border-color-translucent);
}
.table > :not(caption) > * > * {
padding: .6rem .75rem;
}
/* table-sm / table-borderless detail rows are used for dense key/value
panels in sidebars — keep them tight. */
.table.table-sm > :not(caption) > * > * {
padding: .3rem .5rem;
}
.table.table-borderless > :not(caption) > * > * {
padding: .25rem .5rem;
}
.table thead th,
.table thead td {
background-color: var(--bs-tertiary-bg);
color: var(--bs-emphasis-color);
font-weight: 600;
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .03em;
border-bottom: 1px solid var(--bs-border-color);
white-space: nowrap;
}
.table.table-sm thead th,
.table.table-sm thead td {
padding: .4rem .6rem;
font-size: .78rem;
}
/* Hover + striping lift straight from Bootstrap tokens so they're theme-aware. */
.table-hover > tbody > tr:hover > * {
--bs-table-bg-state: var(--bs-tertiary-bg);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
--bs-table-bg-type: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-emphasis-color) 6%);
}
/* Tables nested inside .card should blend with the card body. */
.card > .table,
.card > .table-responsive > .table {
margin-bottom: 0;
}
.card > .table-responsive {
border-radius: inherit;
overflow: hidden;
}
/* Borderless tables used for detail key/value lists (e.g. account details). */
.table-borderless thead th,
.table-borderless thead td {
background-color: transparent;
border-bottom: 0;
text-transform: none;
letter-spacing: normal;
font-size: inherit;
}
/* ─────────────────────────────────────────────────────────────────────────────
Cards
───────────────────────────────────────────────────────────────────────── */
.card {
border-color: var(--bs-border-color-translucent);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
transition: box-shadow .15s ease, border-color .15s ease;
}
[data-bs-theme="dark"] .card {
box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.card-header {
background-color: transparent;
border-bottom-color: var(--bs-border-color-translucent);
font-weight: 500;
}
.card-footer {
background-color: transparent;
border-top-color: var(--bs-border-color-translucent);
}
/* ─────────────────────────────────────────────────────────────────────────────
Buttons
───────────────────────────────────────────────────────────────────────── */
.btn {
transition: background-color .15s ease, border-color .15s ease,
color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active {
transform: translateY(1px);
}
.btn-outline-secondary {
--bs-btn-border-color: var(--bs-border-color);
--bs-btn-hover-bg: var(--bs-tertiary-bg);
--bs-btn-hover-border-color: var(--bs-border-color);
--bs-btn-hover-color: var(--bs-emphasis-color);
}
/* ─────────────────────────────────────────────────────────────────────────────
Form controls
───────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus,
.form-select:focus {
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary) 22%, transparent);
}
/* Focus-visible outlines for keyboard users. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
outline: 2px solid color-mix(in srgb, var(--bs-primary) 55%, transparent);
outline-offset: 2px;
}
/* ─────────────────────────────────────────────────────────────────────────────
Navigation
───────────────────────────────────────────────────────────────────────── */
.navbar {
--bs-navbar-padding-y: .25rem;
}
.navbar .dropdown-menu {
border-color: var(--bs-border-color-translucent);
box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
[data-bs-theme="dark"] .navbar .dropdown-menu {
box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
.navbar-nav .nav-link {
border-radius: .375rem;
transition: background-color .12s ease, color .12s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
background-color: var(--bs-tertiary-bg);
color: var(--bs-emphasis-color);
}
/* ─────────────────────────────────────────────────────────────────────────────
Breadcrumb
───────────────────────────────────────────────────────────────────────── */
.breadcrumb {
--bs-breadcrumb-divider-color: var(--bs-secondary-color);
--bs-breadcrumb-item-active-color: var(--bs-emphasis-color);
margin-bottom: 0;
font-size: .9rem;
}
/* ─────────────────────────────────────────────────────────────────────────────
Badges — soft variants, no text-on-yellow illegibility
───────────────────────────────────────────────────────────────────────── */
.badge {
font-weight: 500;
letter-spacing: .02em;
}
.badge.bg-warning {
color: #000;
}
/* ─────────────────────────────────────────────────────────────────────────────
Dropdown submenu
Bootstrap 5 dropped nested dropdowns — we re-add the behavior.
Menu HTML is generated by UserAccountMenuController.
───────────────────────────────────────────────────────────────────────── */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
margin-left: 0;
/* Hidden until opened (by hover on desktop, click elsewhere) */
display: none;
}
/* Toggle arrow — render a right-pointing chevron after the submenu's anchor */
.dropdown-submenu > .dropdown-item.dropdown-toggle::after {
border: 0;
content: "\f231"; /* bi-caret-right-fill from Bootstrap Icons */
font-family: "bootstrap-icons";
float: right;
margin-left: .4rem;
vertical-align: 0;
}
/* Hover-open on non-touch devices */
@media (hover: hover) and (pointer: fine) {
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
}
/* Keep the parent item highlighted while its submenu is open */
.dropdown-submenu:hover > .dropdown-item,
.dropdown-submenu.show > .dropdown-item {
background-color: var(--bs-dropdown-link-hover-bg);
color: var(--bs-dropdown-link-hover-color);
}
/* When submenu is explicitly toggled (touch / keyboard), show its menu */
.dropdown-submenu.show > .dropdown-menu {
display: block;
}
/* Flip the submenu to the left edge when near the right viewport boundary */
.dropdown-submenu.dropdown-submenu-left > .dropdown-menu {
left: auto;
right: 100%;
}
/* ─────────────────────────────────────────────────────────────────────────────
Header — light theme renders the logo flush against the top of the white
content container (high-contrast bg-body / bg-body-tertiary boundary).
Dark theme visually blurs that boundary (both tokens are close in value)
so it looks airier without any extra padding. Equalize by adding top
padding only in the light variant.
───────────────────────────────────────────────────────────────────────── */
html[data-bs-theme="light"] #Header {
padding-top: 1rem;
}
/* ─────────────────────────────────────────────────────────────────────────────
Logo — both ![]()
s render, CSS shows the one matching data-bs-theme.
No JS in the critical path; the swap happens the instant the attribute
flips, with no flash of wrong-theme logo.
───────────────────────────────────────────────────────────────────────── */
.wsp-logo {
display: inline-flex;
align-items: center;
line-height: 0;
}
.wsp-logo img {
/* Let the image render at its natural dimensions (matching the previous
behavior). `max-width: 100%` keeps absurdly-wide uploads from
overflowing their grid column. */
max-width: 100%;
height: auto;
}
/* Hide the logo that doesn't match the current theme. Using `display: none`
rather than `visibility: hidden` keeps the layout from reserving space for
the hidden image. */
.wsp-logo-dark { display: none; }
html[data-bs-theme="dark"] .wsp-logo-light { display: none; }
html[data-bs-theme="dark"] .wsp-logo-dark { display: inline; }
/* ─────────────────────────────────────────────────────────────────────────────
Theme switcher (footer — segmented control)
A pill-shaped segmented control with a smoothly animated "thumb" behind the
active option. Keyboard: Left/Right cycle options; Home/End jump. Markup
comes from SiteFooter.cshtml; the role=radiogroup + aria-checked wiring is
done by ThemeSwitcher.js.
───────────────────────────────────────────────────────────────────────── */
.theme-switcher {
--thumb-bg: var(--bs-body-bg);
--thumb-shadow: 0 1px 3px rgba(0, 0, 0, .12);
display: inline-flex;
padding: 2px;
background: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color-translucent);
border-radius: 999px;
gap: 0;
}
[data-bs-theme="dark"] .theme-switcher {
--thumb-bg: var(--bs-secondary-bg);
--thumb-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.theme-switcher__btn {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
color: var(--bs-secondary-color);
width: 2rem;
height: 1.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
cursor: pointer;
transition:
background-color .2s ease,
color .2s ease,
transform .15s ease,
box-shadow .2s ease;
position: relative;
padding: 0;
}
.theme-switcher__btn .bi {
font-size: .95rem;
transition: transform .35s cubic-bezier(.2, .9, .3, 1.4);
}
.theme-switcher__btn:hover {
color: var(--bs-body-color);
}
.theme-switcher__btn:hover .bi {
transform: rotate(-18deg) scale(1.05);
}
.theme-switcher__btn.active {
background: var(--thumb-bg);
color: var(--bs-primary);
box-shadow: var(--thumb-shadow);
}
.theme-switcher__btn.active .bi {
transform: scale(1.08);
}
.theme-switcher__btn:focus-visible {
outline: 2px solid color-mix(in srgb, var(--bs-primary) 55%, transparent);
outline-offset: 2px;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.theme-switcher__btn,
.theme-switcher__btn .bi { transition: none; }
}
/* ─────────────────────────────────────────────────────────────────────────────
Chart.js wrappers
Chart.js measures its *parent* element on init and sizes the canvas from
that. Lock the parent's height here; the script runs with
maintainAspectRatio:false and animation:false so the canvas fills the
wrapper instantly at final state — no post-load resize, no arc-sweep.
───────────────────────────────────────────────────────────────────────── */
.chart-wrap {
position: relative;
height: 240px;
width: 100%;
}
/* ─────────────────────────────────────────────────────────────────────────────
Utilities
───────────────────────────────────────────────────────────────────────── */
.text-mono {
font-family: var(--bs-font-monospace);
}
.cursor-pointer {
cursor: pointer;
}
/* Animated ellipsis placeholder — used via JS in Default.js */
.dotsAnimation {
display: inline-block;
min-width: 1.2em;
}
/* ─────────────────────────────────────────────────────────────────────────────
Navigation menu — mega-dropdown & icon spacing
───────────────────────────────────────────────────────────────────────── */
/* Mega-dropdown */
.dropdown-menu.mega-menu { min-width: 580px; }
@media (min-width: 992px) { .dropdown-menu.mega-menu { min-width: 780px; } }
.mega-menu .menu-group-title {
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bs-secondary);
padding: 0.25rem 0.75rem;
margin-bottom: 0.15rem;
}
.mega-menu .dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
padding: 0.3rem 0.75rem;
border-radius: 0.25rem;
white-space: nowrap;
}
.mega-menu .dropdown-item:hover { background: var(--bs-tertiary-bg); }
.mega-menu .badge { font-size: 0.6rem; }
/* Badges at the end of a dropdown-item: push to the right edge, stay on
the same row regardless of count-digit length. Before this, Bootstrap's
.float-end on a 3-digit badge (e.g. "496" for Scheduled Tasks) would
wrap the badge onto a second visual line when the computed item width
couldn't accommodate both text and floated badge. Flex layout above +
margin-left:auto here ignores float entirely and keeps the row intact. */
.mega-menu .dropdown-item .badge {
margin-left: auto;
float: none !important;
}
/* Nav icon spacing */
.navbar-nav .nav-link i.bi { margin-right: 0.3rem; }
.dropdown-menu .dropdown-item i.bi { margin-right: 0.4rem; opacity: 0.7; }
/* Active section indicator */
.nav-link.active-section {
color: var(--bs-primary) !important;
border-bottom: 2px solid var(--bs-primary);
}
/* ─────────────────────────────────────────────────────────────────────────────
Auth pages (Login, Password, MFA, Forgot password)
Rendered inside which is a flex column that occupies
the full remaining viewport height; the card is centered by the parent.
───────────────────────────────────────────────────────────────────────── */
#AuthMain {
/* A subtle brand-tinted radial so auth pages feel distinct from the
signed-in shell, while still respecting the active Bootstrap theme. */
background:
radial-gradient(ellipse at 50% 0%, rgba(var(--bs-primary-rgb), 0.12), transparent 60%),
radial-gradient(ellipse at 50% 100%, rgba(var(--bs-primary-rgb), 0.08), transparent 55%);
}
.auth-card {
width: 100%;
max-width: 420px;
border-radius: 1rem;
border: 1px solid var(--bs-border-color-translucent);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
[data-bs-theme="dark"] .auth-card {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.auth-card .auth-icon {
font-size: 2.5rem;
line-height: 1;
color: var(--bs-primary);
}
.auth-brand {
color: var(--bs-secondary-color);
letter-spacing: 0.02em;
}
.auth-code-input {
font-size: 1.5rem;
letter-spacing: 0.5em;
text-align: center;
padding-left: 0.5em;
font-variant-numeric: tabular-nums;
}
.auth-password-wrap .auth-password-toggle {
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
z-index: 5;
border: 0;
background: transparent;
color: var(--bs-secondary-color);
padding: 0.25rem 0.5rem;
cursor: pointer;
}
.auth-password-wrap .auth-password-toggle:hover,
.auth-password-wrap .auth-password-toggle:focus {
color: var(--bs-body-color);
}
/* Ensure Bootstrap's floating label doesn't overlap the eye button. */
.auth-password-wrap .form-control { padding-right: 3rem; }
.auth-caps-hint {
display: none;
color: var(--bs-warning-text-emphasis);
}
.auth-caps-hint.is-visible { display: inline-flex; }
/* ─────────────────────────────────────────────────────────────────────────────
Modals — vertically centered by default
Bootstrap 5's default places the modal near the top; only dialogs with
`modal-dialog-centered` are vertically centered. The portal has ~60
modal declarations across 28 views, so we globally apply the centering
here instead of hand-editing each one. Matches the behaviour of
`.modal-dialog-centered` verbatim (see bootstrap/scss/_modal.scss) so
any dialog already carrying that class stays a no-op.
───────────────────────────────────────────────────────────────────────── */
.modal-dialog {
display: flex;
align-items: center;
min-height: calc(100% - 1rem * 2);
}
@media (min-width: 576px) {
.modal-dialog {
min-height: calc(100% - 1.75rem * 2);
}
}